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
1 changed files with 51 additions and 36 deletions

View File

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