A web developer should definitely try out this project and this project would definitely increase your skills in javascript and improve the logic used to develop web games.
The html code is following :
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SnakeGame - Web Development</title> <link rel="stylesheet" href="style.css"></head><body> <div class="body"> <div id="scoreBox">Score: 0</div><br> <div id="hiscoreBox">HiScore: 0</div> <div id="board"></div> </div></body><script src="index.js"></script></html>
The CSS code is following :
@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');*{ padding: 0; margin: 0;}
.body{ background: url("bg.jpg"); min-height: 100vh; background-size: 100vw 100vh; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center;}
#scoreBox{ position: absolute; top: 9px; left: 60px; font-size: 39px; font-weight: bold; font-family: 'New Tegomin', serif;}
#hiscoreBox{ position: relative; bottom: 240px; right: 230px; font-size: 39px; font-weight: bold; font-family: 'New Tegomin', serif;}
#board{ background: linear-gradient(rgb(89, 202, 89)); width: 90vmin; height: 92vmin; border: 2px solid black; display: grid; grid-template-rows: repeat(18, 1fr); grid-template-columns: repeat(18, 1fr);}
.head{ background: linear-gradient(rgb(124, 240, 134), rgb(228, 228, 129)); border: 2px solid rgb(34, 4, 34); transform: scale(1.02); border-radius: 9px;}
.snake{ background-color: rgb(11, 128, 0); border: .25vmin solid white; border-radius: 12px;}
.food{ background: linear-gradient(red, purple); border: .25vmin solid black; border-radius: 8px;}
The JavaScript code is following :
// Game Constants & Variableslet inputDir = {x: 0, y: 0}; const foodSound = new Audio('food.mp3');const gameOverSound = new Audio('gameover.mp3');const moveSound = new Audio('move.mp3');const musicSound = new Audio('music.mp3');let speed = 10;let score = 0;let lastPaintTime = 0;let snakeArr = [ {x: 13, y: 15}];
food = {x: 6, y: 7};
// Game Functionsfunction main(ctime) { window.requestAnimationFrame(main); // console.log(ctime) if((ctime - lastPaintTime)/1000 < 1/speed){ return; } lastPaintTime = ctime; gameEngine();}
function isCollide(snake) { // If you bump 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; } return false;}
function gameEngine(){ // Part 1: Updating the snake array & Food if(isCollide(snakeArr)){ gameOverSound.play(); musicSound.pause(); inputDir = {x: 0, y: 0}; alert("Game Over. Press any key to play again!"); snakeArr = [{x: 13, y: 15}]; musicSound.play(); score = 0; }
// If you have eaten the food, increment the score and regenerate the food if(snakeArr[0].y === food.y && snakeArr[0].x ===food.x){ 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 and Food // Display the snake board.innerHTML = ""; snakeArr.forEach((e, index)=>{ snakeElement = document.createElement('div'); snakeElement.style.gridRowStart = e.y; snakeElement.style.gridColumnStart = e.x;
if(index === 0){ snakeElement.classList.add('head'); } else{ snakeElement.classList.add('snake'); } board.appendChild(snakeElement); }); // Display the food foodElement = document.createElement('div'); foodElement.style.gridRowStart = food.y; foodElement.style.gridColumnStart = food.x; foodElement.classList.add('food') board.appendChild(foodElement);
}
// Main logic starts heremusicSound.play();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 moveSound.play(); switch (e.key) { case "ArrowUp": console.log("ArrowUp"); inputDir.x = 0; inputDir.y = -1; break;
case "ArrowDown": console.log("ArrowDown"); inputDir.x = 0; inputDir.y = 1; break;
case "ArrowLeft": console.log("ArrowLeft"); inputDir.x = -1; inputDir.y = 0; break;
case "ArrowRight": console.log("ArrowRight"); inputDir.x = 1; inputDir.y = 0; break; default: break; }
});
0 Comments