Javascript Game

ImLeftFooted

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):

#SelectExpand
   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]
[img http://www.allegro.cc/files/attachment/591931]

The sprite is by the ever talented Inphernic

BAF

You must be bored.

bamccaig

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,...
Ie7Support = false;

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...

Ceagon Xylas

Sweet. Add possibly a mid-air frame? I like that the images are all hosted from allegro.cc as well

LennyLen

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

Nice, it even works in Konqueror

FMC

Seems to work with Opera 9.02 (winxp)

LennyLen

Quote:

Seems to work with Opera 9.02 (winxp)

Why havent you upgraded yet?

FMC

Opera didn't notify me

BAF

What post did you attach those images to?

Samuel Henderson

Is it just a little angel man you can move around or am I missing something?

bamccaig

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.

Rampage

Nice, but it would be better if it followed the page as it scrolls down.

Simon Parzer

Quote:

Working on a javascript game. I made a simple sprite tech demo. Tell me what you think 8)

::) :-X

ImLeftFooted

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

this is entertaining, keep at it.

bamccaig

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... :-/

Inphernic

I'll ruin something else for you.

Aeris dies lololol!

Did you cry when she did?

Paul whoknows

~~Why don't you finish your Thing library instead of wasting your time with this gam~~EHHEM, eheem, I mean, very nice game, this jumping little angel is just what I needed!
Little joke!

Fladimir da Gorf

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...

ImLeftFooted

Quote:

~~Why don't you finish your Thing library instead of wasting your time with this gam~~EHHEM, eheem, I mean, very nice game, this jumping little angel is just what I needed!

Heh

Samuel Henderson

Quote:

Aeris dies lololol!

Who is Aeris again?

Something tells me Bamccaig is going to be making good use of .m1111 { display: none; } 8-)

edit:
fixed script

Edit2:
Whoops, thanks CGames:)

CGamesPlay

.m1111 { display: none; }

Inphernic

Quote:

Something tells me Bamccaig is going to be making good use of

.m1111 { display: none; }

8-)

Wait! Wait..

..oh, nevermind. I thought I started caring there for a second, but it was just gas!

bamccaig

Samuel Henderson said:

Something tells me Bamccaig is going to be making good use of
.m1111 { display: none; }
8-)

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. :'(

CGamesPlay

Quote:

I think I missed something. Where do you get m1111 from? :-/

Not reading other's posts seems to be a big thing nowadays. In fact, it's grown so popular that ML decided to make it possible to completely remove other people's posts from your view! Just go edit your custom CSS, and add this line: .post.m1111 { display: none; }, where 1111 is the poor member's number, and you won't be bothered by their worthless blather again.

Remember, kids, no one cares about your ignore list. It's grown really annoying on IRC recently when people will just start telling everyone "you are now on my ignore list". Great. No one cares. Just a friendly reminder before you go posting something stupid!

Oh also you're putting yourself at risk of being flamed for not reading others posts.

Crazy Photon

Quote:

Where do you get m1111 from?

1111 is Inphernic's member number. If you put .m1111 { display: none; } in your Custom CSS configuration, you will not see any of his posts.

EDIT: Beaten!

Rampage

Quote:

Remember, kids, no one cares about your ignore list. It's grown really annoying on IRC recently when people will just start telling everyone "you are now on my ignore list". Great. No one cares. Just a friendly reminder before you go posting something stupid!

News: this is not IRC. I don't think there are more than a few posts about ignoring users lately...

[edit]

I mean, besides this thread...

Inphernic

Quote:

That didn't really make sense.

It would if you were rad.

Quote:

worthless blather

Is that your opinion or just for example's sake?

Quote:

It's grown really annoying on IRC recently when people will just start telling everyone "you are now on my ignore list". Great. No one cares.

Well, honestly, what did you expect?

Ostrich Mode is a go go! 8-)

bamccaig

Yeah, I don't like the idea of hiding replies from members on a forum. Although there are posts from some that are rude or worthless, those members are still capable of contributing useful replies. At least, theoretically... ::)

Besides, I like to know what members have said so I can factor it later.

Inphernic

Quote:

Although there are posts from some that are rude or worthless, those members are still capable of contributing useful replies. At least, theoretically...

At least you are obviously on a higher level than those members. I mean, most people have small signatures, but you have settled for nothing less than a 11-line signature. Related to FF7. That's the mark of a king of all kings, I tell you. 8-) Post more, contribute!

CGamesPlay

Quote:

News: this is not IRC. I don't think there are more than a few posts about ignoring users lately...

Well, also recent was DDustin's "Ban User" custom JavaScript. But as far as this not being IRC: We'll see about that! /me starts on an Allegro.cc post-to-IRC bridge.

ImLeftFooted

Hrm, I had hopped to make a cool game out of this (remake of the SH game made a few years ago). Unfortunately it sliding down the side of the screen on each page load has made it extremely annoying to me, so much so that I've lost motivation to help the guy come to life.

And so ends A.cc in Desert of Doom.

HoHo

What about storing the last position in cookies and using those values when loading the page?

ImLeftFooted

The problem is more that I've gotten annoyed of him, its too late to fix it. Its sort of a motivational issue.

Thread #590987. Printed from Allegro.cc