diff --git a/index.html b/index.html
index 37d4af0..52e0407 100644
--- a/index.html
+++ b/index.html
@@ -68,7 +68,7 @@
// game constants
//-------------------------------------------------------------------------
- var KEY = { ESC: 27, SPACE: 32, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40 },
+ let KEY = { ESC: 27, SPACE: 32, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40 },
DIR = { UP: 0, RIGHT: 1, DOWN: 2, LEFT: 3, MIN: 0, MAX: 3 },
stats = new Stats(),
canvas = get('canvas'),
@@ -84,7 +84,7 @@
// game variables (initialized during reset)
//-------------------------------------------------------------------------
- var dx, dy, // pixel size of a single tetris block
+ let dx, dy, // pixel size of a single tetris block
blocks, // 2 dimensional array (nx*ny) representing tetris court - either empty block or occupied by a 'piece'
actions, // queue of user actions (inputs)
playing, // true|false - game is in progress
@@ -112,20 +112,20 @@
//
//-------------------------------------------------------------------------
- var i = { size: 4, blocks: [0x0F00, 0x2222, 0x00F0, 0x4444], color: 'cyan' };
- var j = { size: 3, blocks: [0x44C0, 0x8E00, 0x6440, 0x0E20], color: 'blue' };
- var l = { size: 3, blocks: [0x4460, 0x0E80, 0xC440, 0x2E00], color: 'orange' };
- var o = { size: 2, blocks: [0xCC00, 0xCC00, 0xCC00, 0xCC00], color: 'yellow' };
- var s = { size: 3, blocks: [0x06C0, 0x8C40, 0x6C00, 0x4620], color: 'green' };
- var t = { size: 3, blocks: [0x0E40, 0x4C40, 0x4E00, 0x4640], color: 'purple' };
- var z = { size: 3, blocks: [0x0C60, 0x4C80, 0xC600, 0x2640], color: 'red' };
+ let i = { size: 4, blocks: [0x0F00, 0x2222, 0x00F0, 0x4444], color: 'cyan' };
+ let j = { size: 3, blocks: [0x44C0, 0x8E00, 0x6440, 0x0E20], color: 'blue' };
+ let l = { size: 3, blocks: [0x4460, 0x0E80, 0xC440, 0x2E00], color: 'orange' };
+ let o = { size: 2, blocks: [0xCC00, 0xCC00, 0xCC00, 0xCC00], color: 'yellow' };
+ let s = { size: 3, blocks: [0x06C0, 0x8C40, 0x6C00, 0x4620], color: 'green' };
+ let t = { size: 3, blocks: [0x0E40, 0x4C40, 0x4E00, 0x4640], color: 'purple' };
+ let z = { size: 3, blocks: [0x0C60, 0x4C80, 0xC600, 0x2640], color: 'red' };
//------------------------------------------------
// do the bit manipulation and iterate through each
// occupied block (x,y) for a given piece
//------------------------------------------------
function eachblock(type, x, y, dir, fn) {
- var bit, result, row = 0, col = 0, blocks = type.blocks[dir];
+ let bit, result, row = 0, col = 0, blocks = type.blocks[dir];
for(bit = 0x8000 ; bit > 0 ; bit = bit >> 1) {
if (blocks & bit) {
fn(x + col, y + row);
@@ -141,7 +141,7 @@
// check if a piece can fit into a position in the grid
//-----------------------------------------------------
function occupied(type, x, y, dir) {
- var result = false
+ let result = false
eachblock(type, x, y, dir, function(x, y) {
if ((x < 0) || (x >= nx) || (y < 0) || (y >= ny) || getBlock(x,y))
result = true;
@@ -157,11 +157,11 @@
// start with 4 instances of each piece and
// pick randomly until the 'bag is empty'
//-----------------------------------------
- var pieces = [];
+ let pieces = [];
function randomPiece() {
if (pieces.length == 0)
pieces = [i,i,i,i,j,j,j,j,l,l,l,l,o,o,o,o,s,s,s,s,t,t,t,t,z,z,z,z];
- var type = pieces.splice(random(0, pieces.length-1), 1)[0];
+ let type = pieces.splice(random(0, pieces.length-1), 1)[0];
return { type: type, dir: DIR.UP, x: Math.round(random(0, nx - type.size)), y: 0 };
}
@@ -175,7 +175,7 @@
showStats(); // initialize FPS counter
addEvents(); // attach keydown and resize events
- var last = now = timestamp();
+ let last = now = timestamp();
function frame() {
now = timestamp();
update(Math.min(1, (now - last) / 1000.0)); // using requestAnimationFrame have to be able to handle large delta's caused when it 'hibernates' in a background or non-visible tab
@@ -213,7 +213,7 @@
}
function keydown(ev) {
- var handled = false;
+ let handled = false;
if (playing) {
switch(ev.keyCode) {
case KEY.LEFT: actions.push(DIR.LEFT); handled = true; break;
@@ -285,7 +285,7 @@
}
function move(dir) {
- var x = current.x, y = current.y;
+ let x = current.x, y = current.y;
switch(dir) {
case DIR.RIGHT: x = x + 1; break;
case DIR.LEFT: x = x - 1; break;
@@ -303,7 +303,7 @@
}
function rotate() {
- var newdir = (current.dir == DIR.MAX ? DIR.MIN : current.dir + 1);
+ let newdir = (current.dir == DIR.MAX ? DIR.MIN : current.dir + 1);
if (unoccupied(current.type, current.x, current.y, newdir)) {
current.dir = newdir;
invalidate();
@@ -331,7 +331,7 @@
}
function removeLines() {
- var x, y, complete, n = 0;
+ let x, y, complete, n = 0;
for(y = ny ; y > 0 ; --y) {
complete = true;
for(x = 0 ; x < nx ; ++x) {
@@ -351,7 +351,7 @@
}
function removeLine(n) {
- var x, y;
+ let x, y;
for(y = n ; y >= 0 ; --y) {
for(x = 0 ; x < nx ; ++x)
setBlock(x, y, (y == 0) ? null : getBlock(x, y-1));
@@ -362,7 +362,7 @@
// RENDERING
//-------------------------------------------------------------------------
- var invalid = {};
+ let invalid = {};
function invalidate() { invalid.court = true; }
function invalidateNext() { invalid.next = true; }
@@ -385,7 +385,7 @@
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (playing)
drawPiece(ctx, current.type, current.x, current.y, current.dir);
- var x, y, block;
+ let x, y, block;
for(y = 0 ; y < ny ; y++) {
for (x = 0 ; x < nx ; x++) {
if (block = getBlock(x,y))
@@ -399,7 +399,7 @@
function drawNext() {
if (invalid.next) {
- var padding = (nu - next.type.size) / 2; // half-arsed attempt at centering next piece display
+ let padding = (nu - next.type.size) / 2; // half-arsed attempt at centering next piece display
uctx.save();
uctx.translate(0.5, 0.5);
uctx.clearRect(0, 0, nu*dx, nu*dy);
diff --git a/stats.js b/stats.js
index 5d89bff..32ca53a 100644
--- a/stats.js
+++ b/stats.js
@@ -1,10 +1,24 @@
// stats.js r6 - http://github.com/mrdoob/stats.js
-var Stats=function(){function s(a,g,d){var f,c,e;for(c=0;c<30;c++)for(f=0;f<73;f++)e=(f+c*74)*4,a[e]=a[e+4],a[e+1]=a[e+5],a[e+2]=a[e+6];for(c=0;c<30;c++)e=(73+c*74)*4,c'+n+" MS ("+z+"-"+A+")";o.putImageData(B,0,0);F=j;if(j>
-v+1E3){l=Math.round(u*1E3/(j-v));w=Math.min(w,l);x=Math.max(x,l);s(y.data,Math.min(30,30-l/100*30),"fps");d.innerHTML=''+l+" FPS ("+w+"-"+x+")";m.putImageData(y,0,0);if(t==3)p=performance.memory.usedJSHeapSize*9.54E-7,C=Math.min(C,p),D=Math.max(D,p),s(E.data,Math.min(30,30-p/2),"mb"),i.innerHTML=''+Math.round(p)+" MB ("+Math.round(C)+"-"+Math.round(D)+")",q.putImageData(E,0,0);v=j;u=0}}}};
+var Stats = function () {
+ function s(a, g, d) { var f, c, e; for (c = 0; c < 30; c++)for (f = 0; f < 73; f++)e = (f + c * 74) * 4, a[e] = a[e + 4], a[e + 1] = a[e + 5], a[e + 2] = a[e + 6]; for (c = 0; c < 30; c++)e = (73 + c * 74) * 4, c < g ? (a[e] = b[d].bg.r, a[e + 1] = b[d].bg.g, a[e + 2] = b[d].bg.b) : (a[e] = b[d].fg.r, a[e + 1] = b[d].fg.g, a[e + 2] = b[d].fg.b) } var r = 0, t = 2, g, u = 0, j = (new Date).getTime(), F = j, v = j, l = 0, w = 1E3, x = 0, k, d, a, m, y, n = 0, z = 1E3, A = 0, f, c, o, B, p = 0, C = 1E3, D = 0, h, i, q, E, b = {
+ fps: { bg: { r: 16, g: 16, b: 48 }, fg: { r: 0, g: 255, b: 255 } }, ms: { bg: { r: 16, g: 48, b: 16 }, fg: { r: 0, g: 255, b: 0 } }, mb: {
+ bg: {
+ r: 48, g: 16,
+ b: 26
+ }, fg: { r: 255, g: 0, b: 128 }
+ }
+ }; g = document.createElement("div"); g.style.cursor = "pointer"; g.style.width = "80px"; g.style.opacity = "0.9"; g.style.zIndex = "10001"; g.addEventListener("click", function () { r++; r == t && (r = 0); k.style.display = "none"; f.style.display = "none"; h.style.display = "none"; switch (r) { case 0: k.style.display = "block"; break; case 1: f.style.display = "block"; break; case 2: h.style.display = "block" } }, !1); k = document.createElement("div"); k.style.backgroundColor = "rgb(" + Math.floor(b.fps.bg.r / 2) + "," + Math.floor(b.fps.bg.g /
+ 2) + "," + Math.floor(b.fps.bg.b / 2) + ")"; k.style.padding = "2px 0px 3px 0px"; g.appendChild(k); d = document.createElement("div"); d.style.fontFamily = "Helvetica, Arial, sans-serif"; d.style.textAlign = "left"; d.style.fontSize = "9px"; d.style.color = "rgb(" + b.fps.fg.r + "," + b.fps.fg.g + "," + b.fps.fg.b + ")"; d.style.margin = "0px 0px 1px 3px"; d.innerHTML = 'FPS'; k.appendChild(d); a = document.createElement("canvas"); a.width = 74; a.height = 30; a.style.display = "block"; a.style.marginLeft = "3px"; k.appendChild(a);
+ m = a.getContext("2d"); m.fillStyle = "rgb(" + b.fps.bg.r + "," + b.fps.bg.g + "," + b.fps.bg.b + ")"; m.fillRect(0, 0, a.width, a.height); y = m.getImageData(0, 0, a.width, a.height); f = document.createElement("div"); f.style.backgroundColor = "rgb(" + Math.floor(b.ms.bg.r / 2) + "," + Math.floor(b.ms.bg.g / 2) + "," + Math.floor(b.ms.bg.b / 2) + ")"; f.style.padding = "2px 0px 3px 0px"; f.style.display = "none"; g.appendChild(f); c = document.createElement("div"); c.style.fontFamily = "Helvetica, Arial, sans-serif"; c.style.textAlign = "left"; c.style.fontSize =
+ "9px"; c.style.color = "rgb(" + b.ms.fg.r + "," + b.ms.fg.g + "," + b.ms.fg.b + ")"; c.style.margin = "0px 0px 1px 3px"; c.innerHTML = 'MS'; f.appendChild(c); a = document.createElement("canvas"); a.width = 74; a.height = 30; a.style.display = "block"; a.style.marginLeft = "3px"; f.appendChild(a); o = a.getContext("2d"); o.fillStyle = "rgb(" + b.ms.bg.r + "," + b.ms.bg.g + "," + b.ms.bg.b + ")"; o.fillRect(0, 0, a.width, a.height); B = o.getImageData(0, 0, a.width, a.height); try {
+ performance && performance.memory && performance.memory.totalJSHeapSize &&
+ (t = 3)
+ } catch (G) { } h = document.createElement("div"); h.style.backgroundColor = "rgb(" + Math.floor(b.mb.bg.r / 2) + "," + Math.floor(b.mb.bg.g / 2) + "," + Math.floor(b.mb.bg.b / 2) + ")"; h.style.padding = "2px 0px 3px 0px"; h.style.display = "none"; g.appendChild(h); i = document.createElement("div"); i.style.fontFamily = "Helvetica, Arial, sans-serif"; i.style.textAlign = "left"; i.style.fontSize = "9px"; i.style.color = "rgb(" + b.mb.fg.r + "," + b.mb.fg.g + "," + b.mb.fg.b + ")"; i.style.margin = "0px 0px 1px 3px"; i.innerHTML = 'MB';
+ h.appendChild(i); a = document.createElement("canvas"); a.width = 74; a.height = 30; a.style.display = "block"; a.style.marginLeft = "3px"; h.appendChild(a); q = a.getContext("2d"); q.fillStyle = "#301010"; q.fillRect(0, 0, a.width, a.height); E = q.getImageData(0, 0, a.width, a.height); return {
+ domElement: g, update: function () {
+ u++; j = (new Date).getTime(); n = j - F; z = Math.min(z, n); A = Math.max(A, n); s(B.data, Math.min(30, 30 - n / 200 * 30), "ms"); c.innerHTML = '' + n + " MS (" + z + "-" + A + ")"; o.putImageData(B, 0, 0); F = j; if (j >
+ v + 1E3) { l = Math.round(u * 1E3 / (j - v)); w = Math.min(w, l); x = Math.max(x, l); s(y.data, Math.min(30, 30 - l / 100 * 30), "fps"); d.innerHTML = '' + l + " FPS (" + w + "-" + x + ")"; m.putImageData(y, 0, 0); if (t == 3) p = performance.memory.usedJSHeapSize * 9.54E-7, C = Math.min(C, p), D = Math.max(D, p), s(E.data, Math.min(30, 30 - p / 2), "mb"), i.innerHTML = '' + Math.round(p) + " MB (" + Math.round(C) + "-" + Math.round(D) + ")", q.putImageData(E, 0, 0); v = j; u = 0 }
+ }
+ }
+};