Score: 0
HiScore: 0
resource.txt
https://stackoverflow.com/questions/38709923/why-is-requestanimationframe-better-than-setinterval-or-settimeout
file name
index.js
// Game Constants & Variables
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 = 19;
let score = 0;
let lastPaintTime = 0;
let snakeArr = [
{x: 13, y: 15}
];
food = {x: 6, y: 7};
// Game Functions
function 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 here
musicSound.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;
}
});
file name
style.css
@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');
*{
padding: 0;
margin: 0;
}
.body{
background: url("../img/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;
right: 200px;
font-size: 39px;
font-weight: bold;
font-family: 'New Tegomin', serif;
}
#hiscoreBox{
position: absolute;
top: 59px;
right: 140px;
font-size: 39px;
font-weight: bold;
font-family: 'New Tegomin', serif;
}
#board{
background: linear-gradient(rgb(11, 206, 109), rgb(79, 187, 115));
width: 90vmin;
height: 92vmin;
border: 2px solid rgb(245, 20, 10);
display: grid;
grid-template-rows: repeat(18, 1fr);
grid-template-columns: repeat(18, 1fr);
}
.head{
background: linear-gradient(rgb(240, 124, 124), rgb(228, 88, 88));
border: 2px solid rgb(34, 4, 34);
transform: scale(1.02);
border-radius: 9px;
}
.snake{
background-color: purple;
border: .25vmin solid white;
border-radius: 12px;
}
.food{
background: linear-gradient(rgb(70, 3, 55), rgb(206, 43, 206));
border: .25vmin solid rgb(12, 2, 2);
border-radius: 8px;
}
file name
index.html
<!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>SnakeMania - simple game</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="body">
<div id="scoreBox">Score: 0</div>
<div id="hiscoreBox">HiScore: 0</div>
<div id="board"></div>
</div>
</body>
<script src="js/index.js"></script>
</html>
Image= 
No comments:
Post a Comment