From 4e53fd657e2a6e4cafb7bfa1eb6db489ef280317 Mon Sep 17 00:00:00 2001 From: Ramen Date: Tue, 13 Jan 2026 17:04:38 +0000 Subject: [PATCH 1/2] create fork --- index.html | 2 +- stats.js | 30 ++++++++++++++++++++++-------- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 37d4af03..11178f31 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'), diff --git a/stats.js b/stats.js index 5d89bffc..32ca53a6 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 } + } + } +}; From fddfd18e07ee333711831eeeabf069ed259d055e Mon Sep 17 00:00:00 2001 From: Ramen Date: Thu, 15 Jan 2026 17:23:56 +0000 Subject: [PATCH 2/2] var-to-let --- index.html | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 11178f31..52e04072 100644 --- a/index.html +++ b/index.html @@ -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);