4 ms·
“I remade the first level of Doom using JavaScript and 64 sliders”
- krageon 4y agoMaybe I'm missing something, but all I see is an explanation of slider stuff and a next button (that I pressed at least 15 times). No Doom levels. Very disappointing.
- paulb73 4y agoIt worked for me on desktop - but not on mobile.
- Pumafied 4y agoWorked for me on iPad OS with an external keyboard
- pmg101 4y agoBecause the entire game code is encoded in the hash fragment on the URL. So it will depend on whether your browser respects such a long URL. https://sliderland.blinry.org/#%7B%0A%20%20%2F%2F%20controls%3A%20arrow%20keys%20to%20move%2C%20space%20to%20shoot%0A%20%20%2F%2F%20this%20is%20pretty%20hacky%20and%20might%20break%20in%20the%20future%0A%0A%20%20cam%20%3D%20typeof%20cam%20%3D%3D%3D%20%22undefined%22%20%3F%20%5B7.7%2C%201.8%5D%20%3A%20cam%0A%20%20dir%20%3D%20typeof%20dir%20%3D%3D%3D%20%22undefined%22%20%3F%20-PI%2F2%20%3A%20dir%0A%20%20enemies%20%3D%20typeof%20enemies%20%3D%3D%3D%20%22undefined%22%20%3F%20%5B%5B29%2C-27%5D%2C%5B35%2C-19%5D%2C%5B24%2C-22%5D%5D%20%3A%20enemies%0A%20%20pressed%20%3D%20typeof%20pressed%20%3D%3D%3D%20%22undefined%22%20%3F%20%7B%7D%20%3A%20pressed%0A%0A%20%20window.onkeyup%20%3D%20%28e%29%20%3D%3E%20%7Bpressed%5Be.keyCode%5D%20%3D%20false%7D%0A%20%20window.onkeydown%20%3D%20%28e%29%20%3D%3E%20%7Bpressed%5Be.keyCode%5D%20%3D%20true%7D%0A%0A%20%20if%20%28i%20%3D%3D%200%29%20%7B%0A%20%20%20%20if%20%28pressed%5B37%5D%29%20dir%20-%3D%200.04%0A%20%20%20%20if%20%28pressed%5B39%5D%29%20dir%20%2B%3D%200.04%0A%20%20%20%20if%20%28pressed%5B38%5D%29%20%7B%20cam%5B0%5D%20%2B%3D%200.2*cos%28dir%29%3B%20cam%5B1%5D%20%2B%3D%200.2*sin%28dir%29%7D%0A%20%20%20%20if%20%28pressed%5B40%5D%29%20%7B%20cam%5B0%5D%20-%3D%200.2*cos%28dir%29%3B%20cam%5B1%5D%20-%3D%200.2*sin%28dir%29%7D%0A%0A%20%20%20%20enemies.forEach%28%28e%29%20%3D%3E%20%7B%0A%20%20%20%20%20%20let%20d%20%3D%20sqrt%28%28e%5B0%5D-cam%5B0%5D%29**2%20%2B%20%28e%5B1%5D-cam%5B1%5D%29**2%29%0A%20%20%20%20%20%20if%20%28d%20%3C%2010%29%20%20%7B%0A%20%20%20%20%20%20%20%20let%20a2%20%3D%20atan2%28e%5B1%5D-cam%5B1%5D%2C%20e%5B0%5D-cam%5B0%5D%29%0A%20%20%20%20%20%20%20%20e%5B0%5D%20-%3D%200.03*cos%28a2%29%3B%20e%5B1%5D%20-%3D%200.03*sin%28a2%29%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%29%0A%20%20%7D%0A%0A%20%20function%20intersect%28x1%2C%20y1%2C%20x2%2C%20y2%2C%20x3%2C%20y3%2C%20x4%2C%20y4%29%20%7B%0A%20%20%20%20if%20%28%28x1%3D%3D%3Dx2%20%26%26%20y1%3D%3D%3Dy2%29%20%7C%7C%20%28x3%3D%3D%3Dx4%20%26%26%20y3%3D%3D%3Dy4%29%29%20return%20false%0A%20%20%20%20let%20d%20%3D%20%28y4-y3%29%20*%20%28x2-x1%29%20-%20%28x4-x3%29%20*%20%28y2-y1%29%0A%20%20%20%20if%20%28d%3D%3D%3D0%29%20return%20false%0A%20%20%20%20let%20ua%20%3D%20%28%28x4-x3%29%20*%20%28y1-y3%29%20-%20%28y4-y3%29%20*%20%28x1-x3%29%29%2Fd%0A%20%20%20%20let%20ub%20%3D%20%28%28x2-x1%29%20*%20%28y1-y3%29%20-%20%28y2-y1%29%20*%20%28x1-x3%29%29%2Fd%0A%20%20%20%20if%20%28ua%3C0%20%7C%7C%20ua%3E1%20%7C%7C%20ub%3C0%20%7C%7C%20ub%3E1%29%20return%20false%0A%20%20%20%20return%20%5Bx1%20%2B%20ua*%28x2-x1%29%2C%20y1%20%2B%20ua*%28y2-y1%29%5D%0A%20%20%7D%0A%20%20function%20intersect2%28x1%2C%20y1%2C%20x2%2C%20y2%2C%20cx%2C%20cy%2C%20r%29%7B%0A%20%20%20%20v1x%20%3D%20x2%20-%20x1%0A%20%20%20%20v1y%20%3D%20y2%20-%20y1%0A%20%20%20%20v2x%20%3D%20x1%20-%20cx%0A%20%20%20%20v2y%20%3D%20y1%20-%20cy%0A%20%20%20%20let%20b%20%3D%20-2*%28v1x*v2x%20%2B%20v1y*v2y%29%0A%20%20%20%20let%20c%20%3D%202*%28v1x*v1x%20%2B%20v1y*v1y%29%0A%20%20%20%20let%20d%20%3D%20sqrt%28b*b%20-%202*c*%28v2x*v2x%20%2B%20v2y*v2y%20-%20r*r%29%29%0A%20%20%20%20if%20%28isNaN%28d%29%29%20return%20false%0A%20%20%20%20u1%20%3D%20%28b%20-%20d%29%20%2F%20c%0A%20%20%20%20if%20%28u1%20%3C%3D%201%20%26%26%20u1%20%3E%3D%200%29%7B%0A%20%20%20%20%20%20%20%20return%20%5Bx1%20%2B%20v1x%20*%20u1%2C%20y1%20%2B%20v1y%20*%20u1%5D%0A%20%20%20%20%7D%0A%20%20%20%20return%20false%0A%20%20%7D%0A%0A%20%20if%20%28%28i%20%3D%3D%2032%20%7C%7C%20i%20%3D%3D%2031%29%20%26%26%20pressed%5B32%5D%29%20%7B%0A%20%20%20%20enemies.forEach%28%28e%2C%20index%29%20%3D%3E%20%7B%0A%20%20%20%20%20%20inter%20%3D%20intersect2%28cam%5B0%5D%2C%20cam%5B1%5D%2C%20end%5B0%5D%2C%20end%5B1%5D%2C%20e%5B0%5D%2C%20e%5B1%5D%2C%200.3%29%0A%20%20%20%20%20%20if%20%28inter%20!%3D%3D%20false%20%26%26%20inter.length%20%3E%200%29%20%7B%0A%20%20%20%20%20%20%20%20enemies.splice%28index%2C%201%29%20%2F%2F%20DIE!%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%29%0A%20%20%7D%0A%0A%20%20if%20%28pressed%5B32%5D%29%20%7B%0A%20%20%20%20if%20%28i%20%3D%3D%2029%20%7C%7C%20i%20%3D%3D%2034%29%20%7B%0A%20%20%20%20%20%20return%200.05%0A%20%20%20%20%7D%0A%20%20%20%20if%20%28i%20%3D%3D%2031%20%7C%7C%20i%20%3D%3D%2032%29%20%7B%0A%20%20%20%20%20%20%20%20return%200.2%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20walls%20%3D%20%5B%5B%5B0%2C0%5D%2C%5B2.8%2C0%5D%5D%2C%20%5B%5B2.8%2C0%5D%2C%5B5.6%2C2.1%5D%5D%2C%20%5B%5B5.6%2C2.1%5D%2C%5B8.4%2C2.1%5D%5D%2C%20%5B%5B8.4%2C2.1%5D%2C%5B9.1%2C2.1%5D%5D%2C%20%5B%5B9.1%2C2.1%5D%2C%5B12.5%2C0%5D%5D%2C%20%5B%5B12.5%2C0%5D%2C%5B14%2C0%5D%5D%2C%20%5B%5B14%2C0%5D%2C%5B14%2C-14.3%5D%5D%2C%20%5B%5B14%2C-14.3%5D%2C%5B14.9%2C-20.7%5D%5D%2C%20%5B%5B14.9%2C-20.7%5D%2C%5B16.7%2C-21.5%5D%5D%2C%20%5B%5B16.7%2C-21.5%5D%2C%5B20.8%2C-21.5%5D%5D%2C%20%5B%5B20.8%2C-21.5%5D%2C%5B21.1%2C-15.8%5D%5D%2C%20%5B%5B21.1%2C-15.8%5D%2C%5B38.7%2C-15.8%5D%5D%2C%20%5B%5B38.7%2C-15.8%5D%2C%5B38.7%2C-32%5D%5D%2C%20%5B%5B38.7%2C-32%5D%2C%5B21%2C-32%5D%5D%2C%20%5B%5B21%2C-32%5D%2C%5B21%2C-24.2%5D%5D%2C%20%5B%5B21%2C-24.2%5D%2C%5B16.8%2C-24%5D%5D%2C%20%5B%5B16.8%2C-24%5D%2C%5B11.9%2C-22%5D%5D%2C%20%5B%5B11.9%2C-22%5D%2C%5B11.1%2C-14.5%5D%5D%2C%20%5B%5B11.1%2C-14.5%5D%2C%5B5.7%2C-14.4%5D%5D%2C%20%5B%5B5.7%2C-14.4%5D%2C%5B2.9%2C-13.1%5D%5D%2C%20%5B%5B2.9%2C-13.1%5D%2C%5B0%2C-13%5D%5D%2C%20%5B%5B0%2C-13%5D%2C%5B0%2C-9.7%5D%5D%2C%20%5B%5B0%2C-9.7%5D%2C%5B-4.2%2C-8.7%5D%5D%2C%20%5B%5B-4.2%2C-8.7%5D%2C%5B-5.3%2C-11.5%5D%5D%2C%20%5B%5B-5.3%2C-11.5%5D%2C%5B-12.3%2C-11.5%5D%5D%2C%20%5B%5B-12.3%2C-11.5%5D%2C%5B-12.3%2C-2.1%5D%5D%2C%20%5B%5B-12.3%2C-2.1%5D%2C%5B-5.4%2C-2.1%5D%5D%2C%20%5B%5B-5.4%2C-2.1%5D%2C%5B-4.2%2C-4.9%5D%5D%2C%20%5B%5B-4.2%2C-4.9%5D%2C%5B0%2C-4%5D%5D%2C%20%5B%5B0%2C-4%5D%2C%5B0%2C0%5D%5D%5D%0A%0A%20%20function%20addColumn%28cx%2C%20cy%29%20%7B%0A%20%20%20%20let%20cr%20%3D%200.3%0A%20%20%20%20walls.push%28...%5B%5B%5Bcx-cr%2Ccy-cr%5D%2C%5Bcx-cr%2Ccy%2Bcr%5D%5D%2C%20%5B%5Bcx-cr%2Ccy%2Bcr%5D%2C%5Bcx%2Bcr%2Ccy%2Bcr%5D%5D%2C%20%5B%5Bcx%2Bcr%2Ccy%2Bcr%5D%2C%5Bcx%2Bcr%2Ccy-cr%5D%5D%2C%20%5B%5Bcx%2Bcr%2Ccy-cr%5D%2C%5Bcx-cr%2Ccy-cr%5D%5D%5D%29%0A%20%20%7D%0A%20%20addColumn%284.6%2C-3.7%29%0A%20%20addColumn%2810.8%2C-3.7%29%0A%20%20addColumn%2810.8%2C-10%29%0A%20%20addColumn%284.6%2C-10%29%0A%0A%20%20aa%20%3D%20atan%28%28x-0.5%29*1.5%29%0A%20%20a%20%3D%20%28dir%20%2B%20aa%29%0A%20%20end%20%3D%20%5Bcam%5B0%5D%2Bcos%28a%29*999%2C%20cam%5B1%5D%2Bsin%28a%29*999%5D%0A%20%20xs%20%3D%20walls.map%28%28w%29%20%3D%3E%20intersect%28cam%5B0%5D%2C%20cam%5B1%5D%2C%20end%5B0%5D%2C%20end%5B1%5D%2C%20w%5B0%5D%5B0%5D%2C%20w%5B0%5D%5B1%5D%2C%20w%5B1%5D%5B0%5D%2C%20w%5B1%5D%5B1%5D%2C%29%29.filter%28%28p%29%20%3D%3E%20p%20!%3D%3D%20false%29.map%28%28p%29%20%3D%3E%20Math.sqrt%28%28p%5B0%5D%20-%20cam%5B0%5D%29%20**%202%20%2B%20%28p%5B1%5D%20-%20cam%5B1%5D%29%20**%202%29%29%0A%20%20nearestWall%20%3D%20Math.min%289999%2C%20...xs%29%0A%0A%20%20xs2%20%3D%20enemies.map%28%28e%29%20%3D%3E%20intersect2%28cam%5B0%5D%2C%20cam%5B1%5D%2C%20end%5B0%5D%2C%20end%5B1%5D%2C%20e%5B0%5D%2C%20e%5B1%5D%2C%200.3%29%29.filter%28%28p%29%20%3D%3E%20%20p%20!%3D%3D%20false%20%26%26%20p.length%20%3E%200%29.map%28%28p%29%20%3D%3E%20Math.sqrt%28%28p%5B0%5D%20-%20cam%5B0%5D%29%20**%202%20%2B%20%28p%5B1%5D%20-%20cam%5B1%5D%29%20**%202%29%29%0A%20%20nearestEnemy%20%3D%20Math.min%2899999%2C%20...xs2%29%0A%0A%20%20if%20%28nearestWall%20%3C%20nearestEnemy%29%20%7B%0A%20%20%20%20return%200.5%2B%28%281%2F%28cos%28aa%29*nearestWall%29%29*2*%28%28i%252%29-0.5%29%29%0A%20%20%7D%20else%20%7B%0A%20%20%20%20return%200.5%2B%28%281%2F%28cos%28aa%29*nearestEnemy%29%29*1*%28%28i%252%29-0.75%29%29%20-%20random%28%29*0.1*%281%2FnearestEnemy%29%0A%20%20%7D%0A%7D https://sliderland.blinry.org/#%7B%0A%20%20%2F%2F%20controls... [Edited to correct: not GET data, but the hash fragment.]
- lsaferite 4y agoUse your arrow keys. The sliders are the graphics. You'll see once you move around a little.
- stuntkite 4y agothis took me so long to figure out.
- xsmasher 4y agoDon't click the blue arrow (I know the site directions say you should.) Load the site, then use your arrow keys and space bar. Worked for me in Chrome and Safari.
- VoidWhisperer 4y agoDoesn't seem to work on firefox mobile. Also breaks the back button.
- jbarberu 4y agoWorks on FF desktop (I didn't realize I had to use the arrow keys to navigate at first). Pretty cool :)
- makeworld 4y agoI couldn't find any enemies but still very cool. Although playing it for a bit distorted my vision slightly after, like staring at a high-contrast animation.
- blinry 4y agoFollow the corridor at the far right to get to some enemies! :D
- lioeters 4y agoImpressive, and a lot of fun to look through what kind of creative expressions are possible with 64 sliders. As noted in the GitHub repo, this is a new twist on the minimal creative coding environment, tixy. https://tixy.land/ https://tixy.land/
- lowpolybrain 4y agoIt is really nice and creative. (but the title is clickbait as there is nothing doom there)