jdg/tetris-js
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Exploring how to use canvas

Browse Source
This commit is contained in:
José David Guillén
2021-10-19 14:12:13 +02:00
parent 7228798f0e
commit a4a1973dd7
2 changed files with 95 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@ -1,9 +1,24 @@
<html> <html>
<body> <head>
<title>JDG :: Tetris JS</title> <title>JDG :: Tetris JS</title>
<script src="tetris.js"></script> <script src="tetris.js"></script>
</body> <style>
<head> html, body {
<div id="app"></div> width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#app{
position: fixed; /* absolute */
top: 0;
left: 0;
width: 100vw; /* 100% */
height: 100vh; /* 100% */
}
</style>
</head> </head>
<body>
<canvas id="app"></canvas>
</body>
</html> </html>

105
tetris.js
View File

@ -19,14 +19,14 @@ let tetris = function () {
r:[ r:[
[ [0,0],[0,1],[0,2],[1,2] ], [ [0,0],[0,1],[0,2],[1,2] ],
[ [0,0],[1,0],[2,0],[0,1] ], [ [0,0],[1,0],[2,0],[0,1] ],
[ [0,0],[0,1],[1,1],[1,2] ], [ [0,0],[1,0],[1,1],[1,2] ],
[ [0,2],[1,2],[1,1],[1,0] ] [ [2,0],[2,1],[1,1],[0,1] ]
] ]
}, },
/*'L2':*/{ mR:4, /*'L2':*/{ mR:4,
r:[ r:[
[ [1,0],[1,1],[1,2],[0,2] ], [ [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] ], [ [1,0],[0,0],[0,1],[0,2] ],
[ [0,0],[1,0],[2,0],[2,1] ] [ [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 score, speed;
let next_t; 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}; let t = {t:null,x:0,y:0,r:0};
function control(e) { function control(e) {
clean();
switch(e.key) { switch(e.key) {
case 'ArrowUp': moveUp(this.t); break; case 'r': clean(t); newGame(); break;
case 'ArrowDown': moveDown(this.t); break; case 'a': clean(t); nextT(); break;
case 'ArrowLeft': moveLeft(this.t); break; case 'ArrowUp': moveUp(t); break;
case 'ArrowRight': moveRight(this.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) { function moveUp(p) {
clean(t);
let r = p.r; let r = p.r;
p.r = (p.r++)% p.t.mR; p.r = (++p.r)% p.t.mR;
if ( collision(p) ) p.r = r; if ( collision(p) ) p.r = r;
draw(t);
} }
function moveDown(p) { function moveDown(p) {
clean(t);
p.y++; p.y++;
if ( collision(p) ) glue(p); if ( collision(p) ) {
p.y--;
glue(p);
}
draw(t);
} }
function moveLeft(p) { function moveLeft(p) {
clean(t);
p.x--; p.x--;
if ( collision(p) ) p.x++; if ( collision(p) ) p.x++;
draw(t);
} }
function moveRight(p) { function moveRight(p) {
clean(t);
p.x++; p.x++;
if ( collision(p) ) 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) { function collision(p) {
let x,y; if ( p.x<0 || p.x>=grid_x || p.y<0 || p.y>=grid_y ) return true;
for(x=0;x<p.t[p.r]) 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 getNextShape() {
return Math.floor(Math.random() * tetrimonios.length);
} }
function setShape(p) { function setShape(p) {
let tNum = Math.floor(Math.random() * tetrimonios.length); let tNum = Math.floor(Math.random() * tetrimonios.length);
if ( !this.next_t ) { if ( !next_t ) {
this.next_t = tetrimonios[ tNum ]; next_t = tetrimonios[ tNum ];
setShape(p); setShape(p);
} }
p.t = this.next_t; p.t = next_t;
p.x = 0; p.x = 0;
p.y = grid_x/2 - 1; p.y = grid_x/2 - 1;
p.r = 0; p.r = 0;
this.next_t = tetrimonios[ tNum ]; next_t = tetrimonios[ tNum ];
} }
function newGame() { function newGame() {
this.score = 0; score = 0;
this.speed = 1; speed = 1;
this.next_t = null; next_t = null;
setShape( this.t ); setShape( t );
this.timer = setInterval(moveDown, 1000); if (!timer) timer = setInterval(()=>moveDown(t), 1000);
} }
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(); newGame();
}
init();
} }