//Made by Lexus Collins //alert("Uses ES6. Make sure your device supports ES6"); //alert("Interface takes some space. Looks better on bigger screen, like tablet or desktop"); let canvas, ctx, display, exe, cmd; let cli = true; const fs = 7; //field size const cs = 30; //canvas size const cw = cs*fs; //canvas width const ch = cw; //canvas height let rover = { //Rover object x: 0, //x position y: 0, //y position rot: 0, //rotation in degrees ang: 0, //rotation in radians storage: [], //rocks stored pictures: 0 //pictures stored }; let rocks = new Map(); const keyMap = new Map([ ["forward", "KeyW"], ["backward", "KeyS"], ["left", "KeyA"], ["right", "KeyD"], ["pickup", "KeyQ"], ["drop", "KeyR"], ["picture", "KeyP"], ["analyse", "KeyZ"], ["restore", "Backslash"], ["help", "Slash"], ["respect", "KeyF"] ]); const rockMinerals = [ "Basalt", "Olivine", "Pyroxene", "Enstatite", "Andesite" ]; let commandLog = []; let cache = {}; /** * regex for parsing commands */ const regex = /^(MOV|TRN|RCK|RLS|ANL|PIC|RST|LOG|CLS|HLP|SWMOD) *([LRFB])? *(\d+)?/i; /** * Initialize all elements, that require loaded document. * * Get elements handlers. Set canvas width and height. * Draw map. Set event handlers * * @returns {void} */ window.onload = function () { display = document.getElementById("consoleDisp"); //command display cmd = document.getElementById("cmd"); //command input canvas = document.getElementById("app"); ctx = canvas.getContext('2d'); canvas.width = cw; canvas.height = ch; exe = document.getElementById("exe"); //execute button populate(); drawI(); logCommand("use HLP for help"); exe.addEventListener("click", execute); document.addEventListener("keypress", e => { if (e.code == "Enter") { //on enter pressed e.preventDefault(); execute(); } else if (!cli) { e.preventDefault(); switch (e.code) { case keyMap.get("forward"): move("F", 1); break; case keyMap.get("backward"): move("B", 1); break; case keyMap.get("right"): turn("R", 3); break; case keyMap.get("left"): turn("L", 3); break; case keyMap.get("pickup"): pickup(); break; case keyMap.get("drop"): drop(); break; case keyMap.get("picture"): takePicture(); break; case keyMap.get("analyse"): analyse(false); break; case keyMap.get("restore"): restore(); break; case keyMap.get("help"): help(); break; case keyMap.get("respect"): if (confirm("Do you want to pay respects?")) { alert("To pay respects, please give an upvote"); } break; } drawI(); } }); }; /** * Execute command. * * Get the command. Match it with RegExp, then compare using switch. * * @returns {void} */ function execute() { let r = cmd.value.toUpperCase().match(regex); //match the RegExp let command, param, param2; if (r) { command = r[1]; param = r[2]; param2 = r[3]; } if (command) { switch (command) { case 'RST': restore(); break; case 'HLP': help(); break; case 'MOV': if (!isNaN(param2) && param2 > 0) { move(param, param2); } break; case 'TRN': turn(param, param2); break; case 'RCK': pickup(); break; case 'RLS': drop(); break; case 'CLS': display.innerHTML = ""; break; case 'LOG': roverLog(); break; case 'ANL': analyse(); break; case 'PIC': takePicture(); break; case 'SWMOD': switchMode(); break; default: logCommand("Unknown command"); break; } logCommand(cmd.value, false); drawI(); } cmd.value = ""; } /** * display help * * @returns {void} */ function help() { let style = document.getElementById("helpSection").style; if (style.display == "none") { style.display = "block"; } else { style.display = "none"; } } function switchMode() { cli = !cli; let cmd = document.getElementById("console"); let cliBtn = document.getElementById("opencli"); if (cli) { cmd.style.display = "block"; cliBtn.style.display = "none"; } else { cmd.style.display = "none"; cliBtn.style.display = "block"; } } /** * Take a picture * * Take a pictures and load map into a cache * * @returns {void} */ function takePicture() { if (rover.pictures === 0) { var sendingInterval = setInterval(() => {sendPicture(sendingInterval)}, 60000); } if (rover.pictures < 10) { rover.pictures++; logCommand("Picture taken"); cache.rover = {...rover}; cache.rocks = new Map(rocks); } else { logCommand("Disk Error: No more free space"); } document.getElementById("diskSpace").innerText = 10 - rover.pictures; } /** * Restore map. * * Restore map using cache made when taking a photo * * @returns {void} */ function restore() { if (cache.rover && cache.rocks) { rover = {...cache.rover}; rocks = new Map(cache.rocks); document.getElementById("diskSpace").innerText = 10 - (--rover.pictures); document.getElementById("rocksNo").innerText = rover.storage.length; document.getElementById("posx").innerText = rover.x; document.getElementById("posy").innerText = rover.y; document.getElementById("rot").innerText = rover.rot; logCommand("Restored from photo"); } else { logCommand("TimeTravel Error: No photo to restore from"); } } /** * Free disk space * * Remove photos on given interval. * Remove inteval when no photos left * * @param {Interval} selfInterval interval to remove * * @returns {void} */ function sendPicture(selfInterval) { if (rover.pictures > 0) { document.getElementById("diskSpace").innerText = 10 - (--rover.pictures); logCommand("Notification: Picture sent"); } else { clearInterval(selfInterval); } } /** * Analyse rock * * Print contents of rock (if present) * * @param {bool} toConsole whether print result to rover console or alert it * * @returns {void} */ function analyse(toConsole = true) { let currentRock = rover.storage[rover.storage.length - 1]; if (currentRock) { //if rock exists if (currentRock === true) { //if it is a small rock if (toConsole) logCommand("Analysis Error: Sample to small"); else alert("Analysis Error: Sample to small"); } else { //if it is a big rock if (toConsole) logCommand(`Sample seems to be made of ${currentRock}`); else alert(`Sample seems to be made of ${currentRock}`); } } else { if (toConsole) logCommand("Analysis Error: Nothing to analyse"); else alert("Analysis Error: Nothing to analyse"); } } /** * print last used commands * * @returns {void} */ function roverLog() { for (const cmd of commandLog) { display.innerHTML = `

>>${cmd}

` + display.innerHTML; } } /** * Log the command * * Add command to the log and write it to the display * * @param {string} command command to log * @param {bool} toScreen if true then log command to screen * * @returns {void} */ function logCommand(command, toScreen = true) { if (toScreen) { display.innerHTML = `

${command}

` + display.innerHTML; } else { if (commandLog.length >= 15) { commandLog.shift(); //Remove old commands } commandLog.push(command); //Push command to the log } } /** * Drop the rock * * Check if drop can be dropped, then drop the rock * * @returns {void} */ function drop() { let currentRock = rover.storage[rover.storage.length-1]; //Get rock at the end of stack if (currentRock) { //if rock exists if (currentRock === true) { //if it is a small rock rover.storage.pop(); } else { //if it is a big rock let key = JSON.stringify([rover.x, rover.y]); if (!rocks.has(key)) { //if no big rock at current position rocks.set(key, rover.storage[rover.storage.length - 1]); rover.storage.pop(); } else { logCommand( "Collector Error: Unable to drop.
Object blocking collector arm" ); } } document.getElementById("rocksNo").innerText = rover.storage.length; } else { logCommand("Warning: Nothing to drop"); } } /** * Pick up the rock * * Used to pick up the rock. * If rock is big it will log its content * * @returns {void} */ function pickup() { if (rover.storage.length < 5) { let key = JSON.stringify([rover.x, rover.y]); if (rocks.has(key)) { rover.storage.push(rocks.get(key)); rocks.delete(key); } else { rover.storage.push(true); } document.getElementById("rocksNo").innerText = rover.storage.length; } else { logCommand("Collector Error: Unable to contain more rocks"); } } /** * Move the rover * * Get direction. Calculate final position. * Move the rover or stop at the border * * @param {string} dir Direction F or B * @param {number} range Number of fields to move * * @returns {void} */ function move(dir, range) { var x = Math.round(range * Math.cos(rover.ang)); var y = Math.round(range * Math.sin(rover.ang)); if (dir === 'F') { rover.x += x; rover.y += y; } else if (dir === 'B') { rover.x -= x; rover.y -= y; } if (rover.x >= cs) { rover.x = cs - 1; } else if (rover.x < 0) { rover.x = 0; } if (rover.y >= cs) { rover.y = cs - 1; } else if (rover.y < 0) { rover.y = 0; } document.getElementById("posx").innerText = rover.x; document.getElementById("posy").innerText = rover.y; } /** * Rotate the rover * * Get direction. Rotate the rover. * Make sure that turn > -360 and turn < 360 * * @param {string} dir Direction L or R * @param {number} range Ammount of 15deg turns (max. 12) * * @returns {void} */ function turn(dir, range) { let turn = range > 0 && range <= 12 ? //if range 0...12 range : 1; turn *= 15; //make rotation in degrees if (dir === 'L') { turn = rover.rot - turn; if (turn < -180) { turn += 360; } rover.rot = turn; } else if (dir === 'R') { turn += rover.rot; if (turn > 180) { -(turn -= 360); } rover.rot = turn; } rover.ang = rover.rot * Math.PI / 180; document.getElementById("rot").innerText = rover.rot; } /** * Draw map * * Function to execute other map drawing functions * * @returns {void} */ function drawI() { drawBoard(); drawRocks(); drawRover(); } /** * Draw backgound * * Draw black background with a green grid * * @returns {void} */ function drawBoard() { ctx.fillStyle = "black"; ctx.fillRect(0, 0, cw, ch); for (var i = fs; i < cw; i += fs) { ctx.fillStyle = "green"; ctx.fillRect(i, 0, 1, ch); ctx.fillRect(0, i, cw, 1); } } /** * Draw rover * * Draw red square at current rover position * * @returns {void} */ function drawRover() { ctx.fillStyle = "silver"; ctx.fillRect(rover.x * fs, rover.y * fs, fs, fs); } /** * Generate map of rocks. * * @returns {void} */ function populate() { let rockNum = Math.floor(Math.random() * (15 - 8) + 8); for (let i = 0; i < rockNum; i++) { do { var pos = [ Math.floor(Math.random() * (cs - 1)), Math.floor(Math.random() * (cs - 1)) ]; } while (rocks.has(pos)) //set mineral at given position to one of avaliable rocks.set(JSON.stringify(pos), rockMinerals[Math.floor(Math.random() * rockMinerals.length)]); } } /** * Place rocks on map * * Draw on canvas every rock stored in Map */ function drawRocks() { for (var [k, v] of rocks) { k = JSON.parse(k); ctx.fillStyle = "#770000"; ctx.fillRect(k[0] * fs, k[1] * fs, fs, fs) } }

[CONTEST] Mars rover sim