1+ let inputDir = { x : 0 , y : 0 } ;
2+ const moveSound = new Audio ( 'audio/move.mp3' ) ;
3+ const foodSound = new Audio ( 'audio/food.mp3' ) ;
4+ const gameOverSound = new Audio ( 'audio/gameover.mp3' ) ;
5+ let speed = 5 ;
6+ let lastPaintTime = 0 ;
7+ let snakeArr = [ { x : 13 , y : 15 } ]
8+ food = { x : 6 , y : 7 } ;
9+ let score = 0 ;
10+ // Game Functions
11+ function main ( ctime ) {
12+ window . requestAnimationFrame ( main ) ;
13+ if ( ( ctime - lastPaintTime ) / 1000 < 1 / speed ) {
14+ return ;
15+ }
16+ lastPaintTime = ctime ;
17+ gameEngine ( ) ;
18+ }
19+
20+ function isCollide ( snake ) {
21+ // If you bump into yourself
22+ for ( let i = 1 ; i < snakeArr . length ; i ++ ) {
23+ if ( snake [ i ] . x === snake [ 0 ] . x && snake [ i ] . y === snake [ 0 ] . y ) {
24+ return true ;
25+ }
26+ }
27+ // If you bump into the wall
28+ if ( snake [ 0 ] . x >= 18 || snake [ 0 ] . x <= 0 || snake [ 0 ] . y >= 18 || snake [ 0 ] . y <= 0 ) {
29+ return true ;
30+ }
31+ return false ;
32+ }
33+
34+ function gameEngine ( ) {
35+ // Updating the snake array & Food
36+ if ( isCollide ( snakeArr ) ) {
37+ gameOverSound . play ( ) ;
38+ inputDir = { x : 0 , y : 0 } ;
39+ alert ( "Game Over. Press Any Key To Continue" ) ;
40+ snakeArr = [ { x : 13 , y : 15 } ] ;
41+ score = 0 ;
42+ scoreBox . innerHTML = 'Score: ' + score ;
43+ }
44+ if ( snakeArr [ 0 ] . x === food . x && snakeArr [ 0 ] . y === food . y ) {
45+ foodSound . play ( ) ;
46+ score += 1 ;
47+ if ( score > hiscoreval ) {
48+ hiscoreval = score ;
49+ localStorage . setItem ( "hiscore" , JSON . stringify ( hiscoreval ) ) ;
50+ hiscoreBox . innerHTML = "Hi Score: " + hiscoreval ;
51+ }
52+ scoreBox . innerHTML = 'Score: ' + score ;
53+ snakeArr . unshift ( { x : snakeArr [ 0 ] . x + inputDir . x , y : snakeArr [ 0 ] . y + inputDir . y } ) ;
54+ let a = 2 ;
55+ let b = 16 ;
56+ food = { x : Math . round ( a + ( b - 1 ) * Math . random ( ) ) , y : Math . round ( a + ( b - 1 ) * Math . random ( ) ) } ;
57+ }
58+ // Moving the snake
59+ for ( let i = snakeArr . length - 2 ; i >= 0 ; i -- ) {
60+ snakeArr [ i + 1 ] = { ...snakeArr [ i ] } ;
61+ }
62+ snakeArr [ 0 ] . x += inputDir . x ;
63+ snakeArr [ 0 ] . y += inputDir . y ;
64+
65+ // Display the snake and Food
66+ // Display the snake
67+ board . innerHTML = "" ;
68+ snakeArr . forEach ( ( e , index ) => {
69+ snakeElement = document . createElement ( 'div' ) ;
70+ snakeElement . style . gridRowStart = e . y ;
71+ snakeElement . style . gridColumnStart = e . x ;
72+ if ( index === 0 ) {
73+ snakeElement . classList . add ( 'head' ) ;
74+ } else {
75+ snakeElement . classList . add ( 'snake' ) ;
76+ }
77+ board . appendChild ( snakeElement ) ;
78+ } ) ;
79+ // Display the food
80+ foodElement = document . createElement ( 'div' ) ;
81+ foodElement . style . gridRowStart = food . y ;
82+ foodElement . style . gridColumnStart = food . x ;
83+ foodElement . classList . add ( 'food' ) ;
84+ board . appendChild ( foodElement ) ;
85+ }
86+
87+ // Main logic starts here
88+ let hiscore = localStorage . getItem ( "hiscore" ) ;
89+ if ( hiscore === null ) {
90+ hiscoreval = 0 ;
91+ localStorage . setItem ( "hiscore" , JSON . stringify ( hiscoreval ) ) ;
92+ } else {
93+ hiscoreval = JSON . parse ( hiscore ) ;
94+ hiscoreBox . innerHTML = "Hi Score: " + hiscore ;
95+ }
96+
97+ window . requestAnimationFrame ( main ) ;
98+ window . addEventListener ( 'keydown' , e => {
99+ inputDir = { x : 0 , y : 1 } ;
100+ moveSound . play ( ) ;
101+ switch ( e . key ) {
102+ case "ArrowUp" :
103+ console . log ( e . key ) ;
104+ inputDir . x = 0 ;
105+ inputDir . y = - 1 ;
106+ break ;
107+ case "ArrowDown" :
108+ console . log ( e . key ) ;
109+ inputDir . x = 0 ;
110+ inputDir . y = 1 ;
111+ break ;
112+ case "ArrowLeft" :
113+ console . log ( e . key ) ;
114+ inputDir . x = - 1 ;
115+ inputDir . y = 0 ;
116+ break ;
117+ case "ArrowRight" :
118+ console . log ( e . key ) ;
119+ inputDir . x = 1 ;
120+ inputDir . y = 0 ;
121+ break ;
122+ default :
123+ break ;
124+ }
125+ } ) ;
0 commit comments