From 9cefbaaa122a456ce475445c29b18baddc19cd1f Mon Sep 17 00:00:00 2001
From: amenline <amenline.07@gmail.com>
Date: Fri, 14 Jun 2019 13:04:18 +0000
Subject: [PATCH 1/2] changed functions to arrow functions

---
 index.html |  2 +-
 tetris.js  | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/index.html b/index.html
index 380b89c..6a4d304 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<html>
+<!DOCTYPE html>
 <head>
     <title>Tetris Game JS</title>
     <style>
diff --git a/tetris.js b/tetris.js
index 9123f45..38f5e38 100644
--- a/tetris.js
+++ b/tetris.js
@@ -27,7 +27,7 @@ for( r = 0; r <ROW; r++){
 }
 
 // draw the board
-function drawBoard(){
+const drawBoard = () => {
     for( r = 0; r <ROW; r++){
         for(c = 0; c < COL; c++){
             drawSquare(c,r,board[r][c]);
@@ -51,7 +51,7 @@ const PIECES = [
 
 // generate random pieces
 
-function randomPiece(){
+const randomPiece = () => {
     let r = randomN = Math.floor(Math.random() * PIECES.length) // 0 -> 6
     return new Piece( PIECES[r][0],PIECES[r][1]);
 }
@@ -236,9 +236,7 @@ Piece.prototype.collision = function(x,y,piece){
 
 // CONTROL the piece
 
-document.addEventListener("keydown",CONTROL);
-
-function CONTROL(event){
+const CONTROL = (event) => {
     if(event.keyCode == 37){
         p.moveLeft();
         dropStart = Date.now();
@@ -253,11 +251,13 @@ function CONTROL(event){
     }
 }
 
+document.addEventListener("keydown",CONTROL);
+
 // drop the piece every 1sec
 
 let dropStart = Date.now();
 let gameOver = false;
-function drop(){
+const drop = () => {
     let now = Date.now();
     let delta = now - dropStart;
     if(delta > 1000){

From dc993c540276e1c94ee358a6511a2e7a6fac0f8e Mon Sep 17 00:00:00 2001
From: amenline <amenline.07@gmail.com>
Date: Sat, 15 Jun 2019 22:54:11 +0000
Subject: [PATCH 2/2] changed object to ES6 object syntax

---
 tetris.js | 290 +++++++++++++++++++++++++++---------------------------
 1 file changed, 143 insertions(+), 147 deletions(-)

diff --git a/tetris.js b/tetris.js
index 38f5e38..cc4f32f 100644
--- a/tetris.js
+++ b/tetris.js
@@ -2,13 +2,15 @@ const cvs = document.getElementById("tetris");
 const ctx = cvs.getContext("2d");
 const scoreElement = document.getElementById("score");
 
+let score = 0;
+
 const ROW = 20;
 const COL = COLUMN = 10;
 const SQ = squareSize = 20;
 const VACANT = "WHITE"; // color of an empty square
 
 // draw a square
-function drawSquare(x,y,color){
+const drawSquare = (x,y,color) => {
     ctx.fillStyle = color;
     ctx.fillRect(x*SQ,y*SQ,SQ,SQ);
 
@@ -56,184 +58,178 @@ const randomPiece = () => {
     return new Piece( PIECES[r][0],PIECES[r][1]);
 }
 
-let p = randomPiece();
-
 // The Object Piece
 
-function Piece(tetromino,color){
-    this.tetromino = tetromino;
-    this.color = color;
-    
-    this.tetrominoN = 0; // we start from the first pattern
-    this.activeTetromino = this.tetromino[this.tetrominoN];
-    
-    // we need to control the pieces
-    this.x = 3;
-    this.y = -2;
-}
-
-// fill function
+class Piece {
+    constructor(tetromino,color) {
+        this.tetromino = tetromino;
+        this.color = color;
+        
+        this.tetrominoN = 0; // we start from the first pattern
+        this.activeTetromino = this.tetromino[this.tetrominoN];
+        
+        // we need to control the pieces
+        this.x = 3;
+        this.y = -2;
+    }
 
-Piece.prototype.fill = function(color){
-    for( r = 0; r < this.activeTetromino.length; r++){
-        for(c = 0; c < this.activeTetromino.length; c++){
-            // we draw only occupied squares
-            if( this.activeTetromino[r][c]){
-                drawSquare(this.x + c,this.y + r, color);
+    // fill method
+    fill(color) {
+        for( r = 0; r < this.activeTetromino.length; r++){
+            for(c = 0; c < this.activeTetromino.length; c++){
+                // we draw only occupied squares
+                if( this.activeTetromino[r][c]){
+                    drawSquare(this.x + c,this.y + r, color);
+                }
             }
         }
     }
-}
-
-// draw a piece to the board
-
-Piece.prototype.draw = function(){
-    this.fill(this.color);
-}
 
-// undraw a piece
-
-
-Piece.prototype.unDraw = function(){
-    this.fill(VACANT);
-}
-
-// move Down the piece
-
-Piece.prototype.moveDown = function(){
-    if(!this.collision(0,1,this.activeTetromino)){
-        this.unDraw();
-        this.y++;
-        this.draw();
-    }else{
-        // we lock the piece and generate a new one
-        this.lock();
-        p = randomPiece();
+    // draw a piece to the board
+    draw() {
+        this.fill(this.color);
     }
-    
-}
 
-// move Right the piece
-Piece.prototype.moveRight = function(){
-    if(!this.collision(1,0,this.activeTetromino)){
-        this.unDraw();
-        this.x++;
-        this.draw();
+    // undraw a piece
+    unDraw() {
+        this.fill(VACANT);
     }
-}
 
-// move Left the piece
-Piece.prototype.moveLeft = function(){
-    if(!this.collision(-1,0,this.activeTetromino)){
-        this.unDraw();
-        this.x--;
-        this.draw();
+    // move Down the piece
+    moveDown() {
+        if(!this.collision(0,1,this.activeTetromino)){
+            this.unDraw();
+            this.y++;
+            this.draw();
+        }else{
+            // we lock the piece and generate a new one
+            this.lock();
+            p = randomPiece();
+        }   
     }
-}
 
-// rotate the piece
-Piece.prototype.rotate = function(){
-    let nextPattern = this.tetromino[(this.tetrominoN + 1)%this.tetromino.length];
-    let kick = 0;
-    
-    if(this.collision(0,0,nextPattern)){
-        if(this.x > COL/2){
-            // it's the right wall
-            kick = -1; // we need to move the piece to the left
-        }else{
-            // it's the left wall
-            kick = 1; // we need to move the piece to the right
+    // move Right the piece
+    moveRight() {
+        if(!this.collision(1,0,this.activeTetromino)){
+            this.unDraw();
+            this.x++;
+            this.draw();
         }
     }
-    
-    if(!this.collision(kick,0,nextPattern)){
-        this.unDraw();
-        this.x += kick;
-        this.tetrominoN = (this.tetrominoN + 1)%this.tetromino.length; // (0+1)%4 => 1
-        this.activeTetromino = this.tetromino[this.tetrominoN];
-        this.draw();
-    }
-}
 
-let score = 0;
+    // move Left the piece
+    moveLeft() {
+        if(!this.collision(-1,0,this.activeTetromino)){
+            this.unDraw();
+            this.x--;
+            this.draw();
+        }
+    }
 
-Piece.prototype.lock = function(){
-    for( r = 0; r < this.activeTetromino.length; r++){
-        for(c = 0; c < this.activeTetromino.length; c++){
-            // we skip the vacant squares
-            if( !this.activeTetromino[r][c]){
-                continue;
+    // rotate the piece
+    rotate() {
+        let nextPattern = this.tetromino[(this.tetrominoN + 1)%this.tetromino.length];
+        let kick = 0;
+        
+        if(this.collision(0,0,nextPattern)){
+            if(this.x > COL/2){
+                // it's the right wall
+                kick = -1; // we need to move the piece to the left
+            }else{
+                // it's the left wall
+                kick = 1; // we need to move the piece to the right
             }
-            // pieces to lock on top = game over
-            if(this.y + r < 0){
-                alert("Game Over");
-                // stop request animation frame
-                gameOver = true;
-                break;
-            }
-            // we lock the piece
-            board[this.y+r][this.x+c] = this.color;
         }
-    }
-    // remove full rows
-    for(r = 0; r < ROW; r++){
-        let isRowFull = true;
-        for( c = 0; c < COL; c++){
-            isRowFull = isRowFull && (board[r][c] != VACANT);
+        
+        if(!this.collision(kick,0,nextPattern)){
+            this.unDraw();
+            this.x += kick;
+            this.tetrominoN = (this.tetrominoN + 1)%this.tetromino.length; // (0+1)%4 => 1
+            this.activeTetromino = this.tetromino[this.tetrominoN];
+            this.draw();
         }
-        if(isRowFull){
-            // if the row is full
-            // we move down all the rows above it
-            for( y = r; y > 1; y--){
-                for( c = 0; c < COL; c++){
-                    board[y][c] = board[y-1][c];
+    }
+
+    lock() {
+        for( r = 0; r < this.activeTetromino.length; r++){
+            for(c = 0; c < this.activeTetromino.length; c++){
+                // we skip the vacant squares
+                if( !this.activeTetromino[r][c]){
+                    continue;
                 }
+                // pieces to lock on top = game over
+                if(this.y + r < 0){
+                    alert("Game Over");
+                    // stop request animation frame
+                    gameOver = true;
+                    break;
+                }
+                // we lock the piece
+                board[this.y+r][this.x+c] = this.color;
             }
-            // the top row board[0][..] has no row above it
+        }
+        // remove full rows
+        for(r = 0; r < ROW; r++){
+            let isRowFull = true;
             for( c = 0; c < COL; c++){
-                board[0][c] = VACANT;
+                isRowFull = isRowFull && (board[r][c] != VACANT);
+            }
+            if(isRowFull){
+                // if the row is full
+                // we move down all the rows above it
+                for( this.y = r; this.y > 1; this.y--){
+                    for( c = 0; c < COL; c++){
+                        board[this.y][c] = board[this.y-1][c];
+                    }
+                }
+                // the top row board[0][..] has no row above it
+                for( c = 0; c < COL; c++){
+                    board[0][c] = VACANT;
+                }
+                // increment the score
+                score += 10;
             }
-            // increment the score
-            score += 10;
         }
+        // update the board
+        drawBoard();
+        
+        // update the score
+        scoreElement.innerHTML = score;
     }
-    // update the board
-    drawBoard();
-    
-    // update the score
-    scoreElement.innerHTML = score;
-}
-
-// collision fucntion
 
-Piece.prototype.collision = function(x,y,piece){
-    for( r = 0; r < piece.length; r++){
-        for(c = 0; c < piece.length; c++){
-            // if the square is empty, we skip it
-            if(!piece[r][c]){
-                continue;
-            }
-            // coordinates of the piece after movement
-            let newX = this.x + c + x;
-            let newY = this.y + r + y;
-            
-            // conditions
-            if(newX < 0 || newX >= COL || newY >= ROW){
-                return true;
-            }
-            // skip newY < 0; board[-1] will crush our game
-            if(newY < 0){
-                continue;
-            }
-            // check if there is a locked piece alrady in place
-            if( board[newY][newX] != VACANT){
-                return true;
+    // collision fucntion
+    collision(x,y,piece) {
+        for( r = 0; r < piece.length; r++){
+            for(c = 0; c < piece.length; c++){
+                // if the square is empty, we skip it
+                if(!piece[r][c]){
+                    continue;
+                }
+                // coordinates of the piece after movement
+                let newX = this.x + c + x;
+                let newY = this.y + r + y;
+                
+                // conditions
+                if(newX < 0 || newX >= COL || newY >= ROW){
+                    return true;
+                }
+                // skip newY < 0; board[-1] will crush our game
+                if(newY < 0){
+                    continue;
+                }
+                // check if there is a locked piece alrady in place
+                if( board[newY][newX] != VACANT){
+                    return true;
+                }
             }
         }
+        return false;
     }
-    return false;
+
 }
 
+let p = randomPiece();
+
 // CONTROL the piece
 
 const CONTROL = (event) => {
