Sound effects! and streamlined UI.
13
Gulpfile.js
|
@ -38,8 +38,16 @@ function img (target) {
|
|||
};
|
||||
}
|
||||
|
||||
function audio (target) {
|
||||
return function () {
|
||||
return gulp.src(['audio/*.mp3'])
|
||||
.pipe(gulp.dest(target));
|
||||
};
|
||||
}
|
||||
|
||||
gulp.task('html', html('./build'));
|
||||
gulp.task('img', img('./build/img'));
|
||||
gulp.task('audio', audio('./build/audio'));
|
||||
|
||||
/* Less */
|
||||
|
||||
|
@ -83,7 +91,7 @@ function bundle () {
|
|||
|
||||
/* Make a development build */
|
||||
|
||||
gulp.task('build', ['html', 'img', 'less', 'coffee'], function () {
|
||||
gulp.task('build', ['html', 'img', 'less', 'coffee', 'audio'], function () {
|
||||
|
||||
});
|
||||
|
||||
|
@ -124,6 +132,7 @@ gulp.task('undum-dist', function () {
|
|||
|
||||
gulp.task('html-dist', html('./dist'));
|
||||
gulp.task('img-dist', img('./dist/img'));
|
||||
gulp.task('audio-dist', img('./dist/audio'));
|
||||
|
||||
gulp.task('less-dist', function () {
|
||||
return gulp.src('./less/main.less')
|
||||
|
@ -149,7 +158,7 @@ gulp.task('coffee-dist', ['undum-dist'], function () {
|
|||
.pipe(gulp.dest('./dist/game'));
|
||||
});
|
||||
|
||||
gulp.task('dist', ['html-dist', 'img-dist', 'less-dist', 'coffee-dist'],
|
||||
gulp.task('dist', ['html-dist', 'img-dist', 'less-dist', 'coffee-dist', 'audio-dist'],
|
||||
function () {
|
||||
return;
|
||||
});
|
||||
|
|
BIN
audio/casing.mp3
Normal file
BIN
audio/fire.mp3
Normal file
BIN
audio/reload.mp3
Normal file
|
@ -62,6 +62,12 @@ module.exports.language =
|
|||
My job is done.
|
||||
|
||||
<center><h3>THE END</h3></center>
|
||||
|
||||
The game used the following sound effects:
|
||||
|
||||
* SpartanX109 - [Desert Eagle Fire.mp3](http://freesound.org/people/SpartanX109/sounds/89147/)
|
||||
* ngphil22 - [DEagle wCasing.mp3](http://freesound.org/people/ngphil22/sounds/233322/)
|
||||
* watupgroupie - [gunshots.mp3](http://freesound.org/people/watupgroupie/sounds/36815/)
|
||||
"""
|
||||
clips_not_found:[
|
||||
"No, nothing here.",
|
||||
|
|
|
@ -4,11 +4,9 @@
|
|||
|
||||
situation = require('raconteur')
|
||||
undum = require('undum-commonjs')
|
||||
$ = require('jquery')
|
||||
oneOf = require('raconteur/lib/oneOf.js')
|
||||
elements = require('raconteur/lib/elements.js')
|
||||
qualities = require('raconteur/lib/qualities.js')
|
||||
colour = require("color")
|
||||
md = require('markdown-it')
|
||||
markdown = new md({
|
||||
typographer: true,
|
||||
|
@ -18,6 +16,7 @@ undumloc = require("./ru.coffee").language
|
|||
undum.language["ru"] = undumloc
|
||||
undumloc = require("./en.coffee").language
|
||||
undum.language["en"] = undumloc
|
||||
$ = require("jquery")
|
||||
|
||||
a = elements.a
|
||||
span = elements.span
|
||||
|
@ -33,8 +32,8 @@ writemd = (system, text) ->
|
|||
if typeof text is Function
|
||||
text = text()
|
||||
system.write(markdown.render(text))
|
||||
|
||||
link_colour = "#B68000"
|
||||
Array.prototype.oneOf = () ->
|
||||
oneOf.apply(null, this)
|
||||
|
||||
# This is an easy game.
|
||||
# I'm thinking if you want more harder approach, you can:
|
||||
|
@ -44,14 +43,26 @@ link_colour = "#B68000"
|
|||
spend_bullet = (character, system) ->
|
||||
bullets = character.sandbox.clips[character.sandbox.current_clip]
|
||||
if bullets >= 1
|
||||
coin = system.rnd.randomInt(1,2)
|
||||
audio = 'shot1'
|
||||
if coin == 2
|
||||
audio = 'shot2'
|
||||
audio = document.getElementById(audio)
|
||||
audio.currentTime=0
|
||||
audio.play()
|
||||
character.sandbox.clips[character.sandbox.current_clip]--
|
||||
system.setQuality("bullets", bullets - 1)
|
||||
bullets--
|
||||
system.setQuality("bullets", bullets)
|
||||
$("#clip img").attr("src", "img/clip"+bullets+".png")
|
||||
|
||||
spend_clip = (character, system) ->
|
||||
bullets = character.sandbox.clips[character.sandbox.current_clip]
|
||||
clips = character.sandbox.clips.length
|
||||
if clips < 2
|
||||
return
|
||||
audio = document.getElementById("reload")
|
||||
audio.currentTime=0
|
||||
audio.play()
|
||||
if bullets == 0
|
||||
character.sandbox.clips.splice(character.sandbox.current_clip, 1)
|
||||
clips = character.sandbox.clips.length
|
||||
|
@ -61,7 +72,9 @@ spend_clip = (character, system) ->
|
|||
character.sandbox.current_clip++
|
||||
else
|
||||
character.sandbox.current_clip = 0
|
||||
system.setQuality("bullets", character.sandbox.clips[character.sandbox.current_clip])
|
||||
bullets = character.sandbox.clips[character.sandbox.current_clip]
|
||||
system.setQuality("bullets", bullets)
|
||||
$("#clip img").attr("src", "img/clip"+bullets+".png")
|
||||
|
||||
check_distance = (character, system) ->
|
||||
if character.sandbox.distance == 0
|
||||
|
@ -74,7 +87,7 @@ situation 'start',
|
|||
|
||||
situation "hit",
|
||||
content: (character, system, from) ->
|
||||
response = oneOf("player_hit".l()).randomly(system)
|
||||
response = "player_hit".l().oneOf().randomly(system)
|
||||
return response()
|
||||
choices: ["#shoot"]
|
||||
before: (character, system, from) ->
|
||||
|
@ -90,24 +103,24 @@ situation "nicked",
|
|||
if character.sandbox.nicked == 1
|
||||
system.setQuality("enemies", character.qualities.enemies - 1)
|
||||
character.sandbox.nicked = 0
|
||||
response = oneOf("player_finished".l()).randomly(system)
|
||||
response = "player_finished".l().oneOf().randomly(system)
|
||||
return response()
|
||||
else
|
||||
character.sandbox.nicked = 1
|
||||
response = oneOf("player_nicked".l()).randomly(system)
|
||||
response = "player_nicked".l().oneOf().randomly(system)
|
||||
return response()
|
||||
choices: ["#shoot"]
|
||||
|
||||
situation "miss",
|
||||
content: (character, system, from) ->
|
||||
response = oneOf("player_missed".l()).randomly(system)
|
||||
response = "player_missed".l().oneOf().randomly(system)
|
||||
return response()
|
||||
choices: ["#shoot"]
|
||||
|
||||
situation "shoot",
|
||||
tags: ["shoot"],
|
||||
optionText: (character, system, from) ->
|
||||
return oneOf("shoot".l()).randomly(system)
|
||||
return "shoot".l().oneOf().randomly(system)
|
||||
canChoose: (character, system) ->
|
||||
return character.qualities.bullets > 0
|
||||
before: (character, system, from) ->
|
||||
|
@ -154,7 +167,7 @@ situation "search",
|
|||
character.sandbox.seen_search = 1
|
||||
character.sandbox.distance--
|
||||
after: (character, system) ->
|
||||
response = oneOf("search_response".l()).randomly(system)
|
||||
response = "search_response".l().oneOf().randomly(system)
|
||||
writemd(system, response())
|
||||
roll = system.rnd.dice(1,20) # d20 roll
|
||||
find_threshold = 10
|
||||
|
@ -174,13 +187,13 @@ situation "found",
|
|||
character.sandbox.clips[character.sandbox.clips.length] = bullets
|
||||
system.setQuality("clips", character.sandbox.clips.length)
|
||||
content: (character, system, from) ->
|
||||
response = oneOf("clips_found".l()).randomly(system)
|
||||
response = "clips_found".l().oneOf().randomly(system)
|
||||
return response()
|
||||
|
||||
situation "not_found",
|
||||
choices: ["#shoot"],
|
||||
content: (character, system, from) ->
|
||||
response = oneOf("clips_not_found".l()).randomly(system)
|
||||
response = "clips_not_found".l().oneOf().randomly(system)
|
||||
return response()
|
||||
|
||||
situation "finale",
|
||||
|
@ -204,5 +217,8 @@ undum.game.init = (character, system) ->
|
|||
character.sandbox.distance = 3
|
||||
character.sandbox.seen_reload = 0
|
||||
character.sandbox.seen_search = 0
|
||||
$("#title").click(() ->
|
||||
$("#clip").fadeIn()
|
||||
)
|
||||
|
||||
window.onload = undum.begin
|
||||
|
|
|
@ -81,6 +81,12 @@ module.exports.language =
|
|||
Моя работа сделана.
|
||||
|
||||
<center><h3>КОНЕЦ</h3></center>
|
||||
|
||||
Использованные звуковые эффекты:
|
||||
|
||||
* SpartanX109 - [Desert Eagle Fire.mp3](http://freesound.org/people/SpartanX109/sounds/89147/)
|
||||
* ngphil22 - [DEagle wCasing.mp3](http://freesound.org/people/ngphil22/sounds/233322/)
|
||||
* watupgroupie - [gunshots.mp3](http://freesound.org/people/watupgroupie/sounds/36815/)
|
||||
"""
|
||||
clips_not_found:[
|
||||
"Нет, ничего нет.",
|
||||
|
|
34
html/en.html
|
@ -9,44 +9,24 @@
|
|||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="toolbar">
|
||||
<h1>Thirty five shots</h1>
|
||||
<div class="nav">
|
||||
<a href="#" class="button" id="menu-button">Menu</a>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="menu">
|
||||
<li><a href="#title, #content_wrapper">Story</a></li>
|
||||
<li><a href="#character_panel">Character</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="page">
|
||||
|
||||
<div id="tools_wrapper">
|
||||
<div id="character_panel" class="tools right">
|
||||
<div id="character">
|
||||
<div id="character_text">
|
||||
<div id="character_text_content"></div>
|
||||
</div>
|
||||
<div id="qualities"></div>
|
||||
</div>
|
||||
<div class='buttons'>
|
||||
<button id="save">Save</button><button id="erase">Erase</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- End of div.tools_wrapper -->
|
||||
|
||||
<div id="mid_panel">
|
||||
<div id="title">
|
||||
<div class="label">
|
||||
|
||||
<h1>Thirty five shots</h1>
|
||||
<h3>An online sci-fi first person text shooter</h3>
|
||||
<p>by <b><a href="http://en.oreolek.ru/">Oreolek</a></b></p>
|
||||
<noscript>
|
||||
<p class="noscript_message">This game requires Javascript.</p>
|
||||
</noscript>
|
||||
<p class="click_message">click to play</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="clip">
|
||||
<p><img src="img/clip6.png"></p>
|
||||
</div>
|
||||
|
||||
<div id="content_wrapper">
|
||||
<div id="content">
|
||||
|
@ -58,6 +38,7 @@
|
|||
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" class="footright"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a>
|
||||
<p>Approximate play time: five minites.</p>
|
||||
<p>Made using <a href="http://undum.com">Undum</a> and <a href="http://sequitur.github.io/raconteur/">Raconteur</a>.</p>
|
||||
<p>Betatesting credit: headless zombie</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- End of div.page -->
|
||||
|
@ -89,6 +70,9 @@
|
|||
</div>
|
||||
|
||||
<div id="content_library"></div>
|
||||
<audio id="shot1" preload="auto"><source src="audio/fire.mp3" type='audio/mpeg; codecs="mp3"'></audio>
|
||||
<audio id="shot2" preload="auto"><source src="audio/casing.mp3" type='audio/mpeg; codecs="mp3"'></audio>
|
||||
<audio id="reload" preload="auto"><source src="audio/reload.mp3" type='audio/mpeg; codecs="mp3"'></audio>
|
||||
<script type="text/javascript" src="game/undum.js"></script>
|
||||
<script type="text/javascript" src="game/bundle.js"></script>
|
||||
</body>
|
||||
|
|
|
@ -9,44 +9,24 @@
|
|||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="toolbar">
|
||||
<h1>Тридцать пять выстрелов</h1>
|
||||
<div class="nav">
|
||||
<a href="#" class="button" id="menu-button">Меню</a>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="menu">
|
||||
<li><a href="#title, #content_wrapper">Рассказ</a></li>
|
||||
<li><a href="#character_panel">Персонаж</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="page">
|
||||
|
||||
<div id="tools_wrapper">
|
||||
<div id="character_panel" class="tools right">
|
||||
<div id="character">
|
||||
<div id="character_text">
|
||||
<div id="character_text_content"></div>
|
||||
</div>
|
||||
<div id="qualities"></div>
|
||||
</div>
|
||||
<div class='buttons'>
|
||||
<button id="save">Сохранить</button><button id="erase">Стереть</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- End of div.tools_wrapper -->
|
||||
|
||||
<div id="mid_panel">
|
||||
<div id="title">
|
||||
<div class="label">
|
||||
|
||||
<h1>Тридцать пять выстрелов</h1>
|
||||
<h3>An online sci-fi first person text shooter</h3>
|
||||
<p>by <b><a href="https://oreolek.ru/">Oreolek</a></b></p>
|
||||
<noscript>
|
||||
<p class="noscript_message">Эта игра требует Javascript.</p>
|
||||
</noscript>
|
||||
<p class="click_message">нажмите, чтобы начать</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="clip">
|
||||
<p><img src="img/clip6.png"></p>
|
||||
</div>
|
||||
|
||||
<div id="content_wrapper">
|
||||
<div id="content">
|
||||
|
@ -58,6 +38,7 @@
|
|||
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" class="footright"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a>
|
||||
<p>Приблизительное время прохождения игры: пять минут.</p>
|
||||
<p>Написано при помощи <a href="http://undum.com">Undum</a> и <a href="http://sequitur.github.io/raconteur/">Raconteur</a>.</p>
|
||||
<p>Бета-тестеры: headless zombie</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- End of div.page -->
|
||||
|
@ -89,6 +70,9 @@
|
|||
</div>
|
||||
|
||||
<div id="content_library"></div>
|
||||
<audio id="shot1" preload="auto"><source src="audio/fire.mp3" type='audio/mpeg; codecs="mp3"'></audio>
|
||||
<audio id="shot2" preload="auto"><source src="audio/casing.mp3" type='audio/mpeg; codecs="mp3"'></audio>
|
||||
<audio id="reload" preload="auto"><source src="audio/reload.mp3" type='audio/mpeg; codecs="mp3"'></audio>
|
||||
<script type="text/javascript" src="game/undum.js"></script>
|
||||
<script type="text/javascript" src="game/bundle.js"></script>
|
||||
</body>
|
||||
|
|
BIN
img/clip0.png
Normal file
After Width: | Height: | Size: 7.7 KiB |
BIN
img/clip1.png
Normal file
After Width: | Height: | Size: 8.4 KiB |
BIN
img/clip2.png
Normal file
After Width: | Height: | Size: 8.8 KiB |
BIN
img/clip3.png
Normal file
After Width: | Height: | Size: 9.2 KiB |
BIN
img/clip4.png
Normal file
After Width: | Height: | Size: 9.4 KiB |
BIN
img/clip5.png
Normal file
After Width: | Height: | Size: 9.7 KiB |
BIN
img/clip6.png
Normal file
After Width: | Height: | Size: 10 KiB |
186
less/layout.less
|
@ -15,16 +15,6 @@
|
|||
.column(10);
|
||||
.push(1);
|
||||
}
|
||||
#tools_wrapper {
|
||||
.column(3);
|
||||
background: @text_background;
|
||||
position: sticky;
|
||||
top: 2em;
|
||||
}
|
||||
.tools {
|
||||
margin: 1.1em auto;
|
||||
padding: 0 1em;
|
||||
}
|
||||
#content_wrapper {
|
||||
margin: 1.1em auto;
|
||||
padding: 2.8em;
|
||||
|
@ -237,47 +227,6 @@ img.left {
|
|||
margin: 1.1em 1.1em 1.1em 0;
|
||||
}
|
||||
|
||||
#toolbar, #tools_wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tools {
|
||||
p {
|
||||
font-size: 0.95em;
|
||||
line-height: 1.5em;
|
||||
margin-top: 6px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.0em;
|
||||
font-weight: normal;
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
padding-top: 0.6em;
|
||||
text-align: center;
|
||||
button {
|
||||
font-size: 0.8em;
|
||||
background: #876;
|
||||
color: #e6e6c6;
|
||||
border: none;
|
||||
padding: 0.3em 1.0em;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
button:hover {
|
||||
background: #987;
|
||||
}
|
||||
button + button {
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
button[disabled], button[disabled]:hover {
|
||||
background: #ba9;
|
||||
color: #dcb;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
#legal {
|
||||
max-width: 33em;
|
||||
color: #654;
|
||||
|
@ -294,49 +243,6 @@ img.left {
|
|||
}
|
||||
}
|
||||
|
||||
#character {
|
||||
font-size: 1.0em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
#qualities .quality, #character_text {
|
||||
position: relative;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
margin: 0 -0.25em;
|
||||
padding: 0 0.25em;
|
||||
}
|
||||
#character_text {
|
||||
margin-bottom: 0.6em;
|
||||
#character_text_content {
|
||||
position: relative;
|
||||
font-size: smaller;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
#qualities{
|
||||
span {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
span.name {
|
||||
float: left;
|
||||
}
|
||||
span.value {
|
||||
float: right;
|
||||
}
|
||||
h2 {
|
||||
margin: 0.5em 0 0.25em 0;
|
||||
font-size: 1.0em;
|
||||
}
|
||||
}
|
||||
.highlight {
|
||||
background: rgba(255, 255, 0, 0.75);
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
#content_library,
|
||||
#ui_library,
|
||||
#menu {
|
||||
|
@ -361,24 +267,6 @@ img.left {
|
|||
}
|
||||
}
|
||||
|
||||
/* Side panels */
|
||||
#tools_wrapper {
|
||||
position: static;
|
||||
}
|
||||
.tools {
|
||||
background-image: url("../img/text_bg.jpg");
|
||||
position: relative;
|
||||
width: auto;
|
||||
}
|
||||
#character_panel,
|
||||
#info_panel,
|
||||
#menu {
|
||||
display: none;
|
||||
}
|
||||
#tools_wrapper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
#content_wrapper {
|
||||
width: auto;
|
||||
|
@ -388,72 +276,6 @@ img.left {
|
|||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
/* Toolbar and menu */
|
||||
#toolbar {
|
||||
position: fixed;
|
||||
z-index: 300;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: transparent url("../img/toolbar_bg.jpg") repeat-x top left;
|
||||
height: 36px;
|
||||
padding: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 16px rgba(0,0,0,0.75);
|
||||
h1 {
|
||||
float: left;
|
||||
font-weight: normal;
|
||||
font-size: 22px;
|
||||
margin: 8px 0 0 0;
|
||||
padding: 0 10px;
|
||||
color: #fc6;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
|
||||
}
|
||||
.nav {
|
||||
float: right;
|
||||
margin: 0;
|
||||
a {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
color: white;
|
||||
padding: 4px 16px;
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
|
||||
-webkit-border-radius: 6px;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom,
|
||||
from(#C00), color-stop(0.45, #a00),
|
||||
color-stop(0.55, #900), to(#900));
|
||||
border: 2px solid #600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#menu {
|
||||
position: fixed;
|
||||
top: 52px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 16px;
|
||||
background-image: url("../img/tools_bg.jpg");
|
||||
z-index: 200;
|
||||
list-style-type: none;
|
||||
padding: 10px 0 0 0;
|
||||
margin: 0;
|
||||
opacity: 0.95;
|
||||
box-shadow: 0 0 16px rgba(0,0,0,0.75);
|
||||
li {
|
||||
border-bottom: 1px solid rgba(0,0,0,0.25);
|
||||
}
|
||||
li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.center-block {
|
||||
margin: 0 auto;
|
||||
|
@ -461,3 +283,11 @@ img.left {
|
|||
.footright {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#clip {
|
||||
text-align: center;
|
||||
display: none;
|
||||
img {
|
||||
max-height: 50px;
|
||||
}
|
||||
}
|
||||
|
|