Finish up.

This commit is contained in:
Aaron Mueller 2014-09-12 21:38:34 +02:00
parent 7c6618800c
commit 83131b7acc
13 changed files with 161 additions and 38 deletions

View file

@ -7,6 +7,8 @@ var field = [];
var background = []; var background = [];
var game_running = true; var game_running = true;
var subframe = 0;
var moved_steps = 0;
var speed = 100; var speed = 100;
var points = 0; var points = 0;
var level = 0; var level = 0;
@ -143,6 +145,12 @@ function draw() {
// Level // Level
draw_text(level, 30, 420, 230); draw_text(level, 30, 420, 230);
draw_text('Level', 13, 420, 250); draw_text('Level', 13, 420, 250);
// Game over?
if (!game_running) {
draw_text("Game over", 60, 40, 250);
draw_text("Press R for a new game", 20, 140, 270);
}
} }
function noice(offset, level) { function noice(offset, level) {
@ -267,9 +275,10 @@ addEventListener('keydown', function(event) {
if (game_running) loop(); if (game_running) loop();
} }
// TODO: Back to the main menu // Restart the game
if (event.keyCode == 27 || event.keyCode == 121) if (event.keyCode == 82 && !game_running) {
console.log('Implement me.'); init();
}
}); });
function init() { function init() {
@ -277,7 +286,48 @@ function init() {
points = 0; points = 0;
level = 0; level = 0;
stones = 0; stones = 0;
game_running = true;
subframe = 0;
moved_steps = 0;
for (var x=0; x<10; x++)
for (var y=0; y<16; y++)
field[x][y] = 0;
// Start the game
next_shape();
loop();
}
function loop() {
// Move the next step
subframe++;
if (subframe-speed > 0.0) {
subframe = 0;
speed = 100-(level*15);
// Check if we get blocked by the already dropped shapes
+function() {
if (will_collide(angle, pos)) {
freeze();
clear_full_lines();
next_shape();
// Game over?
if (moved_steps === 0 || will_collide(0, {left: 4, top: 0}))
game_running = false;
moved_steps = 0;
return true;
}
return false;
}() || (pos.top++ && moved_steps++);
draw();
}
if (game_running) setTimeout(loop, 5);
}
function setup() {
// Load the assets // Load the assets
assets.rotate.load(); assets.rotate.load();
assets.drop.load(); assets.drop.load();
@ -302,41 +352,7 @@ function init() {
field[x][y] = 0; field[x][y] = 0;
} }
} }
// Start the game
next_shape();
} }
var subframe = 0; setup();
var moved_steps = 0;
function loop() {
// Move the next step
subframe++;
if (subframe-speed > 0.0) {
subframe = 0;
speed = 100-(level*15);
// Check if we get blocked by the already dropped shapes
+function() {
if (will_collide(angle, pos)) {
freeze();
clear_full_lines();
next_shape();
// Restart the game?
if (moved_steps === 0 || will_collide(0, {left: 4, top: 0}))
init(); init();
moved_steps = 0;
return true;
}
return false;
}() || (pos.top++ && moved_steps++);
draw();
}
if (game_running) setTimeout(loop, 5);
}
init();
loop();

View file

@ -7,7 +7,17 @@
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
</head> </head>
<body> <body>
<h1>fuTris</h1>
<p>A <a href="http://js13kgames.com/">js13kGames 2014</a> entry (<a href="http://github.com/f0086/js13kgames-2014">source</a>)
by <a href="https://aaron-mueller.de/">Aaron Fischer</a>.</p>
<canvas id="fuTris"></canvas> <canvas id="fuTris"></canvas>
<p>Use the arrow keys to move (<span></span>, <span></span>, rotate
(<span></span>) and drop (<span></span>) stones. Press <span>P</span> for
pause the game. If you messed up, restart with <span>R</span>. Vim-users
will also find a way to play :)</p>
<audio src="assets/rotate.wav" id="rotate-sound" autostart="false"></audio> <audio src="assets/rotate.wav" id="rotate-sound" autostart="false"></audio>
<audio src="assets/drop.wav" id="drop-sound" autostart="false"></audio> <audio src="assets/drop.wav" id="drop-sound" autostart="false"></audio>
<audio src="assets/move.wav" id="move-sound" autostart="false"></audio> <audio src="assets/move.wav" id="move-sound" autostart="false"></audio>

36
main.css Normal file
View file

@ -0,0 +1,36 @@
html {
background-color: #333;
color: #bbb;
font-family: Verdana, "DejaVu Sans";
}
body {
margin: auto;
width: 514px;
}
canvas {
border: 2px solid #444;
}
h1 {
color: white;
text-align: center;
font-size: 70px;
margin: 0;
}
a {
color: #4f6c19;
}
a:hover {
color: #8fc32e;
}
span {
background-color: #444;
border-radius: 3px;
padding: 2px 5px;
font-weight: bold;
color: white;
}

BIN
screenshot_big.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
screenshot_small.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

BIN
submission/assets/drop.wav Normal file

Binary file not shown.

BIN
submission/assets/move.wav Normal file

Binary file not shown.

BIN
submission/assets/point.wav Normal file

Binary file not shown.

Binary file not shown.

1
submission/fuTris.js Normal file

File diff suppressed because one or more lines are too long

24
submission/index.html Normal file
View file

@ -0,0 +1,24 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<title>fuTris -- a js13kGames entry</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>fuTris</h1>
<p>A <a href="http://js13kgames.com/">js13kGames 2014</a> entry (<a href="http://github.com/f0086/js13kgames-2014">source</a>)
by <a href="https://aaron-mueller.de/">Aaron Fischer</a>.</p>
<canvas id="fuTris"></canvas>
<p>Use the arrow keys to move (<span></span>, <span></span>, rotate
(<span></span>) and drop (<span></span>) stones. Press <span>P</span> for
pause the game. If you messed up, restart with <span>R</span>. Vim-users
will also find a way to play :)</p>
<audio src="assets/rotate.wav" id="rotate-sound" autostart="false"></audio>
<audio src="assets/drop.wav" id="drop-sound" autostart="false"></audio>
<audio src="assets/move.wav" id="move-sound" autostart="false"></audio>
<audio src="assets/point.wav" id="point-sound" autostart="false"></audio>
<script src="fuTris.js"></script>
</body>
</html>

Binary file not shown.

36
submission/main.css Normal file
View file

@ -0,0 +1,36 @@
html {
background-color: #333;
color: #bbb;
font-family: Verdana, "DejaVu Sans";
}
body {
margin: auto;
width: 514px;
}
canvas {
border: 2px solid #444;
}
h1 {
color: white;
text-align: center;
font-size: 70px;
margin: 0;
}
a {
color: #4f6c19;
}
a:hover {
color: #8fc32e;
}
span {
background-color: #444;
border-radius: 3px;
padding: 2px 5px;
font-weight: bold;
color: white;
}