Created
January 20, 2022 02:40
-
-
Save drbr/7ab6a0776c3c031c14199b51424255fa to your computer and use it in GitHub Desktop.
Simple library to draw a robot on a grid using JavaScript/HTML/CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: sans-serif; | |
| } | |
| .grid { | |
| display: inline-flex; | |
| flex-direction: column; | |
| border-right: 3px solid black; | |
| border-bottom: 3px solid black; | |
| background-color: beige; | |
| } | |
| .row { | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| .cell { | |
| border-top: 3px solid black; | |
| border-left: 3px solid black; | |
| height: 40px; | |
| width: 40px; | |
| } | |
| .obstacle { | |
| background-color: black; | |
| } | |
| .buttons { | |
| margin: 10px; | |
| } | |
| #robot { | |
| display: flex; | |
| height: 100%; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 30px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Robot</title> | |
| </head> | |
| <body> | |
| <table> | |
| <tr> | |
| <td></td> | |
| <td style="padding: 2px;">X: 0 →</td> | |
| </tr> | |
| <tr> | |
| <td style="text-align: center; vertical-align: top; padding: 2px;">Y: 0<br/>↓</td> | |
| <td> | |
| <div id="gridDiv"></div> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="buttons"> | |
| <button onClick="moveRandom()">Move Random</button> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function drawGrid(size) { | |
| const grid = document.createElement('div'); | |
| grid.className = 'grid'; | |
| for (let y = 0; y < size; y++) { | |
| const row = document.createElement('div'); | |
| row.className = 'row'; | |
| grid.appendChild(row); | |
| for (let x = 0; x < size; x++) { | |
| const cell = document.createElement('div'); | |
| cell.className = 'cell'; | |
| row.appendChild(cell); | |
| } | |
| } | |
| document.getElementById('gridDiv').appendChild(grid); | |
| } | |
| function getCellAtIndex({ x, y }) { | |
| return document.querySelector( | |
| `.row:nth-of-type(${y + 1}) .cell:nth-of-type(${x + 1})` | |
| ); | |
| } | |
| function drawRobot({ x, y, direction }) { | |
| const existingRobot = document.getElementById('robot'); | |
| if (existingRobot) { | |
| existingRobot.parentNode.removeChild(existingRobot); | |
| } | |
| const emojiForDirection = { | |
| up: '⬆️', | |
| down: '⬇️', | |
| left: '⬅️', | |
| right: '➡️', | |
| }; | |
| const newRobot = document.createElement('span'); | |
| newRobot.id = 'robot'; | |
| newRobot.textContent = emojiForDirection[direction] ?? '❓'; | |
| const parentCell = getCellAtIndex({ x, y }); | |
| parentCell.appendChild(newRobot); | |
| } | |
| function drawObstacles(obstacles) { | |
| for (const { x, y } of obstacles) { | |
| const cell = getCellAtIndex({ x, y }); | |
| cell.classList.add('obstacle'); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment