/* Nothing to say, just an easy game code. All the UI is my usual template, so I didn't spend more time on it. To start a game, just touch the game field (blue area with yellow squares), and touch from 1 to 99! Smartphones recommended. I can usually complete to 60~70 and have cleared with time about 1.655 sec after 99 released :) Have fun!✩°｡⋆⸜(* ॑꒳ ॑* )⸝ '18/07/18 Flandre Scarlet(雨宮桜) */ window.onload = () => { setups(); crtBtns(); cheatMode = false; // show next number alert("Touch the game field to start games : )"); // make it a comment if you don't like it :) Data.addEL("bg", "touchstart", () =>{ if(!gaming){ for(var p=0; p<16; p++) Data.getEl("btn"+p). innerText = ""; if(cheatMode&¤t>1) Data.getSt("btn"+rec. indexOf(current)).background = "yellow"; rec = [0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0]; filled = 0; current = 1; currentTime = new Date().getTime(); playTime = 0; showInfo("next number: " + current); showInfo("", 2); gaming = true; gameover = false; putNumber(); if(cheatMode) Data.getSt("btn"+rec. indexOf(1)).background = "blue"; } }); } function timing(){ playtime = (new Date().getTime() - currentTime)/1000; showInfo("time: " + playtime, 2); if(!gameover) setTimeout(timing, 10); } function crtBtns(){ var size = 4; for(var p=0; p0) plc = randint(16); Data.getEl("btn"+plc).innerText = n; rec[plc] = n++; filled++; if(filled==16){ setTimeout(()=>gaming=false,2000); gameover = true; print("Gameover... (score: " + (current-1) + ")"); }else if(n==100){ timing(); }else setTimeout(()=>putNumber(n), 1000/Math.sqrt(n)); } // basic setups function setups(){ setupGlobalParams(); setupUI(); checkWH = setInterval(setupUI, 100); } function setupGlobalParams(){ printFullScreen = false; printMinimum = false; gaming = false; gameover = false; current = 1; } function setupUI(){ setupUnit(); setupTextFields(); setupBG(); setupPrint(); } function setupUnit(){ unit=innerWidth>innerHeight?"vh":"vw"; unitlen = innerWidth>innerHeight? innerHeight/100: innerWidth/100; } function setupTextFields(){ //alert(document.constructor.name) document.styleSheets[0].addRule(".txt", "font-size: " + 4 + unit + ";"); document.styleSheets[0].addRule(".txt", "width: " + 100 + unit + ";"); Data.getSt("text_field1").top=0+unit; Data.getSt("text_field2").top=5+unit; } function setupBG(pad=[0,5]){ Data.getSt("bg").width = 100 + unit; Data.getSt("bg").height = 100 + unit; Data.getSt("bg").position = "absolute"; Data.getSt("bg").left = pad[0] + unit; Data.getSt("bg").top = pad[1] + unit; document.styleSheets[0].addRule ("div.btn", "font-size: 20"+unit); } function setupPrint(){ // ----- print field ----- var pfs = Data.getSt("print_field"); pfs.fontSize = 5 + unit; if(unit=="vw"){ if(innerHeight < 110 * unitlen) pfs.bottom = (innerHeight - 110 * unitlen) + "px"; else pfs.bottom = 0; pfs.left = 0; pfs.width = "100%"; if(printMinimum) pfs.height = "5vw"; else if(printFullScreen){ pfs.height = "100vh"; }else if(innerHeight<105*unitlen) pfs.height = "5vw"; else pfs.height = (innerHeight - 105 * unitlen) + "px"; pfs.top = "auto"; pfs.right = "auto"; }else{ pfs.top = 0; printMinimum = false; printFullScreen = false; if(innerWidth < 140 * unitlen) pfs.right = (innerWidth - 140 * unitlen) + "px"; else pfs.right = 0; pfs.height = "100%"; if(innerWidth < 140 * unitlen) pfs.width = "40vh"; else pfs.width = (innerWidth - 130 * unitlen) + "px"; pfs.left = "auto"; pfs.bottom = "auto"; } // ----- print title ----- var pts = Data.getSt("print_title"); pts.height = 5 + unit; pts.fontSize = 4 + unit; // ----- print minimum ----- var pns = Data.getSt("print_minimum"); pns.height = 5 + unit; pns.width = 5 + unit; pns.right = 7 + unit pns.fontSize = 5 + unit; pns.display=unit=="vw"?"block":"none"; Data.addEL("print_minimum","click",()=>{ printMinimum=!printMinimum; }); // ----- print magnify ----- var pms = Data.getSt("print_magnify"); Data.getEl("print_magnify").innerText = printFullScreen?"▫":"□"; pms.height = 5 + unit; pms.width = 5 + unit; pms.fontSize = 5 + unit; pms.display=unit=="vw"?"block":"none"; Data.addEL("print_magnify","click",()=>{ printMinimum = false; printFullScreen=!printFullScreen; }); // ----- print content ----- var pcs = Data.getSt("print_content"); pcs.height = (Data.getValPx ("print_field", "height")-5*unitlen)+"px"; pcs.fontSize = 4 + unit; pcs.top = 5 + unit; } function print(str="", ...strs){ var pct = Data.getEl("print_content") pct.innerText += str + "\n"; for(var x=0; x{ if(!gameover && el.innerText == ""+current){ var here=rec.indexOf(current); rec[here] = 0; if(cheatMode) Data.getSt("btn"+here). background = "yellow"; el.innerText=""; current++; if(current==100){ gameover = true; print("Game Clear! (" + playtime + " sec)"); setTimeout(()=> gaming=false, 2000); } else if(cheatMode) try{Data.getSt ("btn"+rec. indexOf(current)).background = "blue";} catch(e){}; showInfo(current==100?"":"next number: " + current); filled--; } }); return el; } // circles function circle(id, pt, r, border=0, bdcolor="black"){ var st = Data.getEl(id).style; st.width = 2*r + "%"; st.height = 2*r + "%"; st.borderRadius = "50%"; st.border = border+"%" + " solid " + bdcolor; st.left = (pt[0]-r-border) + "%"; st.top = (pt[1]-r-border) + "%"; st.fontSize = 1.5*r + "%"; st.textAlign = "center"; } // capsules function stick(id, pt1, pt2, r=-1, border=0, bdcolor="black"){ var s = Data.getEl(id); var h; if(r==null){ h = Data.getValPx(id,"height")/unitlen; r = h/2; s.style.height = h + "%"; s.style.borderRadius = (r+border) + "%"; }else{ h = 2*r; s.style.height = h + "%"; s.style.borderRadius = (r+border) + "%"; } var w = Math.sqrt((pt1[0] - pt2[0])**2 +(pt1[1]-pt2[1])**2)+2*r; s.style.width = w + unit; s.style.left = (pt1[0]-r-border)+"%"; s.style.top = (pt1[1]-r-border) + "%"; s.style.border = border+"%" +" solid " + bdcolor; s.style.transformOrigin = (r+border)+"%" + " " + (r+border)+"%"; if(pt2[0]!=pt1[0]) s.style.transform = "rotate(" + (Math.atan((pt2[1]-pt1[1])/(pt2[0]-pt1[0])) *180/Math.PI + (pt2[0]pt1[1]?180:0)) + "deg)"; } // rectangles function rect(id, pt1, pt2, width=null, border=0, bdcolor="black"){ var s = Data.getEl(id); var h = width; if(width==null){ h = Data.getValPx(id,"height")/unitlen; s.style.height = h + "%"; }else{ s.style.height = h + "%"; } var w = Math.sqrt((pt1[0] - pt2[0])**2 +(pt1[1]-pt2[1])**2); s.style.width = w + "%"; s.style.left = (pt1[0]-border)+"%"; s.style.top = (pt1[1]-width/2-border) + "%"; s.style.border = border+"%" +" solid " + bdcolor; s.style.borderRadius = 0; s.style.transformOrigin = (border)+"%" + " " + (width/2+border)+"%"; if(pt2[0]!=pt1[0]) s.style.transform = "rotate(" + (Math.atan((pt2[1]-pt1[1])/(pt2[0]-pt1[0])) *180/Math.PI + (pt2[0]pt1[1]?180:0)) + "deg)"; } // ----- create div shape until here ----- // random parameters function randomColor(){ var color = "#"; var hex = "0123456789abcdef"; for(var p=0; p<6; p++) color += hex[Math.floor(Math. random()*16)]; return color; } function randint(...nums){ if(nums.length==0) return Math.floor(Math.random()*10); else if(nums.length==1) return Math.floor(Math.random() * nums[0]); else if(nums.length==2) return Math.floor(Math.random() * (nums[1]-nums[0])) + Math.ceil(nums[0]); else if(nums.length==3) return Math.floor(Math.floor (Math.random() * (nums[1]-nums[0])/nums[2])*nums[2]) + Math.ceil(nums[0]); } // ----- random parameters until here -----

[Game] Challenge 99!