Coding the Classic Tetris in Javascript
@gineerslife Coding the Classic Tetris Game in Javascript #fyp #coding #javascript #html #webdevelopment #tetris #gineerslife ♬ พี่ชอบหนูที่สุดเลย (I Like You The Most) (Speed Up) - PONCHET
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tetris</title>
<style>
body {
padding-top: 0.5rem;
}
.container {
width: 400px;
height: fit-content;
display: flex;
justify-content: center;
margin-bottom: 16px;
}
.container canvas {
margin: 0px 12px;
}
</style>
</head>
<body>
<div class="container">
<canvas id="tetris" width="200" height="300"></canvas>
</div>
<div class="container">
<button id="start">Start</button>
<button id="move">Down</button>
<button id="left">Left</button>
<button id="right">Right</button>
</div>
<script>
var tetris = [], i, j
var BLOCKS = [], timeout = null
for( i=0; i<15; i++ )
{
tetris[i] = []
for( j=0; j<10; j++ ) tetris[i][j] = 0
}
const box = document.getElementById("tetris")
const board = box.getContext("2d")
document.getElementById("start").addEventListener("click", GenerateTile )
document.getElementById("move").addEventListener("click", MoveDown )
document.getElementById("left").addEventListener("click", MoveLeft )
document.getElementById("right").addEventListener("click", MoveRight )
function GenerateTile()
{
var blocks = [
[ [0,3], [0,4], [0,5] ],
[ [0,4], [1,4], [2,4], [3,4] ],
[ [0,3], [0,4], [0,5], [1,4] ],
[ [1,3], [1,4], [0,4], [0,5] ]
]
var i = Math.round( Math.random() * 3 )
blocks[i].forEach( b => { tetris[b[0]][b[1]] = 2 } )
BLOCKS = blocks[i]
DrawTiles()
}
function CantGoDown()
{
return BLOCKS.some( b => {
return (b[0]*20) == 280 || tetris[b[0]+1][b[1]] == 1
})
}
function CantGoLeft()
{
return BLOCKS.some( b => {
return (b[1]*20) == 0 || tetris[b[0]][b[1]-1] == 1
})
}
function CantGoRight()
{
return BLOCKS.some( b => {
return (b[1]*20) == 180 || tetris[b[0]][b[1]+1] == 1
})
}
function MoveDown()
{
clearTime()
if( CantGoDown() ) return
BLOCKS = BLOCKS.map( b => {
tetris[b[0]][b[1]] = 0
return [b[0]+1, b[1]]
})
BLOCKS.map( b => {
tetris[ b[0] ][ b[1] ] = 2
})
DrawTiles()
if( CantGoDown() )
{
BLOCKS.forEach( b => {
tetris[ b[0] ][ b[1] ] = 1
})
CheckForScore()
GenerateTile()
}
}
function MoveLeft()
{
if( CantGoLeft() ) return
BLOCKS = BLOCKS.map( b => {
tetris[ b[0] ][ b[1] ] = 0
return [ b[0], b[1]-1 ]
})
BLOCKS.forEach( b => {
tetris[ b[0] ][ b[1] ] = 2
})
DrawTiles()
}
function MoveRight()
{
if( CantGoRight() ) return
BLOCKS = BLOCKS.map( b => {
tetris[ b[0] ][ b[1] ] = 0
return [ b[0], b[1]+1 ]
})
BLOCKS.forEach( b => {
tetris[ b[0] ][ b[1] ] = 2
})
DrawTiles()
}
function DrawTiles()
{
ClearBoard()
for( i=0; i<15; i++ )
{
for( j=0; j<10; j++ )
{
if( tetris[i][j] > 0 )
{
board.fillStyle = "black"
board.strokeStyle = "white"
board.fillRect(j*20, i*20, 20, 20 )
board.strokeRect(j*20, i*20, 20, 20 )
}
}
}
timeout = setTimeout( MoveDown, 700 )
}
function CheckForScore()
{
var y = [], pwede
for( i=0; i<15; i++ )
{
pwede = tetris[i].every( el => {
return el == 1
})
if( pwede ) y.push( i )
}
for( i=0; i<y.length; i++ )
{
tetris[y[i]] = tetris[ y[i] ].map( () => {
return 0
})
}
y.forEach( x => {
for( i=x-1; i>=0; i-- )
{
for( j=0; j<10; j++ )
{
if( tetris[i][j] == 1 )
{
tetris[i][j] = 0
tetris[i+1][j] = 1
}
}
}
})
}
function ClearBoard()
{
board.fillStyle = "white"
board.strokeStyle = "black"
board.fillRect( 0, 0, box.width, box.height )
board.strokeRect( 0, 0, box.width, box.height )
}
ClearBoard()
function clearTime()
{
if( timeout ) clearTimeout( timeout )
}
</script>
</body>
</html>Happy Coding!
Comments ()