diff --git a/index.html b/index.html
index 9cd78f2..27d8c78 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,24 @@
-
+
JDG :: Tetris JS
-
-
-
+
+
+
+
\ No newline at end of file
diff --git a/tetris.js b/tetris.js
index 57cd4e5..7f71187 100644
--- a/tetris.js
+++ b/tetris.js
@@ -19,14 +19,14 @@ let tetris = function () {
r:[
[ [0,0],[0,1],[0,2],[1,2] ],
[ [0,0],[1,0],[2,0],[0,1] ],
- [ [0,0],[0,1],[1,1],[1,2] ],
- [ [0,2],[1,2],[1,1],[1,0] ]
+ [ [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],[1,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] ]
]
@@ -45,80 +45,125 @@ let tetris = function () {
}
];
- let timer;
+ let timer, canvas, ctx, bs;
let score, speed;
let next_t;
- let b=[grid_x][grid_y];
+ let board=Array.from(Array(grid_x), () => new Array(grid_y));
let t = {t:null,x:0,y:0,r:0};
function control(e) {
- clean();
switch(e.key) {
- case 'ArrowUp': moveUp(this.t); break;
- case 'ArrowDown': moveDown(this.t); break;
- case 'ArrowLeft': moveLeft(this.t); break;
- case 'ArrowRight': moveRight(this.t);break;
+ case 'r': clean(t); newGame(); break;
+ case 'a': clean(t); nextT(); break;
+ case 'ArrowUp': moveUp(t); break;
+ case 'ArrowDown': moveDown(t); break;
+ case 'ArrowLeft': moveLeft(t); break;
+ case 'ArrowRight': moveRight(t);break;
}
- draw();
}
- document.addEventListener('keydown', control);
+
+ function clean(p) { ctx.fillStyle = "#FFFFFF"; drawBlocks(p,drawBlock_clean); }
+ function draw(p) { ctx.fillStyle = "#666666"; drawBlocks(p,drawBlock_filled); }
+ function drawBlocks(p, drawBlock) {
+ p.t.r[p.r].forEach(b => drawBlock(p.x + b[0], p.y + b[1]));
+ }
+ function drawBlock_clean(x,y) {
+ ctx.fillRect(bs*(1+x), bs*(1+y), bs, bs);
+ }
+ function drawBlock_filled(x,y) {
+ ctx.fillRect(bs*(1+x), bs*(1+y), bs, bs);
+ }
+
function moveUp(p) {
+ clean(t);
let r = p.r;
- p.r = (p.r++)% p.t.mR;
+ p.r = (++p.r)% p.t.mR;
if ( collision(p) ) p.r = r;
+ draw(t);
}
function moveDown(p) {
+ clean(t);
p.y++;
- if ( collision(p) ) glue(p);
+ if ( collision(p) ) {
+ p.y--;
+ glue(p);
+ }
+ draw(t);
}
function moveLeft(p) {
+ clean(t);
p.x--;
if ( collision(p) ) p.x++;
+ draw(t);
}
function moveRight(p) {
+ clean(t);
p.x++;
if ( collision(p) ) p.x--;
+ draw(t);
+ }
+
+ function glue(p) {
+ p.t.r[p.r].forEach(b => { board[p.x+b[0]][p.y+b[1]]=1; } );
+ draw(t);
+ setShape(t);
}
function collision(p) {
- let x,y;
- for(x=0;x=grid_x || p.y<0 || p.y>=grid_y ) return true;
+ if ( p.t.r[p.r].filter(b => ( p.x+b[0]>=grid_x || p.y+b[1]>=grid_y || board[p.x+b[0]][p.y+b[1]]==1 ) ).length>0 ) return true;
+ return false
}
function setShape(p) {
let tNum = Math.floor(Math.random() * tetrimonios.length);
- if ( !this.next_t ) {
- this.next_t = tetrimonios[ tNum ];
+ if ( !next_t ) {
+ next_t = tetrimonios[ tNum ];
setShape(p);
}
- p.t = this.next_t;
+ p.t = next_t;
p.x = 0;
p.y = grid_x/2 - 1;
p.r = 0;
- this.next_t = tetrimonios[ tNum ];
+ next_t = tetrimonios[ tNum ];
}
-
function newGame() {
- this.score = 0;
- this.speed = 1;
- this.next_t = null;
- setShape( this.t );
- this.timer = setInterval(moveDown, 1000);
+ score = 0;
+ speed = 1;
+ next_t = null;
+ setShape( t );
+ if (!timer) timer = setInterval(()=>moveDown(t), 1000);
}
- newGame();
+
+ function getBlockSize() {
+ const space_top = 5;
+ const space_right = 20;
+
+ const { width, height } = canvas.getBoundingClientRect();
+ return Math.floor( Math.min( height / (space_top + grid_y), width / (space_right + grid_x) ) );
+ }
+
+ function init() {
+ canvas = document.getElementById("app");
+ canvas.width = window.innerWidth
+ canvas.height = window.innerHeight
+
+ ctx = canvas.getContext("2d");
+ bs = getBlockSize();
+
+ document.addEventListener('keydown', control);
+ newGame();
+ }
+ init();
}