Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Cross My Heart – A Frogger Demake in 256 Bytes of HTML/JS

killedbyapixel.github.io

Post reply on HN
Print view View original

21–30 of 51 posts

Re: Cross My Heart – A Frogger Demake in 256 Bytes of HTML/JS

#21

Post by damiankennedy »

zamadatix wrote: post #14

Very fun for 256 bytes. The script itself looks beautifully compressed as well. I think gameplay is a bit dampened by the scale of the board vs your character though. In Frogger (at least the one I remember) the cars are the same size as the player. Here they are double height which quickly turns it into a game of trying to tap as fast as possible even when you're only trying to pass one oncoming car a few levels in.…

Same with the tag. Are these closing tags needed for some "reason"? I suspect the second (and third) line is included by mistake. Also, if we are counting bytes, the closing pre tag is required and should be counted. The game also relies on filtering out non-arrow key presses but this code isn't compressed or counted at all. The instruction "Do not press any other keys" seems superfluous with the extra onkeydown code added.

Why was this code and a lot of similar code posted to github only 2 hours ago?

Re: Cross My Heart – A Frogger Demake in 256 Bytes of HTML/JS

#23

Post by jstanley »

kqr wrote: post #18

I also had performance issues in Firefox, so I tried something else: just holding the up key. It was surprisingly effective. Not that it didn't fail a lot, but it progressed through the levels at a fairly even pace. Unless I misunderstand the maths, the hold-up strategy has the same probability of winning regardless of which level one is at, since the levels only increase the speed of the obstacles and not their dens…

> the levels only increase the speed of the obstacles and not their density.

But your speed is the same at every level.

Instead of looking at the width of each obstacle, instead look at the amount of space that the obstacle covers during the time you are in its path. If it moves faster then it covers more space during the time it takes you to cross, so it is effectively wider.

Imagine if the obstacles moved so fast that they crossed from one side of the screen to the other in the time it takes you to move up one line. You would never be able to pass any obstacle.

Re: Cross My Heart – A Frogger Demake in 256 Bytes of HTML/JS

#24

Post by smusamashah »

Checkout other demos by this guy (Frank Force) here https://killedbyapixel.github.io/TinyCode/

His web desktop showcasing his generative stuff https://generative.3d2k.com/

He makes lots of tiny code demos like this and shares on twitter every once in a while https://twitter.com/KilledByAPixel

His dwitter work https://www.dwitter.net/u/KilledByAPixel/top

His games https://killedbyapixel.newgrounds.com/games

His blogposts https://frankforce.com/

Re: Cross My Heart – A Frogger Demake in 256 Bytes of HTML/JS

#25

Post by varenc »

butz wrote: post #12
tomxor wrote: post #8

Earlier quoted context omitted.

From the source the only thing I can see that would make garbage is b.innerText=o which is set 50 times each frame. But even then it's just one giant text node, not html elements so it's surprising this is causing so much GC in Firefox.

Looks like a job for the new profiler.firefox.com

Here's a profile of the freeze being caused the GC if anyone wants to try and debug: https://share.firefox.dev/487vDxG

Re: Cross My Heart – A Frogger Demake in 256 Bytes of HTML/JS

#26

Post by fweimer »

jstanley wrote: post #23
kqr wrote: post #18

I also had performance issues in Firefox, so I tried something else: just holding the up key. It was surprisingly effective. Not that it didn't fail a lot, but it progressed through the levels at a fairly even pace. Unless I misunderstand the maths, the hold-up strategy has the same probability of winning regardless of which level one is at, since the levels only increase the speed of the obstacles and not their dens…

> the levels only increase the speed of the obstacles and not their density. But your speed is the same at every level. Instead of looking at the width of each obstacle, instead look at the amount of space that the obstacle covers during the time you are in its path. If it moves faster then it covers more space during the time it takes you to cross, so it is effectively wider. Imagine if the obstacles moved so fast t…

I suppose it depends on how collision detection is implemented. Maybe the cars tunnel through the frog at later levels? Although it does not seem to get easier at higher levels (got up to level 62 using the potato method).

Re: Cross My Heart – A Frogger Demake in 256 Bytes of HTML/JS

#29

Post by javajosh »

Here is the entire script of the game (I added line breaks, I hope in places that don't break the code):

   X=Y=V=U=Z=t=1;onkeydown=e=>(k=e.which)&1?X-=k-38:Y-=k-39;
   setInterval("for(++t,o=Z,i=50;i--;)for(b.innerText=o+='\\n',j=99;
   j--;Y>49?Z+=Y=1:o+=i-Y|j-X-50?q?'.':'':q?'♥':Y=1)
   q=((j+t*Math.sin(A=i>>1)/9*Z>>3)*A*Z)**4%97
The obstacle generation code is very strange and deserves more study. But really remarkable - a tour de force.

Re: Cross My Heart – A Frogger Demake in 256 Bytes of HTML/JS

#30

Post by damiankennedy »

Marcus10110 wrote: post #9

> Do not move off the left or right side Turns out if you do this, then hold the up key, it would appear that you avoid collision detection. Also, it appears your X position is preserved between levels, allowing you to hold the up arrow to rapidly advance levels.

For extra fun, remove the "uncompressed" onkeydown added at the end, then you can hold down the spacebar to do big jumps.
Post reply on HN