Created basic canvas renderer for PuckMan levels.

NOTE: Graphics I found on the web. They might be copyright.
mgregson · Feb 6, 2011 · f755e84 · f755e84
1 parent dc1986c
commit f755e84
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 0 deletions.
diff --git a/canvas/canvas.html b/canvas/canvas.html
@@ -0,0 +1,16 @@
+<html>
+  <head>
+    <title>PuckMan Dungeons</title>
+    <link rel="stylesheet" type="text/css" href="style.css"></style>
+
+    <script language="javascript" type="text/javascript" src="js/Item.js"></script>
+    <script language="javascript" type="text/javascript" src="js/Level.js"></script>
+    <script language="javascript" type="text/javascript" src="js/ActorEntity.js"></script>
+    <script language="javascript" type="text/javascript" src="js/PuckMan.js"></script>
+  </head>
+  <body onload="init()">
+    <div id="content">
+      <canvas id="canvas" width="800" height="600"></canvas>
+    </div>
+  </body>
+</html>
diff --git a/canvas/gfx/ghost.png b/canvas/gfx/ghost.png
diff --git a/canvas/gfx/items.png b/canvas/gfx/items.png
diff --git a/canvas/gfx/tiles.png b/canvas/gfx/tiles.png
diff --git a/canvas/js/ActorEntity.js b/canvas/js/ActorEntity.js
@@ -0,0 +1,41 @@
+/** An ActorEntity are the characters that are animated **/
+
+function ActorEntity(name, image) {
+  this.name = name;
+  this.image = new Image();
+  this.image.src = image;
+  this.dir = DOWN;          //Which direction the entity is facing
+  this.frame = 0;           //Which frame in the current animation we're on
+  this.numFrames = 3;       //How many frames in each animation
+  this.frameTime = 0;       //How long on the current frame
+  this.frameDuration = 200; //How long each frame should last
+  this.x = 0;
+  this.y = 0;
+
+  /** EXPORT METHODS **/
+  this.update = update;
+  this.draw = draw;
+
+
+  /** CLASS FUNCTIONS **/
+  function update(delta) {
+    var r = Math.random();
+    if(r < 0.01) {
+       this.dir = Math.floor(Math.random()*4);
+    }
+    //update animation
+    this.frameTime += delta;
+    while(this.frameTime > this.frameDuration) {
+      this.frame = (this.frame + 1) % this.numFrames;
+      this.frameTime -= this.frameDuration;
+    }
+  }
+
+  function draw(context) {
+    //Draw the entity at the current frame and direction.
+    context.drawImage(this.image,
+      this.frame * 32, this.dir * 32, 32, 32,
+      this.x * 32, this.y * 32, 32, 32
+    );
+  }
+}
diff --git a/canvas/js/Item.js b/canvas/js/Item.js
@@ -0,0 +1,5 @@
+function Item(type, x, y) {
+  this.type = type;
+  this.x = x;
+  this.y = y;
+}
diff --git a/canvas/js/Level.js b/canvas/js/Level.js
@@ -0,0 +1,47 @@
+function Level() {
+  /** STATE VARIABLES **/
+  this.tiles = [];
+  this.image = new Image();
+  this.image.src = 'gfx/tiles.png';
+  this.items = [];
+  this.items.image = new Image();
+  this.items.image.src = 'gfx/items.png';
+
+  /** INITIALIZE **/
+  //Create a random map for now
+  for(var x=0; x<20; ++x) {
+    this.tiles[x] = new Array(20);
+    for(var y=0; y<20; ++y) {
+      this.tiles[x][y] = Math.floor(Math.random() * 5);
+      var r = Math.random();
+      if(r < 0.1) {
+        //Add a stabby
+        this.items.push(new Item(1, x, y));
+      } else if(r < 0.5) {
+        //add a shiney
+        this.items.push(new Item(0, x, y));
+      }
+    }
+  }
+
+  /** EXPORT MEMBER FUNCTIONS **/
+  this.draw = draw;
+  /** MEMBER FUNCTIONS **/
+  function draw(context) {
+    for(var x=0; x<20; ++x) {
+      for(var y=0; y<20; ++y) {
+        context.drawImage(this.image,
+          1 + this.tiles[x][y] * 33, 1, 32, 32,
+          x * 32, y * 32, 32, 32
+        );
+      }
+    }
+    //Now render items
+    for(var i=0; i<this.items.length; ++i) {
+      context.drawImage(this.items.image,
+        this.items[i].type * 32, 0, 32, 32,
+        this.items[i].x *32, this.items[i].y * 32, 32, 32
+      );
+    }
+  }
+}
diff --git a/canvas/js/PuckMan.js b/canvas/js/PuckMan.js
@@ -0,0 +1,40 @@
+eval ('ActorEntity.js');
+
+/** State variables for the ghost **/
+var DOWN  = 0;
+var LEFT  = 1;
+var RIGHT = 2;
+var UP    = 3;
+var FRAMETIME = 20;
+
+var level = new Level();
+var ghost = new ActorEntity('Larry', 'gfx/ghost.png');
+var ARGS = {};
+
+/*** Main game functions ***/
+function init() {
+  setInterval(draw, FRAMETIME);
+  var url = window.location.toString();
+  url.match(/\?(.+)$/);
+  url = RegExp.$1;
+
+  var params = url.split('&');
+  for(var i=0; i<params.length; ++i) {
+    var t = params[i].split('=');
+    ARGS[t[0]] = t[1];
+  }
+  loadContest();
+}
+
+function loadContest() {
+  alert('Loading contest ' + ARGS['contest_id']);
+}
+
+function draw() {
+  var canvas = document.getElementById("canvas");
+  var context = canvas.getContext("2d");
+  context.clearRect(0,0,800,600);
+  ghost.update(FRAMETIME);
+  level.draw(context);
+  ghost.draw(context);
+}
diff --git a/canvas/style.css b/canvas/style.css
@@ -0,0 +1,3 @@
+div#content {
+  border: 1px solid black;
+};