1+ function load_images ( ) {
2+ //player,virus,gem
3+ enemy_image = new Image ;
4+ enemy_image . src = "Assets/v1.png" ;
5+ 6+ player_img = new Image ;
7+ player_img . src = "Assets/superhero.png" ;
8+ 9+ gem_image = new Image ;
10+ gem_image . src = "Assets/gemm.png" ;
11+ 12+ 13+ }
14+ 15+ 16+ function init ( ) {
17+ //define the objects that we will have in the game
18+ canvas = document . getElementById ( "mycanvas" ) ;
19+ console . log ( canvas ) ;
20+ W = 700 ;
21+ H = 400 ;
22+ 23+ canvas . width = W ;
24+ canvas . height = H ;
25+ 26+ // create a context
27+ pen = canvas . getContext ( '2d' ) ;
28+ console . log ( pen ) ;
29+ game_over = false ;
30+ 31+ e1 = {
32+ x : 150 ,
33+ y : 50 ,
34+ w : 60 ,
35+ h : 60 ,
36+ speed : 20 ,
37+ } ;
38+ e2 = {
39+ x : 300 ,
40+ y : 150 ,
41+ w : 60 ,
42+ h : 60 ,
43+ speed : 30 ,
44+ } ;
45+ e3 = {
46+ x : 450 ,
47+ y : 20 ,
48+ w : 60 ,
49+ h : 60 ,
50+ speed : 40 ,
51+ } ;
52+ 53+ enemy = [ e1 , e2 , e3 ] ;
54+ 55+ player = {
56+ x : 20 ,
57+ y : H / 2 ,
58+ w : 60 ,
59+ h : 60 ,
60+ speed : 20 ,
61+ moving : false ,
62+ health : 100 ,
63+ } ;
64+ 65+ gem = {
66+ x : W - 100 ,
67+ y : H / 2 ,
68+ w : 60 ,
69+ h : 60 ,
70+ } ;
71+ //listen to events on the canvas
72+ canvas . addEventListener ( 'mousedown' , function ( ) {
73+ console . log ( "Mouse Pressed" ) ;
74+ player . moving = true ;
75+ } ) ;
76+ canvas . addEventListener ( 'mouseup' , function ( ) {
77+ console . log ( "Mouse Released" ) ;
78+ player . moving = false ;
79+ } ) ;
80+ 81+ }
82+ 83+ function isOverlap ( rect1 , rect2 ) {
84+ if ( rect1 . x < rect2 . x + rect2 . w &&
85+ rect1 . x + rect1 . w > rect2 . x &&
86+ rect1 . y < rect2 . y + rect2 . h &&
87+ rect1 . y + rect1 . h > rect2 . y ) {
88+ return true
89+ }
90+ 91+ return false ;
92+ 93+ }
94+ 95+ function draw ( ) {
96+ 97+ //clear the canvas area for the old frame
98+ pen . clearRect ( 0 , 0 , W , H ) ;
99+ 100+ pen . fillStyle = "red" ;
101+ //pen.fillRect(box.x,box.y,box.w,box.h);
102+ //pen.drawImage(enemy_image,box.x,box.y,box.w,box.h);
103+ 104+ //draw the player
105+ 106+ //draw the gem
107+ pen . drawImage ( player_img , player . x , player . y , player . w , player . h ) ;
108+ pen . drawImage ( gem_image , gem . x , gem . y , gem . w , gem . h ) ;
109+ 110+ 111+ for ( let i = 0 ; i < enemy . length ; i ++ ) {
112+ pen . drawImage ( enemy_image , enemy [ i ] . x , enemy [ i ] . y , enemy [ i ] . w , enemy [ i ] . h ) ;
113+ }
114+ 115+ pen . fillStyle = "white" ;
116+ pen . fillText ( "Score " + player . health , 10 , 10 ) ;
117+ 118+ }
119+ 120+ function update ( ) {
121+ 122+ //if the player is moving
123+ if ( player . moving == true ) {
124+ player . x += player . speed ;
125+ player . health += 20 ;
126+ }
127+ 128+ for ( let i = 0 ; i < enemy . length ; i ++ ) {
129+ if ( isOverlap ( enemy [ i ] , player ) ) {
130+ player . health -= 50 ;
131+ if ( player . health < 0 ) {
132+ console . log ( player . health ) ;
133+ game_over = true ;
134+ alert ( "Game Over" + player . health ) ;
135+ }
136+ }
137+ }
138+ 139+ 140+ 141+ //overlap overlap
142+ if ( isOverlap ( player , gem ) ) {
143+ 144+ console . log ( "You Won" ) ;
145+ alert ( "You Won!" ) ;
146+ game_over = true ;
147+ return ;
148+ }
149+ 150+ //move the box downwards
151+ //update each enemy by same logic
152+ for ( let i = 0 ; i < enemy . length ; i ++ ) {
153+ enemy [ i ] . y += enemy [ i ] . speed ;
154+ if ( enemy [ i ] . y > H - enemy [ i ] . h || enemy [ i ] . y < 0 ) {
155+ enemy [ i ] . speed *= - 1 ;
156+ }
157+ }
158+ 159+ }
160+ 161+ function gameloop ( ) {
162+ if ( game_over == true ) {
163+ clearInterval ( f ) ;
164+ }
165+ draw ( ) ;
166+ update ( ) ;
167+ console . log ( "In gameloop" ) ;
168+ }
169+ 170+ load_images ( ) ;
171+ init ( ) ;
172+ var f = setInterval ( gameloop , 100 ) ;
0 commit comments