function main(){ X = undefined; fs = X; setObjs(); // uncomment this line if SL crashes //Radar.cv.width = Radar.cv.height = Rover.cv.width = Rover.cv.height = 3600; Radar.zoom(); var rdcv = Radar.cv, rdct = Radar.ref; for(var p=0;pGet rocks: " + (n-failed)); } }, release: function(n){ CPM.rocks.splice(n||0,1); CPM.rocks.push(X); }, analyze: function(n){ n = n||0; if(CPM.rocks[n]!==X){ document.getElementById ("space_id").innerText = n+1; function analyze(rock){ document.getElementById ("ana_pos").innerText = "("+rock.loc.x+", " +rock.loc.y+")"; var c = "#", maxc=0; for(var p=0; p<3; p++){ c += ("0"+rock. color[p].toString(16)).slice(-2); if(rock.color[p] > maxc) maxc = rock. color[p]; } document.getElementById ("ana_color").innerText = c; document.getElementById ("ana_color").style.backgroundColor = c; document.getElementById ("ana_color").style.color = maxc>102? "black": "white"; } analyze(CPM.rocks[n]); openTool("analysis"); }else return "NR"; // no rocks }, take_photo: function(){ var piccv = document. getElementById("phototmp"); var picctx = piccv.getContext("2d"); piccv.width = piccv.height = Rover.size*2; picctx.drawImage(Radar.cv, limit(Rover.location.x-Rover.size,0,Radar.cv.width-Rover.size*2), limit(Rover.location.y-Rover.size,0,Radar.cv.height-Rover.size*2), Rover.size*2, Rover.size*2, 0, 0, Rover.size*2, Rover.size*2); picctx.drawImage(Rover.cv, limit(Rover.location.x-Rover.size,0,Radar.cv.width-Rover.size*2), limit(Rover.location.y-Rover.size,0,Radar.cv.height-Rover.size*2), Rover.size*2, Rover.size*2, 0, 0, Rover.size*2, Rover.size*2); for(var p=19; p>0; p--) moveImg( document.getElementById ("photo"+(p-1)), document.getElementById ("photo"+p)); moveImg(piccv, document. getElementById("photo0")); document.getElementById("curr_page").innerText = "1/20"; } } Radar = { cv: document.getElementById("ground"), ref: document.getElementById("ground") .getContext("2d"), range: 1000, // px location: {x:0, y:0}, locate: function(loc){ if(loc.x<0) loc.x = 0; else if(loc.x > Radar.cv.width - Radar.range) loc.x = Radar.cv.width - Radar.range; if(loc.y<0) loc.y = 0; else if(loc.y > Radar.cv.height - Radar.range) loc.y = Radar.cv.height - Radar.range; Radar.location = {x:loc.x, y:loc.y}; var margin = { x:-loc.x/Radar.range*100, y:-loc.y/Radar.range*100 }; Radar.cv.style.margin = margin.y + "% " + margin.x + "%"; return margin; }, zoom: function(io, n){ io = io || ""; function scales(ratio){ var base = [3, 4, 6, 8, 10, 12, 16, 20, 24]; for(var i in base) base[i] *= ratio; return base; } var ranges = scales(100); var sizes = scales(8); var ind = ranges.indexOf(Radar.range); switch(io.toUpperCase()){ case "I": ind -= parseInt(n) || 1; break; case "O": ind += parseInt(n) || 1; break; case X: case "": ind = (parseInt(n)+1||5)-1; break; } if(ind<0) ind = 0; else if(ind>8) ind = 8; var ratio = { x:Radar.cv.width/ranges[ind]*100, y:Radar.cv.height/ranges[ind]*100 }; Radar.cv.style.width = Rover.cv.style.width = ratio.x + "%"; Radar.cv.style.height = Rover.cv.style.height = ratio.y + "%"; Radar.range = ranges[ind]; Rover.locate(Rover.location, sizes[ind]); } } Rover = { cv: document.getElementById("cover"), ref: document.getElementById("cover") .getContext("2d"), size: 0, direction: 0, // degree location: {x:500, y:500}, locate: function(loc, size2){ var rr = Rover.ref; rr.clearRect (Rover.location.x-Rover.size, Rover.location.y-Rover.size, Rover.size*2, Rover.size*2); if(loc===X) loc = {x:Rover.location.x, y:Rover.location.y}; Rover.location = {x:loc.x,y:loc.y}; if(size2!==X) Rover.size = size2; rr.strokeStyle = "red"; rr.lineWidth = 4; rr.beginPath(); rr.rect(loc.x-2-Rover.size/2, loc.y-2-Rover.size/2, Rover.size+4, Rover.size+4); rr.stroke(); rr.strokeStyle = "blue"; rr.beginPath(); rr.moveTo(loc.x, loc.y); var dx=Math.cos(Rover.direction/180*Math.PI), dy=Math.sin(Rover.direction/180*Math.PI); rr.lineTo( loc.x + dx*(Rover.size/2+4), loc.y + dy*(Rover.size/2+4) ); rr.stroke(); loc.x -= Radar.range/2; loc.y -= Radar.range/2; var margin = Radar.locate(loc); Rover.cv.style.margin = margin.y + "% " + margin.x + "%"; }, turn: function(dir, n){ n = parseInt(n) || 1; switch(dir){ case 1: case "l": case "L": Rover.direction += 345*n; Rover.direction %= 360; break; case -1: case "r": case "R": Rover.direction += 15*n; Rover.direction %= 360; break; } Rover.locate(); }, proceed: function(fb, n){ var dir; switch(fb){ case X: case "": case 1: case "f": case "F": dir = 1; break; case -1: case "b": case "B": dir = -1; break; default: // invalid direction dir = 0; } n = parseInt(n) || 1; var dx=Math.cos(Rover.direction/180*Math.PI), dy=Math.sin(Rover.direction/180*Math.PI); var pos = { x:Rover.location.x + dx*n*Rover.size/2*dir, y:Rover.location.y + dy*n*Rover.size/2*dir }; if(pos.xRover.cv.width-Rover.size/2){ pos.y -= (pos.x-Rover.cv.width-Rover.size/2) * dy/dx; pos.x = Rover.cv.width-Rover.size/2; } if(pos.yRover.cv.height-Rover.size/2){ pos.x -= (pos.y-Rover.cv.height-Rover.size/2) * dx/dy; pos.y = Rover.cv.height-Rover.size/2; } pos.x = Math.round(pos.x); pos.y = Math.round(pos.y); Rover.locate(pos); } } } // random integer/rgb-color function randint(dl, ul){ if(dl===X) dl = 0; else dl = Math. ceil(dl); if(ul===X) ul = 1000; else ul = Math.floor(ul); return Math.floor(Math.random()*(ul-dl+1)) + dl; } function randcolor(){ var r=randint(0,255), g=randint(0,255), b=randint(0,255); return "rgba("+[r,g,b,255]+")"; } // set down-limit and up-limit to a number function limit(val, dl, ul){ return Math.max(Math.min(val,ul),dl); } // key reaction to cmd box function execute(key){ var cmdbox = document.getElementById("cmdbox"); if(key===13){ logind = X; document.getElementById('tools'). style.display='none'; var rcmd = cmdbox.value.toUpperCase().trim(); if(rcmd==="") return; // no command cmd = rcmd.split(" "); cmdbox.value = ""; switch(cmd[0]){ case ".": cmdbox.value = CPM.cmds[0]; execute(13); var norec = true; break; case "M": case "MOV": Rover.proceed(cmd[1], cmd[2]); break; case "T": case "TRN": Rover.turn(cmd[1], cmd[2]); break; case "Z": case "ZOOM": Radar.zoom(cmd[1], cmd[2]); break; case "C": // collect case "RCK": CPM.collect(cmd[1]); break; case "R": case "RLS": CPM.release(); setRocks(); break; case "A": case "ANL": if(CPM.analyze(cmd[1]-1) === "NR") show("no rocks"); break; case "B": //backpack case "BPK": openTool("backpack"); break; case "P": case "PIC": albumTo(0); CPM.take_photo(); openTool("photo"); break; case "G": // gallery case "ALB": // album albumTo(cmd[1]-1||0); openTool("album"); break; case "H": // help case "CMDS": help(); var norec = true; break; case "L": case "LOG": openTool("cmdrec"); var norec = true; break; default: var norec = true; } if(!norec){ if(CPM.cmds.includes(rcmd)) CPM.cmds.splice(CPM.cmds. indexOf(rcmd), 1); else CPM.cmds.pop(); CPM.cmds.splice(0,0,rcmd); for(var p=0; p<10; p++){ document.getElementById ('cmd'+p).innerText = CPM.cmds[p]; } } }else if(key===38){ //up if(CPM.cmds[0]!==X){ if(logind===X){ logind = 0; }else{ logind += logind<9; } document.getElementById ("cmdbox").value = CPM.cmds[logind]; } }else if(key===40){ //down if(logind!==X){ logind -= logind>0; document.getElementById ("cmdbox").value = CPM.cmds[logind]; } }else{ logind = X; // reset } } // fill cmd from log to cmd box function fillcmd(cmd){ if(cmd!=="") document.getElementById("cmdbox"). value = cmd; } function openTool(tool){ var tools = ["photo", "album", "backpack", "analysis", "cmdrec", "quickshow", "curr_page"]; for(var p=0,t=tools[p];t;t=tools[++p]) document.getElementById(t).style. display = t===tool?"block": "none"; if(["photo", "album"].includes(tool)) document.getElementById("curr_page").style.display = "block"; document.getElementById ('tools').style.display = 'block'; } // show messages function show(msg){ document.getElementById("quickshow"). innerHTML = msg; openTool("quickshow"); } // copy canvas fully from pf(pic-from) to pt(pic-to) function moveImg(pf, pt){ pt.width = pf.width; pt.height = pf.height; pt.getContext("2d").drawImage(pf,0,0); } function watchImg(cv, page){ photoTo(page); moveImg(cv, document.getElementById ("phototmp")); openTool("photo"); } // jump to photo number function photoTo(page){ page = parseInt(page); page = limit(page||0, 0, 19); moveImg(document.getElementById("photo"+page), document.getElementById ("phototmp")); document.getElementById("curr_page"). innerText = page+1 + "/20"; } // jump to album page function albumTo(page){ page = parseInt(page); page = limit(page||0, 0, 4); for(var p=0; p<20; p++) document.getElementById("photo"+p). style.display = Math.floor(p/4)===page? "block": "none"; document.getElementById("curr_page"). innerText = page+1 + "/5"; } function prev_page(el){ var f = el==="album"? albumTo: el==="photo"? photoTo: doNothing; f(document.getElementById ("curr_page").innerText.split("/")[0]-2); } function next_page(el){ var f = el==="album"? albumTo: el==="photo"? photoTo: doNothing; f(parseInt(document. getElementById("curr_page").innerText.split("/")[0])); } // set rocks into backpack function setRocks(){ for(var p=0; p<10; p++){ var r = CPM.rocks[p]; if(r!==X){ document.getElementById ("rock"+p).style.backgroundColor = "rgba("+r.color+")" }else{ document.getElementById ("rock"+p).style.backgroundColor = "transparent"; } } } function keyact(key){ document.getElementById("fake").innerText = ""; switch(key){ case 27: document.getElementById("tools").style.display = "none"; break; case 33: if(getComputedStyle(document.getElementById("album")).display==="block") prev_page("album"); else if(getComputedStyle(document.getElementById("photo")).display==="block") prev_page("photo"); else if(getComputedStyle(document.getElementById("analysis")).display==="block") CPM.analyze(document.getElementById("space_id").innerText-2); break; case 34: if(getComputedStyle(document.getElementById("album")).display==="block") next_page("album"); else if(getComputedStyle(document.getElementById("photo")).display==="block") next_page("photo"); else if(getComputedStyle(document.getElementById("analysis")).display==="block") CPM.analyze(document.getElementById("space_id").innerText-0); break; case 37: document.getElementById("tools").style.display = "none"; Rover.turn("L"); break; case 38: document.getElementById("tools").style.display = "none"; Rover.proceed(); break; case 39: document.getElementById("tools").style.display = "none"; Rover.turn("R"); break; case 40: document.getElementById("tools").style.display = "none"; Rover.proceed("B"); break; case 65: CPM.analyze(); break; case 66: openTool("backpack"); break; case 67: CPM.collect(); break; case 70: fullscreen(); break; case 71: if(getComputedStyle(document.getElementById("photo")).display==="block") albumTo((document.getElementById("curr_page").innerText.split("/")[0]-1)/4); else albumTo(0); openTool("album"); break; case 72: help(); break; case 79: photoTo(0); openTool("photo"); break; case 80: albumTo(0); CPM.take_photo(); openTool("photo"); break; case 90: document.getElementById("tools").style.display = "none"; Radar.zoom("i"); break; case 88: document.getElementById("tools").style.display = "none"; Radar.zoom("o"); break; } //show(key); } function help(){ var guidelines = [".", "M/MOV (F/B) (n)", "T/TRN R/L (n)", "Z/ZOOM (I/O) (n)", "C/RCK", "R/RLS", "A/ANL", "B/BPK", "P/PIC", "G/ALB (n)", "H/CMDS", "L/LOG"]; show(guidelines.join("
")); } // full-screen function fullscreen(){ var frame = document.getElementById ("frame"), mars = document.getElementById ("mars"), ctrls = document.getElementById ("controls"), ctrlt = document.getElementById ("controls_title"); if(fs===X){ fs = true; mars.style.height = "100%"; frame.style.height = "100vw"; frame.style.maxWidth = "100vh"; frame.style.minHeight = "200px"; ctrls.style.opacity = ".05"; ctrls.style.height = "10%"; ctrlt.style.display = "none"; ctrls.style.backgroundColor = "transparent"; }else{ fs = X; mars.style.height = "66.66%"; frame.style.height = "150vw"; frame.style.maxWidth = "66.66vh"; frame.style.minHeight = "300px"; ctrls.style.opacity = "1"; ctrls.style.height = "33.33%"; ctrlt.style.display = "block"; ctrls.style.backgroundColor = "lightblue"; } } function doNothing(){}

[Contest] Mars Rover