var can; var c; var grid; var hand; var CELLWIDTH = 20; var XOFFSET; var YOFFSET; var frame; var score = 0; var pressed = false; var touchX; var touchY; document.addEventListener("touchstart", function(e) { try{ e.preventDefault(); }catch(Exception){ } pressed = true; touchX = e.pageX; touchY = e.pageY; if (touchX > can.width / 3 && touchX < can.width * 2 / 3 && touchY < can.height / 2) { hand.rotate(); if (hand.shouldPlace()) { for (var i = 0; i < 3; i++) { hand.rotate(); } hand.yOffset++; } } }); document.addEventListener("touchend", function(e) { pressed = false; }); document.addEventListener("keydown", function(e) { if (e.keyCode == 32) { hand.rotate(); if (hand.shouldPlace()) { for (var i = 0; i < 3; i++) { hand.rotate(); } hand.yOffset++; } } else if (e.keyCode == 37) { hand.xOffset--; if (hand.shouldPlace()) { hand.xOffset++; hand.yOffset++; } } else if (e.keyCode == 38) { for (var i = 0; i < 3; i++) { hand.rotate(); } if (hand.shouldPlace()) { hand.rotate(); hand.yOffset++; } } else if (e.keyCode == 39) { hand.xOffset++; if (hand.shouldPlace()) { hand.xOffset--; hand.yOffset++; } } else if (e.keyCode == 40) { hand.update(); if (hand.shouldPlace()) { grid = []; var row; for (var i = 0; i < 20; i++) { row = []; for (var j = 0; j < 11; j++) { row.push(null); } grid.push(row); } score = 0; } } }); window.onload = function() { can = document.getElementById("can"); can.width = window.innerWidth; can.height = window.innerHeight; c = can.getContext("2d"); grid = []; var row; for (var i = 0; i < 20; i++) { row = []; for (var j = 0; j < 11; j++) { row.push(null); } grid.push(row); } XOFFSET = (can.width - grid[0].length * CELLWIDTH) / 2; YOFFSET = (can.height - grid.length * CELLWIDTH) / 2; hand = new Hand(); hand.newHand(); frame = 0; animate() } function animate() { c.fillStyle = "#224466"; c.fillRect(0, 0, can.width, can.height); if(pressed && frame % 5 == 0){ if (touchX < can.width / 3) { hand.xOffset--; if (hand.shouldPlace()) { hand.xOffset++; hand.yOffset++; } } else if (touchX > can.width * 2 / 3) { hand.xOffset++; if (hand.shouldPlace()) { hand.xOffset--; hand.yOffset++; } } else if (touchY > can.height / 2) { hand.update(); if (hand.shouldPlace()) { grid = []; var row; for (var i = 0; i < 20; i++) { row = []; for (var j = 0; j < 11; j++) { row.push(null); } grid.push(row); } score = 0; } }/* else { hand.rotate(); if (hand.shouldPlace()) { for (var i = 0; i < 3; i++) { hand.rotate(); } hand.yOffset++; } }*/ } for (var i = 0; i < grid.length; i++) { for (var j = 0; j < grid[i].length; j++) { if (grid[i][j] != null) { c.fillStyle = grid[i][j]; } else { c.fillStyle = "rgba(0, 0, 0, 0.5)"; } c.fillRect(j * CELLWIDTH + XOFFSET, i * CELLWIDTH + YOFFSET, CELLWIDTH - 1, CELLWIDTH - 1); } } hand.show(c); hand.showGhostHand(c); if (frame++ % 45 == 0) { hand.update(); if (hand.shouldPlace()) { grid = []; var row; for (var i = 0; i < 20; i++) { row = []; for (var j = 0; j < 11; j++) { row.push(null); } grid.push(row); } score = 0; } } c.fillStyle = "rgba(255, 255, 255, 0.5)"; c.fillText(score, XOFFSET, YOFFSET); for (var i = grid.length - 1; i >= 0; i--) { var allTrue = true; for (var j = 0; j < grid[i].length; j++) { allTrue = allTrue && (grid[i][j] != null); } if (allTrue) { score += 100; grid.splice(i, 1); row = []; for (var j = 0; j < 11; j++) { row.push(null); } grid.unshift(row); } } requestAnimationFrame(animate); } function Hand() { this.xOffset = 0; this.yOffset = 0; this.holding = []; this.show = function(c) { for (var i = 0; i < this.holding.length; i++) { for (var j = 0; j < this.holding[i].length; j++) { if (this.holding[i][j] != null) { c.fillStyle = this.holding[i][j]; } else { c.fillStyle = "rgba(0, 0, 0, 0)"; } c.fillRect((j + this.xOffset) * CELLWIDTH + XOFFSET, (i + this.yOffset) * CELLWIDTH + YOFFSET, CELLWIDTH - 1, CELLWIDTH - 1); } } } this.showGhostHand = function(c){ var yOffset_ = this.yOffset; while(!this.shouldPlace()){ this.yOffset++; } for (var i = 0; i < this.holding.length; i++) { for (var j = 0; j < this.holding[i].length; j++) { if (this.holding[i][j] != null) { c.strokeStyle = this.holding[i][j]; } else { c.strokeStyle = "rgba(0, 0, 0, 0)"; } c.strokeRect((j + this.xOffset) * CELLWIDTH + XOFFSET, (i + this.yOffset) * CELLWIDTH + YOFFSET, CELLWIDTH - 1, CELLWIDTH - 1); } } this.yOffset = yOffset_; } this.update = function() { this.yOffset++; if (this.shouldPlace()) { this.place(); } } this.shouldPlace = function() { for (var i = 0; i < this.holding.length; i++) { for (var j = 0; j < this.holding[i].length; j++) { if (this.holding[i][j] != null) { if (i + this.yOffset < 0 || i + this.yOffset > grid.length - 1 || j + this.xOffset < 0 || j + this.xOffset > grid[0].length - 1) { this.yOffset--; return true; } if (grid[i + this.yOffset][j + this.xOffset] != null) { this.yOffset--; return true; } } } } return false; } this.place = function() { try { for (var i = 0; i < this.holding.length; i++) { for (var j = 0; j < this.holding[i].length; j++) { if (this.holding[i][j] != null) { grid[i + this.yOffset][j + this.xOffset] = this.holding[i][j]; } } } } catch (Exception) { console.log("error!!") } this.newHand(); } this.rotate = function() { var holding = []; var row = []; for (var i = 0; i < this.holding.length; i++) { row = []; for (var j = 0; j < this.holding[i].length; j++) { row.push(null); } holding.push(row); } for (var i = 0; i < this.holding.length; i++) { for (var j = 0; j < this.holding[i].length; j++) { holding[this.holding.length - j - 1][i] = this.holding[i][j]; } } this.holding = holding; } this.newHand = function() { this.xOffset = 3; this.yOffset = 0; this.holding = []; var color = "hsl(" + (parseInt(Math.random() * 60) * 60) + ", 100%, 70%)"; var chance = Math.random(); if (chance < 1 / 8) { this.holding = [ [null, null, null, null, null], [null, null, color, null, null], [null, color, color, color, null], [null, null, null, null, null], [null, null, null, null, null], ] } else if (chance < 2 / 8) { this.holding = [ [null, null, color, null], [null, color, color, null], [null, color, null, null], [null, null, null, null], ] } else if (chance < 3 / 8) { this.holding = [ [null, null, null, null, null], [null, null, color, null, null], [null, null, color, null, null], [null, null, color, null, null], [null, null, color, null, null], ] } else if (chance < 4 / 8) { this.holding = [ [null, null, null, null, null], [null, null, color, null, null], [null, color, color, color, null], [null, null, null, null, null], [null, null, null, null, null], ] } else if (chance < 5 / 8) { this.holding = [ [null, color, null, null], [null, color, color, null], [null, null, color, null], [null, null, null, null], ] } else if (chance < 6 / 8) { this.holding = [ [null, null, null, null], [null, color, color, null], [null, null, color, null], [null, null, color, null], ] } else if (chance < 7 / 8) { this.holding = [ [null, null, null, null], [null, color, color, null], [null, color, null, null], [null, color, null, null], ] } else { this.holding = [ [null, null, null, null], [null, color, color, null], [null, color, color, null], [null, null, null, null], ] } } }

Tetris || game