Ishita
3 years ago
committed by
GitHub
parent
7180489b65
commit
11eb20daf8
@ -0,0 +1 @@
|
||||
https://stackoverflow.com/questions/38709923/why-is-requestanimationframe-better-than-setinterval-or-settimeout
|
||||
|
After Width: | Height: | Size: 151 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,33 @@
|
||||
<!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>Snake Mania</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="body">
|
||||
<div id="gameName">
|
||||
<u>SNAKE <br> MANIA </u>
|
||||
<br>
|
||||
<div id="rules">
|
||||
<br>
|
||||
(1.)Use Arrow keys to direct <br> the snake.
|
||||
<br>
|
||||
(2.)Eat the food to increase snake <br> length and make high score.
|
||||
<br>
|
||||
(3.)Try not to bump in walls or <br>into yourself.
|
||||
<br>
|
||||
Have Fun !!
|
||||
</div>
|
||||
</div>
|
||||
<div id="board">
|
||||
</div>
|
||||
<div id="scoreBoard">Score: 0</div>
|
||||
<div id="highScoreBoard">High-Score: 0</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="script.js"></script>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,143 @@
|
||||
// Game Constants and variables
|
||||
let 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 = 6;
|
||||
let score = 0;
|
||||
let lastPaintTime = 0;
|
||||
let snakeArr = [ // array
|
||||
{x: 13, y: 15}
|
||||
]
|
||||
let food = {x: 6, y:7}; // object
|
||||
|
||||
// Game Functions
|
||||
function main(ctime){
|
||||
window.requestAnimationFrame(main);
|
||||
// console.log(ctime);
|
||||
if((ctime - lastPaintTime)/1000 < 1/speed){
|
||||
return;
|
||||
}
|
||||
lastPaintTime = ctime;
|
||||
|
||||
gameEngine();
|
||||
}
|
||||
|
||||
function isCollide(sarr){
|
||||
// if snake bump into himself
|
||||
for (let i = 1; i < snakeArr.length; i++) {
|
||||
if(sarr[i].x === sarr[0].x && sarr[i].y === sarr[0].y){
|
||||
return true;
|
||||
}
|
||||
}
|
||||
// if snake bump into wall
|
||||
if(sarr[0].x >= 18 || sarr[0].x <= 0 || sarr[0].y >= 18 || sarr[0].y <= 0){
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function gameEngine(){
|
||||
// Part 1: Updating the snake array and 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;
|
||||
scoreBoard.innerHTML = "Score: " + score;
|
||||
}
|
||||
|
||||
// If you have eaten the food , increment the score and regenrate the food
|
||||
if(snakeArr[0].y === food.y && snakeArr[0].x === food.x){
|
||||
foodSound.play();
|
||||
score += 1;
|
||||
if(score > hiscore){
|
||||
hiscoreval = score;
|
||||
localStorage.setItem('hiscore', JSON.stringify(hiscoreval));
|
||||
highScoreBoard.innerHTML = "HighScore: "+ hiscoreval;
|
||||
}
|
||||
scoreBoard.innerHTML = "Score: " + score;
|
||||
snakeArr.unshift({x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y});
|
||||
// generating random number between a and b
|
||||
// Math.round(a + (b - a)*Math.random())
|
||||
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 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 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
|
||||
let hiscore = localStorage.getItem('hiscore');
|
||||
// localStorage.clear() -> to clear local storage / high score
|
||||
if(hiscore == null){
|
||||
hiscoreval = 0;
|
||||
localStorage.setItem('hiscore', JSON.stringify(hiscoreval));
|
||||
}
|
||||
else{
|
||||
highscoreval = JSON.parse(localStorage.getItem(hiscore));
|
||||
highScoreBoard.innerHTML = "HighScore: "+ hiscore;
|
||||
}
|
||||
window.requestAnimationFrame(main);
|
||||
window.addEventListener('keydown', e=>{
|
||||
inputDir = {x: 0, y: 1}; // start the game
|
||||
moveSound.play();
|
||||
switch (e.key) {
|
||||
case "ArrowUp":
|
||||
inputDir.x = 0;
|
||||
inputDir.y = -1;
|
||||
break;
|
||||
|
||||
case "ArrowDown":
|
||||
inputDir.x = 0;
|
||||
inputDir.y = 1;
|
||||
break;
|
||||
|
||||
case "ArrowRight":
|
||||
inputDir.x = 1;
|
||||
inputDir.y = 0;
|
||||
break;
|
||||
|
||||
case "ArrowLeft":
|
||||
inputDir.x = -1;
|
||||
inputDir.y = 0;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,87 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&family=Varela+Round&display=swap');
|
||||
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.body{
|
||||
background-image: url("bg.jpg");
|
||||
min-height: 100vh;
|
||||
background-size: 100vw 100vh;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#board{
|
||||
background: linear-gradient(rgb(170, 236, 170), rgb(236, 236, 167));
|
||||
width: 90vmin;
|
||||
height: 92vmin;
|
||||
border: 2px solid black;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(18, 1fr);
|
||||
grid-template-columns: repeat(18, 1fr);
|
||||
}
|
||||
|
||||
#scoreBoard{
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
font-size: 40px;
|
||||
right: 100px;
|
||||
font-weight: bolder;
|
||||
border: 4px dotted rgb(1, 48, 1);
|
||||
padding: 10px;
|
||||
font-family: 'New Tegomin', serif;
|
||||
}
|
||||
|
||||
#highScoreBoard{
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
font-size: 40px;
|
||||
right: 100px;
|
||||
font-weight: bolder;
|
||||
border: 4px dotted rgb(1, 48, 1);
|
||||
padding: 10px;
|
||||
font-family: 'New Tegomin', serif;
|
||||
}
|
||||
|
||||
#gameName{
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
font-size: 70px;
|
||||
left: 25px;
|
||||
font-weight: bolder;
|
||||
padding: 10px;
|
||||
font-family: 'New Tegomin', serif;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#rules{
|
||||
font-size: 20px;
|
||||
line-height: 200%;
|
||||
}
|
||||
|
||||
.head{
|
||||
background: radial-gradient(circle, green, pink, lightgreen, red);
|
||||
border: .25vmin solid rgb(48, 68, 48);
|
||||
border-radius: 12px;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.snake{
|
||||
background-color: purple;
|
||||
border: .25vmin solid white;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.food{
|
||||
background: linear-gradient(green, blue);
|
||||
border-radius: 50%;
|
||||
border: .25vmin dotted purple;
|
||||
}
|
||||
Loading…
Reference in new issue