In this project, you will implement a user interface and automated algorithm that will navigate a robot to successfully trigger all the mines in a minefield. The mines are represented by red platforms in the simulator. Start by manually driving the robot to trigger the mines. Once you've done that, start addressing the questions and exercises below to complete the project.
When driving, what happens when you press and release one of the driving keys?
HTML: As part of your design, you want to try different indicators for left, right, up, and down. Initially, they are just the text "left", "right", "up", and "down". You can change the text by modifying the content of the direction buttons in the HTML. Please change them to something else. In Chrome, you can use the tool under "Edit > Emoji and Symbols" to find emoji that might be suitable (e.g., ↑, ←, →, ↓).
HTML: Initially, the direction buttons only have a direction-specific class. But we might want to style all the buttons using some common rules. Please add a class called direction to each of the buttons using the blank input box.
CSS: Now that we have a way of referring to all the buttons, let's make them a little more attractive. In the CSS code,
please edit Lines 1-5 to style the direction buttons. First, you'll choose the correct selector for the buttons. Then use valid CSS to set the border, padding, and border-radius properties.
HTML: The onclick handler on the Auto button is currently not set! That's why the button doesn't do anything. Please set the onclick handler to call the driveAuto function.
JavaScript: When you push the Auto button, the robot doesn't manage to hit all of the mines. It leaves big gaps. Please modify Lines 6-10 (you may not need to change all of them) to make the robot path cover all of the mines.
JavaScript: When driving the robot, the speed is currently fixed. Please modify Line 40 of the JavaScript code to set the speed using the range slider input in the HTML.