My JS1024 Annual JavaScript Golfing Competition Submission

#README.md

My JS1024 Annual JavaScript Golfing Competition Submission

I'm happy to have something to submit this year. I just found out about the competition and realized that I have something to submit even if it's not aligned with the theme.

Title: 🏗 Stacking Game

Short Description: Press Space or tap on mobile! See how high you can go in this stacking game!

My Submission (1020b)

<canvas id=c><script>K=c.width=c.height=1e3,e=c.getContext`2d`,n=0,x=0,Z=100,i=0,w=0,h=0,l=!0,s=[],d={},f=0,y=_=>{h=!1,s=[{x:(c.width-700)/2,y:c.height-Z,w:700}],d={x:-s[0].w,y:c.height-200,w:700}},a=(t,n,x=Z)=>{e.fillStyle=t.c,e.fillRect(t.x,n||t.y,t.w,x)},r=_=>{if(h)return void y();const t=s[0],e=s.length;d.x<=t.x&&d.x+d.w>=t.x?(d.w=t.w-(t.x-d.x),s.unshift({...d,x:t.x}),e<=5&&(d.y-=Z)):d.x>t.x&&d.x<t.x+t.w?(d.w=t.x+t.w-d.x,s.unshift({...d}),e<=5&&(d.y-=Z)):h=!0,e-1>f&&(f=e-1),d.x=Math.random()>.5?K:-d.w;};ontouchstart=r;onkeydown=t=>" "===t.key&&r(),y();g=t=>{const n=s.length;c.width|=0,(t=>{let e,n=Z,x=d.y;t&&(x=300,t>8&&(n=800/t));for(t=0;t<s.length;t++)e=x+n*(t+1),a(s[t],e,n)})(h&&n),a(d),e.font="1in'",e.fillText("Score: "+(n-1)+", Best: "+f,Z,Z),w=t-i,h||(d.x>c.width?l=!1:d.x<-d.w&&(l=!0),d.x+=K*(l?1:-1)*w),i=t},u=e=>{requestAnimationFrame(u),e<x-2||(x=Math.max(x+K/60,e),t=n/60,60*t|0!=n++&&(t+=1e-6),g(t))};u()</script><style>html,body{height:100%;margin:0}#c{max-height:100%;max-width:100%}

🕹 Play in your address bar! (bookmarklet, 1043b)

data:text/html,<canvas id=c><script>K=c.width=c.height=1e3,e=c.getContext`2d`,n=0,x=0,Z=100,i=0,w=0,h=0,l=!0,s=[],d={},f=0,y=_=>{h=!1,s=[{x:(c.width-700)/2,y:c.height-Z,w:700}],d={x:-s[0].w,y:c.height-200,w:700}},a=(t,n,x=Z)=>{e.fillStyle=t.c,e.fillRect(t.x,n||t.y,t.w,x)},r=_=>{if(h)return void y();const t=s[0],e=s.length;d.x<=t.x&&d.x+d.w>=t.x?(d.w=t.w-(t.x-d.x),s.unshift({...d,x:t.x}),e<=5&&(d.y-=Z)):d.x>t.x&&d.x<t.x+t.w?(d.w=t.x+t.w-d.x,s.unshift({...d}),e<=5&&(d.y-=Z)):h=!0,e-1>f&&(f=e-1),d.x=Math.random()>.5?K:-d.w;};ontouchstart=r;onkeydown=t=>" "===t.key&&r(),y();g=t=>{const n=s.length;c.width|=0,(t=>{let e,n=Z,x=d.y;t&&(x=300,t>8&&(n=800/t));for(t=0;t<s.length;t++)e=x+n*(t+1),a(s[t],e,n)})(h&&n),a(d),e.font="1in'",e.fillText("Score: "+(n-1)+", Best: "+f,Z,Z),w=t-i,h||(d.x>c.width?l=!1:d.x<-d.w&&(l=!0),d.x+=K*(l?1:-1)*w),i=t},u=e=>{requestAnimationFrame(u),e<x-2||(x=Math.max(x+K/60,e),t=n/60,60*t|0!=n++&&(t+=1e-6),g(t))};u()</script><style>html,body{height:100%;margin:0}%23c{max-height:100%25;max-width:100%25}

README

The readable code is what I started with and then used [link]https://xem.github.io/terser-online/[/link] to make my initial compression. Then started refactoring the code and removing features to make it all fit within 1024 bytes.

So my "readable code" has more features such as colors and a random direction in which the bar will float from.

Follow me: [link] https://x.com/lewdev[/link]

My projects: [link]https://lewdev.github.io[/link]

I'm happy to have something to submit this year. I just found out about the competition and realized that I have something to submit even if it's not aligned with the theme.

Tools

• Xem's Terser Online This helped a lot
• Terser REPL (I just discovered this and I'm leaving it here for reference)
• nekoground Free anonymous HTML hosting service

readable.html

<canvas id=c width=999 height=999></canvas><script>
const x=c.getContext`2d`;

let lfr=1;
let f=0;
let nfm=0;

const START_W = 700;
const STACK_HEIGHT = 100;
const SPEED = 1000;
const TOPPER_COLOR = "#00A";
const C = "#A00";

let prev = 0;
let diff = 0;
let gameover = 0;
let goRight = true;
let stack = [];
let topper = {};
let topScore = 0;
const init = () => {
  gameover = false;
  stack = [{
    x: (c.width - START_W ) / 2,
    y: c.height - STACK_HEIGHT,
    w: START_W,
    c: C,
  }];
  topper = {
    x: -stack[0].w,
    y: c.height - (STACK_HEIGHT * 2),
    w: START_W,
    c: TOPPER_COLOR,
  };
};

const drawBar = (s, y, h = STACK_HEIGHT) => {
  x.fillStyle=s.c;
  x.fillRect(s.x, y || s.y, s.w, h);
};
const drawStack = showFullStack => {
  let height = STACK_HEIGHT;
  let y = topper.y;
  if (showFullStack) {
    y = STACK_HEIGHT * 3;
    if (showFullStack > 8) height = 8 * STACK_HEIGHT / showFullStack;
  }
  let yPos;
  for (let i = 0; i < stack.length; i++) {
    yPos = y + (height * (i + 1));
    drawBar(stack[i], yPos, height);
  }
};

const dropBar = () => {
  if (gameover) {
    init();
    return;
  }
  const top = stack[0];
  const L = stack.length;
  // if cutoff left or equals
  if (topper.x <= top.x && topper.x + topper.w >= top.x) {
    topper.w = top.w - (top.x - topper.x);
    stack.unshift({...topper, x: top.x, c: C});
    if (L <= 5) topper.y -= STACK_HEIGHT;
  }
  // if cutoff right
  else if (topper.x > top.x && topper.x < top.x + top.w) {
    topper.w = (top.x + top.w) - topper.x;
    stack.unshift({...topper, c: C});
    if (L <= 5) topper.y -= STACK_HEIGHT;
  }
  else gameover = true;

  if (L - 1 > topScore) {
    topScore = L - 1;
  }
  topper.x = Math.random() > .5 ? c.width : -topper.w;
};

ontouchstart = dropBar;

onkeydown = e => e.key === " " && dropBar();

init();

const z=t=>{// loop start ---------------------------

const L = stack.length;
//draw
c.width|=0
drawStack(gameover && L);
drawBar(topper);
x.font = "1in'"
x.fillText("Score: " + (L - 1) + ", Best: " + topScore, 100, 100);

//update
diff = t - prev;
if (!gameover) {
  if (topper.x > c.width) goRight = false;
  else if (topper.x < -topper.w) goRight = true;
  topper.x += (goRight ? 1 : -1) * SPEED * diff;
}

prev = t;

};loop=fTime=>{requestAnimationFrame(loop);if(lfr&&fTime<nfm-2)return;nfm=Math.max(nfm+1e3/60,fTime);t=f/60;if(t*60|0!=f++)t+=1e-6;z(t)};loop()</script><style>html,body{background:#222;display:flex;justify-content:center;align-items:center;height:100%;margin:0}#c{background:white;max-height:100%;max-width:100%}