Refactor some stuff to display the next shape
This commit is contained in:
parent
bef4d3f6a7
commit
43fddf4d6c
1 changed files with 51 additions and 36 deletions
87
fuTris.js
87
fuTris.js
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue