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

105
tetris.js
View File

@ -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<p.t[p.r])
}
function getNextShape() {
return Math.floor(Math.random() * tetrimonios.length);
if ( p.x<0 || p.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);
}
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();
}