diff --git a/fuTris.js b/fuTris.js index 71a47f9..f1a8f69 100644 --- a/fuTris.js +++ b/fuTris.js @@ -7,6 +7,8 @@ var field = []; var background = []; var game_running = true; +var subframe = 0; +var moved_steps = 0; var speed = 100; var points = 0; var level = 0; @@ -143,6 +145,12 @@ function draw() { // Level draw_text(level, 30, 420, 230); 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) { @@ -267,9 +275,10 @@ addEventListener('keydown', function(event) { if (game_running) loop(); } - // TODO: Back to the main menu - if (event.keyCode == 27 || event.keyCode == 121) - console.log('Implement me.'); + // Restart the game + if (event.keyCode == 82 && !game_running) { + init(); + } }); function init() { @@ -277,7 +286,48 @@ function init() { points = 0; level = 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 assets.rotate.load(); assets.drop.load(); @@ -302,41 +352,7 @@ function init() { field[x][y] = 0; } } - - // Start the game - next_shape(); -} - -var subframe = 0; -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(); - moved_steps = 0; - return true; - } - return false; - }() || (pos.top++ && moved_steps++); - draw(); - } - - if (game_running) setTimeout(loop, 5); } +setup(); init(); -loop(); diff --git a/index.html b/index.html index 16e92e4..cb7ad2e 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,17 @@ +

fuTris

+

A js13kGames 2014 entry (source) + by Aaron Fischer.

+ + +

Use the arrow keys to move (, , rotate + () and drop () stones. Press P for + pause the game. If you messed up, restart with R. Vim-users + will also find a way to play :)

+ diff --git a/main.css b/main.css new file mode 100644 index 0000000..fdb0786 --- /dev/null +++ b/main.css @@ -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; +} \ No newline at end of file diff --git a/screenshot_big.png b/screenshot_big.png new file mode 100644 index 0000000..3cb945b Binary files /dev/null and b/screenshot_big.png differ diff --git a/screenshot_small.png b/screenshot_small.png new file mode 100644 index 0000000..de45dc7 Binary files /dev/null and b/screenshot_small.png differ diff --git a/submission/assets/drop.wav b/submission/assets/drop.wav new file mode 100644 index 0000000..e3aa0b2 Binary files /dev/null and b/submission/assets/drop.wav differ diff --git a/submission/assets/move.wav b/submission/assets/move.wav new file mode 100644 index 0000000..3a522b5 Binary files /dev/null and b/submission/assets/move.wav differ diff --git a/submission/assets/point.wav b/submission/assets/point.wav new file mode 100644 index 0000000..67064b3 Binary files /dev/null and b/submission/assets/point.wav differ diff --git a/submission/assets/rotate.wav b/submission/assets/rotate.wav new file mode 100644 index 0000000..b21d1af Binary files /dev/null and b/submission/assets/rotate.wav differ diff --git a/submission/fuTris.js b/submission/fuTris.js new file mode 100644 index 0000000..78f7a69 --- /dev/null +++ b/submission/fuTris.js @@ -0,0 +1 @@ +function shape(a,b){var c=shapes[a];switch(c.length){case 1:return c[0];case 2:return c[b%2];case 4:return c[b]}}function rect(a,b,c,d,e,f){context.fillStyle="#"+f,context.fillRect(a*e,b*e,c*e,d*e)}function draw_shape(a,b,c,d,e){for(var f=0;f1?2:0;rect(20*a+1,20*b+1,18,18,c,colors[e+1]),rect(20*a+2,20*b+2,16,16,c,colors[e]),-1!=[0,3,5].indexOf(d)&&(rect(20*a+5,20*b+5,10,10,c,colors[{0:2,3:0,5:4}[d]]),rect(20*a+8,20*b+8,4,4,c,colors[{0:0,3:2,5:0}[d]])),1==d&&rect(20*a+5,20*b+5,10,10,c,colors[4]),4==d&&rect(20*a+8,20*b+8,4,4,c,colors[4]),2==d&&(rect(20*a+5,20*b+5,8,8,c,colors[0]),rect(20*a+7,20*b+7,8,8,c,colors[4]),rect(20*a+7,20*b+7,6,6,c,colors[2])),6==d&&(rect(20*a+5,20*b+6,3,3,c,colors[0]),rect(20*a+5,20*b+12,3,3,c,colors[0]),rect(20*a+11,20*b+4,3,3,c,colors[0]),rect(20*a+13,20*b+12,3,3,c,colors[0]))}function draw(){rect(0,0,canvas.width,canvas.height,1,"000");for(var a=0;10>a;a++)for(var b=0;16>b;b++)rect(20*a,20*b,20,20,2,background[a][b]),0!==field[a][b]&&draw_brick(a,b,2,field[a][b]-1);draw_shape(pos.left,pos.top,2,current_shape_type,angle),draw_shape(21,1,1,next_shape_type,0),draw_text(points,30,420,130),draw_text("Points",13,420,150),draw_text(level,30,420,230),draw_text("Level",13,420,250),game_running||(draw_text("Game over",60,40,250),draw_text("Press R for a new game",20,140,270))}function noice(a,b){return a+~~(Math.random()*b)}function freeze(){for(var a=0;ab;b++){var c=!0;for(x=0;10>x;x++)0===field[x][b]&&(c=!1);if(c){a++;for(var d=b;d>0;d--)for(var e=0;10>e;e++)field[e][d]=field[e][d-1];for(var e=0;10>e;e++)field[e][0]=0}}1==a&&(points+=10),2==a&&(points+=25),3==a&&(points+=50),4==a&&(points+=100),a>0&&play_sound("point")}function play_sound(a){for(var b=0;b20&&(level++,stones=0),pos.left=4,pos.top=0,current_shape_type=next_shape_type,next_shape_type=Math.ceil(Math.random()*shapes.length-1),current_shape=shapes[current_shape_type]}function will_collide(a,b){for(var c=0;c=16||0!==shape(current_shape_type,a)[d][c]&&0!==field[b.left+c][b.top+d+1])return!0}function init(){speed=100,points=0,level=0,stones=0,game_running=!0,subframe=0,moved_steps=0;for(var a=0;10>a;a++)for(var b=0;16>b;b++)field[a][b]=0;next_shape(),loop()}function loop(){subframe++,subframe-speed>0&&(subframe=0,speed=100-15*level,+function(){return will_collide(angle,pos)?(freeze(),clear_full_lines(),next_shape(),(0===moved_steps||will_collide(0,{left:4,top:0}))&&(game_running=!1),moved_steps=0,!0):!1}()||pos.top++&&moved_steps++,draw()),game_running&&setTimeout(loop,5)}function setup(){assets.rotate.load(),assets.drop.load(),assets.move.load(),assets.point.load();for(var a=0;10>a;a++)audio_chanels[a]={channel:new Audio,finished:-1};for(var b=0;10>b;b++){field[b]=[],background[b]=[];for(var c=0;16>c;c++){var d=noice(15,15);background[b][c]=""+d+d+d,field[b][c]=0}}}var canvas=document.getElementById("fuTris"),context=canvas.getContext("2d");canvas.width=510,canvas.height=640;var field=[],background=[],game_running=!0,subframe=0,moved_steps=0,speed=100,points=0,level=0,stones=0,pos={left:4,top:0},angle=0,shapes=[[[[0,1],[0,1],[1,1]],[[1,0,0],[1,1,1]],[[1,1],[1,0],[1,0]],[[1,1,1],[0,0,1]]],[[[2,2],[2,2]]],[[[3,3,3],[0,3,0]],[[0,3],[3,3],[0,3]],[[0,3,0],[3,3,3]],[[3,0],[3,3],[3,0]]],[[[4,4],[0,4],[0,4]],[[0,0,4],[4,4,4]],[[4,0],[4,0],[4,4]],[[4,4,4],[4,0,0]]],[[[0,5,5],[5,5,0]],[[5,0],[5,5],[0,5]]],[[[6,6,0],[0,6,6]],[[0,6],[6,6],[6,0]]],[[[7,7,7,7]],[[7],[7],[7],[7]]]],colors=["c1e184","4f6c19","699021","8fc32e","1a2308"],assets={rotate:document.getElementById("rotate-sound"),drop:document.getElementById("drop-sound"),move:document.getElementById("move-sound"),point:document.getElementById("point-sound")},audio_chanels=[],current_shape_type=0,next_shape_type=Math.ceil(Math.random()*shapes.length-1),current_shape=shapes[current_shape_type];addEventListener("keydown",function(a){if(game_running){if((37==a.keyCode||72==a.keyCode)&&pos.left>0&&!will_collide(angle,{left:pos.left-1,top:pos.top})&&(pos.left--,play_sound("move"),draw()),(39==a.keyCode||76==a.keyCode)&&pos.left<10-shape(current_shape_type,angle)[0].length&&!will_collide(angle,{left:pos.left+1,top:pos.top})&&(pos.left++,play_sound("move"),draw()),38==a.keyCode||75==a.keyCode){var b=0===angle?3:angle-1;pos.left+shape(current_shape_type,b)[0].length<=10&&!will_collide(b,pos)&&(angle=b),play_sound("rotate"),draw()}if(40==a.keyCode||74==a.keyCode){for(;!will_collide(angle,{left:pos.left,top:pos.top+1});)pos.top++;pos.top++,points+=2,freeze(),clear_full_lines(),next_shape(),play_sound("drop"),draw()}}(13==a.keyCode||80==a.keyCode)&&(game_running=!game_running,game_running&&loop()),82!=a.keyCode||game_running||init()}),setup(),init(); \ No newline at end of file diff --git a/submission/index.html b/submission/index.html new file mode 100644 index 0000000..be68ab2 --- /dev/null +++ b/submission/index.html @@ -0,0 +1,24 @@ + + + + + fuTris -- a js13kGames entry + + + + +

fuTris

+

A js13kGames 2014 entry (source) + by Aaron Fischer.

+ +

Use the arrow keys to move (, , rotate + () and drop () stones. Press P for + pause the game. If you messed up, restart with R. Vim-users + will also find a way to play :)

+ + + + + + + diff --git a/submission/js13kgames-aaronfischer.zip b/submission/js13kgames-aaronfischer.zip new file mode 100644 index 0000000..5943c76 Binary files /dev/null and b/submission/js13kgames-aaronfischer.zip differ diff --git a/submission/main.css b/submission/main.css new file mode 100644 index 0000000..fdb0786 --- /dev/null +++ b/submission/main.css @@ -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; +} \ No newline at end of file