Permalink
Browse files

first commit

0 parents commit 256d456f6dd5ceb6d1825a9fcdea0e046fd47857 @richtaur richtaur committed Sep 13, 2011
Showing with 136 additions and 0 deletions.
  1. +3 −0 README.md
  2. BIN images/background.png
  3. BIN images/hero.png
  4. BIN images/monster.png
  5. +10 −0 index.html
  6. +123 −0 js/game.js
@@ -0,0 +1,3 @@
+# How to make a simple HTML5 Canvas game
+
+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/)
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Simple Canvas Game</title>
+ </head>
+ <body>
+ <script src="js/game.js"></script>
+ </body>
+</html>
@@ -0,0 +1,123 @@
+// 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();
+bgImage.onload = function () {
+ bgReady = true;
+};
+bgImage.src = "images/background.png";
+
+// Hero image
+var heroReady = false;
+var heroImage = new Image();
+heroImage.onload = function () {
+ heroReady = true;
+};
+heroImage.src = "images/hero.png";
+
+// Monster image
+var monsterReady = false;
+var monsterImage = new Image();
+monsterImage.onload = function () {
+ monsterReady = true;
+};
+monsterImage.src = "images/monster.png";
+
+// Game objects
+var hero = {
+ speed: 256 // movement in pixels per second
+};
+var monster = {};
+var monstersCaught = 0;
+
+// Handle keyboard controls
+var keysDown = {};
+
+addEventListener("keydown", function (e) {
+ keysDown[e.keyCode] = true;
+}, false);
+
+addEventListener("keyup", function (e) {
+ delete keysDown[e.keyCode];
+}, false);
+
+// Reset the game when the player catches a monster
+var reset = function () {
+ hero.x = canvas.width / 2;
+ hero.y = canvas.height / 2;
+
+ // Throw the monster somewhere on the screen randomly
+ monster.x = 32 + (Math.random() * (canvas.width - 64));
+ monster.y = 32 + (Math.random() * (canvas.height - 64));
+};
+
+// Update game objects
+var update = function (modifier) {
+ if (38 in keysDown) { // Player holding up
+ hero.y -= hero.speed * modifier;
+ }
+ if (40 in keysDown) { // Player holding down
+ hero.y += hero.speed * modifier;
+ }
+ if (37 in keysDown) { // Player holding left
+ hero.x -= hero.speed * modifier;
+ }
+ if (39 in keysDown) { // Player holding right
+ hero.x += hero.speed * modifier;
+ }
+
+ // Are they touching?
+ if (
+ hero.x <= (monster.x + 32)
+ && monster.x <= (hero.x + 32)
+ && hero.y <= (monster.y + 32)
+ && monster.y <= (hero.y + 32)
+ ) {
+ ++monstersCaught;
+ reset();
+ }
+};
+
+// Draw everything
+var render = function () {
+ if (bgReady) {
+ ctx.drawImage(bgImage, 0, 0);
+ }
+
+ if (heroReady) {
+ ctx.drawImage(heroImage, hero.x, hero.y);
+ }
+
+ if (monsterReady) {
+ ctx.drawImage(monsterImage, monster.x, monster.y);
+ }
+
+ // Score
+ ctx.fillStyle = "rgb(250, 250, 250)";
+ ctx.font = "24px Helvetica";
+ ctx.textAlign = "left";
+ ctx.textBaseline = "top";
+ ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
+};
+
+// The main game loop
+var main = function () {
+ var now = Date.now();
+ var delta = now - then;
+
+ update(delta / 1000);
+ render();
+
+ then = now;
+};
+
+// Let's play this game!
+reset();
+var then = Date.now();
+setInterval(main, 1); // Execute as fast as possible

0 comments on commit 256d456

Please sign in to comment.