1+ /*
2+ Code modified from:
3+ http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/
4+ using graphics purchased from vectorstock.com
5+ */
6+
7+ /* Initialization.
8+ Here, we create and add our "canvas" to the page.
9+ We also load all of our images.
10+ */
11+
12+
13+ let canvas ;
14+ let ctx ;
15+
16+ canvas = document . createElement ( "canvas" ) ;
17+ ctx = canvas . getContext ( "2d" ) ;
18+ canvas . width = 512 ;
19+ canvas . height = 480 ;
20+ document . body . appendChild ( canvas ) ;
21+
22+ let bgReady , heroReady , monsterReady ;
23+ let bgImage , heroImage , monsterImage ;
24+
25+ function loadImages ( ) {
26+ bgImage = new Image ( ) ;
27+ bgImage . onload = function ( ) {
28+ // show the background image
29+ bgReady = true ;
30+ } ;
31+ bgImage . src = "images/background.png" ;
32+ heroImage = new Image ( ) ;
33+ heroImage . onload = function ( ) {
34+ // show the hero image
35+ heroReady = true ;
36+ } ;
37+ heroImage . src = "images/hero.png" ;
38+
39+ monsterImage = new Image ( ) ;
40+ monsterImage . onload = function ( ) {
41+ // show the monster image
42+ monsterReady = true ;
43+ } ;
44+ monsterImage . src = "images/monster.png" ;
45+ }
46+
47+ /**
48+ * Setting up our characters.
49+ *
50+ * Note that heroX represents the X position of our hero.
51+ * heroY represents the Y position.
52+ * We'll need these values to know where to "draw" the hero.
53+ *
54+ * The same applies to the monster.
55+ */
56+
57+ let heroX = canvas . width / 2 ;
58+ let heroY = canvas . height / 2 ;
59+
60+ let monsterX = 100 ;
61+ let monsterY = 100 ;
62+
63+ /**
64+ * Keyboard Listeners
65+ * You can safely ignore this part, for now.
66+ *
67+ * This is just to let JavaScript know when the user has pressed a key.
68+ */
69+ let keysDown = { } ;
70+ function setupKeyboardListeners ( ) {
71+ // Check for keys pressed where key represents the keycode captured
72+ // For now, do not worry too much about what's happening here.
73+ addEventListener ( "keydown" , function ( key ) {
74+ keysDown [ key . keyCode ] = true ;
75+ } , false ) ;
76+
77+ addEventListener ( "keyup" , function ( key ) {
78+ delete keysDown [ key . keyCode ] ;
79+ } , false ) ;
80+ }
81+
82+
83+ /**
84+ * Update game objects - change player position based on key pressed
85+ * and check to see if the monster has been caught!
86+ *
87+ * If you change the value of 5, the player will move at a different rate.
88+ */
89+ let update = function ( ) {
90+ if ( 38 in keysDown ) { // Player is holding up key
91+ heroY -= 5 ;
92+ }
93+ if ( 40 in keysDown ) { // Player is holding down key
94+ heroY += 5 ;
95+ }
96+ if ( 37 in keysDown ) { // Player is holding left key
97+ heroX -= 5 ;
98+ }
99+ if ( 39 in keysDown ) { // Player is holding right key
100+ heroX += 5 ;
101+ }
102+
103+ // Check if player and monster collided. Our images
104+ // are about 32 pixels big.
105+ if (
106+ heroX <= ( monsterX + 32 )
107+ && monsterX <= ( heroX + 32 )
108+ && heroY <= ( monsterY + 32 )
109+ && monsterY <= ( heroY + 32 )
110+ ) {
111+ // Pick a new location for the monster.
112+ // Note: Change this to place the monster at a new, random location.
113+ monsterX = monsterX + 50 ;
114+ monsterY = monsterY + 70 ;
115+ }
116+ } ;
117+
118+ /**
119+ * This function, render, runs as often as possible.
120+ */
121+ var render = function ( ) {
122+ if ( bgReady ) {
123+ ctx . drawImage ( bgImage , 0 , 0 ) ;
124+ }
125+ if ( heroReady ) {
126+ ctx . drawImage ( heroImage , heroX , heroY ) ;
127+ }
128+ if ( monsterReady ) {
129+ ctx . drawImage ( monsterImage , monsterX , monsterY ) ;
130+ }
131+ } ;
132+
133+ /**
134+ * The main game loop. Most every game will have two distinct parts:
135+ * update (updates the state of the game, in this case our hero and monster)
136+ * render (based on the state of our game, draw the right things)
137+ */
138+ var main = function ( ) {
139+ update ( ) ;
140+ render ( ) ;
141+ // Request to do this again ASAP. This is a special method
142+ // for web browsers.
143+ requestAnimationFrame ( main ) ;
144+ } ;
145+
146+ // Cross-browser support for requestAnimationFrame.
147+ // Safely ignore this line. It's mostly here for people with old web browsers.
148+ var w = window ;
149+ requestAnimationFrame = w . requestAnimationFrame || w . webkitRequestAnimationFrame || w . msRequestAnimationFrame || w . mozRequestAnimationFrame ;
150+
151+ // Let's play this game!
152+ loadImages ( ) ;
153+ setupKeyboardListeners ( ) ;
154+ main ( ) ;
0 commit comments