Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

first commit

  • Loading branch information...
commit 256d456f6dd5ceb6d1825a9fcdea0e046fd47857 0 parents
Matt Hackett authored September 13, 2011
3  README.md
Source Rendered
... ...
@@ -0,0 +1,3 @@
  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/)
BIN  images/background.png
BIN  images/hero.png
BIN  images/monster.png
10  index.html
... ...
@@ -0,0 +1,10 @@
  1
+<!DOCTYPE html>
  2
+<html lang="en">
  3
+	<head>
  4
+		<meta charset="utf-8">
  5
+		<title>Simple Canvas Game</title>
  6
+	</head>
  7
+	<body>
  8
+		<script src="js/game.js"></script>
  9
+	</body>
  10
+</html>
123  js/game.js
... ...
@@ -0,0 +1,123 @@
  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
+
  120
+// Let's play this game!
  121
+reset();
  122
+var then = Date.now();
  123
+setInterval(main, 1); // Execute as fast as possible

0 notes on commit 256d456

Please sign in to comment.
Something went wrong with that request. Please try again.