├── README.md
├── images
├── background.png
├── hero.png
└── monster.png
├── index.html
└── js
└── game.js
/README.md:
--------------------------------------------------------------------------------
1 | # How to make a simple HTML5 Canvas game
2 |
3 | Build your first HTML5 Canvas game in no time! [Read the whole article here.](http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/)
4 |
5 | * Subscribe to the [Lost Decade Games blog](http://www.lostdecadegames.com/rss.xml)
6 | * Listen to [Lostcast](http://www.lostdecadegames.com/lostcast/), the indie game dev podcast
7 | * Follow us [@LostDecadeGames](https://twitter.com/LostDecadeGames)
8 |
--------------------------------------------------------------------------------
/images/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lostdecade/simple_canvas_game/f24d73445955bbea0cebe2b927086f66ddebcdd0/images/background.png
--------------------------------------------------------------------------------
/images/hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lostdecade/simple_canvas_game/f24d73445955bbea0cebe2b927086f66ddebcdd0/images/hero.png
--------------------------------------------------------------------------------
/images/monster.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lostdecade/simple_canvas_game/f24d73445955bbea0cebe2b927086f66ddebcdd0/images/monster.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Simple Canvas Game
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/js/game.js:
--------------------------------------------------------------------------------
1 | // Create the canvas
2 | var canvas = document.createElement("canvas");
3 | var ctx = canvas.getContext("2d");
4 | canvas.width = 512;
5 | canvas.height = 480;
6 | document.body.appendChild(canvas);
7 |
8 | // Background image
9 | var bgReady = false;
10 | var bgImage = new Image();
11 | bgImage.onload = function () {
12 | bgReady = true;
13 | };
14 | bgImage.src = "images/background.png";
15 |
16 | // Hero image
17 | var heroReady = false;
18 | var heroImage = new Image();
19 | heroImage.onload = function () {
20 | heroReady = true;
21 | };
22 | heroImage.src = "images/hero.png";
23 |
24 | // Monster image
25 | var monsterReady = false;
26 | var monsterImage = new Image();
27 | monsterImage.onload = function () {
28 | monsterReady = true;
29 | };
30 | monsterImage.src = "images/monster.png";
31 |
32 | // Game objects
33 | var hero = {
34 | speed: 256 // movement in pixels per second
35 | };
36 | var monster = {};
37 | var monstersCaught = 0;
38 |
39 | // Handle keyboard controls
40 | var keysDown = {};
41 |
42 | addEventListener("keydown", function (e) {
43 | keysDown[e.keyCode] = true;
44 | }, false);
45 |
46 | addEventListener("keyup", function (e) {
47 | delete keysDown[e.keyCode];
48 | }, false);
49 |
50 | // Reset the game when the player catches a monster
51 | var reset = function () {
52 | hero.x = canvas.width / 2;
53 | hero.y = canvas.height / 2;
54 |
55 | // Throw the monster somewhere on the screen randomly
56 | monster.x = 32 + (Math.random() * (canvas.width - 64));
57 | monster.y = 32 + (Math.random() * (canvas.height - 64));
58 | };
59 |
60 | // Update game objects
61 | var update = function (modifier) {
62 | if (38 in keysDown) { // Player holding up
63 | hero.y -= hero.speed * modifier;
64 | }
65 | if (40 in keysDown) { // Player holding down
66 | hero.y += hero.speed * modifier;
67 | }
68 | if (37 in keysDown) { // Player holding left
69 | hero.x -= hero.speed * modifier;
70 | }
71 | if (39 in keysDown) { // Player holding right
72 | hero.x += hero.speed * modifier;
73 | }
74 |
75 | // Are they touching?
76 | if (
77 | hero.x <= (monster.x + 32)
78 | && monster.x <= (hero.x + 32)
79 | && hero.y <= (monster.y + 32)
80 | && monster.y <= (hero.y + 32)
81 | ) {
82 | ++monstersCaught;
83 | reset();
84 | }
85 | };
86 |
87 | // Draw everything
88 | var render = function () {
89 | if (bgReady) {
90 | ctx.drawImage(bgImage, 0, 0);
91 | }
92 |
93 | if (heroReady) {
94 | ctx.drawImage(heroImage, hero.x, hero.y);
95 | }
96 |
97 | if (monsterReady) {
98 | ctx.drawImage(monsterImage, monster.x, monster.y);
99 | }
100 |
101 | // Score
102 | ctx.fillStyle = "rgb(250, 250, 250)";
103 | ctx.font = "24px Helvetica";
104 | ctx.textAlign = "left";
105 | ctx.textBaseline = "top";
106 | ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
107 | };
108 |
109 | // The main game loop
110 | var main = function () {
111 | var now = Date.now();
112 | var delta = now - then;
113 |
114 | update(delta / 1000);
115 | render();
116 |
117 | then = now;
118 |
119 | // Request to do this again ASAP
120 | requestAnimationFrame(main);
121 | };
122 |
123 | // Cross-browser support for requestAnimationFrame
124 | var w = window;
125 | requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
126 |
127 | // Let's play this game!
128 | var then = Date.now();
129 | reset();
130 | main();
131 |
--------------------------------------------------------------------------------