|
|
|
This thread is locked; no one can reply to it.
|
1
2
|
| Javascript Game |
|
ImLeftFooted
Member #3,935
October 2003
 |
Working on a javascript game. I made a simple sprite tech demo. Tell me what you think 8) To install, select all of this text (make sure to scroll down!) and copy it to your clipboard (control + C): 1// JS Game Version 0.3
2// By Dustin Dettmer
3// no namespace =X
4
5function Image(url)
6{
7 this.img = document.body.appendChild(document.createElement("img"));
8 this.img.src = url;
9 this.img.style.display = "none";
10 this.img.style.position = "absolute";
11 this.img.style.left = "0px";
12 this.img.style.top = "0px";
13}
14
15Image.prototype.moveTo = function(x, y)
16{
17 this.img.style.left = x + "px";
18 this.img.style.top = y + "px";
19 this.x = x;
20 this.y = y;
21}
22
23Image.prototype.display = function()
24{
25 this.img.style.display = "";
26}
27
28Image.prototype.hide = function()
29{
30 this.img.style.display = "none";
31}
32
33function Animation(id)
34{
35 this.id = id;
36 this.images = new Array;
37 this.curFrame = 0;
38 this.frameTime = 0;
39 this.running = true;
40
41 switch(id)
42 {
43 case 1:
44 this.images[0] = new Image("http://www.allegro.cc/files/attachment/591921");
45 this.images[0].img.width = 15 * 5;
46 this.images[0].img.height = 26 * 5;
47 this.images[0].ttl = 125;
48 this.images[1] = new Image("http://www.allegro.cc/files/attachment/591923");
49 this.images[1].img.width = 15 * 5;
50 this.images[1].img.height = 26 * 5;
51 this.images[1].ttl = 125;
52 this.images[2] = new Image("http://www.allegro.cc/files/attachment/591925");
53 this.images[2].img.width = 15 * 5;
54 this.images[2].img.height = 26 * 5;
55 this.images[2].ttl = 125;
56 this.images[3] = new Image("http://www.allegro.cc/files/attachment/591927");
57 this.images[3].img.width = 15 * 5;
58 this.images[3].img.height = 26 * 5;
59 this.images[3].ttl = 125;
60 break;
61 case 2:
62 this.images[0] = new Image("http://www.allegro.cc/files/attachment/591922");
63 this.images[0].img.width = 15 * 5;
64 this.images[0].img.height = 26 * 5;
65 this.images[0].ttl = 125;
66 this.images[1] = new Image("http://www.allegro.cc/files/attachment/591924");
67 this.images[1].img.width = 15 * 5;
68 this.images[1].img.height = 26 * 5;
69 this.images[1].ttl = 125;
70 this.images[2] = new Image("http://www.allegro.cc/files/attachment/591926");
71 this.images[2].img.width = 15 * 5;
72 this.images[2].img.height = 26 * 5;
73 this.images[2].ttl = 125;
74 this.images[3] = new Image("http://www.allegro.cc/files/attachment/591928");
75 this.images[3].img.width = 15 * 5;
76 this.images[3].img.height = 26 * 5;
77 this.images[3].ttl = 125;
78 break;
79 case 3:
80 this.images[0] = new Image("http://www.allegro.cc/files/attachment/591919");
81 this.images[0].img.width = 15 * 5;
82 this.images[0].img.height = 26 * 5;
83 this.images[0].ttl = 125;
84 break;
85 case 4:
86 this.images[0] = new Image("http://www.allegro.cc/files/attachment/591920");
87 this.images[0].img.width = 15 * 5;
88 this.images[0].img.height = 26 * 5;
89 this.images[0].ttl = 125;
90 break;
91 case 5:
92 this.images[0] = new Image("http://www.allegro.cc/files/attachment/591915");
93 this.images[0].img.width = 15 * 5;
94 this.images[0].img.height = 26 * 5;
95 this.images[0].ttl = 125;
96 break;
97 case 6:
98 this.images[0] = new Image("http://www.allegro.cc/files/attachment/591916");
99 this.images[0].img.width = 15 * 5;
100 this.images[0].img.height = 26 * 5;
101 this.images[0].ttl = 125;
102 break;
103 case 7:
104 this.images[0] = new Image("http://www.allegro.cc/files/attachment/591917");
105 this.images[0].img.width = 15 * 5;
106 this.images[0].img.height = 26 * 5;
107 this.images[0].ttl = 125;
108 break;
109 case 8:
110 this.images[0] = new Image("http://www.allegro.cc/files/attachment/591918");
111 this.images[0].img.width = 15 * 5;
112 this.images[0].img.height = 26 * 5;
113 this.images[0].ttl = 125;
114 break;
115 }
116}
117
118Animation.prototype.update = function()
119{
120 if(!this.running)
121 return;
122
123 var img = this.getCurFrame();
124
125 if(engine.time - this.frameTime > img.ttl) {
126
127 this.frameTime = engine.time
128 if(++this.curFrame >= this.images.length)
129 this.curFrame = 0;
130
131 this.getCurFrame().moveTo(img.x, img.y);
132 this.getCurFrame().display();
133 img.hide();
134 }
135}
136
137Animation.prototype.pause = function()
138{
139 this.running = false;
140}
141
142Animation.prototype.stop = function()
143{
144 this.running = false;
145 this.getCurFrame().hide();
146 this.curFrame = 0;
147}
148
149Animation.prototype.resume = function()
150{
151 this.running = true;
152 this.frameTime = engine.time;
153}
154
155Animation.prototype.start = function()
156{
157 this.running = true;
158 this.frameTime = engine.time;
159 this.getCurFrame().hide();
160 this.curFrame = 0;
161}
162
163Animation.prototype.getCurFrame = function()
164{
165 return this.images[this.curFrame];
166}
167
168// Starts up timers etc.
169function Engine()
170{
171 this.time = 0;
172 this.key = new Array(256);
173 this.player = null;
174 this.lastTime = 0;
175
176 document.getElementsByTagName("body")[0].setAttribute("onkeyup", 'engine.keyup(event)');
177 document.getElementsByTagName("body")[0].setAttribute("onkeydown", 'engine.keydown(event)');
178}
179
180function timerFunction(index)
181{
182 engine.time += 10;
183
184 setTimeout(timerFunction, 10);
185}
186
187Engine.prototype.startTimer = function()
188{
189 timerFunction();
190}
191
192Engine.prototype.getScroll = function()
193{
194 if(window.pageYOffset != null)
195 return window.pageYOffset;
196
197 if(document.body && document.body.scrollTop != null)
198 return document.body.scrollTop;
199
200 if(document.documentElement && document.documentElement.scrollTop != null)
201 return document.documentElement.scrollTop;
202
203 return 0;
204}
205
206Engine.prototype.getWidth = function()
207{
208 if(window.innerWidth != null)
209 return window.innerWidth;
210
211 if(document.body && document.body.clientWidth != null)
212 return document.body.clientWidth;
213
214 if(document.documentElement && document.documentElement.clientWidth != null)
215 return document.documentElement.clientWidth;
216}
217
218Engine.prototype.getHeight = function()
219{
220 if(window.innerHeight != null)
221 return window.innerHeight;
222
223 if(document.body && document.body.clientHeight != null)
224 return document.body.clientHeight;
225
226 if(document.documentElement && document.documentElement.clientHeight != null)
227 return document.documentElement.clientHeight;
228}
229
230Engine.prototype.keyup = function(ev)
231{
232 this.key[ev.keyCode ? ev.keyCode : ev.which] = false;
233}
234
235Engine.prototype.keydown = function(ev)
236{
237 this.key[ev.keyCode ? ev.keyCode : ev.which] = true;
238}
239
240function Player()
241{
242 this.x = 0;
243 this.y = 10;
244 this.dy = 10;
245 this.dir = 0;
246 this.anims = new Array;
247 this.anims[0] = new Animation(1);
248 this.anims[1] = new Animation(2);
249 this.anims[2] = new Animation(3);
250 this.anims[3] = new Animation(4);
251 this.anims[4] = new Animation(5);
252 this.anims[5] = new Animation(6);
253 this.anims[6] = new Animation(7);
254 this.anims[7] = new Animation(8);
255 this.curAnim = 0;
256}
257
258Player.prototype.update = function()
259{
260 var l = engine.key[37];
261 var r = engine.key[39];
262 var u = engine.key[38];
263
264 var hideme = null;
265
266 var maxy = engine.getHeight() - (26 * 5) + engine.getScroll();
267 var maxx = engine.getWidth() - (15 * 5);
268 var minx = 0;
269
270 if(this.y < maxy) {
271 if(this.dy < -7) {
272 if(3 - this.dir != this.curAnim)
273 hideme = this.anims[this.curAnim].getCurFrame();
274 this.curAnim = 3 - this.dir;
275 }
276 else if(this.dy > 7) {
277 if(7 - this.dir != this.curAnim)
278 hideme = this.anims[this.curAnim].getCurFrame();
279 this.curAnim = 7 - this.dir;
280 }
281 else {
282 if(5 - this.dir != this.curAnim)
283 hideme = this.anims[this.curAnim].getCurFrame();
284 this.curAnim = 5 - this.dir;
285 }
286 }
287 else if(r) {
288 if(0 != this.curAnim)
289 hideme = this.anims[this.curAnim].getCurFrame();
290 this.curAnim = 0;
291 this.dir = 1;
292 }
293 else if(l) {
294 if(1 != this.curAnim)
295 hideme = this.anims[this.curAnim].getCurFrame();
296 this.curAnim = 1;
297 this.dir = 0;
298 }
299 else {
300 if(this.dir) {
301 if(0 != this.curAnim)
302 hideme = this.anims[this.curAnim].getCurFrame();
303 this.curAnim = 0;
304 }
305 else {
306 if(1 != this.curAnim)
307 hideme = this.anims[this.curAnim].getCurFrame();
308 this.curAnim = 1;
309 }
310 }
311
312 var anim = this.anims[this.curAnim];
313
314 anim.update();
315
316 if(l)
317 this.x -= 5;
318 if(r)
319 this.x += 5;
320
321 if(this.dy < 10)
322 this.dy++;
323
324 if(u && this.y >= maxy)
325 this.dy = -22;
326
327 this.y += this.dy;
328
329 if((l || r) && !anim.running)
330 anim.start();
331 if(!l && !r && anim.running)
332 anim.stop();
333
334 if(this.y > maxy)
335 this.y =maxy;
336 if(this.x > maxx)
337 this.x = maxx;
338 if(this.x < minx)
339 this.x = minx;
340 anim.getCurFrame().moveTo(this.x, this.y);
341 anim.getCurFrame().display();
342
343 if(hideme != null)
344 hideme.hide();
345}
346
347function game_loop()
348{
349 if(engine.key[27]) {
350 engine.player.anim.getCurFrame().hide();
351 return;
352 }
353
354 engine.player.update();
355
356 var t = engine.time;
357
358 setTimeout(game_loop, 20 - (engine.time - engine.lastTime));
359 engine.lastTime = engine.time;
360}
361
362doc.add_onLoad(function()
363{
364 engine = new Engine();
365 engine.player = new Player();
366 setTimeout(function()
367 {
368 engine.startTimer();
369 game_loop();
370 }, 1000);
371});
372
373var engine = null;
Then navigate to the [url http://www.allegro.cc/cc/theme-css]extensions page[/url] and select the bottom text box with your mouse and paste (control + V). You must be logged in to navigate to this page. Please note that you may be required to refresh a couple of times or perform a hard refresh in your browser (the F5 key for firefox). Click save and enjoy! Note that It probably only works in FF, but do let me know if you try it on another browser. Hopefully the keys are intuitive enough. It doesn't do much besides jump around. Oh and escape quits. [img http://www.allegro.cc/files/attachment/591929] The sprite is by the ever talented Inphernic |
|
BAF
Member #2,981
December 2002
 |
You must be bored. |
|
bamccaig
Member #7,536
July 2006
 |
That is freaking awesome!!! I'm amazed how well it works too. And it showed me a few things in JavaScript that I wasn't sure was possible. I'm dreaming of making a simple GUI of controls that will be positionable with mouse dragging to simulate windows in the browser... They will allow you to hopefully resize them and move them, etc. Anyway, it's good to know how to position them. In Internet Explorer 7, the "player" continues to "drop" and the page continues to grow... Probably infinitely until the browser blows up from memory usage; I didn't wait to see. Anyway,... If you don't, I might look at it and try to fix it for IE7 (just not tonight). It's actually a fun idea. It should be expanded and made more interactive... -- acc.js | al4anim - Allegro 4 Animation library | Allegro 5 VS/NuGet Guide | Allegro.cc Mockup | Allegro.cc <code> Tag | Allegro 4 Timer Example (w/ Semaphores) | Allegro 5 "Winpkg" (MSVC readme) | Bambot | Blog | C++ STL Container Flowchart | Castopulence Software | Check Return Values | Derail? | Is This A Discussion? Flow Chart | Filesystem Hierarchy Standard | Clean Code Talks - Global State and Singletons | How To Use Header Files | GNU/Linux (Debian, Fedora, Gentoo) | rot (rot13, rot47, rotN) | Streaming |
|
Ceagon Xylas
Member #5,495
February 2005
 |
Sweet. Add possibly a mid-air frame? I like that the images are all hosted from allegro.cc as well |
|
LennyLen
Member #5,313
December 2004
 |
Here's what happens with Opera 9.10: The sprite falls from the top of the page to a position just below the bottom of the screen (in 1280x1024 mode). When I then scroll down so that I can see it, left and right keys make it move left and right (funnily enough) and up makes it jump (it can be moved left and right while "in the air"). If this is the desired behaviour, then congrats.
|
|
HoHo
Member #4,534
April 2004
 |
Nice, it even works in Konqueror __________ |
|
FMC
Member #4,431
March 2004
 |
Seems to work with Opera 9.02 (winxp) [FMC Studios] - [Caries Field] - [Ctris] - [Pman] - [Chess for allegroites] |
|
LennyLen
Member #5,313
December 2004
|
Quote: Seems to work with Opera 9.02 (winxp) Why havent you upgraded yet?
|
|
FMC
Member #4,431
March 2004
|
Opera didn't notify me [FMC Studios] - [Caries Field] - [Ctris] - [Pman] - [Chess for allegroites] |
|
BAF
Member #2,981
December 2002
|
What post did you attach those images to? |
|
Samuel Henderson
Member #3,757
August 2003
 |
Is it just a little angel man you can move around or am I missing something? ================================================= |
|
bamccaig
Member #7,536
July 2006
|
Samuel Henderson said: Is it just a little angel man you can move around or am I missing something? That's only the intro. Keep playing. -- acc.js | al4anim - Allegro 4 Animation library | Allegro 5 VS/NuGet Guide | Allegro.cc Mockup | Allegro.cc <code> Tag | Allegro 4 Timer Example (w/ Semaphores) | Allegro 5 "Winpkg" (MSVC readme) | Bambot | Blog | C++ STL Container Flowchart | Castopulence Software | Check Return Values | Derail? | Is This A Discussion? Flow Chart | Filesystem Hierarchy Standard | Clean Code Talks - Global State and Singletons | How To Use Header Files | GNU/Linux (Debian, Fedora, Gentoo) | rot (rot13, rot47, rotN) | Streaming |
|
Rampage
Member #3,035
December 2002
 |
Nice, but it would be better if it followed the page as it scrolls down. -R |
|
Simon Parzer
Member #3,330
March 2003
 |
Quote: Working on a javascript game. I made a simple sprite tech demo. Tell me what you think 8)
|
|
ImLeftFooted
Member #3,935
October 2003
|
Quote:
You must be bored.
Heh. Ya pretty much Quote: n Internet Explorer 7, the "player" continues to "drop" This should be fixed, however I believe the controls wont work in IE. Quote: Add possibly a mid-air frame? Done. (note the graphics are done by Inphernic). Quote: I'm dreaming of making a simple GUI of controls that will be positionable with mouse dragging to simulate windows in the browser Ever looked at http://www.pageflakes.com/ or gone to the 'personalized' google homepage? He looks much better now (check screenshots on OP). |
|
le_y_mistar
Member #8,251
January 2007
 |
this is entertaining, keep at it. ----------------- |
|
bamccaig
Member #7,536
July 2006
|
Dustin Dettmer said: (note the graphics are done by Inphernic)
You just ruined it for me... Dustin Dettmer said: Ever looked at http://www.pageflakes.com/ or gone to the 'personalized' google homepage?
Thanks for the link! That looks like it could be useful, but I want to write it myself so I know how... -- acc.js | al4anim - Allegro 4 Animation library | Allegro 5 VS/NuGet Guide | Allegro.cc Mockup | Allegro.cc <code> Tag | Allegro 4 Timer Example (w/ Semaphores) | Allegro 5 "Winpkg" (MSVC readme) | Bambot | Blog | C++ STL Container Flowchart | Castopulence Software | Check Return Values | Derail? | Is This A Discussion? Flow Chart | Filesystem Hierarchy Standard | Clean Code Talks - Global State and Singletons | How To Use Header Files | GNU/Linux (Debian, Fedora, Gentoo) | rot (rot13, rot47, rotN) | Streaming |
|
Inphernic
Member #1,111
March 2001
|
I'll ruin something else for you. Aeris dies lololol! Did you cry when she did? -- |
|
Paul whoknows
Member #5,081
September 2004
 |
____ "The unlimited potential has been replaced by the concrete reality of what I programmed today." - Jordan Mechner. |
|
Fladimir da Gorf
Member #1,565
October 2001
 |
Quote: I'm dreaming of making a simple GUI of controls that will be positionable with mouse dragging to simulate windows in the browser... They will allow you to hopefully resize them and move them, etc. Anyway, it's good to know how to position them. Well, with the Echo2 library, you can display your own Java desktop applications in a web browser, without using a Java applet... OpenLayer has reached a random SVN version number ;) | Online manual | Installation video!| MSVC projects now possible with cmake | Now alvailable as a Dev-C++ Devpack! (Thanks to Kotori) |
|
ImLeftFooted
Member #3,935
October 2003
|
Quote:
Heh |
|
Samuel Henderson
Member #3,757
August 2003
|
Quote: Aeris dies lololol!
Who is Aeris again? Something tells me Bamccaig is going to be making good use of .m1111 { display: none; } edit: Edit2: ================================================= |
|
CGamesPlay
Member #2,559
July 2002
 |
.m1111 { display: none; } -- Ryan Patterson - <http://cgamesplay.com/> |
|
Inphernic
Member #1,111
March 2001
|
Quote: Something tells me Bamccaig is going to be making good use of .m1111 { display: none; }
Wait! Wait.. ..oh, nevermind. I thought I started caring there for a second, but it was just gas! -- |
|
bamccaig
Member #7,536
July 2006
|
Samuel Henderson said:
Something tells me Bamccaig is going to be making good use of I think I missed something. Where do you get m1111 from? Inphernic said: I'll ruin something else for you. Aeris dies lololol! I already knew she died... That didn't really make sense. Get your head examined... First by a plastic surgeon so the psychologist isn't distracted. Inphernic said: Did you cry when she did? Only a little. -- acc.js | al4anim - Allegro 4 Animation library | Allegro 5 VS/NuGet Guide | Allegro.cc Mockup | Allegro.cc <code> Tag | Allegro 4 Timer Example (w/ Semaphores) | Allegro 5 "Winpkg" (MSVC readme) | Bambot | Blog | C++ STL Container Flowchart | Castopulence Software | Check Return Values | Derail? | Is This A Discussion? Flow Chart | Filesystem Hierarchy Standard | Clean Code Talks - Global State and Singletons | How To Use Header Files | GNU/Linux (Debian, Fedora, Gentoo) | rot (rot13, rot47, rotN) | Streaming |
|
|
1
2
|
