├── README.md └── snake ├── musics ├── read ├── food.mp3 ├── move.mp3 ├── music.mp3 └── gameover.mp3 ├── image └── bg.jpg ├── index.html ├── css └── style.css └── js └── index.js /README.md: -------------------------------------------------------------------------------- 1 | # Snake-game -------------------------------------------------------------------------------- /snake/musics/read: -------------------------------------------------------------------------------- 1 | all musics 2 | -------------------------------------------------------------------------------- /snake/image/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FarhaKousar1601/Snake-game/HEAD/snake/image/bg.jpg -------------------------------------------------------------------------------- /snake/musics/food.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FarhaKousar1601/Snake-game/HEAD/snake/musics/food.mp3 -------------------------------------------------------------------------------- /snake/musics/move.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FarhaKousar1601/Snake-game/HEAD/snake/musics/move.mp3 -------------------------------------------------------------------------------- /snake/musics/music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FarhaKousar1601/Snake-game/HEAD/snake/musics/music.mp3 -------------------------------------------------------------------------------- /snake/musics/gameover.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FarhaKousar1601/Snake-game/HEAD/snake/musics/gameover.mp3 -------------------------------------------------------------------------------- /snake/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Snake game 9 | 10 | 11 |
12 |
Score:0
13 |
HighScore:0
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /snake/css/style.css: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | *{ 7 | padding: 0; 8 | margin: 0; 9 | 10 | } 11 | 12 | .body{ 13 | background:url("../image/bg.jpg"); 14 | min-height: 98vh; 15 | background-size: 100vw 100vh; 16 | background-repeat: no-repeat; 17 | display:flex; 18 | justify-content:center; 19 | align-items: center; 20 | 21 | 22 | 23 | } 24 | 25 | #scoreBox{ 26 | position:absolute; 27 | top:9px; 28 | right:200px; 29 | font-size:39px; 30 | font-weight:bold; 31 | font-family: 'Big Shoulders Stencil Display', cursive; 32 | 33 | 34 | } 35 | #highScoreBox{ 36 | position:absolute; 37 | top:59px; 38 | right:110px; 39 | font-size:39px; 40 | font-weight:bold; 41 | font-family: 'Big Shoulders Stencil Display', cursive; 42 | } 43 | #board{ 44 | 45 | background:linear-gradient(rgb(130, 253, 6),rgb(235, 197, 116)); 46 | width:90vmin; 47 | height:92vmin; 48 | border:2px solid white; 49 | display:grid; 50 | grid-template-columns: repeat(18,1fr); 51 | grid-template-rows: repeat(18,1fr); 52 | 53 | 54 | } 55 | .head{ 56 | background: linear-gradient(rgb(218, 116, 116),rgb(233, 233, 171)); 57 | border:2px solid rgb(0, 0, 0); 58 | transform :scale(1.02); 59 | border-radius:9px; 60 | } 61 | .snake{ 62 | background-color:purple; 63 | border:.25vmin solid white; 64 | border-radius:12px; 65 | } 66 | .food{ 67 | background:linear-gradient(red,rgb(151, 4, 151)); 68 | border:.25vmin solid black; 69 | border-radius:8px; 70 | } 71 | -------------------------------------------------------------------------------- /snake/js/index.js: -------------------------------------------------------------------------------- 1 | //game constants and variables 2 | let inputDir={x:0,y:0}; 3 | const foodsound=new Audio('musics/food.mp3'); 4 | const gameoversound=new Audio('musics/gameover.mp3'); 5 | const movesound=new Audio('musics/move.mp3'); 6 | const musicsound=new Audio('musics/music.mp3'); 7 | let speed=5; // it increases the speed of snake 8 | let score=0; 9 | let lastPaintTime=0; 10 | let snakeArr=[ 11 | {x:13,y:15}];//snake is arr beacause snake incresing after eating 12 | let food={x:6,y:7}; //not array 13 | //game functions 14 | 15 | function main(ctime){ 16 | window.requestAnimationFrame(main); //game loop 17 | if((ctime-lastPaintTime)/1000 < 1/speed){ // at every 0.5 it repaints , 1000 becoz its miliseconds 18 | return; 19 | } 20 | lastPaintTime=ctime; 21 | gameEngine(); 22 | 23 | } 24 | function isCollide(snake){ 25 | //if u bump into urself 26 | for(let i=1;i=18 || snake[0].x<=0 || snake[0].y>=18 || snake[0].y<=0)//hitted to wall 34 | { 35 | return true; 36 | } 37 | 38 | } 39 | 40 | function gameEngine(){ 41 | //part 1: updating the snake array and food 42 | if(isCollide(snakeArr)){ 43 | gameoversound.play(); 44 | musicsound.pause(); 45 | inputDir={x:0,y:0};//direction rechange 46 | alert("Game over press any key to play again"); 47 | 48 | snakeArr=[{x:13,y:15}]; 49 | musicsound.play(); 50 | score=0; 51 | 52 | 53 | } 54 | //if u have eaten the food ,increment the score and regenerate the food 55 | if(snakeArr[0].y === food.y && snakeArr[0].x === food.x){ 56 | foodsound.play(); 57 | score+=1; 58 | if(score>highscoreval){ 59 | highscoreval=score; 60 | localStorage.setItem("HighScore",JSON.stringify(highscoreval)); 61 | highScoreBox.innerHTML="HighScore:"+highscoreval; 62 | 63 | } 64 | scoreBox.innerHTML="Score:"+score; 65 | snakeArr.unshift({x:snakeArr[0].x + inputDir.x,y:snakeArr[0].y + inputDir.y}) 66 | let a=2; 67 | let b=16; 68 | food={x:Math.round(a+(b-a)*Math.random()),y:Math.round(a+(b-a)*Math.random())} // a and b are range in which we want to generate random number 69 | 70 | } 71 | //moving snake 72 | for(let i=snakeArr.length-2;i>=0;i--){ 73 | 74 | snakeArr[i+1]={...snakeArr[i]};//destrucring 75 | 76 | } 77 | snakeArr[0].x+=inputDir.x; 78 | snakeArr[0].y+=inputDir.y; 79 | //part 2:display the snake and food 80 | //display the snake 81 | board.innerHTML=""; //empty board 82 | snakeArr.forEach((e,index)=>{ 83 | snakeElement=document.createElement('div'); 84 | snakeElement.style.gridRowStart=e.y; 85 | snakeElement.style.gridColumnStart=e.x; 86 | 87 | if(index === 0){ 88 | snakeElement.classList.add('head');//initially snake is yellow 89 | } 90 | else{ 91 | 92 | 93 | snakeElement.classList.add('snake'); 94 | } 95 | board.appendChild(snakeElement); 96 | 97 | }); 98 | //display the food 99 | 100 | foodElement=document.createElement('div'); 101 | foodElement.style.gridRowStart=food.y; 102 | foodElement.style.gridColumnStart=food.x; 103 | foodElement.classList.add('food') 104 | board.appendChild(foodElement); 105 | 106 | } 107 | //main logic starts here 108 | musicsound.play(); 109 | let HighScore=localStorage.getItem("HighScore"); 110 | if(HighScore === null){ 111 | highscoreval=0; 112 | localStorage.setItem("HighScore",JSON.stringify(highscoreval)); 113 | } 114 | else{ 115 | highscoreval=JSON.parse(HighScore); 116 | highScoreBox.innerHTML="HighScore:"+HighScore; 117 | } 118 | window.requestAnimationFrame(main); // main is called then this w.raf in main will loop the game 119 | window.addEventListener('keydown', e =>{ //when key is pressed 120 | //start the game 121 | inputDir={x:0,y:1}//when any key is pressed snake starts to move down y=1 122 | movesound.play();//plays sound 123 | 124 | switch(e.key){ 125 | case "ArrowUp": 126 | console.log("Arrowup"); 127 | inputDir.x=0;//directionchange 128 | inputDir.y=-1; //if moves up y decreasing 129 | break; 130 | case "ArrowDown": 131 | console.log("Arrowdown"); 132 | inputDir.x=0; 133 | inputDir.y=1; 134 | break; 135 | case "ArrowLeft": 136 | console.log("Arrowleft"); 137 | inputDir.x=-1; 138 | inputDir.y=0; 139 | break; 140 | case "ArrowRight": 141 | console.log("Arrowright"); 142 | inputDir.x=1; 143 | inputDir.y=0; 144 | break; 145 | 146 | default: 147 | break; 148 | } 149 | 150 | }); 151 | --------------------------------------------------------------------------------