exploring other ways
This commit is contained in:
234
tetris_v2.js
Normal file
234
tetris_v2.js
Normal file
@ -0,0 +1,234 @@
|
||||
"use strict";
|
||||
|
||||
|
||||
const grid_x = 10;
|
||||
const grid_y = 20;
|
||||
const tetrimonios = [
|
||||
/*'I'*/{ mR:2,
|
||||
r:[
|
||||
[ [0,0],[0,1],[0,2],[0,3] ],
|
||||
[ [0,0],[1,0],[2,0],[3,0] ]
|
||||
]
|
||||
},
|
||||
/*'O':*/{ mR:1,
|
||||
r:[
|
||||
[ [0,0],[0,1],[1,0],[1,1] ]
|
||||
]
|
||||
},
|
||||
/*'L':*/{ mR:4,
|
||||
r:[
|
||||
[ [0,0],[0,1],[0,2],[1,2] ],
|
||||
[ [0,0],[1,0],[2,0],[0,1] ],
|
||||
[ [0,0],[1,0],[1,1],[1,2] ],
|
||||
[ [2,0],[2,1],[1,1],[0,1] ]
|
||||
]
|
||||
},
|
||||
/*'L2':*/{ mR:4,
|
||||
r:[
|
||||
[ [1,0],[1,1],[1,2],[0,2] ],
|
||||
[ [0,0],[0,1],[1,1],[2,1] ],
|
||||
[ [1,0],[0,0],[0,1],[0,2] ],
|
||||
[ [0,0],[1,0],[2,0],[2,1] ]
|
||||
]
|
||||
},
|
||||
/*'Z':*/{ mR:2,
|
||||
r:[
|
||||
[ [0,0],[1,0],[1,1],[2,1] ],
|
||||
[ [1,0],[1,1],[0,1],[0,2] ]
|
||||
]
|
||||
},
|
||||
/*'Z2':*/{ mR:2,
|
||||
r:[
|
||||
[ [0,1],[1,1],[1,0],[2,0] ],
|
||||
[ [0,0],[0,1],[1,1],[1,2] ]
|
||||
]
|
||||
},
|
||||
/*'T':*/{ mR:4,
|
||||
r:[
|
||||
[ [1,0],[0,1],[1,1],[2,1] ],
|
||||
[ [0,0],[0,1],[0,2],[1,1] ],
|
||||
[ [0,0],[1,0],[2,0],[1,1] ],
|
||||
[ [1,0],[1,1],[1,2],[0,1] ]
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
class Shape {
|
||||
constructor(board) {
|
||||
this.board = board;
|
||||
this.set(null);
|
||||
}
|
||||
set(t) {
|
||||
this.t = t;
|
||||
this.x = this.board.w/2 -1; this.ox = this.x;
|
||||
this.y = 0; this.oy = 0;
|
||||
this.r = 0; this.or = 0
|
||||
}
|
||||
rotate() {
|
||||
let r = this.r;
|
||||
this.r = (this.r + 1) % this.t.mR;
|
||||
if ( this.board.collision(this) ) {
|
||||
this.r = r;
|
||||
} else {
|
||||
this.or = r;
|
||||
this.ox = this.x;
|
||||
this.oy = this.y;
|
||||
this.board.draw(this); // this.t, this.x, this.y, this.r);
|
||||
}
|
||||
}
|
||||
down() {
|
||||
this.y++;
|
||||
if ( this.board.collision(this) ) {
|
||||
this.y--;
|
||||
this.board.glue(this);
|
||||
} else {
|
||||
this.ox = this.x;
|
||||
this.oy = this.y -1;
|
||||
this.or = this.r;
|
||||
this.board.draw(this);
|
||||
}
|
||||
}
|
||||
left() {
|
||||
this.x--;
|
||||
if ( this.board.collision(this) ) {
|
||||
this.x++;
|
||||
} else {
|
||||
this.ox = this.x + 1;
|
||||
this.oy = this.y;
|
||||
this.or = this.r;
|
||||
this.board.draw(this);
|
||||
}
|
||||
}
|
||||
right() {
|
||||
this.x++;
|
||||
if ( this.board.collision(this) ) {
|
||||
this.x--;
|
||||
} else {
|
||||
this.ox = this.x - 1;
|
||||
this.oy = this.y;
|
||||
this.or = this.r;
|
||||
this.board.draw(this);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Board {
|
||||
constructor(w,h,canvas) {
|
||||
this.ctx = canvas.getContext("2d");
|
||||
|
||||
const space_top = 5;
|
||||
const space_right = 10;
|
||||
|
||||
const { width, height } = canvas.getBoundingClientRect();
|
||||
this.s = Math.floor( Math.min( height / (space_top + h), width / (space_right + w) ) );
|
||||
this.x = this.s*1;
|
||||
this.y = canvas.height - this.s*h - this.s*1;
|
||||
|
||||
this.w = w;
|
||||
this.h = h;
|
||||
this.next_t = this.getRandomT();
|
||||
this.reset();
|
||||
this.shape = new Shape(this);
|
||||
this.shape.set(this.getRandomT());
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.board = Array.from(Array(this.h), () => new Array(this.w)); // Board[Y][X]
|
||||
this.clean();
|
||||
}
|
||||
|
||||
collision(p /*:Shape*/ ) {
|
||||
if ( p.x<0 || p.x>=this.w || p.y<0 || p.y>=this.h ) return true;
|
||||
if ( p.t.r[p.r].filter(b => ( p.x+b[0]>=this.w || p.y+b[1]>=this.h || this.board[p.y+b[1]][p.x+b[0]]==1 ) ).length>0 ) return true;
|
||||
return false
|
||||
}
|
||||
|
||||
glue(p /*:Shape*/) {
|
||||
p.t.r[p.r].forEach(b => { this.board[p.y+b[1]][p.x+b[0]]=1; } );
|
||||
|
||||
this.draw(p,false);
|
||||
|
||||
this.deleteRows( this.board.filter( r=>r.filter(c=>c==1).length==grid_x ) );
|
||||
|
||||
p.set(this.next_t);
|
||||
this.next_t = this.getRandomT();
|
||||
}
|
||||
getRandomT() {
|
||||
return tetrimonios[ Math.floor(Math.random() * tetrimonios.length) ];
|
||||
}
|
||||
|
||||
draw(p /*:Shape*/, live) {
|
||||
live = typeof(live) == 'undefined' ? true : live;
|
||||
|
||||
this.ctx.fillStyle = "#FFFFFF";
|
||||
p.t.r[p.or].forEach(b => this.drawBlock(p.ox + b[0], p.oy + b[1]));
|
||||
|
||||
this.ctx.fillStyle = live?"#F66666":"#666666";
|
||||
p.t.r[p.r].forEach(b => this.drawBlock(p.x + b[0], p.y + b[1]));
|
||||
}
|
||||
drawBlock(x,y) {
|
||||
this.ctx.fillRect(this.x + this.s*x, this.y + this.s*y, this.s, this.s);
|
||||
}
|
||||
|
||||
deleteRows(r) {
|
||||
if (r.length>0) {
|
||||
let newBoard = this.board.filter( r=>r.filter(c=>c==1).length<this.w );
|
||||
this.board = Array.from(Array(this.h - newBoard.length), () => new Array(this.w));
|
||||
this.board = this.board.concat(newBoard);
|
||||
|
||||
this.clean();
|
||||
|
||||
this.ctx.fillStyle = "#666666";
|
||||
this.board.forEach((r,y)=>r.forEach((c,x)=>{if(c==1)this.drawBlock(x,y);}))
|
||||
}
|
||||
}
|
||||
|
||||
clean() {
|
||||
this.ctx.fillStyle = "#FFFFFF";
|
||||
this.ctx.fillRect(this.x, this.y, this.s*this.w, this.s*this.h);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
let tetris = function () {
|
||||
|
||||
// ----------------------------------------------------------
|
||||
let timer;
|
||||
let canvas = document.getElementById("app");
|
||||
canvas.width = window.innerWidth
|
||||
canvas.height = window.innerHeight
|
||||
|
||||
let ctx = canvas.getContext("2d");
|
||||
let board = new Board(grid_x,grid_y,canvas);
|
||||
document.addEventListener('keydown', control);
|
||||
newGame();
|
||||
// ----------------------------------------------------------
|
||||
|
||||
function control(e) {
|
||||
switch(e.key) {
|
||||
case 'r': newGame(); break;
|
||||
case 'ArrowUp': board.shape.rotate(); break;
|
||||
case 'ArrowDown': board.shape.down(); break;
|
||||
case 'ArrowLeft': board.shape.left(); break;
|
||||
case 'ArrowRight': board.shape.right(); break;
|
||||
}
|
||||
}
|
||||
|
||||
function newGame() {
|
||||
drawBackground();
|
||||
board.reset();
|
||||
|
||||
if (!timer) timer = setInterval(()=>board.shape.down(), 1000);
|
||||
}
|
||||
|
||||
function drawBackground() {
|
||||
ctx.fillStyle = "#FFFFFF";
|
||||
ctx.fillRect(0,0,canvas.getBoundingClientRect().width,canvas.getBoundingClientRect().height);
|
||||
|
||||
ctx.strokeStyle = "#0074cc";
|
||||
ctx.strokeRect(board.x -1, board.y - 1, board.s*board.w +2, board.s*board.h +2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', tetris );
|
||||
Reference in New Issue
Block a user