Skip to content

Changed some syntax #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Changed some syntax #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9cefbaa
changed functions to arrow functions
amenline Jun 14, 2019
dc993c5
changed object to ES6 object syntax
amenline Jun 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<html>
<!DOCTYPE html>
<head>
<title>Tetris Game JS</title>
<style>
Expand Down
302 changes: 149 additions & 153 deletions tetris.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -27,7 +29,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]);
Expand All @@ -51,194 +53,186 @@ 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]);
}

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;

}

// CONTROL the piece
let p = randomPiece();

document.addEventListener("keydown",CONTROL);
// CONTROL the piece

function CONTROL(event){
const CONTROL = (event) => {
if(event.keyCode == 37){
p.moveLeft();
dropStart = Date.now();
Expand All @@ -253,11 +247,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){
Expand Down