Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Split into separate files, clean up HTML

  • Loading branch information...
commit 2c48aec39c84b75cd24a19a030cc13f5ad7ef763 1 parent 157a0b6
Thomas Perl thp authored
0  CanvasEngine/canvasengine-1.0.7.all.min.js → canvasengine-1.0.7.all.min.js
File renamed without changes
12 game.css
... ... @@ -0,0 +1,12 @@
  1 +
  2 +body {
  3 + background-color: #333;
  4 +}
  5 +
  6 +canvas {
  7 + background-color: white;
  8 + margin-left: auto;
  9 + margin-right: auto;
  10 + display: block;
  11 +}
  12 +
161 game.js
... ... @@ -0,0 +1,161 @@
  1 +
  2 +function init_bandit() {
  3 + var mainScene;
  4 +
  5 + var canvas = CE.defines("game").
  6 + extend(Animation).
  7 + extend(Input).
  8 + ready(function() {
  9 + canvas.Scene.call("MainScene");
  10 + mainScene = canvas.Scene.get('MainScene');
  11 + });
  12 +
  13 + canvas.Scene.new({
  14 + name: "MainScene",
  15 + materials: {
  16 + images: {
  17 + player: "sprites/cat_sprite.png",
  18 + progress_filled: "textures/progressbar_filled.png",
  19 + progress_empty: "textures/progressbar_empty.png"
  20 + }
  21 + },
  22 + ready: function(stage) {
  23 + this.element = this.createElement(),
  24 + animation = canvas.Animation.new({
  25 + images: "player",
  26 + animations: {
  27 + idle: {
  28 + frames: [0, 3],
  29 + size: {
  30 + width: 64,
  31 + height: 64
  32 + },
  33 + frequence: 5
  34 + },
  35 + kick: {
  36 + frames: [5*16, 5*16+6],
  37 + size: {
  38 + width: 64,
  39 + height: 64
  40 + },
  41 + frequence: 3
  42 + },
  43 + walk: {
  44 + frames: [16, 16+5],
  45 + size: {
  46 + width: 64,
  47 + height: 64
  48 + },
  49 + frequence: 5
  50 + }
  51 + }
  52 + });
  53 +
  54 + register_keys();
  55 +
  56 + animation.add(this.element);
  57 + animation.play("idle", "loop");
  58 +
  59 + this.element.xspeed = 0;
  60 + this.element.yspeed = 0;
  61 + this.element.defaultspeed = 2;
  62 +
  63 + var el = this.createElement();
  64 + el.fillStyle = "black";
  65 + el.font = "20px Arial";
  66 + el.textBaseline = "top";
  67 + el.fillText("Health:", 0, 0);
  68 +
  69 + var h = this.createElement();
  70 + h.drawImage('progress_empty');
  71 + h.scaleX=100;
  72 + h.scaleY=0.5;
  73 + h.x = 80;
  74 +
  75 + var health = this.createElement();
  76 + health.drawImage('progress_filled');
  77 + health.x = 80;
  78 + health.scaleY=0.5;
  79 +
  80 + this.health = health;
  81 + set_health(100);
  82 +
  83 + stage.append(this.element);
  84 + stage.append(h);
  85 + stage.append(this.health);
  86 + stage.append(el);
  87 + },
  88 + render: function(stage) {
  89 + this.element.defaultspeed = 2;
  90 + this.element.x += this.element.xspeed;
  91 + this.element.y += this.element.yspeed;
  92 + stage.refresh();
  93 + }
  94 + });
  95 +
  96 + function set_health(percent) {
  97 + mainScene.health.scaleX=percent;
  98 + }
  99 +
  100 + function register_keys() {
  101 + function anim_idle() {
  102 + animation.stop();
  103 + animation.play("idle", "loop");
  104 + }
  105 + function anim_walk() {
  106 + animation.stop();
  107 + animation.play("walk");
  108 + }
  109 +
  110 + canvas.Input.keyDown(Input.Up, function() {
  111 + mainScene.element.yspeed = -mainScene.element.defaultspeed;
  112 + anim_walk();
  113 + });
  114 + canvas.Input.keyUp(Input.Up, function() {
  115 + mainScene.element.yspeed = 0;
  116 + anim_idle();
  117 + });
  118 +
  119 + canvas.Input.keyDown(Input.Bottom, function() {
  120 + mainScene.element.yspeed = mainScene.element.defaultspeed;
  121 + anim_walk();
  122 + });
  123 + canvas.Input.keyUp(Input.Bottom, function() {
  124 + mainScene.element.yspeed = 0;
  125 + anim_idle();
  126 + });
  127 +
  128 + canvas.Input.keyDown(Input.Left, function() {
  129 + mainScene.element.xspeed = -mainScene.element.defaultspeed;
  130 + anim_walk();
  131 + });
  132 + canvas.Input.keyUp(Input.Left, function() {
  133 + mainScene.element.xspeed = 0;
  134 + anim_idle();
  135 + });
  136 +
  137 + canvas.Input.keyDown(Input.Right, function() {
  138 + mainScene.element.xspeed = mainScene.element.defaultspeed;
  139 + anim_walk();
  140 + });
  141 + canvas.Input.keyUp(Input.Right, function() {
  142 + mainScene.element.xspeed = 0;
  143 + anim_idle();
  144 + });
  145 +
  146 + canvas.Input.keyDown(Input.Space, function() {
  147 + animation.stop();
  148 + animation.play("kick");
  149 + });
  150 + canvas.Input.keyUp(Input.Space, function() {
  151 + anim_idle();
  152 + });
  153 + }
  154 +
  155 + function playBackgroundMusic(soundfile) {
  156 + document.getElementById("dummy").innerHTML=
  157 + "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"true\" />";
  158 + }
  159 + playBackgroundMusic('music/fight.mp3');
  160 +}
  161 +
180 index.html
... ... @@ -1,165 +1,17 @@
1 1 <!DOCTYPE html>
2   -<script src="CanvasEngine/canvasengine-1.0.7.all.min.js"></script>
3   -<canvas id="canvas_id" width="800" height="600"></canvas>
4   -<div id="dummy"></div>
5   -
6   -<script>
7   -
8   -var mainScene;
9   -var canvas = CE.defines("canvas_id").
10   - extend(Animation).
11   - extend(Input).
12   - ready(function() {
13   - canvas.Scene.call("MainScene");
14   - mainScene = canvas.Scene.get('MainScene');
15   -});
16   -
17   -canvas.Scene.new({
18   - name: "MainScene",
19   - materials: {
20   - images: {
21   - player: "sprites/cat_sprite.png",
22   - progress_filled: "textures/progressbar_filled.png",
23   - progress_empty: "textures/progressbar_empty.png"
24   - }
25   - },
26   - ready: function(stage) {
27   - this.element = this.createElement(),
28   - animation = canvas.Animation.new({
29   - images: "player",
30   - animations: {
31   - idle: {
32   - frames: [0, 3],
33   - size: {
34   - width: 64,
35   - height: 64
36   - },
37   - frequence: 5
38   - },
39   - kick: {
40   - frames: [5*16, 5*16+6],
41   - size: {
42   - width: 64,
43   - height: 64
44   - },
45   - frequence: 3
46   - },
47   - walk: {
48   - frames: [16, 16+5],
49   - size: {
50   - width: 64,
51   - height: 64
52   - },
53   - frequence: 5
54   - }
55   - }
56   - });
57   -
58   - register_keys();
59   -
60   - animation.add(this.element);
61   - animation.play("idle", "loop");
62   -
63   - this.element.xspeed = 0;
64   - this.element.yspeed = 0;
65   - this.element.defaultspeed = 2;
66   -
67   - var el = this.createElement();
68   - el.fillStyle = "black";
69   - el.font = "20px Arial";
70   - el.textBaseline = "top";
71   - el.fillText("Health:", 0, 0);
72   -
73   - var h = this.createElement();
74   - h.drawImage('progress_empty');
75   - h.scaleX=100;
76   - h.scaleY=0.5;
77   - h.x = 80;
78   -
79   - var health = this.createElement();
80   - health.drawImage('progress_filled');
81   - health.x = 80;
82   - health.scaleY=0.5;
83   -
84   - this.health = health;
85   - set_health(100);
86   -
87   - playBackgroundMusic('music/fight.mp3');
88   -
89   - stage.append(this.element);
90   - stage.append(h);
91   - stage.append(this.health);
92   - stage.append(el);
93   - },
94   - render: function(stage) {
95   - this.element.x += this.element.xspeed;
96   - this.element.y += this.element.yspeed;
97   - stage.refresh();
98   - }
99   -});
100   -
101   -function set_health(percent) {
102   - mainScene.health.scaleX=percent;
103   -}
104   -
105   -function register_keys() {
106   - function anim_idle() {
107   - animation.stop();
108   - animation.play("idle", "loop");
109   - }
110   - function anim_walk() {
111   - animation.stop();
112   - animation.play("walk");
113   - }
114   -
115   - canvas.Input.keyDown(Input.Up, function() {
116   - mainScene.element.yspeed = -mainScene.element.defaultspeed;
117   - anim_walk();
118   - });
119   - canvas.Input.keyUp(Input.Up, function() {
120   - mainScene.element.yspeed = 0;
121   - anim_idle();
122   - });
123   -
124   - canvas.Input.keyDown(Input.Bottom, function() {
125   - mainScene.element.yspeed = mainScene.element.defaultspeed;
126   - anim_walk();
127   - });
128   - canvas.Input.keyUp(Input.Bottom, function() {
129   - mainScene.element.yspeed = 0;
130   - anim_idle();
131   - });
132   -
133   - canvas.Input.keyDown(Input.Left, function() {
134   - mainScene.element.xspeed = -mainScene.element.defaultspeed;
135   - anim_walk();
136   - });
137   - canvas.Input.keyUp(Input.Left, function() {
138   - mainScene.element.xspeed = 0;
139   - anim_idle();
140   - });
141   -
142   - canvas.Input.keyDown(Input.Right, function() {
143   - mainScene.element.xspeed = mainScene.element.defaultspeed;
144   - anim_walk();
145   - });
146   - canvas.Input.keyUp(Input.Right, function() {
147   - mainScene.element.xspeed = 0;
148   - anim_idle();
149   - });
150   -
151   - canvas.Input.keyDown(Input.Space, function() {
152   - animation.stop();
153   - animation.play("kick");
154   - });
155   - canvas.Input.keyUp(Input.Space, function() {
156   - anim_idle();
157   - });
158   -}
159   -
160   -function playBackgroundMusic(soundfile) {
161   - document.getElementById("dummy").innerHTML=
162   - "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"true\" />";
163   - }
164   -
165   -</script>
  2 +<html>
  3 + <head>
  4 + <title>Hipster Bandid</title>
  5 + <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6 + <script type="text/javascript" src="canvasengine-1.0.7.all.min.js"></script>
  7 + <script type="text/javascript" src="game.js"></script>
  8 + <link rel="stylesheet" type="text/css" href="game.css">
  9 + </head>
  10 + <body>
  11 + <div id="dummy"></div>
  12 + <canvas id="game" width="800" height="600"></canvas>
  13 + <script type="text/javascript">
  14 + init_bandit();
  15 + </script>
  16 + </body>
  17 +</html>

0 comments on commit 2c48aec

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