Refactor some stuff to display the next shape

This commit is contained in:
Aaron Mueller 2014-09-01 00:17:35 +02:00
parent bef4d3f6a7
commit 43fddf4d6c

View file

@ -1,6 +1,6 @@
var canvas = document.getElementById('fuTris'); var canvas = document.getElementById('fuTris');
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
canvas.width = 10*20*2; canvas.width = 10*20*2+10+(5*20);
canvas.height = 16*20*2; canvas.height = 16*20*2;
var field = []; var field = [];
@ -43,47 +43,57 @@ var shapes = [
[[[7,7,7,7]], [[7], [7], [7], [7]]] [[[7,7,7,7]], [[7], [7], [7], [7]]]
]; ];
var current_shape_type = 0; var current_shape_type = 0;
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(_angle) {
switch (current_shape.length) { function shape(type, angle) {
case 1: return current_shape[0]; var shape = shapes[type];
case 2: return current_shape[_angle%2]; switch (shape.length) {
case 4: return current_shape[_angle]; case 1: return shape[0];
case 2: return shape[angle%2];
case 4: return shape[angle];
} }
} }
function draw_shape(x, y, scale, type, angle) {
for (var xi=0; xi<shape(type, angle)[0].length; xi++)
for (var yi=0; yi<shape(type, angle).length; yi++)
if (shape(type, angle)[yi][xi] !== 0)
draw_brick(x+xi, y+yi, scale, type+1);
}
colors = ['c1e184', '4f6c19', '699021', '8fc32e', '1a2308']; 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;
rect(x*20+1, y*20+1, 18, 18, 2, colors[color_offset+1]); rect(x*20+1, y*20+1, 18, 18, scale, colors[color_offset+1]);
rect(x*20+2, y*20+2, 16, 16, 2, colors[color_offset]); rect(x*20+2, y*20+2, 16, 16, scale, colors[color_offset]);
// J, L, Z // J, L, Z
if ([0, 3, 5].indexOf(i) != -1) { if ([0, 3, 5].indexOf(i) != -1) {
rect(x*20+5, y*20+5, 10, 10, 2, colors[{0: 2, 3: 0, 5: 4}[i]]); rect(x*20+5, y*20+5, 10, 10, scale, colors[{0: 2, 3: 0, 5: 4}[i]]);
rect(x*20+8, y*20+8, 4, 4, 2, colors[{0: 0, 3: 2, 5: 0}[i]]); rect(x*20+8, y*20+8, 4, 4, scale, colors[{0: 0, 3: 2, 5: 0}[i]]);
} }
// [] // []
if (i == 1) rect(x*20+5, y*20+5, 10, 10, 2, colors[4]); if (i == 1) rect(x*20+5, y*20+5, 10, 10, scale, colors[4]);
// 5 // 5
if (i ==4) rect(x*20+8, y*20+8, 4, 4, 2, colors[4]); if (i ==4) rect(x*20+8, y*20+8, 4, 4, scale, colors[4]);
// T // T
if (i == 2) { if (i == 2) {
rect(x*20+5, y*20+5, 8, 8, 2, colors[0]); rect(x*20+5, y*20+5, 8, 8, scale, colors[0]);
rect(x*20+7, y*20+7, 8, 8, 2, colors[4]); rect(x*20+7, y*20+7, 8, 8, scale, colors[4]);
rect(x*20+7, y*20+7, 6, 6, 2, colors[2]); rect(x*20+7, y*20+7, 6, 6, scale, colors[2]);
} }
// ---- // ----
if (i == 6) { if (i == 6) {
rect(x*20+5, y*20+6, 3, 3, 2, colors[0]); rect(x*20+5, y*20+6, 3, 3, scale, colors[0]);
rect(x*20+5, y*20+12, 3, 3, 2, colors[0]); rect(x*20+5, y*20+12, 3, 3, scale, colors[0]);
rect(x*20+11, y*20+4, 3, 3, 2, colors[0]); rect(x*20+11, y*20+4, 3, 3, scale, colors[0]);
rect(x*20+13, y*20+12, 3, 3, 2, colors[0]); rect(x*20+13, y*20+12, 3, 3, scale, colors[0]);
} }
} }
@ -96,10 +106,10 @@ function noice(offset, level) {
} }
function freeze() { function freeze() {
for (var x=0; x<shape(angle)[0].length; x++) for (var x=0; x<shape(current_shape_type, angle)[0].length; x++)
for (var y=0; y<shape(angle).length; y++) for (var y=0; y<shape(current_shape_type, angle).length; y++)
if (shape(angle)[y][x] !== 0) if (shape(current_shape_type, angle)[y][x] !== 0)
field[pos.left+x][pos.top+y] = shape(angle)[y][x]; field[pos.left+x][pos.top+y] = shape(current_shape_type, angle)[y][x];
} }
function clear_full_lines() { function clear_full_lines() {
@ -120,15 +130,16 @@ function clear_full_lines() {
function next_shape() { function next_shape() {
pos.left = 4; pos.left = 4;
pos.top = 0; pos.top = 0;
current_shape_type = Math.ceil(Math.random()*shapes.length-1); current_shape_type = next_shape_type;
next_shape_type = Math.ceil(Math.random()*shapes.length-1);
current_shape = shapes[current_shape_type]; current_shape = shapes[current_shape_type];
} }
function will_collide(_angle, _pos) { function will_collide(_angle, _pos) {
for (var x=0; x<shape(_angle)[0].length; x++) for (var x=0; x<shape(current_shape_type, _angle)[0].length; x++)
for (var y=0; y<shape(_angle).length; y++) for (var y=0; y<shape(current_shape_type, _angle).length; y++)
if (pos.top+shape(_angle).length >= 16 || if (pos.top+shape(current_shape_type, _angle).length >= 16 ||
shape(_angle)[y][x] !== 0 && shape(current_shape_type, _angle)[y][x] !== 0 &&
field[_pos.left+x][_pos.top+y+1] !== 0) field[_pos.left+x][_pos.top+y+1] !== 0)
return true; return true;
} }
@ -139,12 +150,12 @@ addEventListener('keydown', function(event) {
!will_collide(angle, {left: pos.left-1, top: pos.top})) !will_collide(angle, {left: pos.left-1, top: pos.top}))
pos.left--; pos.left--;
if (event.keyCode == 39 && if (event.keyCode == 39 &&
pos.left < 10-shape(angle)[0].length && pos.left < 10-shape(current_shape_type, angle)[0].length &&
!will_collide(angle, {left: pos.left+1, top: pos.top})) !will_collide(angle, {left: pos.left+1, top: pos.top}))
pos.left++; pos.left++;
if (event.keyCode == 38) { if (event.keyCode == 38) {
var new_angle = angle === 0 ? 3 : angle-1; var new_angle = angle === 0 ? 3 : angle-1;
if (pos.left+shape(new_angle)[0].length <= 10 && if (pos.left+shape(current_shape_type, new_angle)[0].length <= 10 &&
!will_collide(new_angle, pos)) !will_collide(new_angle, pos))
angle = new_angle; angle = new_angle;
} }
@ -198,18 +209,22 @@ function loop() {
}() || (pos.top++ && moved_steps++); }() || (pos.top++ && moved_steps++);
} }
// background // game background
rect(0, 0, canvas.width, canvas.height, 1, '000');
// game field background
for (var x=0; x<10; x++) for (var x=0; x<10; x++)
for (var y=0; y<16; y++) { for (var y=0; y<16; y++) {
rect(x*20, y*20, 20, 20, 2, background[x][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]); if (field[x][y] !== 0) draw_brick(x, y, 2, field[x][y]);
} }
// shape // Current shape
for (var x=0; x<shape(angle)[0].length; x++) draw_shape(pos.left, pos.top, 2, current_shape_type, angle);
for (var y=0; y<shape(angle).length; y++)
if (shape(angle)[y][x] !== 0) // Next shape
draw_brick(x+pos.left, y+pos.top, 2, current_shape_type+1); //rect(20*2*10+10, 0, 20*5+10, 20*4+10, 1, '000');
draw_shape(21, 1, 1, next_shape_type, 0);
setTimeout(loop, 5); setTimeout(loop, 5);
} }