Created
June 24, 2014 19:48
-
-
Save werring/8dc3126203bfbc064bfb to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Hex Puzzle Teaser</title> | |
| </head> | |
| <body> | |
| <canvas width="800" height="669" id="mazecanvas">Your browser does not support HTML5, you really should consider updating or downloading a better browser.</canvas> | |
| <noscript>JavaScript is not enabled. To play the game, you need to enable it.</noscript> | |
| <script> | |
| const IMG = "http://darkfall.comastuff.com/Hex/RoyalValkyr.jpg"; | |
| var canvas = document.getElementById("mazecanvas"); | |
| var context = canvas.getContext("2d"); | |
| var currRectX = 442; | |
| var currRectY = 19; | |
| var mazeWidth = 669; | |
| var mazeHeight = 669; | |
| var intervalVar; | |
| function drawMazeAndRectangle(rectX, rectY) { | |
| makeWhite(0, 0, canvas.width, canvas.height); | |
| var mazeImg = new Image(); | |
| mazeImg.onload = function () { | |
| context.drawImage(mazeImg, 0, 0); | |
| drawRectangle(rectX, rectY, "#0000FF", false, true); | |
| context.beginPath(); | |
| context.arc(428, 650, 7, 0, 2 * Math.PI, false); | |
| context.closePath(); | |
| context.fillStyle = '#00FF00'; | |
| context.fill(); | |
| }; | |
| mazeImg.src = "maze.gif"; | |
| } | |
| function drawRectangle(x, y, style) { | |
| makeWhite(currRectX, currRectY, 15, 15); | |
| currRectX = x; | |
| currRectY = y; | |
| context.beginPath(); | |
| context.rect(x, y, 15, 15); | |
| context.closePath(); | |
| context.fillStyle = style; | |
| context.fill(); | |
| } | |
| function makeWhite(x, y, w, h) { | |
| context.beginPath(); | |
| context.rect(x, y, w, h); | |
| context.closePath(); | |
| context.fillStyle = "white"; | |
| context.fill(); | |
| } | |
| function moveRect(e) { | |
| var newX; | |
| var newY; | |
| var canMove; | |
| e = e || window.event; | |
| switch (e.keyCode) { | |
| case 38: // arrow up key | |
| case 87: // W key | |
| newX = currRectX; | |
| newY = currRectY - 3; | |
| break; | |
| case 37: // arrow left key | |
| case 65: // A key | |
| newX = currRectX - 3; | |
| newY = currRectY; | |
| break; | |
| case 40: // arrow down key | |
| case 83: // S key | |
| newX = currRectX; | |
| newY = currRectY + 3; | |
| break; | |
| case 39: // arrow right key | |
| case 68: // D key | |
| newX = currRectX + 3; | |
| newY = currRectY; | |
| break; | |
| } | |
| movingAllowed = canMoveTo(newX, newY); | |
| if (movingAllowed === 1) { // 1 means 'the rectangle can move' | |
| drawRectangle(newX, newY, "#0000FF"); | |
| currRectX = newX; | |
| currRectY = newY; | |
| } | |
| <!--------- Change to IMAGE ----------> | |
| else if (movingAllowed === 2) { | |
| clearInterval(intervalVar); | |
| makeWhite(0, 0, canvas.width, canvas.height); | |
| var card = new Image(); | |
| card.addEventListener("load",function(){ | |
| var _width = this.width * (canvas.height/this.height) | |
| var _x = (canvas.width - _width)/2; | |
| context.drawImage(this,_x,0,_width,canvas.height); | |
| }); | |
| card.src = IMG; | |
| window.removeEventListener("keydown", moveRect, true); | |
| window.removeEventListener("keydown", moveRect, true); | |
| } | |
| } | |
| function canMoveTo(destX, destY) { | |
| var imgData = context.getImageData(destX, destY, 15, 15); | |
| var data = imgData.data; | |
| var canMove = 1; // 1 means: the rectangle can move | |
| if (destX >= 0 && destX <= mazeWidth - 15 && destY >= 0 && destY <= mazeHeight - 15) { // check whether the rectangle would move inside the bounds of the canvas | |
| for (var i = 0; i < 4 * 15 * 15; i += 4) { // look at all pixels | |
| if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0) { // black | |
| canMove = 0; // 0 means: the rectangle can't move | |
| break; | |
| } | |
| else if (data[i] === 0 && data[i + 1] === 255 && data[i + 2] === 0) { // lime: #00FF00 | |
| canMove = 2; // 2 means: the end point is reached | |
| break; | |
| } | |
| } | |
| } | |
| else { | |
| canMove = 0; | |
| } | |
| return canMove; | |
| } | |
| function createTimer(seconds) { | |
| intervalVar = setInterval(function () { | |
| makeWhite(mazeWidth, 0, canvas.width - mazeWidth, canvas.height); | |
| if (seconds === 0) { | |
| clearInterval(intervalVar); | |
| window.removeEventListener("keydown", moveRect, true); | |
| makeWhite(0, 0, canvas.width, canvas.height); | |
| context.font = "40px Arial"; | |
| context.fillStyle = "red"; | |
| context.textAlign = "center"; | |
| context.textBaseline = "middle"; | |
| context.fillText("You are out of time, refresh and try again!", canvas.width / 2, canvas.height / 2); | |
| return; | |
| } | |
| context.font = "20px Arial"; | |
| if (seconds <= 10 && seconds > 5) { | |
| context.fillStyle = "orangered"; | |
| } | |
| else if (seconds <= 5) { | |
| context.fillStyle = "red"; | |
| } | |
| else { | |
| context.fillStyle = "green"; | |
| } | |
| context.textAlign = "center"; | |
| context.textBaseline = "middle"; | |
| var minutes = Math.floor(seconds / 60); | |
| var secondsToShow = (seconds - minutes * 60).toString(); | |
| if (secondsToShow.length === 1) { | |
| secondsToShow = "0" + secondsToShow; // if the number of seconds is '5' for example, make sure that it is shown as '05' | |
| } | |
| context.fillText(minutes.toString() + ":" + secondsToShow, mazeWidth + 30, canvas.height / 2); | |
| seconds--; | |
| }, 1000); | |
| } | |
| drawMazeAndRectangle(442, 19); | |
| window.addEventListener("keydown", moveRect, true); | |
| createTimer(500); // 3 min | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment