Exploring how to use canvas
This commit is contained in:
parent
7228798f0e
commit
a4a1973dd7
23
index.html
23
index.html
@ -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
105
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<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();
|
||||
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user