entityjs 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. data/.gitignore +7 -0
  2. data/Gemfile +4 -0
  3. data/README.md +49 -0
  4. data/Rakefile +1 -0
  5. data/bin/entityjs +14 -0
  6. data/build/build_debug.bat +1 -0
  7. data/build/build_min.bat +1 -0
  8. data/build/config.php +64 -0
  9. data/build/debug.php +48 -0
  10. data/build/files.php +74 -0
  11. data/build/jsmin.php +376 -0
  12. data/build/min.php +50 -0
  13. data/changelog.txt +53 -0
  14. data/entityjs.gemspec +25 -0
  15. data/examples/keys/arrow.png +0 -0
  16. data/examples/keys/keys.html +59 -0
  17. data/examples/keys/keys.js +148 -0
  18. data/examples/mouse/mouse.html +58 -0
  19. data/examples/mouse/mouse.js +60 -0
  20. data/examples/scenes/home.png +0 -0
  21. data/examples/scenes/scenes.html +55 -0
  22. data/examples/scenes/scenes.js +134 -0
  23. data/examples/scenes/win.png +0 -0
  24. data/examples/sounds/sound1.mp3 +0 -0
  25. data/examples/sounds/sound1.ogg +0 -0
  26. data/examples/sounds/sounds.html +56 -0
  27. data/examples/sounds/sounds.js +44 -0
  28. data/examples/style/background.png +0 -0
  29. data/examples/style/sheet.css +762 -0
  30. data/examples/tiles/tiles.html +56 -0
  31. data/examples/tiles/tiles.js +85 -0
  32. data/examples/tiles/tiles.png +0 -0
  33. data/lib/blank/config.js +4 -0
  34. data/lib/blank/config.yml +21 -0
  35. data/lib/blank/home.js +11 -0
  36. data/lib/blank/init.js +7 -0
  37. data/lib/blank/load.js +21 -0
  38. data/lib/blank/play.html +29 -0
  39. data/lib/entity.debug.js +52 -0
  40. data/lib/entity.min.js +184 -0
  41. data/lib/entityjs/command.rb +37 -0
  42. data/lib/entityjs/comp.rb +11 -0
  43. data/lib/entityjs/game.rb +93 -0
  44. data/lib/entityjs/min.rb +11 -0
  45. data/lib/entityjs/refresh.rb +14 -0
  46. data/lib/entityjs/version.rb +3 -0
  47. data/lib/entityjs.rb +6 -0
  48. data/license.txt +1 -0
  49. data/spec/lib/entityjs/game_spec.rb +11 -0
  50. data/spec/spec_helper.rb +3 -0
  51. data/src/entityjs/core/component.js +306 -0
  52. data/src/entityjs/core/entity.js +516 -0
  53. data/src/entityjs/core/load.js +224 -0
  54. data/src/entityjs/core/query.js +410 -0
  55. data/src/entityjs/core/re.js +70 -0
  56. data/src/entityjs/core/system.js +125 -0
  57. data/src/entityjs/cycle/draw.js +185 -0
  58. data/src/entityjs/cycle/ticker.js +27 -0
  59. data/src/entityjs/cycle/tween.js +61 -0
  60. data/src/entityjs/cycle/update.js +86 -0
  61. data/src/entityjs/cycle/wait.js +22 -0
  62. data/src/entityjs/cycle/worker.js +9 -0
  63. data/src/entityjs/display/anchor.js +53 -0
  64. data/src/entityjs/display/bitfont.js +93 -0
  65. data/src/entityjs/display/bitmap.js +37 -0
  66. data/src/entityjs/display/circle.js +30 -0
  67. data/src/entityjs/display/font.js +41 -0
  68. data/src/entityjs/display/group.js +63 -0
  69. data/src/entityjs/display/rect.js +19 -0
  70. data/src/entityjs/display/screen.js +46 -0
  71. data/src/entityjs/display/sprite.js +37 -0
  72. data/src/entityjs/input/keyboard.js +150 -0
  73. data/src/entityjs/input/mouse.js +123 -0
  74. data/src/entityjs/input/pressed.js +81 -0
  75. data/src/entityjs/input/touch.js +28 -0
  76. data/src/entityjs/math/bind.js +76 -0
  77. data/src/entityjs/math/bisect.js +69 -0
  78. data/src/entityjs/math/body.js +39 -0
  79. data/src/entityjs/math/drag.js +39 -0
  80. data/src/entityjs/math/hitmap.js +165 -0
  81. data/src/entityjs/math/hittest.js +26 -0
  82. data/src/entityjs/math/physics.js +142 -0
  83. data/src/entityjs/math/point.js +57 -0
  84. data/src/entityjs/math/tile.js +91 -0
  85. data/src/entityjs/media/channel.js +93 -0
  86. data/src/entityjs/media/playlist.js +5 -0
  87. data/src/entityjs/media/sound.js +110 -0
  88. data/src/entityjs/net/socket.js +52 -0
  89. data/src/entityjs/pattern/arraymap.js +89 -0
  90. data/src/entityjs/pattern/flicker.js +214 -0
  91. data/src/entityjs/pattern/timestep.js +34 -0
  92. data/src/entityjs/save/database.js +7 -0
  93. data/src/entityjs/save/storage.js +57 -0
  94. data/src/entityjs/util/log.js +25 -0
  95. data/src/entityjs/util/polyfill.js +25 -0
  96. data/src/entityjs/util/random.js +38 -0
  97. data/src/entityjs/util/scene.js +101 -0
  98. data/src/entityjs/util/sheet.js +51 -0
  99. data/src/entityjs/util/support.js +132 -0
  100. metadata +156 -0
data/changelog.txt ADDED
@@ -0,0 +1,53 @@
1
+ -----------------------------------------------------------------------------------------
2
+ Version 0.2.2 [Dec 6, 2011]
3
+
4
+ Fixed distanceTo on point component.
5
+ Added length argument to query filter / map.
6
+ Removed multiple scene creation from re.scene.
7
+ Components now dispatch dispose on entity removal.
8
+ Renamed re.tile globals.
9
+ Mouse now has optional toScreen coordinates.
10
+ Screen now has screen convertions globals.
11
+ Text input focus disables keyboard input.
12
+
13
+ -----------------------------------------------------------------------------------------
14
+ Version 0.2.1 [Oct 11, 2011]
15
+
16
+ Added timestep component.
17
+ Added rect component.
18
+ Added circle component.
19
+ Renamed size to hittest component.
20
+ Add distanceTo to point component.
21
+ Returning false on a signal will remove it.
22
+ Added wait component.
23
+ Renamed sprimate to flicker.
24
+ Renamed position to anchor.
25
+ Remove coordinate object properties.
26
+ Renamed define to extend.
27
+
28
+ -----------------------------------------------------------------------------------------
29
+ Version 0.2 [Sept 30, 2011]
30
+
31
+ Added query catching.
32
+ Added log component.
33
+ System is now extendable and can be used on multiple canvases.
34
+ Added ticker component.
35
+ Load now removes directories.
36
+ Renamed default to inherit.
37
+ Load now creates generic extensions.
38
+ Sound component added.
39
+ Keyboard, mouse, canvas and sounds now work in all browsers.
40
+ Added scale and rotation to draw components.
41
+ Implemented hitmap component.
42
+ Adding signals now accepts a third context argument.
43
+ Sprimate now accepts string frames.
44
+ Added screen component.
45
+ Added bitfont component.
46
+ Added random component.
47
+ Added playlist component.
48
+ Added position component.
49
+
50
+ -----------------------------------------------------------------------------------------
51
+ Version 0.1 [Sept 15, 2011]
52
+
53
+ First release
data/entityjs.gemspec ADDED
@@ -0,0 +1,25 @@
1
+ # -*- encoding: utf-8 -*-
2
+ $:.push File.expand_path("../lib", __FILE__)
3
+ require "entityjs/version"
4
+
5
+ Gem::Specification.new do |s|
6
+ s.name = "entityjs"
7
+ s.version = Entityjs::VERSION
8
+ s.authors = ["Ben D'Angelo"]
9
+ s.email = ["ben.dangelo2@gmail.com"]
10
+ s.homepage = "http://entityjs.com"
11
+ s.summary = %q{A HTML5 Javascript game engine.}
12
+ s.description = %q{A HTML5 Javascript game engine.}
13
+
14
+ s.rubyforge_project = "entityjs"
15
+
16
+ s.files = `git ls-files`.split("\n")
17
+ s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
18
+ s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
19
+ s.require_paths = ["lib"]
20
+
21
+ # specify any dependencies here; for example:
22
+ # s.add_development_dependency "rspec"
23
+ # s.add_runtime_dependency "rest-client"
24
+ s.add_runtime_dependency 'uglifier'
25
+ end
data/examples/keys/arrow.png ADDED
Binary file
data/examples/keys/keys.html ADDED
@@ -0,0 +1,59 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta http-equiv="X-UA-Compatible" content="chrome=1">
6
+
7
+ <title>Keys Demo</title>
8
+ <script language="javascript">
9
+ //modify path of entity.debug.js
10
+ path = '../../';
11
+ </script>
12
+ <script src="../../lib/entity.debug.js" language="javascript"></script>
13
+ <script src="keys.js" language="javascript"></script>
14
+
15
+ <link rel="stylesheet" type="text/css" href="../style/sheet.css" />
16
+
17
+ </head>
18
+
19
+ <body>
20
+
21
+
22
+ <div class="container_24">
23
+ <div id="content">
24
+ <h1>Keys Demo</h1>
25
+
26
+ <div class="canvas-container">
27
+ <canvas id="canvas" width="500" height="400"> </canvas>
28
+ </div>
29
+
30
+ <div class="grid_12">
31
+ <h2 class="hd-left bg-yellow">Overview</h2>
32
+ <p>
33
+ You can control the arrow on screen with key input. You can even add more arrows. View the <a href="keys.js">source code</a> to see how easy it is to program.
34
+ </p>
35
+ </div>
36
+
37
+ <div class="grid_12">
38
+ <h2 class="hd-right bg-yellow">Controls</h2>
39
+
40
+ <ul>
41
+ <li><span class="key">W</span> <span class="key">A</span> <span class="key">S</span> <span class="key">D</span> Move arrow.</li>
42
+ <li><span class="key">Arrow Keys</span> Move arrow. </li>
43
+ <li><span class="key">SPACE</span> Add arrow.</li>
44
+ <li><span class="key">R</span> Remove arrow.</li>
45
+ </ul>
46
+
47
+ </div>
48
+
49
+ <div class="clear"></div>
50
+ </div>
51
+
52
+
53
+
54
+ </div>
55
+
56
+ </body>
57
+
58
+
59
+ </html>
data/examples/keys/keys.js ADDED
@@ -0,0 +1,148 @@
1
+ /*
2
+ This is a demo of the pressed component and sprite component.
3
+
4
+ By using WASD or the arrow keys you can move the sprite
5
+ across the canvas.
6
+
7
+ */
8
+
9
+ //Its good practice to keep all constants in an organized object.
10
+ //This makes it easier to edit in the future.
11
+ re.constants = {
12
+ canvasId:'#canvas',
13
+ assets:"arrow.png",
14
+ arrowSpeed:120,
15
+ arrowSizeX:40,
16
+ arrowSizeY:40
17
+
18
+ };
19
+
20
+ //first step of every entityjs game is to define a ready function
21
+ //this will be called when the webpage is finished loading.
22
+ re.ready(function(){
23
+
24
+ //because we're not running on a server turn off root path
25
+ re.load.path = '';
26
+
27
+ //load up the spritesheet
28
+ re.load(re.constants.assets)
29
+ .complete(function(){
30
+
31
+ //inits the system
32
+ re.system.init(re.constants.canvasId);
33
+
34
+ re.sys.clearColor = '#FFFFFF';
35
+
36
+ //starts the mainloop of the application
37
+ //you can also write sys for shortform
38
+ re.sys.start();
39
+
40
+ //create moving arrow
41
+ re.entity('arrow');
42
+
43
+ //add listener for space presses
44
+ //you can also call re.e instead of re.entity
45
+ re.e('keyboard')
46
+ //listens for keyup on the space key
47
+ .addSignal('keydown:space', function(){
48
+
49
+ //creates a new entity with the arrow component
50
+ re.e('arrow');
51
+
52
+ })
53
+ //second signal
54
+ //remove key upon R key up
55
+ .addSignal('keyup:r', function(){
56
+
57
+ var q = re('arrow');
58
+ if(q.length() > 0){
59
+
60
+ //remove first arrow from array
61
+ re('arrow').get(0).dispose();
62
+ }
63
+
64
+ });
65
+
66
+ })
67
+ .error(function(){
68
+ console.log('Error something went wrong.');
69
+ })
70
+ .progress(function(current, total, asset){
71
+ console.log('Progress: '+current+' / '+ total);
72
+ console.log('Asset loaded: ', asset);
73
+ });
74
+
75
+ });
76
+
77
+ /*
78
+ This creates a new component kinda like a class
79
+ except it can be removed or added at anytime.
80
+
81
+ */
82
+ re.c('arrow')
83
+ //adds requirement components
84
+ .require('pressed update sprite arrow.png')
85
+ //define constructor
86
+ .init(function(){
87
+ //center arrow
88
+ this.posX = re.sys.sizeX * 0.5;
89
+ this.posY = re.sys.sizeY * 0.5;
90
+
91
+ //this will break the sprite sheet into grids
92
+ this.sizeX = re.constants.arrowSizeX;
93
+ this.sizeY = re.constants.arrowSizeY;
94
+
95
+ //listens for updates every frame
96
+ this.addSignal('update', this.arrow_update);
97
+
98
+ //prevents default action of keys
99
+ this.preventDefault('up left right down space r');
100
+
101
+ })
102
+ //define deconstructor
103
+ .dispose(function(){
104
+
105
+ //will remove the signal
106
+ this.removeSignal('update', this.arrow_update);
107
+
108
+ })
109
+ //values here are set only if they are null
110
+ .inherit({
111
+ speed:re.constants.arrowSpeed
112
+ })
113
+ //define private variables of the arrow component
114
+ .namespace({
115
+
116
+ update:function(tick, total){
117
+ var s = this.speed * tick;
118
+
119
+ //move based on keypress
120
+ //listens for w key down OR up key down
121
+ if(this.pressed('w', 'up')){
122
+
123
+ this.posY -= s;
124
+
125
+ this.setFrameId(0);
126
+
127
+ } else if(this.pressed('s', 'down')){
128
+
129
+ this.posY += s;
130
+ this.setFrameId(2);
131
+
132
+ }
133
+
134
+ if(this.pressed('a', 'left')){
135
+
136
+ this.posX -= s;
137
+ this.setFrameId(3);
138
+
139
+ } else if(this.pressed('d', 'right')){
140
+
141
+ this.posX += s;
142
+ this.setFrameId(1);
143
+
144
+ }
145
+
146
+ }
147
+
148
+ });
data/examples/mouse/mouse.html ADDED
@@ -0,0 +1,58 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta http-equiv="X-UA-Compatible" content="chrome=1">
6
+
7
+ <title>Mouse Demo</title>
8
+ <script language="javascript">
9
+ //modify path of entity.debug.js
10
+ path = '../../';
11
+ </script>
12
+ <script src="../../lib/entity.debug.js" language="javascript"></script>
13
+ <script src="mouse.js" language="javascript"></script>
14
+
15
+ <link rel="stylesheet" type="text/css" href="../style/sheet.css" />
16
+
17
+ </head>
18
+
19
+ <body>
20
+
21
+
22
+ <div class="container_24">
23
+ <div id="content">
24
+ <h1>Mouse Demo</h1>
25
+
26
+ <div class="canvas-container">
27
+ <canvas id="canvas" width="500" height="400"> </canvas>
28
+ </div>
29
+
30
+ <div class="grid_12">
31
+ <h2 class="hd-left bg-yellow">Overview</h2>
32
+ <p>
33
+ Click with the, left mouse, right mouse and middle mouse. View the <a href="mouse.js">source code</a> to see how easy it is to program.
34
+ </p>
35
+ </div>
36
+
37
+ <div class="grid_12">
38
+ <h2 class="hd-right bg-yellow">Controls</h2>
39
+
40
+ <ul>
41
+ <li><span class="key">Mouse Left</span> Console log.</li>
42
+ <li><span class="key">Mouse Right</span> Console log. </li>
43
+ <li><span class="key">Mouse Middle</span> Console log.</li>
44
+ </ul>
45
+
46
+ </div>
47
+
48
+ <div class="clear"></div>
49
+ </div>
50
+
51
+
52
+
53
+ </div>
54
+
55
+ </body>
56
+
57
+
58
+ </html>
data/examples/mouse/mouse.js ADDED
@@ -0,0 +1,60 @@
1
+ /*
2
+
3
+
4
+ */
5
+
6
+ re.constants = {
7
+ canvasId:'#canvas'
8
+ };
9
+
10
+ re.ready(function(){
11
+
12
+ //because we're not running on a server turn off root path
13
+ re.load.path = '';
14
+
15
+ //inits the system
16
+ re.sys.init(re.constants.canvasId).start();
17
+
18
+ re.sys.clearColor = '#FFFFFF';
19
+
20
+ re.e('mouse update pressed')
21
+ .addSignal('mousedown',function(){
22
+ console.log('Mouse down!');
23
+ })
24
+ .addSignal('mouseup', function(){
25
+ console.log('Mouse up!');
26
+
27
+ })
28
+ .addSignal('mousemove', function(x, y){
29
+ console.log('Mouse move!',x+' '+y);
30
+
31
+ })
32
+ .addSignal('click', function(){
33
+ console.log('Mouse click!');
34
+
35
+ })
36
+ .addSignal('dblclick', function(){
37
+ console.log('Mouse double click!');
38
+
39
+ })
40
+ .addSignal('contextmenu', function(){
41
+ console.log('Contextmenu!');
42
+
43
+ })
44
+ .addSignal('update', function(){
45
+
46
+ if(this.pressed('mouse:left')){
47
+ console.log('mouse:left');
48
+ }
49
+
50
+ if(this.pressed('mouse:right')){
51
+ console.log('mouse:right');
52
+ }
53
+
54
+ if(this.pressed('mouse:middle')){
55
+ console.log('mouse:middle');
56
+ }
57
+
58
+ });
59
+
60
+ });
data/examples/scenes/home.png ADDED
Binary file
data/examples/scenes/scenes.html ADDED
@@ -0,0 +1,55 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta http-equiv="X-UA-Compatible" content="chrome=1">
6
+ <title>Scenes Demo</title>
7
+ <script language="javascript">
8
+ //modify path of entity.debug.js
9
+ path = '../../';
10
+ </script>
11
+ <script src="../../lib/entity.debug.js" language="javascript"></script>
12
+ <script src="scenes.js" language="javascript"></script>
13
+
14
+ <link rel="stylesheet" type="text/css" href="../style/sheet.css" />
15
+
16
+ </head>
17
+
18
+ <body>
19
+
20
+
21
+ <div class="container_24">
22
+ <div id="content">
23
+ <h1>Scenes Demo</h1>
24
+
25
+ <div class="canvas-container">
26
+ <canvas id="canvas" width="500" height="400"> </canvas>
27
+ </div>
28
+
29
+ <div class="grid_12">
30
+ <h2 class="hd-left bg-yellow">Overview</h2>
31
+ <p>
32
+ This demo introduces the scene component. The scene component is a way to organize different states of a game. For example a normal game has 4 scenes, preload, play, win and lose. View the <a href="scenes.js">source code</a>.
33
+ </p>
34
+ </div>
35
+
36
+ <div class="grid_12">
37
+ <h2 class="hd-right bg-yellow">Controls</h2>
38
+
39
+ <ul>
40
+ <li>Follow instructions.</li>
41
+ </ul>
42
+
43
+ </div>
44
+
45
+ <div class="clear"></div>
46
+ </div>
47
+
48
+
49
+
50
+ </div>
51
+
52
+ </body>
53
+
54
+
55
+ </html>
data/examples/scenes/scenes.js ADDED
@@ -0,0 +1,134 @@
1
+
2
+ re.constants = {
3
+ canvasId:'#canvas',
4
+ assets:'home.png win.png',
5
+ size:{x:500, y: 400},
6
+ maxScore:1000
7
+ }
8
+
9
+ re.ready(function(){
10
+
11
+ re.sys.init(re.constants.canvasId)
12
+ .start();
13
+
14
+ //go to scene preload
15
+ re.scene('preload');
16
+
17
+ //remove root
18
+ re.load.path = '';
19
+
20
+ re.load(re.constants.assets)
21
+ .complete(function(){
22
+
23
+ //go to home scene
24
+ re.scene('start');
25
+
26
+ });
27
+
28
+ });
29
+
30
+ //extend scenes
31
+
32
+ //first scene and openning scene
33
+ re.scene('preload')
34
+ //since a scene is just an entity
35
+ //we can add components to it
36
+ .addComp('font')
37
+ .extend({
38
+ text: 'Preloading',
39
+ textColor:'#66b44d',
40
+ posX: re.constants.size.x * 0.5,
41
+ posY: re.constants.size.y * 0.5
42
+ })
43
+ .enter(function(){
44
+
45
+ //called upon entering a scene
46
+
47
+ //property from the draw component
48
+ this.drawing = true;
49
+
50
+ })
51
+ .exit(function(newScene){
52
+
53
+ //called upon exiting a scene
54
+
55
+ this.drawing = false;
56
+
57
+ //first argument is the new scene its switching to
58
+ console.log('New scene is: '+newScene);
59
+
60
+ });
61
+
62
+ //create scenes directly from re.e
63
+ re.e('scene:start')
64
+ .enter(function(){
65
+
66
+ //display bitmap home.png
67
+ this.home = re.e('bitmap home.png');
68
+
69
+ this.home.posX = 20;
70
+ this.home.posY = 50;
71
+
72
+ //add enter listener
73
+ this.enter = re.e('keyboard')
74
+ //add two signals listens for keyup of enter AND space. Cool eh??
75
+ .addSignal('keyup', function(key){
76
+ if(key == 'space' || key == 'enter'){
77
+ var score = Math.floor(Math.random() * re.constants.maxScore);
78
+
79
+ //you can send arguments to scenes
80
+ re.scene('win', score, 'Awsome score!');
81
+ }
82
+ });
83
+
84
+ })
85
+ .exit(function(){
86
+
87
+ this.home.dispose();
88
+ this.enter.dispose();
89
+
90
+ });
91
+
92
+ //final scene accepts two arguments
93
+ re.scene('win')
94
+ .enter(function(points, rating){
95
+
96
+ this.win = re.e('win.png bitmap')
97
+ .extend({
98
+ posX:100,
99
+ posY:10
100
+ });
101
+
102
+ this.message = re.e('font');
103
+
104
+ this.message.text = 'Your score is: '+points+'... '+rating;
105
+ this.message.posX = 150;
106
+ this.message.posY = 300;
107
+
108
+ this.ret = re.e('font');
109
+ this.ret.text = 'Press any key to return.';
110
+ this.ret.posX = this.message.posX;
111
+ this.ret.posY = this.message.posY + 30;
112
+
113
+ this.key = re.e('keyboard')
114
+ .addSignal('keyup', function(){
115
+
116
+ re.scene('start');
117
+
118
+ });
119
+
120
+ })
121
+ .exit(function(){
122
+
123
+ //finds all draw entities and disposes them
124
+ //all entities that draw to the screen have the draw component
125
+ //but don't delete any scene entities, remember the scene preload is a draw entity!
126
+ re('draw -scene').dispose();
127
+
128
+ this.ret.dispose();
129
+
130
+ //samething as writing
131
+ /*this.win.dispose();
132
+ this.text.dispose();*/
133
+
134
+ });
data/examples/scenes/win.png ADDED
Binary file
data/examples/sounds/sound1.mp3 ADDED
Binary file
data/examples/sounds/sound1.ogg ADDED
Binary file
data/examples/sounds/sounds.html ADDED
@@ -0,0 +1,56 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta http-equiv="X-UA-Compatible" content="chrome=1">
6
+ <title>Sounds Demo</title>
7
+ <script language="javascript">
8
+ //modify path of entity.debug.js
9
+ path = '../../';
10
+ </script>
11
+ <script src="../../lib/entity.debug.js" language="javascript"></script>
12
+ <script src="sounds.js" language="javascript"></script>
13
+
14
+ <link rel="stylesheet" type="text/css" href="../style/sheet.css" />
15
+
16
+ </head>
17
+
18
+ <body>
19
+
20
+
21
+ <div class="container_24">
22
+ <div id="content">
23
+ <h1>Sounds Demo</h1>
24
+
25
+ <div class="canvas-container">
26
+ <canvas id="canvas" width="500" height="400"> </canvas>
27
+ </div>
28
+
29
+ <div class="grid_12">
30
+ <h2 class="hd-left bg-yellow">Overview</h2>
31
+ <p>
32
+ Press Z or X to play a sound. View the <a href="sounds.js">source code</a> to see how easy it is to program.
33
+ </p>
34
+ </div>
35
+
36
+ <div class="grid_12">
37
+ <h2 class="hd-right bg-yellow">Controls</h2>
38
+
39
+ <ul>
40
+ <li><span class="key">Z</span> Play sound 1.</li>
41
+ <li><span class="key">X</span> Play sound 2.</li>
42
+ </ul>
43
+
44
+ </div>
45
+
46
+ <div class="clear"></div>
47
+ </div>
48
+
49
+
50
+
51
+ </div>
52
+
53
+ </body>
54
+
55
+
56
+ </html>