Fix performance issues and add pause state

This commit is contained in:
Aaron Mueller 2014-09-11 15:04:41 +02:00
parent 200b3d8765
commit 1c96690f20
2 changed files with 86 additions and 50 deletions

View file

@ -1,9 +1,15 @@
# TODO # TODO
* Check performance! 100% CPU usage for a simple tetris game is not acceptable :D * Add "score" display
* Add mainmenu * Add mainmenu
* Add highscore * Add highscore
* Pimp up the index.html * Pimp up the index.html
* Add "score" display
* Game over screen * Game over screen
* Make archive, check size, submit :P * Make archive, check size, submit :P
# Bugs
* Something is wrong with the stone decoration ... it changes 0_o
# Optional stuff

122
fuTris.js
View file

@ -6,6 +6,7 @@ canvas.height = 16*20*2;
var field = []; var field = [];
var background = []; var background = [];
var game_running = true;
var speed = 100; var speed = 100;
var points = 0; var points = 0;
var pos = {left: 4, top: 0}; var pos = {left: 4, top: 0};
@ -43,19 +44,25 @@ var shapes = [
// ---- // ----
[[[7,7,7,7]], [[7], [7], [7], [7]]] [[[7,7,7,7]], [[7], [7], [7], [7]]]
]; ];
var colors = ['c1e184', '4f6c19', '699021', '8fc32e', '1a2308'];
var current_shape_type = 0; var current_shape_type = 0;
var next_shape_type = Math.ceil(Math.random()*shapes.length-1); var next_shape_type = Math.ceil(Math.random()*shapes.length-1);
var current_shape = shapes[current_shape_type]; var current_shape = shapes[current_shape_type];
function shape(type, angle) { function shape(type, angle) {
var shape = shapes[type]; var s = shapes[type];
switch (shape.length) { switch (s.length) {
case 1: return shape[0]; case 1: return s[0];
case 2: return shape[angle%2]; case 2: return s[angle%2];
case 4: return shape[angle]; case 4: return s[angle];
} }
} }
function rect(x, y, w, h, scale, color) {
context.fillStyle = '#'+color;
context.fillRect(x*scale, y*scale, w*scale, h*scale);
}
function draw_shape(x, y, scale, type, angle) { function draw_shape(x, y, scale, type, angle) {
for (var xi=0; xi<shape(type, angle)[0].length; xi++) for (var xi=0; xi<shape(type, angle)[0].length; xi++)
for (var yi=0; yi<shape(type, angle).length; yi++) for (var yi=0; yi<shape(type, angle).length; yi++)
@ -63,7 +70,6 @@ function draw_shape(x, y, scale, type, angle) {
draw_brick(x+xi, y+yi, scale, type+1); draw_brick(x+xi, y+yi, scale, type+1);
} }
colors = ['c1e184', '4f6c19', '699021', '8fc32e', '1a2308'];
function draw_brick(x, y, scale, number) { function draw_brick(x, y, scale, number) {
var i = number-1; var i = number-1;
var color_offset = i > 1 ? 2 : 0; var color_offset = i > 1 ? 2 : 0;
@ -98,10 +104,24 @@ function draw_brick(x, y, scale, number) {
} }
} }
function rect(x, y, w, h, scale, color) { function draw() {
context.fillStyle = '#'+color; // game background
context.fillRect(x*scale, y*scale, w*scale, h*scale); rect(0, 0, canvas.width, canvas.height, 1, '000');
// game field background
for (var x=0; x<10; x++)
for (var y=0; y<16; y++) {
rect(x*20, y*20, 20, 20, 2, background[x][y]);
if (field[x][y] !== 0) draw_brick(x, y, 2, field[x][y]);
}
// Current shape
draw_shape(pos.left, pos.top, 2, current_shape_type, angle);
// Next shape
draw_shape(21, 1, 1, next_shape_type, 0);
} }
function noice(offset, level) { function noice(offset, level) {
return offset+~~(Math.random()*level); return offset+~~(Math.random()*level);
} }
@ -146,28 +166,53 @@ function will_collide(_angle, _pos) {
} }
addEventListener('keydown', function(event) { addEventListener('keydown', function(event) {
if (event.keyCode == 37 && if (game_running) {
pos.left > 0 && // Move left
!will_collide(angle, {left: pos.left-1, top: pos.top})) if (event.keyCode == 37 &&
pos.left--; pos.left > 0 &&
if (event.keyCode == 39 && !will_collide(angle, {left: pos.left-1, top: pos.top})) {
pos.left < 10-shape(current_shape_type, angle)[0].length && pos.left--;
!will_collide(angle, {left: pos.left+1, top: pos.top})) draw();
pos.left++; }
if (event.keyCode == 38) {
var new_angle = angle === 0 ? 3 : angle-1; // Move right
if (pos.left+shape(current_shape_type, new_angle)[0].length <= 10 && if (event.keyCode == 39 &&
!will_collide(new_angle, pos)) pos.left < 10-shape(current_shape_type, angle)[0].length &&
angle = new_angle; !will_collide(angle, {left: pos.left+1, top: pos.top})) {
pos.left++;
draw();
}
// Rotate
if (event.keyCode == 38) {
var new_angle = angle === 0 ? 3 : angle-1;
if (pos.left+shape(current_shape_type, new_angle)[0].length <= 10 &&
!will_collide(new_angle, pos))
angle = new_angle;
draw();
}
// Drop
if (event.keyCode == 40) {
while(!will_collide(angle, {left: pos.left, top: pos.top+1}))
pos.top++;
pos.top++;
freeze();
clear_full_lines();
next_shape();
draw();
}
} }
if (event.keyCode == 40) {
while(!will_collide(angle, {left: pos.left, top: pos.top+1})) // Pause the game
pos.top++; if (event.keyCode == 13 || event.keyCode == 80) {
pos.top++; game_running = !game_running;
freeze(); if (game_running) loop();
clear_full_lines();
next_shape();
} }
// TODO: Back to the main menu
if (event.keyCode == 27 || event.keyCode == 121)
console.log('Implement me.');
}); });
function init() { function init() {
@ -208,25 +253,10 @@ function loop() {
return true; return true;
} }
}() || (pos.top++ && moved_steps++); }() || (pos.top++ && moved_steps++);
draw();
} }
// game background if (game_running) setTimeout(loop, 5);
rect(0, 0, canvas.width, canvas.height, 1, '000');
// game field background
for (var x=0; x<10; x++)
for (var y=0; y<16; y++) {
rect(x*20, y*20, 20, 20, 2, background[x][y]);
if (field[x][y] !== 0) draw_brick(x, y, 2, field[x][y]);
}
// Current shape
draw_shape(pos.left, pos.top, 2, current_shape_type, angle);
// Next shape
draw_shape(21, 1, 1, next_shape_type, 0);
setTimeout(loop, 5);
} }
init(); init();