Greetings, fellow coders! Are you ready to embark on an exciting coding adventure? In this blog post, we’ll be taking on the challenge of creating a Tetris game using nothing but Vanilla JavaScript. Not only will you have the opportunity to showcase your coding skills, but you’ll also learn valuable techniques for creating dynamic, interactive web applications. Whether you’re an experienced developer or just starting out, this project will provide an engaging and rewarding learning experience. So let’s roll up our sleeves and get ready to build an addictive game that will keep us engaged for hours!
Before we start here are some more projects you might like to create –
- Deploying a MERN App with Multiple Domain Names on VPS
- 3D CSS Logo with Pure CSS
- 3D Santa using HTML and CSS Only
- Crafting a 3D Police Squad Car with Pure CSS
- Crafting a 3D Printer with HTML and Pure CSS
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Tetris Game using Vanilla Javascript - Coding Torque</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>This Game only have javascript code.
JavaScript Code
Create a file script.js and paste the code below.
var Page = {
IsSetup: false,
body: document.getElementsByTagName('body')[0],
cvs: document.createElement('canvas'),
ctx: 0,
unitSize: 0,
AreaArr: [],
// calculates the unit size, canvas bounds, and canvas positioning
WindowChanged: function () {
// Calulcate the unitSize based on window width and height.
// The minimum of these calculations will be used.
var bodyW = document.documentElement.clientWidth,
bodyH = document.documentElement.clientHeight,
newUnitW = (bodyW - (bodyW % 80)) / 16,
newUnitH = (bodyH - (bodyH % 100)) / 20,
newUnitMin = Math.max(Math.min(newUnitW, newUnitH), 20);
// if the calcUnitMin != unitSize, update unitSize, recalculate
// all DrawAreaObjs, and update the canvas element bounds
this.unitSize = newUnitMin;
// store Right-most & Bottom-most points for canvas bounds
var rightLimit = 0,
bottomLimit = 0;
for (var i = 0; i < Page.AreaArr.length; i++) {
Page.AreaArr[i].CalculateBounds();
var newRightLimit = Page.AreaArr[i].left + Page.AreaArr[i].W,
newBottomLimit = Page.AreaArr[i].top + Page.AreaArr[i].H;
rightLimit = Math.max(newRightLimit, rightLimit);
bottomLimit = Math.max(newBottomLimit, bottomLimit);
}
this.cvs.width = rightLimit;
this.cvs.height = bottomLimit;
// left pos uses Game.W because ideally that area is centered
var topPos = (bodyH - bottomLimit) / 2,
leftPos = (bodyW / 2) - (this.Game.W / 2),
rightOffset = bodyW - (leftPos + rightLimit) - this.unitSize * 0.5;
// if default canvas positioning extends beyond screen, adjust it
if (rightOffset < 0) {
leftPos = Math.max(this.unitSize * 0.5, leftPos + rightOffset);
}
this.cvs.style.left = leftPos + 'px';
this.cvs.style.top = topPos + 'px';
},
// performs the page setup
Initialize: function () {
// if page has not been setup, do initial setup
if (this.IsSetup === false) {
document.body.appendChild(Page.cvs);
this.body.style.overflow = 'hidden';
this.body.style.backgroundColor = 'rgb(19,21,25)';
this.cvs.style.position = 'absolute';
this.ctx = this.cvs.getContext('2d');
this.IsSetup = true;
}
this.WindowChanged();
// dirty all draw areas
for (var i = 0; i < Page.AreaArr.length; i++) {
Page.AreaArr[i].IsDirty = true;
}
},
// redraws canvas visuals whenever the page is marked as dirty
Update: function () {
for (var i = 0; i < Page.AreaArr.length; i++) {
if (Page.AreaArr[i].IsDirty) {
Page.AreaArr[i].Draw();
Page.AreaArr[i].IsDirty = false;
}
}
}
};
// Definition for Area objects. Bounds are in UNITS
function DrawAreaObj(Left, Top, Width, Height, DrawFunction) {
// bounds in UNITS
this.leftBase = Left;
this.topBase = Top;
this.widthBase = Width;
this.heightBase = Height;
// bounds in PIXELS
this.left = 0;
this.top = 0;
this.W = 0;
this.H = 0;
// dirty flag (clean yourself up flag, you're better than that)
this.IsDirty = false;
// bounds recalculated and area dirtied when unitSize changes
this.CalculateBounds = function () {
this.left = this.leftBase * Page.unitSize;
this.top = this.topBase * Page.unitSize;
this.W = this.widthBase * Page.unitSize;
this.H = this.heightBase * Page.unitSize;
this.IsDirty = true;
};
// draw function as passed in by the callee
this.Draw = DrawFunction;
// push this area into the area arr
Page.AreaArr.push(this);
}
Page.Game = new DrawAreaObj(0, 0, 10, 20, function () {
// unitSize minus a couple pixels of separation
var uDrawSize = Page.unitSize - 2,
drawL,
drawT;
// redraws the background elements for game area
Page.ctx.fillStyle = 'rgb(28,30,34)';
Page.ctx.fillRect(this.left, this.top, this.W, this.H);
// draw the static unit blocks
for (var i = 0; i < GM.StaticUnits.length; i++) {
for (var j = 0; j < GM.StaticUnits[i].length; j++) {
// get the unit value for this index pair
var uValue = GM.StaticUnits[i][j];
// if this unit value is not 0, draw the unit
if (uValue !== 0) {
drawL = i * Page.unitSize + 1;
drawT = j * Page.unitSize + 1;
// fill this square with color based on player alive status
Page.ctx.fillStyle = (GM.IsAlive) ? uValue : 'rgb(34,36,42)';
Page.ctx.fillRect(drawL, drawT, uDrawSize, uDrawSize);
}
}
}
// draw the current active projection and piece (if exists)
if (GM.Pc.Cur !== 0 && GM.IsAlive) {
var projColor = ColorWithAlpha(GM.Pc.Cur.color, 0.1);
for (var k = 0; k < GM.Pc.Cur.UO.arr.length; k++) {
drawL = (GM.Pc.Cur.x + GM.Pc.Cur.UO.arr[k].x) * Page.unitSize + 1;
drawT = (GM.Pc.Cur.y + GM.Pc.Cur.UO.arr[k].y) * Page.unitSize + 1;
Page.ctx.fillStyle = GM.Pc.Cur.color;
Page.ctx.fillRect(drawL, drawT, uDrawSize, uDrawSize);
// also draw the projection (if one exists)
if (GM.IsAlive && GM.Pc.ProjY !== 0) {
drawT += GM.Pc.ProjY * Page.unitSize;
Page.ctx.fillStyle = projColor;
Page.ctx.fillRect(drawL, drawT, uDrawSize, uDrawSize);
}
}
}
// if the player is dead, draw the game over text
if (!GM.IsAlive) {
DrawText("GAME OVER", 'rgb(255,255,255)', '500',
'center', uDrawSize, this.W / 2, this.H / 4);
}
});
Page.UpcomingA = new DrawAreaObj(10.5, 2.6, 2.5, 2.5, function () {
var uDrawSize = Math.floor(Page.unitSize / 2),
pcA = GM.Pc.Upcoming[0];
// next box background
Page.ctx.fillStyle = 'rgb(28,30,34)';
Page.ctx.fillRect(this.left, this.top, this.W, this.H);
// draw the upcoming piece (if one exists)
if (pcA !== 0) {
Page.ctx.fillStyle = pcA.color;
var totalL = 0,
totalT = 0,
countedL = [],
countedT = [];
// calculate average positions of units in order to center
for (var i = 0; i < pcA.UO.arr.length; i++) {
var curX = pcA.UO.arr[i].x,
curY = pcA.UO.arr[i].y;
if (countedL.indexOf(curX) < 0) {
countedL.push(curX);
totalL += curX;
}
if (countedT.indexOf(curY) < 0) {
countedT.push(curY);
totalT += curY;
}
}
var avgL = uDrawSize * (totalL / countedL.length + 0.5),
avgT = uDrawSize * (totalT / countedT.length + 0.5),
offsetL = this.left + this.W / 2,
offsetT = this.top + this.H / 2;
console.log(avgL + ", " + avgT);
// now draw the upcoming piece, using avg vars to center
for (var j = 0; j < pcA.UO.arr.length; j++) {
var drawL = Math.floor(offsetL - avgL + pcA.UO.arr[j].x * uDrawSize),
drawT = Math.floor(offsetT - avgT + pcA.UO.arr[j].y * uDrawSize);
Page.ctx.fillRect(drawL, drawT, uDrawSize - 1, uDrawSize - 1);
}
}
});
Page.UpcomingB = new DrawAreaObj(10.5, 5.2, 2.5, 2.5, function () {
var uDrawSize = Math.floor(Page.unitSize / 2),
pcB = GM.Pc.Upcoming[1];
// next box background
Page.ctx.fillStyle = 'rgb(28,30,34)';
Page.ctx.fillRect(this.left, this.top, this.W, this.H);
// draw the upcoming piece (if one exists)
if (pcB !== 0) {
Page.ctx.fillStyle = pcB.color;
var totalL = 0,
totalT = 0,
countedL = [],
countedT = [];
// calculate average positions of units in order to center
for (var i = 0; i < pcB.UO.arr.length; i++) {
var curX = pcB.UO.arr[i].x,
curY = pcB.UO.arr[i].y;
if (countedL.indexOf(curX) < 0) {
countedL.push(curX);
totalL += curX;
}
if (countedT.indexOf(curY) < 0) {
countedT.push(curY);
totalT += curY;
}
}
var avgL = uDrawSize * (totalL / countedL.length + 0.5),
avgT = uDrawSize * (totalT / countedT.length + 0.5),
offsetL = this.left + this.W / 2,
offsetT = this.top + this.H / 2;
console.log(avgL + ", " + avgT);
// now draw the upcoming piece, using avg vars to center
for (var j = 0; j < pcB.UO.arr.length; j++) {
var drawL = Math.floor(offsetL - avgL + pcB.UO.arr[j].x * uDrawSize),
drawT = Math.floor(offsetT - avgT + pcB.UO.arr[j].y * uDrawSize);
Page.ctx.fillRect(drawL, drawT, uDrawSize - 1, uDrawSize - 1);
}
}
});
Page.UpcomingC = new DrawAreaObj(10.5, 7.8, 2.5, 2.5, function () {
var uDrawSize = Math.floor(Page.unitSize / 2),
pcC = GM.Pc.Upcoming[2];
// next box background
Page.ctx.fillStyle = 'rgb(28,30,34)';
Page.ctx.fillRect(this.left, this.top, this.W, this.H);
// draw the upcoming piece (if one exists)
if (pcC !== 0) {
Page.ctx.fillStyle = pcC.color;
var totalL = 0,
totalT = 0,
countedL = [],
countedT = [];
// calculate average positions of units in order to center
for (var i = 0; i < pcC.UO.arr.length; i++) {
var curX = pcC.UO.arr[i].x,
curY = pcC.UO.arr[i].y;
if (countedL.indexOf(curX) < 0) {
countedL.push(curX);
totalL += curX;
}
if (countedT.indexOf(curY) < 0) {
countedT.push(curY);
totalT += curY;
}
}
var avgL = uDrawSize * (totalL / countedL.length + 0.5),
avgT = uDrawSize * (totalT / countedT.length + 0.5),
offsetL = this.left + this.W / 2,
offsetT = this.top + this.H / 2;
console.log(avgL + ", " + avgT);
// now draw the upcoming piece, using avg vars to center
for (var j = 0; j < pcC.UO.arr.length; j++) {
var drawL = Math.floor(offsetL - avgL + pcC.UO.arr[j].x * uDrawSize),
drawT = Math.floor(offsetT - avgT + pcC.UO.arr[j].y * uDrawSize);
Page.ctx.fillRect(drawL, drawT, uDrawSize - 1, uDrawSize - 1);
}
}
});
Page.ScoreBarHigh = new DrawAreaObj(10.5, 0, 4.5, 1, function () {
// draw the score area back bar
Page.ctx.fillStyle = 'rgb(28,30,34)';
Page.ctx.fillRect(this.left, this.top, this.W, this.H);
// Draw the trophy symbol
var miniUnit, left, top, width, height;
miniUnit = Page.unitSize * 0.01;
Page.ctx.fillStyle = 'rgb(255,232,96)';
// trophy base
left = Math.floor(this.left + miniUnit * 33);
top = Math.floor(this.top + this.H - miniUnit * 28);
width = Math.floor(miniUnit * 30);
height = Math.floor(miniUnit * 12);
Page.ctx.fillRect(left, top, width, height);
// trophy trunk
left = Math.floor(this.left + miniUnit * 42);
top = Math.floor(this.top + this.H - miniUnit * 50);
width = Math.floor(miniUnit * 12);
height = Math.floor(miniUnit * 32);
Page.ctx.fillRect(left, top, width, height);
// trophy bowl
left = Math.floor(this.left + miniUnit * 48);
top = Math.floor(this.top + this.H - miniUnit * 68);
Page.ctx.arc(left, top, miniUnit * 24, 0, Math.PI);
Page.ctx.fill();
// draw the player's current score
text = ("00000000" + GM.ScoreHigh).slice(-7);
left = this.left + this.W - 4;
top = this.top + Page.unitSize * 0.8;
size = Math.floor(Page.unitSize * 0.8) + 0.5;
DrawText(text, 'rgb(255,232,96)', '500', 'right', size, left, top);
});
Page.ScoreBarCur = new DrawAreaObj(10.5, 1.1, 4.5, 1, function () {
// draw the score area back bar
Page.ctx.fillStyle = 'rgb(28,30,34)';
Page.ctx.fillRect(this.left, this.top, this.W, this.H);
// draw the player's current level
var text, left, top, size, miniUnit;
miniUnit = Page.unitSize * 0.01;
text = ('00' + GM.Level).slice(-2);
left = this.left + Math.floor(miniUnit * 50);
top = this.top + Page.unitSize * 0.8;
size = Math.floor(Page.unitSize * 0.5);
DrawText(text, 'rgb(128,128,128)', '900', 'center', size, left, top);
// draw the player's current score
text = ("00000000" + GM.ScoreCur).slice(-7);
left = this.left + this.W - 4;
top = this.top + Page.unitSize * 0.8;
size = Math.floor(Page.unitSize * 0.8) + 0.5;
DrawText(text, 'rgb(255,255,255)', '500', 'right', size, left, top);
});
//--------------------------------------------------//
// GAME MANAGER OBJECT & LOGIC //
//--------------------------------------------------//
var GM = {
//-- VARS ---------*/
// timers
TimeCur: 0, TimeEvent: 0, TickRate: 0,
// player status & score
IsAlive: 0, Level: 0, PiecesRemaining: 0,
// score count and current piece score modifiers
ScoreHigh: 0, ScoreCur: 0, ScoreBonus: 0, DifficultFlag: 0,
// array of grid squares
StaticUnits: [],
/*-- FCNS ---------*/
// Set up intial game var values
Initialize: function () {
// reset current piece vars
this.Pc.Next = this.Pc.Cur = this.Pc.ProjY = 0;
// populate the GM's static unit array with 0's (empty)
for (var i = 0; i < 10; i++) {
this.StaticUnits[i] = [];
for (var j = 0; j < 20; j++) {
this.StaticUnits[i][j] = 0;
}
}
// reset timer
this.TimeCur = this.TimeEvent = 0;
this.TickRate = 500;
// set up level values for level 1
this.PiecesRemaining = 10;
this.Level = 1;
// reset the score and set player to alive
this.ScoreCur = 0;
this.IsAlive = true;
},
// updates time each frame and executing logic if a tick has passed
Update: function () {
this.TimeCur = new Date().getTime();
if (this.TimeCur >= this.TimeEvent) {
if (GM.Pc.Cur === 0 && this.IsAlive) {
this.Pc.Generate();
}
else {
this.Pc.DoGravity();
this.Pc.ProjY = this.Pc.TryProject();
Page.Game.IsDirty = true;
}
this.RefreshTimer();
}
},
// reset the tick timer (generates a new TimeEvent target)
RefreshTimer: function () {
this.TimeEvent = new Date().getTime() + this.TickRate;
},
// called when a piece is spawned, advances level if needed
PieceSpawned: function () {
this.PiecesRemaining--;
if (this.PiecesRemaining <= 0) {
this.AdvanceLevel();
}
},
// advance level, recalculate TickRate, reset pieces remaining
AdvanceLevel: function () {
this.Level++;
this.TickRate = Math.floor(555 * Math.exp(this.Level / -10));
this.PiecesRemaining = Math.floor((5000 / this.TickRate));
Page.ScoreBarCur.IsDirty = true;
},
// check specified rows to see if any can be cleared
CheckUnits: function (checkRowsRaw) {
var scoreMult = 0,
pieceScore = 0,
checkRows = [];
// add the scoreBonus for dropping
if (this.ScoreBonus > 0) {
pieceScore += this.ScoreBonus;
}
// sort the rows
for (var a = 0; a < 20; a++) {
if (checkRowsRaw.indexOf(a) >= 0) {
checkRows.push(a);
}
}
for (var i = 0; i < checkRows.length; i++) {
var hasGap = false,
checkIndex = checkRows[i];
for (var j = 0; j < GM.StaticUnits.length; j++) {
if (GM.StaticUnits[j][checkIndex] === 0) {
hasGap = true;
break;
}
}
if (hasGap === false) {
for (var k = 0; k < GM.StaticUnits.length; k++) {
GM.StaticUnits[k].splice(checkIndex, 1);
GM.StaticUnits[k].unshift(0);
}
pieceScore += 100 + 200 * scoreMult;
if (scoreMult > 2) {
pieceScore += 100;
}
scoreMult++;
}
}
if (this.DifficultFlag === 1) {
pieceScore = Math.floor(pieceScore * 1.5);
this.DifficultFlag = 0;
}
if (pieceScore > 0) {
this.ScoreCur += pieceScore;
Page.ScoreBarCur.IsDirty = true;
this.ScoreBonus = 0;
if (scoreMult > 3) {
this.DifficultFlag = 1;
}
}
},
GameOver: function () {
Page.Game.IsDirty = Page.ScoreBarCur.IsDirty = true;
if (this.ScoreCur > this.ScoreHigh) {
this.ScoreHigh = this.ScoreCur;
Page.ScoreBarHigh.IsDirty = true;
console.log(this.ScoreHigh);
}
this.IsAlive = false;
}
};
//--------------------------------------------------//
// PIECE OBJECT BUILDER //
//--------------------------------------------------//
// PcObj is used to create new piece object instances based on the
// passed in parameters. PcObj is called by predefined templates
GM.PcObj = function (color, rotCount, units) {
this.x = 5;
this.y = 0;
this.color = color;
this.UO = {};
// rotate this piece by advancing to next unit obj of linked list
this.Rotate = function () {
this.UO = this.UO.nextUO;
};
// set up the piece unit object linked list to define rotations
this.SetUO = function (rotCount, units) {
var linkedListUO = [];
linkedListUO[0] = { nextUO: 0, arr: [] };
linkedListUO[0].arr = units;
for (var i = 0; i < rotCount; i++) {
var nextI = (i + 1 < rotCount) ? i + 1 : 0;
linkedListUO[i] = { nextUO: 0, arr: [] };
if (i > 0) {
linkedListUO[i - 1].nextUO = linkedListUO[i];
}
for (var j = 0; j < units.length; j++) {
var unX,
unY;
if (i === 0) {
unX = units[j].x;
unY = units[j].y;
}
else {
unX = linkedListUO[i - 1].arr[j].y * -1;
unY = linkedListUO[i - 1].arr[j].x;
}
linkedListUO[i].arr[j] = { x: unX, y: unY };
}
}
linkedListUO[rotCount - 1].nextUO = linkedListUO[0];
this.UO = linkedListUO[0];
};
this.SetUO(rotCount, units);
};
//--------------------------------------------------//
// PIECE TYPE TEMPLATES //
//--------------------------------------------------//
// Templates create a new piece object instance based on
// their color, rotation count, and unit block definitions.
// O - Square piece definition
GM.O = function () {
return new GM.PcObj('rgb(255,232,51)', 1,
[{ x: -1, y: 0 },
{ x: 0, y: 0 },
{ x: -1, y: 1 },
{ x: 0, y: 1 }]);
};
// I - Line piece definition
GM.I = function () {
return new GM.PcObj('rgb(51,255,209)', 2,
[{ x: -2, y: 0 },
{ x: -1, y: 0 },
{ x: 0, y: 0 },
{ x: 1, y: 0 }]);
};
// S - Right facing zigzag piece definition
GM.S = function () {
return new GM.PcObj('rgb(106,255,51)', 2,
[{ x: 0, y: 0 },
{ x: 1, y: 0 },
{ x: -1, y: 1 },
{ x: 0, y: 1 }]);
};
// Z - Left facing zigzag piece definition
GM.Z = function () {
return new GM.PcObj('rgb(255,51,83)', 2,
[{ x: -1, y: 0 },
{ x: 0, y: 0 },
{ x: 0, y: 1 },
{ x: 1, y: 1 }]);
};
// L - Right facing angle piece definition
GM.L = function () {
return new GM.PcObj('rgb(255,129,51)', 4,
[{ x: -1, y: 0 },
{ x: 0, y: 0 },
{ x: 1, y: 0 },
{ x: -1, y: -1 }]);
};
// J - Left facing angle piece definition
GM.J = function () {
return new GM.PcObj('rgb(64,100,255)', 4,
[{ x: -1, y: 0 },
{ x: 0, y: 0 },
{ x: 1, y: 0 },
{ x: 1, y: -1 }]);
};
// T - Hat shaped piece definition
GM.T = function () {
return new GM.PcObj('rgb(160,62,255)', 4,
[{ x: -1, y: 0 },
{ x: 0, y: 0 },
{ x: 1, y: 0 },
{ x: 0, y: -1 }]);
};
//--------------------------------------------------//
// ACTIVE PIECE CONTROLLER //
//--------------------------------------------------//
// Controls the generation, movement, and placement of piece
// objects. Monitors the current piece and upcoming piece
GM.Pc = {
//-- VARS ---------*/
// current piece, projected Y pos of cur piece
Cur: 0, ProjY: 0,
// upcoming pieces
Upcoming: [0, 0, 0],
//-- FCNS ---------*/
// push upcoming piece to current & randomize new upcoming piece
Generate: function () {
// push upcoming piece to current and push down other upcomings
this.Cur = this.Upcoming[0];
this.Upcoming[0] = this.Upcoming[1];
this.Upcoming[1] = this.Upcoming[2];
// check if the player lost
if (this.Cur !== 0) {
var spawnCollisions = this.CheckCollisions(0, 0, 0);
if (spawnCollisions > 0) {
GM.GameOver();
this.Freeze();
}
}
// if player is alive, generate random upcoming piece
if (GM.IsAlive !== 0) {
var randInt = Math.floor(Math.random() * 7);
switch (randInt) {
case 0: this.Upcoming[2] = GM.O(); break;
case 1: this.Upcoming[2] = GM.I(); break;
case 2: this.Upcoming[2] = GM.S(); break;
case 3: this.Upcoming[2] = GM.Z(); break;
case 4: this.Upcoming[2] = GM.L(); break;
case 5: this.Upcoming[2] = GM.J(); break;
case 6: this.Upcoming[2] = GM.T(); break;
default: break;
}
// if a current piece was set, inform the GM
if (this.Cur !== 0) {
GM.PieceSpawned();
Page.Game.IsDirty = true;
}
Page.UpcomingA.IsDirty = Page.UpcomingB.IsDirty =
Page.UpcomingC.IsDirty = true;
}
},
// freeze the current piece's position and rotation
Freeze: function () {
if (GM.IsAlive) {
var affectedRows = [];
for (var i = 0; i < this.Cur.UO.arr.length; i++) {
var staticX = this.Cur.x + this.Cur.UO.arr[i].x,
staticY = this.Cur.y + this.Cur.UO.arr[i].y;
if (staticY >= 0 && staticY <= GM.StaticUnits[0].length) {
GM.StaticUnits[staticX][staticY] = this.Cur.color;
}
if (affectedRows.indexOf(staticY) < 0) {
affectedRows.push(staticY);
}
}
GM.CheckUnits(affectedRows);
this.Generate();
}
},
// apply gravity to the current piece, checking for collisions
DoGravity: function () {
if (this.Cur !== 0) {
var collisions = this.CheckCollisions(0, 0, 1);
if (collisions === 0) {
this.Cur.y++;
}
else {
this.Freeze();
}
}
GM.RefreshTimer();
},
// attempt to rotate the current piece, returns bool
TryRotate: function () {
if (this.Cur !== 0) {
var collisions = this.CheckCollisions(1, 0, 0);
if (collisions === 0) {
this.Cur.Rotate();
return true;
}
}
return false;
},
// attempt to move current piece base on given XY, returns bool
TryMove: function (moveX, moveY) {
if (this.Cur !== 0) {
var collisions = this.CheckCollisions(0, moveX, moveY);
if (collisions === 0) {
this.Cur.x += moveX;
this.Cur.y += moveY;
if (moveY > 0) {
GM.RefreshTimer();
GM.ScoreBonus++;
}
return true;
}
}
return false;
},
// attempt to drop the current piece until it collides, returns bool
TryDrop: function () {
var squaresDropped = 0;
if (this.Cur !== 0) {
while (this.TryMove(0, 1) === true && squaresDropped < 22) {
squaresDropped++;
}
}
if (squaresDropped > 0) {
GM.ScoreBonus += 2 * squaresDropped;
this.Freeze();
return true;
}
else {
return false;
}
},
// attempt to find (and return) projected drop point of current piece
TryProject: function () {
var squaresDropped = 0;
if (this.Cur !== 0) {
while (this.CheckCollisions(0, 0, squaresDropped) === 0 &&
squaresDropped < 22) {
squaresDropped++;
}
}
return squaresDropped - 1;
},
// return collision count OR -1 if test piece out of bounds
CheckCollisions: function (doRot, offsetX, offsetY) {
var unitArr,
collisionCount = 0;
if (doRot === 1) {
unitArr = this.Cur.UO.nextUO.arr;
}
else {
unitArr = this.Cur.UO.arr;
}
for (var i = 0; i < unitArr.length; i++) {
var testX = this.Cur.x + unitArr[i].x + offsetX,
testY = this.Cur.y + unitArr[i].y + offsetY,
limitX = GM.StaticUnits.length,
limitY = GM.StaticUnits[0].length;
if (testX < 0 || testX >= limitX || testY >= limitY) {
return -1;
}
else if (testY > 0) {
if (GM.StaticUnits[testX][testY] !== 0) {
collisionCount++;
}
}
}
return collisionCount;
}
};
//--------------------------------------------------//
// EVENT LISTENERS //
//--------------------------------------------------//
// Event for keyboard calls the corresponding manipulation functions
// in GM.Pc based on user inputs. If manipulation is successful,
// the page is marked as dirty.
document.addEventListener('keydown', function (evt) {
var key = event.keyCode || event.which;
if (GM.IsAlive) {
switch (key) {
// Up arrow OR W = rotate
case 38:
case 87:
Page.Game.IsDirty = GM.Pc.TryRotate();
break;
// Left arrow OR A = move left
case 37:
case 65:
Page.Game.IsDirty = GM.Pc.TryMove(-1, 0);
break;
// Right arrow OR D = move right
case 39:
case 68:
Page.Game.IsDirty = GM.Pc.TryMove(1, 0);
break;
// Down arrow OR S = move down
case 40:
case 83:
Page.Game.IsDirty = GM.Pc.TryMove(0, 1);
break;
// Spacebar to drop the current piece
case 32:
Page.Game.IsDirty = GM.Pc.TryDrop();
break;
default: break;
}
//if board was dirtied, cast fresh projection for current piece
if (Page.Game.IsDirty) {
GM.Pc.ProjY = GM.Pc.TryProject();
}
}
// if player not alive, reset the game
else {
Init();
}
}, false);
// Window resize event calls Page function to update the canvas
// size/position, area bounds within the canvas, and the unitSize
window.onresize = function (event) {
Page.WindowChanged();
};
//--------------------------------------------------//
// INITIALAZATION AND GAME LOOP //
//--------------------------------------------------//
// Called on page load / game reset, Init fcn initializes
// the Page and GM objects, then starts the main game loop.
function Init() {
// initialize the page object
Page.Initialize();
// initialize the GM object
GM.Initialize();
}
Init();
// Main game loop. Updates GM object to check if tick can be
// performed. Then, if the page is dirty, performs a Draw.
function Loop() {
// always update Page
Page.Update();
// only need to update GM if the player is alive
if (GM.IsAlive) {
GM.Update();
}
window.requestAnimationFrame(Loop);
}
Loop();
//--------------------------------------------------//
// HELPER FUNCTIONS //
//--------------------------------------------------//
function DrawText(text, color, weight, alignment, size, left, top) {
Page.ctx.font = weight + ' ' + size + 'px "Jura", sans-serif';
Page.ctx.textAlign = alignment;
Page.ctx.fillStyle = color;
Page.ctx.fillText(text, left, top);
}
function ColorWithAlpha(color, alpha) {
var retColor = 'rgba' + color.substring(3, color.length - 1);
retColor += ',' + alpha + ')';
return retColor;
}Output Till Now
Written by: Piyush Patil
Code Credits: @REast
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖
