Browse files

Split into separate files, clean up HTML

  • Loading branch information...
1 parent 157a0b6 commit 2c48aec39c84b75cd24a19a030cc13f5ad7ef763 @thp thp committed Dec 15, 2012
Showing with 189 additions and 164 deletions.
  1. 0 {CanvasEngine → }/canvasengine-1.0.7.all.min.js
  2. +12 −0 game.css
  3. +161 −0 game.js
  4. +16 −164 index.html
View
0 CanvasEngine/canvasengine-1.0.7.all.min.js → canvasengine-1.0.7.all.min.js
File renamed without changes.
View
12 game.css
@@ -0,0 +1,12 @@
+
+body {
+ background-color: #333;
+}
+
+canvas {
+ background-color: white;
+ margin-left: auto;
+ margin-right: auto;
+ display: block;
+}
+
View
161 game.js
@@ -0,0 +1,161 @@
+
+function init_bandit() {
+ var mainScene;
+
+ var canvas = CE.defines("game").
+ extend(Animation).
+ extend(Input).
+ ready(function() {
+ canvas.Scene.call("MainScene");
+ mainScene = canvas.Scene.get('MainScene');
+ });
+
+ canvas.Scene.new({
+ name: "MainScene",
+ materials: {
+ images: {
+ player: "sprites/cat_sprite.png",
+ progress_filled: "textures/progressbar_filled.png",
+ progress_empty: "textures/progressbar_empty.png"
+ }
+ },
+ ready: function(stage) {
+ this.element = this.createElement(),
+ animation = canvas.Animation.new({
+ images: "player",
+ animations: {
+ idle: {
+ frames: [0, 3],
+ size: {
+ width: 64,
+ height: 64
+ },
+ frequence: 5
+ },
+ kick: {
+ frames: [5*16, 5*16+6],
+ size: {
+ width: 64,
+ height: 64
+ },
+ frequence: 3
+ },
+ walk: {
+ frames: [16, 16+5],
+ size: {
+ width: 64,
+ height: 64
+ },
+ frequence: 5
+ }
+ }
+ });
+
+ register_keys();
+
+ animation.add(this.element);
+ animation.play("idle", "loop");
+
+ this.element.xspeed = 0;
+ this.element.yspeed = 0;
+ this.element.defaultspeed = 2;
+
+ var el = this.createElement();
+ el.fillStyle = "black";
+ el.font = "20px Arial";
+ el.textBaseline = "top";
+ el.fillText("Health:", 0, 0);
+
+ var h = this.createElement();
+ h.drawImage('progress_empty');
+ h.scaleX=100;
+ h.scaleY=0.5;
+ h.x = 80;
+
+ var health = this.createElement();
+ health.drawImage('progress_filled');
+ health.x = 80;
+ health.scaleY=0.5;
+
+ this.health = health;
+ set_health(100);
+
+ stage.append(this.element);
+ stage.append(h);
+ stage.append(this.health);
+ stage.append(el);
+ },
+ render: function(stage) {
+ this.element.defaultspeed = 2;
+ this.element.x += this.element.xspeed;
+ this.element.y += this.element.yspeed;
+ stage.refresh();
+ }
+ });
+
+ function set_health(percent) {
+ mainScene.health.scaleX=percent;
+ }
+
+ function register_keys() {
+ function anim_idle() {
+ animation.stop();
+ animation.play("idle", "loop");
+ }
+ function anim_walk() {
+ animation.stop();
+ animation.play("walk");
+ }
+
+ canvas.Input.keyDown(Input.Up, function() {
+ mainScene.element.yspeed = -mainScene.element.defaultspeed;
+ anim_walk();
+ });
+ canvas.Input.keyUp(Input.Up, function() {
+ mainScene.element.yspeed = 0;
+ anim_idle();
+ });
+
+ canvas.Input.keyDown(Input.Bottom, function() {
+ mainScene.element.yspeed = mainScene.element.defaultspeed;
+ anim_walk();
+ });
+ canvas.Input.keyUp(Input.Bottom, function() {
+ mainScene.element.yspeed = 0;
+ anim_idle();
+ });
+
+ canvas.Input.keyDown(Input.Left, function() {
+ mainScene.element.xspeed = -mainScene.element.defaultspeed;
+ anim_walk();
+ });
+ canvas.Input.keyUp(Input.Left, function() {
+ mainScene.element.xspeed = 0;
+ anim_idle();
+ });
+
+ canvas.Input.keyDown(Input.Right, function() {
+ mainScene.element.xspeed = mainScene.element.defaultspeed;
+ anim_walk();
+ });
+ canvas.Input.keyUp(Input.Right, function() {
+ mainScene.element.xspeed = 0;
+ anim_idle();
+ });
+
+ canvas.Input.keyDown(Input.Space, function() {
+ animation.stop();
+ animation.play("kick");
+ });
+ canvas.Input.keyUp(Input.Space, function() {
+ anim_idle();
+ });
+ }
+
+ function playBackgroundMusic(soundfile) {
+ document.getElementById("dummy").innerHTML=
+ "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"true\" />";
+ }
+ playBackgroundMusic('music/fight.mp3');
+}
+
View
180 index.html
@@ -1,165 +1,17 @@
<!DOCTYPE html>
-<script src="CanvasEngine/canvasengine-1.0.7.all.min.js"></script>
-<canvas id="canvas_id" width="800" height="600"></canvas>
-<div id="dummy"></div>
-
-<script>
-
-var mainScene;
-var canvas = CE.defines("canvas_id").
- extend(Animation).
- extend(Input).
- ready(function() {
- canvas.Scene.call("MainScene");
- mainScene = canvas.Scene.get('MainScene');
-});
-
-canvas.Scene.new({
- name: "MainScene",
- materials: {
- images: {
- player: "sprites/cat_sprite.png",
- progress_filled: "textures/progressbar_filled.png",
- progress_empty: "textures/progressbar_empty.png"
- }
- },
- ready: function(stage) {
- this.element = this.createElement(),
- animation = canvas.Animation.new({
- images: "player",
- animations: {
- idle: {
- frames: [0, 3],
- size: {
- width: 64,
- height: 64
- },
- frequence: 5
- },
- kick: {
- frames: [5*16, 5*16+6],
- size: {
- width: 64,
- height: 64
- },
- frequence: 3
- },
- walk: {
- frames: [16, 16+5],
- size: {
- width: 64,
- height: 64
- },
- frequence: 5
- }
- }
- });
-
- register_keys();
-
- animation.add(this.element);
- animation.play("idle", "loop");
-
- this.element.xspeed = 0;
- this.element.yspeed = 0;
- this.element.defaultspeed = 2;
-
- var el = this.createElement();
- el.fillStyle = "black";
- el.font = "20px Arial";
- el.textBaseline = "top";
- el.fillText("Health:", 0, 0);
-
- var h = this.createElement();
- h.drawImage('progress_empty');
- h.scaleX=100;
- h.scaleY=0.5;
- h.x = 80;
-
- var health = this.createElement();
- health.drawImage('progress_filled');
- health.x = 80;
- health.scaleY=0.5;
-
- this.health = health;
- set_health(100);
-
- playBackgroundMusic('music/fight.mp3');
-
- stage.append(this.element);
- stage.append(h);
- stage.append(this.health);
- stage.append(el);
- },
- render: function(stage) {
- this.element.x += this.element.xspeed;
- this.element.y += this.element.yspeed;
- stage.refresh();
- }
-});
-
-function set_health(percent) {
- mainScene.health.scaleX=percent;
-}
-
-function register_keys() {
- function anim_idle() {
- animation.stop();
- animation.play("idle", "loop");
- }
- function anim_walk() {
- animation.stop();
- animation.play("walk");
- }
-
- canvas.Input.keyDown(Input.Up, function() {
- mainScene.element.yspeed = -mainScene.element.defaultspeed;
- anim_walk();
- });
- canvas.Input.keyUp(Input.Up, function() {
- mainScene.element.yspeed = 0;
- anim_idle();
- });
-
- canvas.Input.keyDown(Input.Bottom, function() {
- mainScene.element.yspeed = mainScene.element.defaultspeed;
- anim_walk();
- });
- canvas.Input.keyUp(Input.Bottom, function() {
- mainScene.element.yspeed = 0;
- anim_idle();
- });
-
- canvas.Input.keyDown(Input.Left, function() {
- mainScene.element.xspeed = -mainScene.element.defaultspeed;
- anim_walk();
- });
- canvas.Input.keyUp(Input.Left, function() {
- mainScene.element.xspeed = 0;
- anim_idle();
- });
-
- canvas.Input.keyDown(Input.Right, function() {
- mainScene.element.xspeed = mainScene.element.defaultspeed;
- anim_walk();
- });
- canvas.Input.keyUp(Input.Right, function() {
- mainScene.element.xspeed = 0;
- anim_idle();
- });
-
- canvas.Input.keyDown(Input.Space, function() {
- animation.stop();
- animation.play("kick");
- });
- canvas.Input.keyUp(Input.Space, function() {
- anim_idle();
- });
-}
-
-function playBackgroundMusic(soundfile) {
- document.getElementById("dummy").innerHTML=
- "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"true\" />";
- }
-
-</script>
+<html>
+ <head>
+ <title>Hipster Bandid</title>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <script type="text/javascript" src="canvasengine-1.0.7.all.min.js"></script>
+ <script type="text/javascript" src="game.js"></script>
+ <link rel="stylesheet" type="text/css" href="game.css">
+ </head>
+ <body>
+ <div id="dummy"></div>
+ <canvas id="game" width="800" height="600"></canvas>
+ <script type="text/javascript">
+ init_bandit();
+ </script>
+ </body>
+</html>

0 comments on commit 2c48aec

Please sign in to comment.