29 | /**
30 | * @file Arcade game similar to frogger.
31 | * @author Cynthia Teeters <me@cynthiateeters.com>
32 | * @copyright Cynthia Teeters © 2015
33 | *
34 | *
35 | * @see Images used to make this game's characters Evil Chompers
36 | * were originally made [Bevouliin - Imaginary Perception]{@link http://bevouliin.com} ,
37 | * and obtained from [OpenGameArt]{@link opengameart.org} under [CC0 license]{@link http://creativecommons.org/publicdomain/zero/1.0/}.
38 | *
39 | * @see Images to make litlle monkey were originally made by [fikri]{@link http://graphicriver.net/user/fikri} and
40 | * purchased under [Envato Standard License]{@link http://graphicriver.net/licenses/standard?license=regular}.
41 | *
42 | * @see pacmanwakka.wav (created by remaxim) was obtained from [OpenGameArt]{@link http://opengameart.org/content/pacman-clone-wakka-sound}
43 | * under a [CC-BY-SA 3.0 license]{@link http://creativecommons.org/licenses/by-sa/3.0/}.
44 | *
45 | * @see round_end.wac (created by sauer2) was obtained from [OpenGameArt]{@link http://opengameart.org/content/oldschool-win-and-die-jump-and-run-soundscreated}
46 | * under [CC0 license]{@link http://creativecommons.org/publicdomain/zero/1.0/}.
47 | */
48 |
49 | /**
50 | * Represents a game enemy, a thing the must hero.
51 | * @constructor
52 | */
53 | var Enemy = function () {
54 | /*
55 | There are two images for each enemy to make it
56 | animated by chomping its teeth.
57 | */
58 | this.enemyArr = ['images/evil-red-flower-2.png',
59 | 'images/evil-red-flower-1.png'
60 | ];
61 | Resources.load(this.enemyArr);
62 | this.sprite = this.enemyArr[0];
63 | /*
64 | * Basic game physics: speed and acceleration
65 | */
66 | this.x = -101;
67 | this.y = -200;
68 | this.maxSpeed = createRandom(300, 400);
69 | this.speed = createRandom(60, 140);
70 | this.startSpeed = this.speed;
71 | this.accel = createRandom(10001, 10005) / 10000;
72 | this.speeding = false;
73 | this.timeSpeeding = 0;
74 | /*
75 | * Make enemy randomly chomp its teeth
76 | */
77 | this.chomp = createRandom(0, 1); // used to load chomp sprite, must toggle between 0 and 1
78 | this.chompSpeed = createRandom(4, 33);
79 | this.chompCount = 0;
80 | };
81 |
82 | /**
83 | * Initialize pixel position of an enemy based on
84 | * the game grid's column and row.
85 | *
86 | * @param {number} col - a gameboard grid column.
87 | * @param {number} row - a gameboard grid column.
88 | */
89 | Enemy.prototype.init = function (col, row) {
90 | this.x = config.xDimensions.xInterval * col;
91 | this.y = config.yDimensions.yInterval * row;
92 | };
93 |
94 | /**
95 | * Update the enemy's position, a required method for the game
96 | *
97 | * @param {number} dt - a time delta between ticks.
98 | *
99 | */
100 | Enemy.prototype.update = function (dt) {
101 | // Multiply any movement by the dt parameter
102 | // which will ensure the game runs at the same speed for
103 | // all computers.
104 |
105 | // Animate enemy's mouth
106 | this.chompCount++;
107 | if (this.chompCount % this.chompSpeed === 0) {
108 | this.chomp = 1 - this.chomp;
109 | this.sprite = this.enemyArr[this.chomp];
110 | }
111 |
112 | // Check for a possible collision with hero
113 | this.collision();
114 |
115 | // Game physics
116 | if (this.speed < this.maxSpeed) {
117 | this.speed = this.speed * this.accel;
118 | } else {
119 | if (!this.speeding) {
120 | this.speeding = true;
121 | }
122 | }
123 | var newX = this.x + this.speed * dt;
124 | if (newX > config.xDimensions.xMax) {
125 | this.x = -202;
126 | this.chompSpeed = createRandom(2, 33);
127 | if (this.speeding) {
128 | this.timeSpeeding += 1;
129 | if (this.timeSpeeding > 6) {
130 | this.speed = this.startSpeed;
131 | this.speeding = false;
132 | this.timeSpeeding = 0;
133 | var change = -1 + Math.round(Math.random()) * 2;
134 | this.maxSpeed = this.maxSpeed + change * 150 * Math.random();
135 | this.accel = createRandom(10001, 10005) / 10000;
136 | }
137 | }
138 | } else {
139 | this.x = newX;
140 | }
141 | };
142 |
143 | /**
144 | * Allow enemy to share its position
145 | * @returns {object} the enemy's (x,y) coordinates
146 | */
147 | Enemy.prototype.report = function () {
148 | return {
149 | xPos: this.x,
150 | yPos: this.y
151 | };
152 | };
153 |
154 | /**
155 | * Enemy checks if it has hit the hero. It has
156 | * the ability to tell the player to reset.
157 | */
158 | Enemy.prototype.collision = function () {
159 | var playerPos = player.report();
160 | var diffX = Math.abs(this.x - playerPos.xPos);
161 | var diffY = Math.abs(this.y - playerPos.yPos);
162 |
163 | if (diffX < (config.xDimensions.xInterval - 40) && diffY < config.yDimensions.yInterval) {
164 | player.reset(true);
165 | soundEfx.play();
166 | }
167 | };
168 |
169 | /**
170 | * Draw the enemy on the screen, a required method for game.
171 | */
172 | Enemy.prototype.render = function () {
173 | ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
174 | };
175 |
176 | /**
177 | * Represents a game hero.
178 | * @constructor
179 | */
180 | var Player = function () {
181 | this.enemyArr = [
182 | 'images/wu-idle.png',
183 | 'images/wu-rr.png',
184 | 'images/wu-rl.png',
185 | 'images/wu-up.png',
186 | 'images/wu-down.png',
187 | 'images/wu-hit2.png',
188 | 'images/wu-joy-r.png',
189 | 'images/wu-joy-l.png'
190 | ];
191 | Resources.load(this.enemyArr);
192 | this.sprite = this.enemyArr[0];
193 | this.x = Math.floor((config.canvasDimensions.canvasCols - 1) / 2) * config.xDimensions.xInterval;
194 | this.y = 5 * config.yDimensions.yInterval;
195 | this.startX = this.x;
196 | this.startY = this.y;
197 | this.victory = 0;
198 | this.victoryCelebration = false;
199 | this.victoryCount = 0;
200 |
201 | };
202 |
203 | /**
204 | * Draw the player on the screen, a required method for game.
205 | */
206 | Player.prototype.render = function () {
207 | ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
208 | };
209 |
210 | /**
211 | * Update the player's status.
212 | * A win needs a celebration dance.
213 | */
214 | Player.prototype.update = function () {
215 | // If player wins, have it jump for joy
216 | // and let that jumping go for 75 loop cycles,
217 | // then update score, and reset back to start pos.
218 | if (this.y === 0 && this.victoryCount < 75) {
219 | soundWin.play();
220 | this.victoryCelebration = true;
221 | this.victoryCount++;
222 | if (this.victoryCount % 14 === 0) {
223 | // toggle between up and down jump enemyArr
224 | this.victory = 1 - this.victory;
225 | this.sprite = this.enemyArr[this.victory + 6];
226 | }
227 | if (this.victoryCount >= 75) {
228 | player.reset(false);
229 | this.victoryCount = 0;
230 | this.victoryCelebration = false;
231 | scoreboard.update(1);
232 | }
233 | }
234 | };
235 |
236 | /**
237 | * Allow player to share its position
238 | * @returns {object} - the player's (x,y) coordinates
239 | */
240 | Player.prototype.report = function () {
241 | return {
242 | xPos: this.x,
243 | yPos: this.y
244 | };
245 | };
246 |
247 | /**
248 | * Reset the player back to his starting position.
249 | * If it was hit, use image to show it as hurt.
250 | *
251 | * @param {boolean} isHit -
252 | */
253 | Player.prototype.reset = function (isHit) {
254 | if (isHit) {
255 | this.sprite = this.enemyArr[5];
256 | } else {
257 | this.sprite = this.enemyArr[0];
258 | }
259 | this.x = this.startX;
260 | this.y = this.startY;
261 | };
262 |
263 | /**
264 | * Logically move player along as user presses arrow keys.
265 | *
266 | * @param {string} key - user pressed this arrow key
267 | */
268 | Player.prototype.handleInput = function (key) {
269 | if (this.victoryCelebration) {
270 | return;
271 | }
272 |
273 | if (key == 'space') {
274 | isRunning = !isRunning;
275 | }
276 | if (isRunning) {
277 | if (key == 'up') {
278 | if (this.y > config.yDimensions.yInterval) {
279 | this.y -= config.yDimensions.yInterval;
280 | this.sprite = this.enemyArr[3];
281 | } else {
282 | this.y = 0;
283 | }
284 | } else if (key == 'down' && (this.y < config.yDimensions.yMax)) {
285 | this.y += config.yDimensions.yInterval;
286 | this.sprite = this.enemyArr[4];
287 | } else if (key == 'right' && (this.x < config.xDimensions.xMax - config.xDimensions.xInterval)) {
288 | this.x += config.xDimensions.xInterval;
289 | this.sprite = this.enemyArr[1];
290 | } else if (key == 'left') {
291 | if (this.x > config.xDimensions.xInterval) {
292 | this.x -= config.xDimensions.xInterval;
293 | this.sprite = this.enemyArr[2];
294 | } else {
295 | this.x = 0;
296 | }
297 | }
298 | if (this.x == this.startX && this.y == this.startY) {
299 | this.sprite = this.enemyArr[0];
300 | }
301 | }
302 | };
303 |
304 | /**
305 | * Represents the game's scoreboard.
306 | * @constructor
307 | */
308 | var Scoreboard = function () {
309 | this.numberWins = 0;
310 | };
311 |
312 | /**
313 | * Update the player's score.
314 | */
315 | Scoreboard.prototype.update = function (wins) {
316 |
317 | isScoreboardUp = true;
318 | if (typeof wins === 'number') {
319 | this.numberWins += wins;
320 | ctx.drawImage(Resources.get(sky), 0, 0);
321 | var winText = 'Your Score: ' + this.numberWins;
322 | //ctx.clearRect(0, 0, canvas.width, canvas.height);
323 | //ctx.fillStyle = "#4e4e4e";
324 | //ctx.clearRect(0, 0, canvas.width, canvas.height);
325 | ctx.font = config.textStyles.h3;
326 | ctx.fillStyle = config.textStyles.black;
327 | ctx.fillStyle = "#4e4e4e";
328 | ctx.fillText(winText, 65, 44);
329 |
330 | }
331 |
332 | };
333 |
334 | // Now instantiate objects.
335 | // Place all enemy objects in an array called allEnemies
336 | var allEnemies = [];
337 | var i;
338 | //Make an enemy - one on each of the grass rows
339 | for (i = 0; i < 4; i++) {
340 | allEnemies.push(new Enemy());
341 | allEnemies[i].init(createRandom(-2, 5), i + 1);
342 | }
343 | //Make some more enemies that are more randomly placed
344 | var max = createRandom(5, 8);
345 | for (i; i < max; i++) {
346 | allEnemies.push(new Enemy());
347 | allEnemies[i].init(createRandom(-2, config.canvasDimensions.canvasCols), createRandom(1, 4));
348 | }
349 |
350 | // Place the player object in a variable called player
351 | var player = new Player(); // CLT
352 |
353 | // Place the scoreboard object in a variable called scoreboard
354 | var scoreboard = new Scoreboard();
355 |
356 | // This listens for key presses and sends the keys to your
357 | // Player.handleInput() method. You don't need to modify this.
358 | document.addEventListener('keyup', function (e) {
359 | var allowedKeys = {
360 | 37: 'left',
361 | 38: 'up',
362 | 39: 'right',
363 | 40: 'down',
364 | 32: 'space'
365 | };
366 | player.handleInput(allowedKeys[e.keyCode]);
367 | });
368 |
369 |
370 |