Tetris

2494 Andev.web

Open In Editor Publish Your Code Need a Website?

27 October 2023

Simple Tetris Game

HTML

CSS

JS

//  TODO:
//    * touch controls
//    * allow late piece rotation
//    * code cleanup

//--------------------------------------------------//
//    PAGE OBJECT & LOGIC                           //
//--------------------------------------------------//

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;
}

Simple Tetris Game

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS