entityjs 0.2.2

Sign up to get free protection for your applications and to get access to all the features.
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>