-
Notifications
You must be signed in to change notification settings - Fork 0
/
minified.html
3 lines (3 loc) · 9.47 KB
/
minified.html
1
2
3
<title>Drag n Drop Colors Game</title><style>.rules,button{display:inline-block}body{font-family:sans-serif;color:#fff}button{background-color:#f44336;font-size:16px;border:none;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;margin-top:30px;cursor:pointer}.scorer,.timer{position:fixed;top:40px;font-size:20px}li,p,ul{text-align:left}li{line-height:20px}.rules{margin-top:20px}.scorer{left:10px}.timer{right:10px;text-align:center}.score,.time{font-weight:900;font-size:30px}#hrules1,#hrules2{display:none}</style>
<body bgcolor="#222" style="text-align:center;"> <h1>DragnDrop Color Names by Satyam#imLolman</h1> <div class="rules" id="hrules1"> <p> <ul> <li>Mode 1: Left Side color Boxes have same color as Right Side.<br></li></ul> </p></div><div class="rules" id="hrules2"> <p> <ul> <li>Mode 2: Left Side color Boxes have same color text as Right Side.<br></li></ul> </p></div><div class="rules" id="rules"> <p> How to Play: <ul> <li>Any one of two gaming modes code appear randomly.</li><li>You have to match Right boxes to Left Side</li><li>Mode 1: Left Side color Boxes have same color as Right Side.<br><canvas id="mode1"></canvas> </li><li>Mode 2: Left Side color Boxes have same color text as Right Side.<br><canvas id="mode2"></canvas> </li><li>Press Enter to Start</li></ul> </p><p> Rules: <ul> <li>Stopwatch 🕛 Will Begin as Soon as You Click Start.</li><li>Stopwatch Will end immidiately, as Soon as You Match all Color Names to Colors. 🎨</li><li>Your Best Score Will Stay On Your Cache, Don't Clear it. 📫</li><li>Don't Try to Break the Game, Enjoy it 😃</li></ul> </p></div><br><button onclick="startGame()" id="btn" class="btn" autofocus>Start Game</button> <canvas id="demo" style="display:none"></canvas><br><br><canvas id="gameCanvas" onmousedown="mousedown(event)" onmouseup="mouseup(event)" onmousemove="mousemove(event)" onmouseout="mouseout(event)" style="display:none;"></canvas> <p class="scorer"> Heighest Score: <span class="score" id="score">30s</span> </p><p class="timer"> Stopwatch: <span class="time" id="time">00:00:00</span><br><button onclick="window.location=window.location.href" id="btn1" class="btn" style="display:none;">Restart Game</button> </p></body>
<script>var startTime,endGame=!1;getMaxScore();var width="350",height="400",canvasId="gameCanvas",fontSize=20,nextlocAdd=70,nextlocinit=50,useColors=["Red","Green","Blue","Gold","Chocolate"],padding=30;function modeSetup(e,t){var o=document.getElementById(e);o.width=width,o.height=2*padding+fontSize+10;var n=o.getContext("2d");n.fillStyle="#eee",n.fillRect(0,0,width,2*nextlocinit+fontSize+10),n.font=fontSize+"px sans-serif",n.fillStyle=colourNameToHex(1==t?"chocolate":"red"),n.fillRect(width-n.measureText("Red").width-padding-5,padding,n.measureText("Red").width+20,fontSize+10),n.strokeStyle=colourNameToHex("chocolate"),n.lineWidth=1,n.strokeRect(padding,padding,n.measureText("Red").width+20,fontSize+10),n.fillStyle=colourNameToHex("chocolate"),n.fillText("Red",padding+10,padding+fontSize+fontSize/33),n.beginPath();var i=padding+5;n.lineWidth=2,n.moveTo(150,i+5),n.lineTo(150,i+(fontSize-5)+5),n.lineTo(180,i+(fontSize-5)+5),n.lineTo(180,i+(fontSize-5)+5+10),n.lineTo(220,i+(fontSize-5)/2+5),n.lineTo(180,i-5),n.lineTo(180,i+5),n.lineTo(150,i+5),n.stroke()}modeSetup("mode1",1),modeSetup("mode2",2),grabbed=!1,grabbedIndex=0,grabloc={x:0,y:0};var offsetX,offsetY,context,gameMode,won,atexts=[],cboxes=[],maxWidth=0;function startGame(){document.getElementById("rules").style.display="none",document.getElementById("btn").style.display="none",document.getElementById(canvasId).style.display="inline",document.getElementById("btn1").style.display="inline",gameMode=Math.floor(2*Math.random()+1),document.getElementById("hrules"+gameMode.toString()).style.display="inline-block",document.getElementById("demo").style.display="inline",modeSetup("demo",gameMode);var e=document.getElementById(canvasId);e.width=width,e.height=height;var t={top:document.getElementById(canvasId).offsetTop,left:document.getElementById(canvasId).offsetLeft};offsetX=t.left,offsetY=t.top,context=e.getContext("2d"),setup(),draw(),startTime()}function setup(){var e=useColors.slice();useColors.forEach(function(t){var o=Math.floor(Math.random()*e.length);atexts.push({data:t,color:colourNameToHex(e[o])}),e.splice(o,1)});var t=nextlocinit;context.font=fontSize+"px sans-serif",atexts.forEach(function(e,o){e.dim={posX:padding,posY:t,width:context.measureText(e.data).width+20,height:fontSize+10},maxWidth<context.measureText(e.data).width+20&&(maxWidth=context.measureText(e.data).width+20),t+=nextlocAdd});e=useColors.slice(),t=nextlocinit;atexts.forEach(function(o){var n=Math.floor(Math.random()*e.length);cboxes.push({posX:width-maxWidth-padding-5,posY:t,width:maxWidth,height:fontSize+15,color:colourNameToHex(e[n])}),t+=nextlocAdd,e.splice(n,1)})}function draw(){context.fillStyle="#eee",context.fillRect(0,0,width,height),cboxes.forEach(function(e,t){context.fillStyle=e.color,context.fillRect(e.posX,e.posY,e.width,e.height),cboxHasABox(e).has&&(context.fillStyle="#00000055",context.fillRect(e.posX,e.posY,e.width,e.height))}),context.font=fontSize+"px sans-serif",atexts.forEach(function(e,t){grabbed&&t==grabbedIndex?(context.strokeStyle="#FFFFFF",context.lineWidth=5):(context.strokeStyle=e.color,context.lineWidth=1),context.strokeRect(e.dim.posX,e.dim.posY,e.dim.width,e.dim.height),context.fillStyle=e.color,context.fillText(e.data,e.dim.posX+10,e.dim.posY+fontSize+fontSize/33)}),endGame&&(console.log(endGame),context.fillStyle="#00000022",context.fillRect(0,0,width,height),won?(context.fillStyle="#ffffff",context.fillText("New Highscore 🏆🏆",padding,padding)):(context.fillStyle="#ffffff",context.fillText("You Missed the HighScore 😱",padding,padding),context.fillText("Be Quick Next time 💨",padding,padding+fontSize+10)))}function mousedown(e){endGame||handleMouseDown(e)}function mousemove(e){endGame||handleMouseMove(e)}function mouseup(e){endGame||handleMouseUp(e)}function mouseout(e){endGame||handleMouseOut(e)}function startTime(){startTime=Date.now();var e=setInterval(function(){var t=Date.now()-startTime,o=t;o-=1e3*Math.floor(o/1e3/60/60)*60*60;var n=Math.floor(o/1e3/60);o-=1e3*n*60;var i=Math.floor(o/1e3);if(o-=1e3*i,document.getElementById("time").innerHTML=get2D(n)+":"+get2D(i)+":"+get2D(o),1==gameMode){var a=!0;cboxes.forEach(function(e,t){var o=cboxHasABox(e);o.has?atexts[o.index].color!=e.color&&(a=!1):a=!1})}else{a=!0;cboxes.forEach(function(e,t){var o=cboxHasABox(e);o.has?colourNameToHex(atexts[o.index].data)!=e.color&&(a=!1):a=!1})}a&&(endGame=!0,won=setMaxScore(t),draw(),clearInterval(e))},100)}function handleMouseDown(e){console.log("mousedown"),canMouseX=parseInt(e.clientX-offsetX),canMouseY=parseInt(e.clientY-offsetY),atexts.forEach(function(t,o){console.log("mousedown loop"),isInBox(e,t)&&(document.getElementById(canvasId).style.cursor="grab",grabbedIndex=o,grabbed=!0,console.log("setGrabbed True"),grabloc={x:canMouseX-t.dim.posX,y:canMouseY-t.dim.posY},console.log(grabloc))})}function handleMouseUp(e){console.log("mouseup"),canMouseX=parseInt(e.clientX-offsetX),canMouseY=parseInt(e.clientY-offsetY),console.log("setGrabbed mouseUp"),grabbed=!1}function handleMouseMove(e){if(console.log("mousemove"),canMouseX=parseInt(e.clientX-offsetX),canMouseY=parseInt(e.clientY-offsetY),console.log("mouseX: ",canMouseX),console.log("mouseY: ",canMouseY),grabbed)atexts[grabbedIndex].dim.posX=canMouseX-grabloc.x,atexts[grabbedIndex].dim.posY=canMouseY-grabloc.y;else{var t=!1;atexts.forEach(function(o){isInBox(e,o)&&(document.getElementById(canvasId).style.cursor="grab",t=!0)}),t||(document.getElementById(canvasId).style.cursor="auto")}draw()}function handleMouseOut(e){console.log("mouseoput"),handleMouseUp(e)}function isInBox(e,t){return canMouseX=parseInt(e.clientX-offsetX),canMouseY=parseInt(e.clientY-offsetY),canMouseX>t.dim.posX&&canMouseX<t.dim.posX+t.dim.width&&canMouseY>t.dim.posY&&canMouseY<t.dim.posY+t.dim.height}function cboxHasABox(e){var t=!1,o=0;return atexts.forEach(function(n,i){n.dim.posX>e.posX&&n.dim.posX<e.posX+e.width&&n.dim.posY>e.posY&&n.dim.posY<e.posY+e.height&&(t=!0,o=i),n.dim.posX>e.posX&&n.dim.posX<e.posX+e.width&&n.dim.posY+n.dim.height>e.posY&&n.dim.posY+n.dim.height<e.posY+e.height&&(t=!0,o=i),n.dim.posX+n.dim.width>e.posX&&n.dim.posX+n.dim.width<e.posX+e.width&&n.dim.posY>e.posY&&n.dim.posY<e.posY+e.height&&(t=!0,o=i),n.dim.posX+n.dim.width>e.posX&&n.dim.posX+n.dim.width<e.posX+e.width&&n.dim.posY+n.dim.height>e.posY&&n.dim.posY+n.dim.height<e.posY+e.height&&(t=!0,o=i)}),{has:t,index:o}}function setMaxScore(e){return""==getCookie("et")?(setCookie("et",e.toString(),50),!0):e<parseInt(getCookie("et"))&&(setCookie("et",e.toString(),50),getMaxScore(),!0)}function colourNameToHex(e){var t={red:"#ff0000",green:"#008000",blue:"#0000ff",gold:"#ffd700",chocolate:"#d2691e"};return void 0!==t[e.toLowerCase()]&&t[e.toLowerCase()]}function get2D(e){return e.toString().length<2?"0"+e:e.toString().length>2?e.toString().substring(0,2):e.toString()}function getMaxScore(){if(""!=getCookie("et")){var e=getCookie("et");e-=1e3*Math.floor(e/1e3/60/60)*60*60;var t=Math.floor(e/1e3/60);e-=1e3*t*60;var o=Math.floor(e/1e3);e-=1e3*o,document.getElementById("score").innerHTML=get2D(t)+":"+get2D(o)+":"+get2D(e)}}function setCookie(e,t,o){var n=new Date;n.setTime(n.getTime()+24*o*60*60*1e3);var i="expires="+n.toUTCString();document.cookie=e+"="+t+";"+i+";path=/"}function getCookie(e){for(var t=e+"=",o=document.cookie.split(";"),n=0;n<o.length;n++){for(var i=o[n];" "==i.charAt(0);)i=i.substring(1);if(0==i.indexOf(t))return i.substring(t.length,i.length)}return""}</script>