<body onload=z=c.getContext`2d`,setInterval(`c.width=W=150,Y<W&&P<Y&Y<P+E|9<p?z.fillText(S++${Y=`,9,9|z.fillRect(p`}*0,Y-=--M${Y+Y},P+E,9,W),P))):p=M=Y=S=6,p=p-6||(P=S%E,W)`,E=49) onclick=M=9><canvas id=c> |
This comment has been minimized.
This comment has been minimized.
Looks like you can save three bytes by replacing logical AND and ORs with their bitwise versions: |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
siick |
This comment has been minimized.
This comment has been minimized.
You can save a further 2 bytes by changing the color from
|
This comment has been minimized.
This comment has been minimized.
You can get another five bytes by moving the click event handler to an attribute: (You could even get another byte by adding that attribute without a space after the |
This comment has been minimized.
This comment has been minimized.
An alternative to
|
This comment has been minimized.
This comment has been minimized.
A pair of unnecessary parentheses can be removed for 330 bytes:
|
This comment has been minimized.
This comment has been minimized.
You can also reduce the coordinate space. This ends up saving characters in several places:
Incorporating these and all changes from comments above reduces to 321 bytes:
Difficulty can be tweaked by adjusting ms/frame (currently JSFiddle: https://jsfiddle.net/d6qwktf8/ |
This comment has been minimized.
This comment has been minimized.
You can use this trick to replace |
This comment has been minimized.
This comment has been minimized.
Using some of the tricks from above (though not all), and some of my own, here is a version in 270b
|
This comment has been minimized.
This comment has been minimized.
262 bytes. Modified cers' solution to have a single-digit player and wall width, removed unnecessary parentheses, and moved onclick to body:
|
This comment has been minimized.
This comment has been minimized.
@jmromrell I removed a pair of unnecessary brackets to get it down to 262 bytes.
|
This comment has been minimized.
This comment has been minimized.
@gullyn Had actually just caught that in an edit right before you commented. :) |
This comment has been minimized.
This comment has been minimized.
By reducing the interval rate to 14 so that by setting p to 6 it is guaranteed to hit 0 on the default canvas size of 300 (along with some other creature conforts) was able to get rid of the |
This comment has been minimized.
This comment has been minimized.
242 bytes with optimized initialization and Q formulation: <body onload="z=c.getContext`2d`,p=Y=Q=',9|z.fillRect(',setInterval('c.height=W=c.width,p?Y<W&&Y>P&Y<P+E|p>9?z.fillText(S++,0'+Q+'0,Y-=M-=.5,9'+Q+'p-=8,0'+Q+'p,P+E,9,W),P))):(p=M=S=0,Y=E=99):(p=W+4,P=new Date%E)',24)"onclick=M=9><canvas id=c> |
This comment has been minimized.
This comment has been minimized.
Got it down to 239 by using template strings (eg. "foo"+Q+"bar" -> `foo${Q}bar`)
|
This comment has been minimized.
This comment has been minimized.
And 232 by changing
|
This comment has been minimized.
This comment has been minimized.
Now 228 after changing
|
This comment has been minimized.
This comment has been minimized.
Got to 205 with "redesigned" gameplay.
|
This comment has been minimized.
This comment has been minimized.
You could change the controls and remove 2 bytes (203 bytes), by using
|
This comment has been minimized.
This comment has been minimized.
This has got to be one of the funnest gist threads I've read in a while. |
This comment has been minimized.
This comment has been minimized.
Yeah, it reads more like a chat on codegolf.stackexchange.com |
This comment has been minimized.
This comment has been minimized.
Mad |
This comment has been minimized.
This comment has been minimized.
But that will remove mobile compatibility. It's a too high price for 2 bytes. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
I guess you are right, but then again, do the mobile browsers even support data URI's? (e.g. |
This comment has been minimized.
This comment has been minimized.
Making decoding this extra credit for my 201 Programming Languages class. Thanks for the great gist |
This comment has been minimized.
This comment has been minimized.
How does it know that |
This comment has been minimized.
This comment has been minimized.
Here's a succinct explanation that mentions this from the spec:
So by the first bullet there, |
This comment has been minimized.
This comment has been minimized.
"Decode this and tell us what it does" |
This comment has been minimized.
This comment has been minimized.
@ParkerM I was looking for that. Thank you a lot :) |
This comment has been minimized.
This comment has been minimized.
Maybe it would be possible to make this even shorter by using SVGs instead of canvas. For example this is enough to draw a whole example scene. <svg><path d="M0 75H9M99 0V60M99 99V999" stroke=tan stroke-width=9> This also has the added benifit, that we could use |
This comment has been minimized.
This comment has been minimized.
Thats amazing, I'm speechless |
This comment has been minimized.
This comment has been minimized.
@ParkerM how come document.getElementById is a thing then? |
This comment has been minimized.
This comment has been minimized.
I've managed to get a SVG solution at 227 characters:
https://jsfiddle.net/7wz02hdr/2/ Among other things, I tried making the wall X coordinate time-based ( It is possible this may beat the canvas solution with some optimization.
|
This comment has been minimized.
This comment has been minimized.
Bitwise and does save a character (now 226):
|
This comment has been minimized.
This comment has been minimized.
Reached 212 characters on the SVG version by realizing I could set the innerHTML of
|
This comment has been minimized.
This comment has been minimized.
Yes |
This comment has been minimized.
This comment has been minimized.
Since the other solution does it, I guess I can change the SVG one to use
|
This comment has been minimized.
This comment has been minimized.
SVG version is now 205 bytes (tied with canvas version):
https://jsfiddle.net/nt12Lewp/1/ I inlined the width variable |
This comment has been minimized.
This comment has been minimized.
@jmromrell It can get down to 198 if you change new Date%N to T%75, which makes it not completely random now, but close enough Also set the text y position to 9, and remove a space that's not needed at the end of the path element |
This comment has been minimized.
This comment has been minimized.
@jmromrell and 196 if you inline the W variable like you said. |
This comment has been minimized.
This comment has been minimized.
I don't like leaving the text obscured. I personally feel it is a buggy implementation of flappy bird if the score is off the screen, and is worth eating a character for. I think the other changes are great though. 197 bytes if the score is left on screen:
|
This comment has been minimized.
This comment has been minimized.
@jmromrell might as well make the text y 13, so it is fully on the screen, unfortunately it's no longer dataurl safe now |
This comment has been minimized.
This comment has been minimized.
Reached 195 bytes by concatenating the score to the string instead of templating:
|
This comment has been minimized.
This comment has been minimized.
I'm fine with text at y=13. Y=11 was on-screen for me. I guess default font is platform dependent. |
This comment has been minimized.
This comment has been minimized.
@jmromrell I'm guessing either the slashes or the backslashes. The website I looked at said & is not dataurl safe and we need to encode it, not sure how we got away with that |
This comment has been minimized.
This comment has been minimized.
Can someone please post an unminified version too? Would love to read and understand the brilliant algorithm. |
This comment has been minimized.
This comment has been minimized.
@pratyushmittal Happy to explain! The SVG solution actually fails to run if you put line breaks in it since most of it is a string, but I'll add them anyways for explanation purposes:
Maybe this explanation might help you find more improvements. |
This comment has been minimized.
This comment has been minimized.
@jmromrell Thanks a lot for the detailed explanation. It is very interesting. |
This comment has been minimized.
This comment has been minimized.
A small riff on @jmromrell's excellent version allows this to scale better for 'full-screen' play but takes us back closer to 240 bytes.
It may be possible to address viewport scaling in fewer bytes with |
This comment has been minimized.
This comment has been minimized.
@kres0345 Mobile browsers do support Data URIs as shown on this Can I Use page. |
This comment has been minimized.
This comment has been minimized.
You can actually just remove the "Z" and the "H0" from the path:
which is 192 bytes. This means the path is no longer closed, but it displays the same way because it is closed implicitly when it gets filled. The downside is that this is not very well defined behavior - I think - so some browsers could display it differently. |
This comment has been minimized.
Dataurl (enter into search bar to play)
Controls: click to jump
data:text/html,<body onload=z=c.getContext`2d`,setInterval(`c.width=W=150,Y<W&&P<Y&Y<P+E|9<p?z.fillText(S++${Y=`,9,9|z.fillRect(p`}*0,Y-=--M${Y+Y},P+E,9,W),P))):p=M=Y=S=6,p=p-6||(P=S%E,W)`,E=49) onclick=M=9><canvas id=c>