From 7784f68bf3a9ae0cab91cdd2a0e05728c5c472f6 Mon Sep 17 00:00:00 2001 From: VinTechG2628 Date: Mon, 5 Aug 2024 12:12:45 +0530 Subject: [PATCH] Completed the Snake Game on web in html, css, js. --- .DS_Store | Bin 6148 -> 8196 bytes css/style.css | 30 ++++++++++++++++++-- img/.DS_Store | Bin 0 -> 6148 bytes img/favicon.png | Bin 0 -> 7340 bytes index.html | 3 ++ js/index.js | 72 +++++++++++++++++++++++++++++++++++++----------- 6 files changed, 86 insertions(+), 19 deletions(-) create mode 100644 img/.DS_Store create mode 100644 img/favicon.png diff --git a/.DS_Store b/.DS_Store index 62b7fb107b91f25f17203490cb7a6f075fbb346f..dbaff650662afdfec68aa4a5a5f1e0d64ae5cfd3 100644 GIT binary patch literal 8196 zcmeHM&1(}u6n~Re-Lz^~(`pseKoC5Lww6|*h%u%}6{$2;D^}xfcAKu<-HE%KRxO1b zMK2yai+B(`s8`Q|H_skC_!oHaBnpDQ`AD;y_;K`W26o=dy!U2)^P7D$oh<;6Lfsk$ z7z6+fA13u)tiDs2ojn~TC0ll(Bp45Fb+}ZaUaiAZH7EuY1BwB~fMP%~@TV|4y^bU0A)8e^Mbn06qH#h^HMg1L<<%oLQ#rP zBCi-kgkyVF`sJl;2r0sW$jb+jBNKT;A$)Y~Kg->L2(+(0aAYr3JcNij1fp7L4E$`!z$UYc_SmJnz`cWxf9d^&`Xa z?SKb3mW?iR7aZTB%LQ8Zt&qo-gh5Md>9Rh!vNASwWPf&KWOQ|Zc4hR?80w?LtE*{k zAa`(ly1eLmKD~p;u@Jd&!Y1*1t-gzzoU>C|lCvTAo3nY>oK3o?cjKnbefpNZt$mqH z|G>8G+jo@pjA>LBs{uoJg1R&)xOIEhsZhV<+_GmQ`$oi+vc9#=Z`!u5w3=pa*3hTF z)xi5Y8Q8XesTw%e)ckyCN3${g;#`PSPDZvj>CaQ_e+g-vsznadPs;u({IYwfvC*t^%^lb9Ry6w!yr#%Ffw_1es& zt(E2Nw#2MNj;}+!b=-R#sI;N}+=eLTnZWhTWP4T28b|l|;~KhzM+@WkJrYQtHE;k( z!!%6bp2*FO)XD~UM8)+Ej$i&8}~@M{LTgv%hi|4;n*`~R;yQXYx{#lT<70O>B4 ziUow<{KKPtChV@A#pfzMtT4ZZkURt{ejP{2uj44!{$YrE7F}6PUdo1$*n;J^dMbV_gw7RotFL&+{#l~1;alWc%<*F(>2HM3c zUHbt_EHJ_~+Ur+QPU)k@%$7gE6)tg)C1$8_L)Mz{^H(eDh5qEMreS{gg>~`+Z~9x_ ze7V}HoX7$ATX4STrrA6|Za2W|qt9=x5ki4bAQT7%LV*tjcxJ2h2aXX#flwe6cvnF8 zheTH_GS-f^buicyfT-7KGv;~$R!+)TWUL+8LKCMFohtc>Ax>v~%KeIrwWHG^HZ#Y` zGjAU+VzaY8S$9a`7%>zG1=osaxBB}$<{DDck|kly5CGUi9+v-R8O x=~C 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 9c9de53..d4cd2b1 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,13 @@ Snake Mania - Online Snake Ground Game +
+
Score: 0
+
hiscore: 0
diff --git a/js/index.js b/js/index.js index fcdcdf9..2f6c3c8 100644 --- a/js/index.js +++ b/js/index.js @@ -1,10 +1,11 @@ // Game Constants & Variables -let direction = { x: 0, y: 0 }; +let inputDir = { x: 0, y: 0 }; const foodSound = new Audio("../music/food.mp3"); const gameOverSound = new Audio("../music/gameover.mp3"); const moveSound = new Audio("../music/move.mp3"); const musicSound = new Audio("../music/music.mp3"); -let speed = 2; +let speed = 10; +let score = 0; let lastPaintTime = 0; let snakeArr = [{ x: 13, y: 15 }]; food = { x: 13, y: 10 }; @@ -20,27 +21,56 @@ function main(ctime) { gameEngine(); } -function isCollide(sarr){ - return false; +function isCollide(snake) { + // If you bumped into yourself + for (let i = 1; i < snakeArr.length; i++) { + if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) { + return true; + } + } + // If you bump into the wall + if (snake[0].x >= 18 || snake[0].x <= 0 || snake[0].y >= 18 || snake[0].y <= 0) { + return true; + } } function gameEngine() { // part 1 : Updating the snakearr & food - if(isCollide(snakeArr)){ + musicSound.play(); + if (isCollide(snakeArr)) { gameOverSound.play(); musicSound.pause(); - inputDir = { x: 0, y: 0}; + inputDir = { x: 0, y: 0 }; alert("Game Over. Press any key to play again!"); - snakeArr = [{x:13 , y:15}]; + snakeArr = [{ x: 13, y: 15 }]; musicSound.play(); score = 0; } // If you have eaten the food, increment the score and regenrate the food if (snakeArr[0].y === food.y && snakeArr[0].x === food.x) { - snakeArr.unshift({x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y}); + foodSound.play(); + score += 1; + if (score > hiscoreval) { + hiscoreval = score; + localStorage.setItem("hiscore", JSON.stringify(hiscoreval)); + hiscoreBox.innerHTML = "hiscore: " + hiscoreval; + } + scoreBox.innerHTML = "Score: " + score + snakeArr.unshift({ x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y }); + let a = 2; + let b = 16; + food = { x: Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) } + } + + // Moving the snake + for (let i = snakeArr.length - 2; i >= 0; i--) { + snakeArr[i + 1] = { ...snakeArr[i] }; } + snakeArr[0].x += inputDir.x; + snakeArr[0].y += inputDir.y; + // part 2 : Display the snake & food // Display the snake board.innerHTML = ""; @@ -65,6 +95,16 @@ function gameEngine() { } // Main logic starts from here +let hiscore = localStorage.getItem("hiscore"); +if (hiscore === null) { + hiscoreval = 0; + localStorage.setItem("hiscore", JSON.stringify(hiscoreval)); +} +else { + hiscoreval = JSON.parse(hiscore); + hiscoreBox.innerHTML = "hiscore: " + hiscore; +} + window.requestAnimationFrame(main); window.addEventListener("keydown", (e) => { inputDir = { x: 0, y: 1 }; // start the game @@ -72,23 +112,23 @@ window.addEventListener("keydown", (e) => { switch (e.key) { case "ArrowUp": console.log("ArrowUp"); - input.x = 0; - input.y = 1; + inputDir.x = 0; + inputDir.y = -1; break; case "ArrowDown": console.log("ArrowDown"); - input.x = 0; - input.y = -1; + inputDir.x = 0; + inputDir.y = 1; break; case "ArrowLeft": console.log("ArrowLeft"); - input.x = -1; - input.y = 0; + inputDir.x = -1; + inputDir.y = 0; break; case "ArrowRight": console.log("ArrowRight"); - input.x = 1; - input.y = 0; + inputDir.x = 1; + inputDir.y = 0; break; default: