1+
2+ const roadArea = document . querySelector ( '.road' ) ;
3+ let player = { step : 5 } ;
4+ let keys = { ArrowUp : false , ArrowDown : false , ArrowRight : false , ArrowLeft : false }
5+
6+ document . addEventListener ( 'keydown' , keyDown ) ;
7+ document . addEventListener ( 'keyup' , keyUp ) ;
8+
9+ function keyDown ( event ) {
10+ keys [ event . key ] = true ;
11+ }
12+ function keyUp ( event ) {
13+ keys [ event . key ] = false ;
14+ }
15+
16+
17+ function moveLines ( ) {
18+ let lines = document . querySelectorAll ( '.lines' ) ;
19+ lines . forEach ( item => {
20+ if ( item . y >= 630 ) {
21+ item . y = item . y - 750 ;
22+ }
23+ item . y = item . y + player . step ;
24+ item . style . top = item . y + 'px' ;
25+ } ) ;
26+ }
27+
28+ function moveEnemies ( playercar ) {
29+ let vehicles = document . querySelectorAll ( '.enemies' ) ;
30+ let playercarb = playercar . getBoundingClientRect ( ) ;
31+
32+
33+ vehicles . forEach ( item => {
34+ othercarb = item . getBoundingClientRect ( ) ;
35+ if ( ! ( ( playercarb . bottom < othercarb . top ) || ( playercarb . top > othercarb . bottom ) || ( playercarb . left > othercarb . right ) || ( playercarb . right < othercarb . left ) ) )
36+ {
37+ alert ( "Game over , Refresh to play again" ) ;
38+ player . start = false ;
39+ }
40+ if ( item . y >= 630 ) {
41+ item . y = - 300 ;
42+ item . style . left = Math . floor ( Math . random ( ) * 350 ) + 'px' ;
43+ }
44+ item . y = item . y + player . step ;
45+ item . style . top = item . y + 'px' ;
46+ } )
47+ }
48+
49+
50+ function playArea ( ) {
51+
52+
53+ let playercar = document . querySelector ( '.car' ) ;
54+ let road = roadArea . getBoundingClientRect ( ) ;
55+ if ( player . start ) {
56+ moveLines ( ) ;
57+ moveEnemies ( playercar ) ;
58+ if ( keys . ArrowUp && player . y > ( road . top + 80 ) ) {
59+ //we're seeing if the up arrow is pressed then player should not exceed the road top
60+ player . y = player . y - player . step ;
61+ }
62+
63+ if ( keys . ArrowDown && player . y < ( road . bottom - 150 ) ) {
64+ player . y = player . y + player . step ;
65+ }
66+
67+ if ( keys . ArrowLeft && player . x > 0 ) {
68+ player . x = player . x - player . step ;
69+ }
70+
71+ if ( keys . ArrowRight && player . x < ( road . width - 64 ) ) {
72+ player . x = player . x + player . step ;
73+ }
74+
75+ //based on left and right we assign position to our car i.e player
76+
77+ playercar . style . top = player . y + 'px' ;
78+ playercar . style . left = player . x + 'px' ;
79+ window . requestAnimationFrame ( playArea ) ;
80+ }
81+ }
82+
83+ function init ( ) {
84+
85+ player . start = true ;
86+ window . requestAnimationFrame ( playArea ) ;
87+
88+
89+
90+ //similarly we're creating lines for the road
91+ for ( let i = 0 ; i < 5 ; i ++ ) {
92+ let roadlines = document . createElement ( 'div' ) ;
93+ roadlines . setAttribute ( 'class' , 'lines' ) ;
94+ // as height of single line is 100 px and we want to add gap of 50 px
95+ roadlines . y = i * 150 ;
96+
97+ // and then adding that height to the top
98+ roadlines . style . top = roadlines . y + 'px' ;
99+ roadArea . appendChild ( roadlines ) ;
100+
101+ }
102+
103+ // we're creating player car dynamically and then adding it to our road area
104+ let playercar = document . createElement ( 'div' ) ;
105+ playercar . setAttribute ( 'class' , 'car' ) ;
106+ roadArea . appendChild ( playercar ) ;
107+
108+ //we're setting our player's dimensinos same as our car's so we're using playercar dimensions
109+ player . x = playercar . offsetLeft ;
110+ player . y = playercar . offsetTop ;
111+
112+
113+ //creating enemies
114+
115+ for ( x = 0 ; x < 4 ; x ++ ) {
116+ let enemies = document . createElement ( 'div' ) ;
117+ enemies . setAttribute ( 'class' , 'enemies' ) ;
118+ enemies . y = ( ( x + 1 ) * 350 ) * - 1 ;
119+ enemies . style . top = enemies . y + 'px' ;
120+
121+ //width of road is 400 , 50 is of car
122+ enemies . style . left = Math . floor ( Math . random ( ) * 350 ) + 'px' ;
123+ roadArea . appendChild ( enemies ) ;
124+ }
125+ }
126+
127+ init ( ) ;
0 commit comments