From 0e8711be4dab878fb9be6efe586f5c9e79954be3 Mon Sep 17 00:00:00 2001 From: Shoeb1989 Date: Thu, 9 Nov 2023 23:44:29 +0600 Subject: [PATCH] 'replace' --- home.png | Bin 0 -> 4731 bytes index.html | 51 +++++ key.png | Bin 0 -> 5742 bytes script.js | 585 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 132 ++++++++++++ 5 files changed, 768 insertions(+) create mode 100644 home.png create mode 100644 index.html create mode 100644 key.png create mode 100644 script.js create mode 100644 style.css diff --git a/home.png b/home.png new file mode 100644 index 0000000000000000000000000000000000000000..6a0ffbfbb0ffb52810af87d116c46fc91659fa3e GIT binary patch literal 4731 zcmd5=4Ny~87CtW|kc7n`Rly%5qstOY1xIJaR*}%9MOjyaxaw4EzyWb*bU=#*1bGj^ zvW`}qEtd6{xVk!BDd4D6w8%r)t*(l&)*lchFp5S5lI1VKB=7CH??tEG+E%-|yMdX! zckemh`M&R*o4m<6D2mwa552I_;gMX>lp5($W*w zCqZOl%E~15+_eeGNehz_5;NERJ!uwzkN@1L$VC~qy6$|uw&ngU_xOviW#qm0T2!-k zx8aWZVpLg>?o8y&+^XDNiqd)UDLell_wwHC^Qh!rmfqI_;m+CP#`R_nwWjam7LCM` zFZq>sae;j+Np=#!MqUfVI_68|TB#QS13kiO6(Xsot z#h@AzRIH=}wF+>54^dC2iAcnR`cpV1Iti0YTrKnGNa_CN81zs?GJS@nzfKntQaeb3 zPD}_UWIw`lhY8CoF=*N~Y+Mnvy^W6VJy;-cN)ACz+XDqoGvbibsx=~~tt9BUNIV)R zE#<560@AppSbCC}(1b(v=Pd$GmN$3guL8V5U8@(!VE=>#Y_9-`8U z!M85-wt_gMNMubo*d`}{FcsiQ8c|9V5Tyi8R9b1polu8=m<|V6 z6zLZzRwUGXIfkeaN}(E5hpLGhLV;)?HGWb39ME1>Q-mBN$by8$=B?jsW^m03`1ICChh(LRT^C4s$xnDO1C$l@#H* zbM)*{1|ZJ__{ZRr!;>4vvxe(7a@~5WM%E^&pzUAK_9c)?RYDi88oBf9Z7VuY54^q{ zLV)aj!TXihM<`Oe!$Dhg3Li5M%G&l?0b;AM^fkvN=0Mf9R$I7Mh^5QA@3yq}g-X{y z#hbRKb9d`WzWpC|VC02&2Hz}C?$~b|$>^yj*4e^3ea&%kk~0MjDQ=ap90pT({7-7R zHf=4}cBC(e|K|!YtX8Gajgx`C**9izLiJmoaQy1jwo~@YVaxb}f{MS<>o{uVCPgr% zx}!Ix@LXJ6A?JIBcsd(caoB=6Ays=ujUteL*-YGP-n>}ZKGjw5}S-nj{H`K}0 zLf`b%oXc!p{a;GxZEcO?9jBef#l2J-B^O#~Ham+yrK3;#Hx)+p9J|Z!mOUw|)UM?A zC$1QvGC-I8VyAPOFCjDQd}Mi(`B2pRYH!;8wPs`3 zYSQ6WwjdqO(niuxXBI!cmFnj<<>AJl*_oB$(P+1N-6C^rHUDQxW^RLRoOY(SZ~|WW zjV}Yj$u}G8W-_g8N+UV>XK9rgHuBYxq)%2Zyvohww7Zkf3Zva>8D_AW$DSk~7tcryQQ{qn`l?B+U!?FBYt)QeQUTZ@Q4pS4X%U{~q&< zthqsKkoOA)E1A9r@Hz~tdi2GGZmT_%j5E)Ev*Rw@%9X_PZQO>T8O(_!4{`fB8SnYcKq=o(NM4iU}x_56%=UQH)hE2 z7nJX8=wMcr1el-oTkxlssf~5P02j2Xasahk_{-feK*qBvJd+!|>{qIRm-)fPyYq6r SvODq#`rLQsN0q%DzxiK0bowm- literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..2be23e8 --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + + + Maze + + + + +
+ +
+
+

Congratulations!

+

You are done.

+

+ +
+
+ +
+ + +
+
+ +
+
+ +

Use arrow keys to move the key to the house!

+ +
+ + + + + + + \ No newline at end of file diff --git a/key.png b/key.png new file mode 100644 index 0000000000000000000000000000000000000000..dec26bb9772ca691e4babbb0cab59cec052fb8fc GIT binary patch literal 5742 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 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [a[i], a[j]] = [a[j], a[i]]; + } + return a; + } + + function changeBrightness(factor, sprite) { + var virtCanvas = document.createElement("canvas"); + virtCanvas.width = 500; + virtCanvas.height = 500; + var context = virtCanvas.getContext("2d"); + context.drawImage(sprite, 0, 0, 500, 500); + + var imgData = context.getImageData(0, 0, 500, 500); + + for (let i = 0; i < imgData.data.length; i += 4) { + imgData.data[i] = imgData.data[i] * factor; + imgData.data[i + 1] = imgData.data[i + 1] * factor; + imgData.data[i + 2] = imgData.data[i + 2] * factor; + } + context.putImageData(imgData, 0, 0); + + var spriteOutput = new Image(); + spriteOutput.src = virtCanvas.toDataURL(); + virtCanvas.remove(); + return spriteOutput; + } + + function displayVictoryMess(moves) { + document.getElementById("moves").innerHTML = "You Moved " + moves + " Steps."; + toggleVisablity("Message-Container"); + } + + function toggleVisablity(id) { + if (document.getElementById(id).style.visibility == "visible") { + document.getElementById(id).style.visibility = "hidden"; + } else { + document.getElementById(id).style.visibility = "visible"; + } + } + + function Maze(Width, Height) { + var mazeMap; + var width = Width; + var height = Height; + var startCoord, endCoord; + var dirs = ["n", "s", "e", "w"]; + var modDir = { + n: { + y: -1, + x: 0, + o: "s" + }, + s: { + y: 1, + x: 0, + o: "n" + }, + e: { + y: 0, + x: 1, + o: "w" + }, + w: { + y: 0, + x: -1, + o: "e" + } + }; + + this.map = function() { + return mazeMap; + }; + this.startCoord = function() { + return startCoord; + }; + this.endCoord = function() { + return endCoord; + }; + + function genMap() { + mazeMap = new Array(height); + for (y = 0; y < height; y++) { + mazeMap[y] = new Array(width); + for (x = 0; x < width; ++x) { + mazeMap[y][x] = { + n: false, + s: false, + e: false, + w: false, + visited: false, + priorPos: null + }; + } + } + } + + function defineMaze() { + var isComp = false; + var move = false; + var cellsVisited = 1; + var numLoops = 0; + var maxLoops = 0; + var pos = { + x: 0, + y: 0 + }; + var numCells = width * height; + while (!isComp) { + move = false; + mazeMap[pos.x][pos.y].visited = true; + + if (numLoops >= maxLoops) { + shuffle(dirs); + maxLoops = Math.round(rand(height / 8)); + numLoops = 0; + } + numLoops++; + for (index = 0; index < dirs.length; index++) { + var direction = dirs[index]; + var nx = pos.x + modDir[direction].x; + var ny = pos.y + modDir[direction].y; + + if (nx >= 0 && nx < width && ny >= 0 && ny < height) { + //Check if the tile is already visited + if (!mazeMap[nx][ny].visited) { + //Carve through walls from this tile to next + mazeMap[pos.x][pos.y][direction] = true; + mazeMap[nx][ny][modDir[direction].o] = true; + + //Set Currentcell as next cells Prior visited + mazeMap[nx][ny].priorPos = pos; + //Update Cell position to newly visited location + pos = { + x: nx, + y: ny + }; + cellsVisited++; + //Recursively call this method on the next tile + move = true; + break; + } + } + } + + if (!move) { + // If it failed to find a direction, + // move the current position back to the prior cell and Recall the method. + pos = mazeMap[pos.x][pos.y].priorPos; + } + if (numCells == cellsVisited) { + isComp = true; + } + } + } + + function defineStartEnd() { + switch (rand(4)) { + case 0: + startCoord = { + x: 0, + y: 0 + }; + endCoord = { + x: height - 1, + y: width - 1 + }; + break; + case 1: + startCoord = { + x: 0, + y: width - 1 + }; + endCoord = { + x: height - 1, + y: 0 + }; + break; + case 2: + startCoord = { + x: height - 1, + y: 0 + }; + endCoord = { + x: 0, + y: width - 1 + }; + break; + case 3: + startCoord = { + x: height - 1, + y: width - 1 + }; + endCoord = { + x: 0, + y: 0 + }; + break; + } + } + + genMap(); + defineStartEnd(); + defineMaze(); + } + + function DrawMaze(Maze, ctx, cellsize, endSprite = null) { + var map = Maze.map(); + var cellSize = cellsize; + var drawEndMethod; + ctx.lineWidth = cellSize / 40; + + this.redrawMaze = function(size) { + cellSize = size; + ctx.lineWidth = cellSize / 50; + drawMap(); + drawEndMethod(); + }; + + function drawCell(xCord, yCord, cell) { + var x = xCord * cellSize; + var y = yCord * cellSize; + + if (cell.n == false) { + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo(x + cellSize, y); + ctx.stroke(); + } + if (cell.s === false) { + ctx.beginPath(); + ctx.moveTo(x, y + cellSize); + ctx.lineTo(x + cellSize, y + cellSize); + ctx.stroke(); + } + if (cell.e === false) { + ctx.beginPath(); + ctx.moveTo(x + cellSize, y); + ctx.lineTo(x + cellSize, y + cellSize); + ctx.stroke(); + } + if (cell.w === false) { + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo(x, y + cellSize); + ctx.stroke(); + } + } + + function drawMap() { + for (x = 0; x < map.length; x++) { + for (y = 0; y < map[x].length; y++) { + drawCell(x, y, map[x][y]); + } + } + } + + function drawEndFlag() { + var coord = Maze.endCoord(); + var gridSize = 4; + var fraction = cellSize / gridSize - 2; + var colorSwap = true; + for (let y = 0; y < gridSize; y++) { + if (gridSize % 2 == 0) { + colorSwap = !colorSwap; + } + for (let x = 0; x < gridSize; x++) { + ctx.beginPath(); + ctx.rect( + coord.x * cellSize + x * fraction + 4.5, + coord.y * cellSize + y * fraction + 4.5, + fraction, + fraction + ); + if (colorSwap) { + ctx.fillStyle = "rgba(0, 0, 0, 0.8)"; + } else { + ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; + } + ctx.fill(); + colorSwap = !colorSwap; + } + } + } + + function drawEndSprite() { + var offsetLeft = cellSize / 50; + var offsetRight = cellSize / 25; + var coord = Maze.endCoord(); + ctx.drawImage( + endSprite, + 2, + 2, + endSprite.width, + endSprite.height, + coord.x * cellSize + offsetLeft, + coord.y * cellSize + offsetLeft, + cellSize - offsetRight, + cellSize - offsetRight + ); + } + + function clear() { + var canvasSize = cellSize * map.length; + ctx.clearRect(0, 0, canvasSize, canvasSize); + } + + if (endSprite != null) { + drawEndMethod = drawEndSprite; + } else { + drawEndMethod = drawEndFlag; + } + clear(); + drawMap(); + drawEndMethod(); + } + + function Player(maze, c, _cellsize, onComplete, sprite = null) { + var ctx = c.getContext("2d"); + var drawSprite; + var moves = 0; + drawSprite = drawSpriteCircle; + if (sprite != null) { + drawSprite = drawSpriteImg; + } + var player = this; + var map = maze.map(); + var cellCoords = { + x: maze.startCoord().x, + y: maze.startCoord().y + }; + var cellSize = _cellsize; + var halfCellSize = cellSize / 2; + + this.redrawPlayer = function(_cellsize) { + cellSize = _cellsize; + drawSpriteImg(cellCoords); + }; + + function drawSpriteCircle(coord) { + ctx.beginPath(); + ctx.fillStyle = "yellow"; + ctx.arc( + (coord.x + 1) * cellSize - halfCellSize, + (coord.y + 1) * cellSize - halfCellSize, + halfCellSize - 2, + 0, + 2 * Math.PI + ); + ctx.fill(); + if (coord.x === maze.endCoord().x && coord.y === maze.endCoord().y) { + onComplete(moves); + player.unbindKeyDown(); + } + } + + function drawSpriteImg(coord) { + var offsetLeft = cellSize / 50; + var offsetRight = cellSize / 25; + ctx.drawImage( + sprite, + 0, + 0, + sprite.width, + sprite.height, + coord.x * cellSize + offsetLeft, + coord.y * cellSize + offsetLeft, + cellSize - offsetRight, + cellSize - offsetRight + ); + if (coord.x === maze.endCoord().x && coord.y === maze.endCoord().y) { + onComplete(moves); + player.unbindKeyDown(); + } + } + + function removeSprite(coord) { + var offsetLeft = cellSize / 50; + var offsetRight = cellSize / 25; + ctx.clearRect( + coord.x * cellSize + offsetLeft, + coord.y * cellSize + offsetLeft, + cellSize - offsetRight, + cellSize - offsetRight + ); + } + + function check(e) { + var cell = map[cellCoords.x][cellCoords.y]; + moves++; + switch (e.keyCode) { + case 65: + case 37: // west + if (cell.w == true) { + removeSprite(cellCoords); + cellCoords = { + x: cellCoords.x - 1, + y: cellCoords.y + }; + drawSprite(cellCoords); + } + break; + case 87: + case 38: // north + if (cell.n == true) { + removeSprite(cellCoords); + cellCoords = { + x: cellCoords.x, + y: cellCoords.y - 1 + }; + drawSprite(cellCoords); + } + break; + case 68: + case 39: // east + if (cell.e == true) { + removeSprite(cellCoords); + cellCoords = { + x: cellCoords.x + 1, + y: cellCoords.y + }; + drawSprite(cellCoords); + } + break; + case 83: + case 40: // south + if (cell.s == true) { + removeSprite(cellCoords); + cellCoords = { + x: cellCoords.x, + y: cellCoords.y + 1 + }; + drawSprite(cellCoords); + } + break; + } + } + + this.bindKeyDown = function() { + window.addEventListener("keydown", check, false); + + $("#view").swipe({ + swipe: function( + event, + direction, + distance, + duration, + fingerCount, + fingerData + ) { + console.log(direction); + switch (direction) { + case "up": + check({ + keyCode: 38 + }); + break; + case "down": + check({ + keyCode: 40 + }); + break; + case "left": + check({ + keyCode: 37 + }); + break; + case "right": + check({ + keyCode: 39 + }); + break; + } + }, + threshold: 0 + }); + }; + + this.unbindKeyDown = function() { + window.removeEventListener("keydown", check, false); + $("#view").swipe("destroy"); + }; + + drawSprite(maze.startCoord()); + + this.bindKeyDown(); + } + + var mazeCanvas = document.getElementById("mazeCanvas"); + var ctx = mazeCanvas.getContext("2d"); + var sprite; + var finishSprite; + var maze, draw, player; + var cellSize; + var difficulty; + // sprite.src = 'media/sprite.png'; + + window.onload = function() { + let viewWidth = $("#view").width(); + let viewHeight = $("#view").height(); + if (viewHeight < viewWidth) { + ctx.canvas.width = viewHeight - viewHeight / 100; + ctx.canvas.height = viewHeight - viewHeight / 100; + } else { + ctx.canvas.width = viewWidth - viewWidth / 100; + ctx.canvas.height = viewWidth - viewWidth / 100; + } + + //Load and edit sprites + var completeOne = false; + var completeTwo = false; + var isComplete = () => { + if(completeOne === true && completeTwo === true) + { + console.log("Runs"); + setTimeout(function(){ + makeMaze(); + }, 500); + } + }; + sprite = new Image(); + sprite.src = + "./key.png" + + "?" + + new Date().getTime(); + sprite.setAttribute("crossOrigin", " "); + sprite.onload = function() { + sprite = changeBrightness(1.2, sprite); + completeOne = true; + console.log(completeOne); + isComplete(); + }; + + finishSprite = new Image(); + finishSprite.src = "./home.png"+ + "?" + + new Date().getTime(); + finishSprite.setAttribute("crossOrigin", " "); + finishSprite.onload = function() { + finishSprite = changeBrightness(1.1, finishSprite); + completeTwo = true; + console.log(completeTwo); + isComplete(); + }; + + }; + + window.onresize = function() { + let viewWidth = $("#view").width(); + let viewHeight = $("#view").height(); + if (viewHeight < viewWidth) { + ctx.canvas.width = viewHeight - viewHeight / 100; + ctx.canvas.height = viewHeight - viewHeight / 100; + } else { + ctx.canvas.width = viewWidth - viewWidth / 100; + ctx.canvas.height = viewWidth - viewWidth / 100; + } + cellSize = mazeCanvas.width / difficulty; + if (player != null) { + draw.redrawMaze(cellSize); + player.redrawPlayer(cellSize); + } + }; + + function makeMaze() { + if (player != undefined) { + player.unbindKeyDown(); + player = null; + } + var e = document.getElementById("diffSelect"); + difficulty = e.options[e.selectedIndex].value; + cellSize = mazeCanvas.width / difficulty; + maze = new Maze(difficulty, difficulty); + draw = new DrawMaze(maze, ctx, cellSize, finishSprite); + player = new Player(maze, mazeCanvas, cellSize, displayVictoryMess, sprite); + if (document.getElementById("mazeContainer").style.opacity < "100") { + document.getElementById("mazeContainer").style.opacity = "100"; + } + } diff --git a/style.css b/style.css new file mode 100644 index 0000000..dee9291 --- /dev/null +++ b/style.css @@ -0,0 +1,132 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); + +html, body { + width: 100vw; + height: 100vh; + position: fixed; + padding: 0; + margin: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: #fff; + font-family: 'Poppins', sans-serif; +} + +#view { + margin-top: 30px; +} + +#mazeContainer { + top: 15px; + opacity: 0; + display: inline-block; + margin: auto; + border-radius: 10px; +} +#mazeContainer #mazeCanvas { + margin: 0; + display: block; + border: solid 2px black; + height: 400px; +} +input, select { + cursor: pointer; + background-color: rgba(0, 0, 0, 0.30); + height: 45px; + width: 150px; + padding: 10px; + border: none; + border-radius: 5px; + color: white; + display: inline-block; + font-size: 15px; + text-align: center; + text-decoration: none; + appearance: none; +} +input:hover, select:hover { + background-color: rgba(0, 0, 0, 0.70); +} +input:active, select:active { + background-color: black; +} +input:focus, select:focus { + outline: none; +} +.custom-select { + display: inline-block; +} +.custom-select select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-repeat: no-repeat; + background-position: 125px center; +} +#Message-Container { + visibility: hidden; + color: white; + display: block; + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.30); + z-index: 1; +} +#Message-Container #message { + width: 300px; + height: 300px; + position: fixed; + top: 50%; + left: 50%; + margin-left: -150px; + margin-top: -150px; +} +#page { + text-align: center; + height: auto; + width: auto; + margin: auto; +} +#page #menu { + margin: auto; + padding: 10px; + height: 65px; + box-sizing: border-box; +} +#page #menu h1 { + margin: 0; + margin-bottom: 10px; + font-weight: 600; + font-size: 3.2rem; +} +#page #view { + position: absolute; + top: 65px; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: auto; +} +.border { + border: 10px black solid; + border-radius: 10px; +} + +#instructions { + margin-top: 425px; +} + +/* Extra small devices (phones, 600px and down) */ +@media only screen and (max-width: 400px) { + input, select { + width: 120px; + } +} \ No newline at end of file