1
0
Fork 0
mirror of https://github.com/Oreolek/shooter.git synced 2024-04-26 05:59:19 +03:00

Sound effects! and streamlined UI.

This commit is contained in:
Alexander Yakovlev 2015-12-02 14:20:18 +07:00
parent 931e7e0a74
commit d82de410ed
17 changed files with 79 additions and 244 deletions

View file

@ -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

Binary file not shown.

BIN
audio/fire.mp3 Normal file

Binary file not shown.

BIN
audio/reload.mp3 Normal file

Binary file not shown.

View 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.",

View file

@ -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

View file

@ -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:[
"Нет, ничего нет.",

View file

@ -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>

View file

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
img/clip1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
img/clip2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
img/clip3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
img/clip4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
img/clip5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
img/clip6.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View file

@ -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;
}
}