SnakeGame/script.js at main · DevAta515/SnakeGame · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
let update_dir={x:0, y:0};
// board=document.getElementsByClassName("board");
let snake_body=[
    {x:5, y:4}
];
let speed=3;
let food={x:10, y:10};
let score=0;
let food_eat=new Audio('food.mp3');
let move_aud=new Audio("move.mp3");
let over_music=new Audio('gameover.mp3');
// let game_aud=new Audio('music.mp3');

let ltime=0;//last paint time
function main(ctime){
    window.requestAnimationFrame(main);
    if((ctime-ltime)/1000< 1/speed){
        return;
    }
    ltime=ctime;
    gamebody();
}
function collision(snake1){
    //if you hit the wall
    if(snake1[0].x>=18 || snake1[0].x<=0 || snake1[0].y>=18 || snake1[0].y<=0 ){
        return true;
    }
    //if you eat yourself
        for (let i = 1; i < snake_body.length; i++) {
        if(snake1[i].x === snake1[0].x && snake1[i].y === snake1[0].y){
            return true;
        }
    }
    return false;
}
function gamebody(){
    if(collision(snake_body)){
        update_dir={x:0, y:0};
        over_music.play();
        alert("Game Over");
        snake_body=[
            {x:5, y:4}
        ];
        score=0;
        // game_aud.pause();
        s_board.innerHTML="Score:"+ score;
    }
    //updating the body
    if(snake_body[0].x===food.x && snake_body[0].y===food.y)
    {
        food_eat.play();
        score+=10;
        if(high_val<score){
            high_val=score;
            localStorage.setItem("high_score",JSON.stringify(high_val));
            hscore.innerHTML="HighScore: "+ high_val;
        }
        snake_body.unshift({x: snake_body[0].x+update_dir.x, y: snake_body[0].y+update_dir.y });
        //updating the food position
        food={x:Math.round(1+16*Math.random()),y:Math.round(1+16*Math.random())}
        s_board.innerHTML="Score:"+ score;
    }
    //move the snake
    for(i=snake_body.length-2;i>=0;i--){
        snake_body[i+1] = {...snake_body[i]};
    }
    snake_body[0].x+=update_dir.x;
    snake_body[0].y+=update_dir.y;
    //display body
    board.innerHTML="";
    snake_body.forEach((e,index)=>{
        snake_div=document.createElement("div");
        snake_div.style.gridRowStart=e.y;
        snake_div.style.gridColumnStart=e.x;
        if(index===0){
            snake_div.classList.add("head");
        }
        else{
            snake_div.classList.add("body");
        }
        board.appendChild(snake_div);
    })

    //display food
    food_div=document.createElement('div');
    food_div.style.gridRowStart=food.y;
    food_div.style.gridColumnStart=food.x;
    food_div.classList.add("food");
    board.appendChild(food_div);
}


// game_aud.play();
let high_score=localStorage.getItem("hiscore");
if(high_score===null){
    high_val=0;
    localStorage.setItem("high_score",JSON.stringify(high_val));
}
window.requestAnimationFrame(main);
window.addEventListener("keydown",e=>{
    // console.log(e.key);
    switch(e.key){
        //giving directions to the snake
        case "ArrowDown":
            update_dir.x=0;
            update_dir.y=1;
            move_aud.play();
            break;
        case "ArrowUp":
            update_dir.x=0;
            update_dir.y=-1;
            move_aud.play();
            break;
        case "ArrowRight":
            update_dir.x=1;
            update_dir.y=0;
            move_aud.play();
            break;
        case "ArrowLeft":
            update_dir.x=-1;
            update_dir.y=0;
            move_aud.play();
            break;
        case " ":
            alert("Game Paused, Click to resume");
            break;
        default:
            break;
    }

})