-
Notifications
You must be signed in to change notification settings - Fork 1
/
catch03.js
85 lines (68 loc) · 1.83 KB
/
catch03.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
// Background image
var bgReady = false;
var bgImage = new Image(); //we have an image object
bgImage.src = "chpaper.png";
bgImage.onload = function () {
//different way to create a function
bgReady = true;
};
// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
heroReady = true;
};
heroImage.src = "redl.png";
var hero = {
speed: 200 // movement in pixels per second
}; //created and edited an aspect of the hero object
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// symbol image
var symbolsReady = false;
var symbolsImage = new Image();
symbolsImage.onload = function () {
symbolsReady = true;
};
symbolsImage.src = "logo.png";
var symbols = {
speed: 100};
var symbolCaught = 0;
var direction = -1;
// Reset the game when the player catches a symbols
var reset = function () {
// Throw the symbols somewhere on the screen randomly
symbols.x = symbolsImage.width + (Math.random() * (canvas.width - (2 * symbolsImage.width)));
symbols.y = symbolsImage.height + (Math.random() * (canvas.height - (2 * symbolsImage.height)));
};
// Draw everything
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}
if (symbolsReady) {
ctx.drawImage(symbolsImage, symbols.x, symbols.y);
}
// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px serif";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Symbols collected: " + symbolCaught , 32, 32);
};
// The main game loop
var main = function () {
render();
};
// Let's play this game!
reset();
setInterval(main, 1); // Execute as fast as possible