Date: June 29, 2024
Whenever I see a simple game, I start thinking about its mechanics and how it might be implemented.
So then when it seemed like a good small weekend project, I went for it. I got it down to its bare mechanics.
In future iterations, I could add animations, backgrounds, title screen, scoreboard, etc.
I was curious on how level was determined for games and I found an awesome article about it by Jake Lee.
But one important thing was not explained in this article, how is it implemented in JavaScript?!
He has provided implementations in a Google Sheet and Github Gist though. So that may be your preferred method.
Copy-paste this into your address bar:
data:text/html,<title>code</title><link rel=icon href='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 99 99%22><text y=%221em%22 font-size=%2272%22>&%23128187;</text></svg>'><textarea id=d spellcheck=false onkeypress=e=event;k=e.keyCode;(e.ctrlKey&&k==13)||k==10?f.srcdoc=d.value:0 style=resize:none;filter:invert(><p id=o></p>%0d<script>%0do.innerHTML = 0;%0d</script></textarea><iframe id=f></iframe><p id=p style=position:fixed;bottom:1;color:white></p><script>D=0,d.onkeyup=d.onclick=n=>{clearTimeout(D),D=setTimeout(_=>{A=d.selectionStart,B=d.selectionEnd,V=d.value,E=V.substr(0,B).split`\n`,p.innerHTML=`Ln:${E.length}, Col:${E.pop().length+1}, ${A==B?'Pos:'+B:'Sel:'+(B-A)}, Len:${V.length}`},99)}</script><style>*{box-sizing:border-box;margin:0}textarea,iframe{width:50%;height:100%;vertical-align:top}In the latest iteration my code editor, I've made big practical improvements to
I wanted to see what's out there and here's what I found.
I think this is decent set to study, but I'm mainly interested in the smallest implementation and not worried about if it's computationally random.
rand = max => Math.sin(++seed)**2 * 1e9 % max
Visit this URL while logged in your steam account: https://store.steampowered.com/account/licenses/
Hit F12, click on the "Console" tab and paste it into the prompt)
a=document.createElement`a`;a.href=URL.createObjectURL(new Blob(["Date,Item,Acquisition Method\n"+[...document.querySelectorAll('.account_table tr > td')].reduce((p,e,i)=>(p[~~(i/3)]=(p[~~(i/3)]||"")+'"'+e.innerHTML.trim().replace(/<\/?[^>]+(>|$)/g,"").replace(/\s+/g," ").replace(/"/g,'""').replaceAll(" Remove ","")+'"'+(i%3==2?"":","),p),[]).join`\n`],{type:"text/plain"}));a.click(a.download="steam-games-list.csv");URL.revokeObjectURL(a.href)
To celebrate May 4th, I made the cockpit design of the Millennium Falcon fit within a dweet!
B=~~(t*99)%136
x.save(A=300)
x.translate(960,1080)
x.rotate(B*.035)
I was looking into CSV methods on StackOverflow which didn't have great answers. So I put together some solutions that I'd appreciate.
Here's an answer I made for "JavaScript array to CSV," which didn't have any solid answers.
I found a great solution for parsing CSV so I figured that my work is complete by including a great parseCSV solution I found a while ago by Trevor Dixon.
// Inspired by: https://stackoverflow.com/a/64618766/1675237 & https://stackoverflow.com/a/58034688/1675237
| <!doctype html> | |
| <head> | |
| <title>😁 Floating Logo with CSS</title> | |
| <style> | |
| .icon-shadow { | |
| width: 50px; | |
| margin-top: 1rem; | |
| box-shadow: 0px 0px 15px 5px #888; | |
| animation: grow 3s ease-in-out infinite; | |
| } |
https://lifthrasiir.github.io/roadroller/
Compresses JavaScript very effectively.
I was thinking about storing data in the URL which is probably not a unique idea, but I wanted to see how to implement it myself.
Compression can also be achived by combining two values to indicate repeating values. i.e. 55 = 5,5,5,5,5
Also storing data in URLs, but with a bigger range by converting text to Hex-like values using its character code.
A single character can be a number up to 73 and therefore, two characters can store numbers up to 5329.