30:[] 2e:{"title":"Etch-a-scape","cells":[{"id":0,"value":"md`# Etch-a-scape`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"html`

Help the Robot escape the Aliens and get home. You can only use the slider bars to move. (No cheating typing in the coords!) Reload the page to play again!

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"screen = {\n let grid = html`

🏠

🤖

\n \n

You Win!

You Lose!

`;\n yield grid;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"{await visibility();\n setEnemies(numEnemies);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof horizontal = Range([0, 250], {value: 250,label: html`↔`, step: 0.1, placeholder: \"0–11\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof vertical = Range([0, 250], {value: 250, label: html`↕`, step: 0.1, placeholder: \"0–11\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"viewof numEnemies = Range([1, 5], {value: 3, label: html`👾`, step: 1, placeholder: \"1–5\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"style=html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"robotpos = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"calcEnemiesPos = (num)=>{\n Array.from(screen.querySelectorAll(\".enemy\")).map((el,idx,obj)=>{\n let newTop = parseInt(el.style.top) + randomIntFromInterval(-5,5);\n let newLeft = parseInt(el.style.left) + randomIntFromInterval(-5,5);\n if(newTop > 0 && newTop < 250){\n el.style.top = `${newTop}px`;\n } \n if(newLeft > 0 && newLeft < 250){\n el.style.left = `${newLeft}px`;\n }\n \n \n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"function randomIntFromInterval(min, max) { // min and max included \n return Math.floor(Math.random() * (max - min + 1) + min);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"{\n robotpos, checkCollision(), calcEnemiesPos(numEnemies) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"setEnemies = ()=>{\n // kill old enemies\n Array.from(screen.querySelectorAll(\".enemy\")).map((x)=>x.remove())\n // add new ones\n for(let i=0;i{\n el.style.top = `${Math.floor(Math.random() * 200)}px`;\n el.style.left = `${Math.floor(Math.random() * 200)}px`;\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"checkCollision = ()=>{\n console.log(\"checkCollision called.\")\n if(checkOverlap(screen.querySelector(\".player\").getBoundingClientRect(), screen.querySelector(\".goal\").getBoundingClientRect())){\n console.log(\"You win!\");\n screen.querySelector(\".success\").style.display = \"block\";\n screen.querySelector(\".player\").style.display = \"none\";\n }\n Array.from(screen.querySelectorAll(\".enemy\")).map((itm,idx,obj)=>{\n\n if(checkOverlap(screen.querySelector(\".player\").getBoundingClientRect(), itm.getBoundingClientRect())){\n console.log(\"You lose!\");\n screen.querySelector(\".failure\").style.display = \"block\";\n screen.querySelector(\".player\").style.display = \"none\";\n horizontal.value = 250;\n vertical.value = 250; \n }\n \n \n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"enemy = html`

👾

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"import {checkOverlap} from \"@triptych/31-days-of-observable\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"import {Range} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}