News | Forum | People | FAQ | Links | Search | Register | Log in
Canvas Quake?
Been messing with HTML5 canvas.


That was the first, er, 'version'.

This was the second.

Managed to make object oriented bullets. Yay!

Next - crates?


WFT is a collision algorithm?!?!?!
First | Previous | Next | Last

left-right or a & d = move forwards and backwards

jump = up (haven't added w yet. I should really. chances are that by the time you're reading this I will have. Maybe. Depends how quick you are to read it and how lazy I am)

space = fire


new feature - Double Jump! Hold up or a well-timed double tap.

I'm sure the bullets keep flying forever, so that probably means if you play it forever your computer will blow up. I deny any responsibility in advance) 
Those look useful as hell :)

To Do:

Make the array system for objects into a stack (if that makes sense) to stop computers from exploding.


Add enemies, combat, collision, levels, game script system, menu, savegames, sound effects, loading screen, draw better stuff....

Interesting Start 
Looking forward to see what you make of this. It would be cool to have a really nice 2d version of Quake. FrikaC made a cool game called Qake that you might want to check out:

I was doing a lot of canvas stuff a while ago and found it a generally liberating coding experience, since all you need is a text editor and a web browser (I used Notepad++ and Chrome). I made MANY little games and experiments, which I will upload if I finally get some web hosting sorted out.

There were a few things, however, that I hated about it.
1. browsers have different ideas of standards, or are at different states of implementation. The more complex your stuff gets, the more you start to encounter incompatibilities between different browsers and end up wasting time trying to fix stuff that should work according to standards, but doesn't
2. browser security is a pain in the ass to deal with. If you want to modify any data on a canvas, you make it "dirty". This means that often you cannot write back to the canvas for some security reason. This was fucking infuriating. Look up CORS for more info on this.
3. Performance. Canvas has no real fast blitting routines. You can draw lines and shapes etc. but they are anti-aliased. AFAIK there is no way to turn them off. This, along with javascript lacking fast performing arrays (arrays are basically just the same as the standard objects, which are hash-maps) limits the speed at which you can run stuff. What I was doing wasn't especially taxing, and I had allocated my memory in one chunk, rather than as I needed it, so I didn't have any real performance problems, but currently performance is shit compared to native code. NaCl might be worth a look if you want to do some serious coding, but then you are limited (currently) to Chrome running on x86.
4. Local file access is the most awful thing ever. Currently only Chrome has any reasonable semblance of local file access. There are some web standards that allow you to create local databases or use local storage, but it's very limited (understandably... you don't want a 500mb file on your HDD used essentially as a cookie, and you don't want some website uploading random shit or illegal files to your cache without your permission). What I wanted to try doing, and might still try, is to write a Quake level editor using Canvas and OpenGL so that I can make maps anywhere I have a web browser and reasonably modern video chip. The limiting factor seems to be local file access. You don't want to be downloading big chunks of data like models, textures etc. from a server, and there are also legal reasons why it would be best to avoid having the Quake PAK files online. You could run a local server, but that's kind of a pain in the ass.

Anyway, despite what some people seem to think about javascript, canvas and webgl, I reckon they are pretty neat technologies and will enable a lot of cool things to be done online in the coming years (there is already a huge amount of cool stuff that can be done.) 
I can host your shit on fov120 if you want. 
You shouldn't try to do too much in a first project dude. Collision detection alone is really hard to get right.

Canvas has no real fast blitting routines.

Yeah Flash's copypixels is a big reason why I'm enjoying playing with it so much. Can throw a lot around the screen.

Though these days I guess you could use something like Starling and Stage 3D.
I wonder how Stage 3D compares to WebGL actually... 
Well I Made A Scrolling Functionality

ZQF - Yeah, I imagine that before long it will just become a total clusterfuck, but you have to start somewhere I guess! This thread to me is like some idiot with a push-bike going to a motorcar tyre fitting shop to get his innertube inflated. 
I Have Also Been Toying With HTML5 Stuff... 
canvas is supposedly pretty fast if you draw an un-scaled rect with integer coordinates. Anything else is kinda slow.

Standards are also annoyingly nonstandard right now; I have managed to avoid any browser weirdness so far except at the moment i'm using requestAnimationFrame which isn't standardized yet. But i can easily switch back to setInterval (There's no vsync possible either way, argh.) Oh yeah and keyboard input requires different weird browser hacks, but that's nothing new to html5. No sub-millisecond timers, that's annoying.

Javascript is an interesting language, I have learned how to use it rather than abuse it, for the most part. I am just now getting to the point where lack of class inheritance seems to be a problem; not sure what coding patterns i will use to work around that.

I have written a collision system using that Metanet Software tutorial (post #2 above) as a reference, and it works pretty well. I basically move each object to its destination for that frame and then apply the SAT to push overlapping objects out of each other. This is not a great way to do it because there is no concept of motion, and if you're halfway into a wall you're just as likely to get pushed through it rather than blocked on the side you started on. I plan to rewrite it so that the movement vector is clipped against each collision plane, shortening the path of the object so it never has a chance to penetrate. 
There's Also Svg... is fun.

Javascript is a decent enough programming language really, although the environments (i.e. browsers) are a PITA and ohmygod so many of the people talking about it on the internet don't have a clue what they're doing... 
Yeah I generally found SAT is great for getting a boolean response but actually picking a resolving axis and such is really dodgy.

I wrote this as my test for doing a dynamic grid:

but the actual collision is more of an AI decision than a physical response, monsters just move away from each other when the overlap.

So I'm in the same place, looking at writing an A priori system too. Once you have lots of objects, A moves out of B, B moves into C, C moves out of B into D and everything breaks :P 
Javascript: The Good Parts

Worth a look if you've an hour to spare and care about writing nice Javascript.

You might also want to check out Crockford's site for his style guidlines (which I follow fairly religiously even though I used a different style for other languages in the past.) <he used to work at Lucasarts!

jQuery is also worth checking out since it simplifies a lot of stuff you might do with regard to touching the DOM (such as making UIs etc.) 
Thanks, that might be cool. If and when I have something worth putting on a website I will contact you. I was thinking maybe a blog and google drive for files would be good enough though. Not sure yet, and for javascript stuff a blog probably wouldn't be any good. 
New Version: 

Bullets are a stack of 50 now. (I think)

You can shoot monsters! They just keep coming!

(Max 6 monsters) 
can you make it so you aim where your mouse is on the screen? that'd be cool.
also, they look hilarious. :) 
New Version 
Health and Kills readout.

Messed a bit with monster generation and monster behaviour.

You can't die yet though. But you do take damage. 
thats gay

Nice done Ricky 
New Version: 
The player is now the Quake guy instead of a stick man.

You can Die!

Tuned the monster behaviour a bit more

Added player firing/non-firing frames

Began externalising data into separate .js files (the beginning of a level-loading system)

Best score is 210.

Known Issue: By the time the 'you are dead' message appears, the score is cleared from the screen. 
this is getting to be pretty cool :) 
Added Fiends! 
They jump. They chase.

They do no damage (yet).

JS is a lot faster than I had feared. 
Are you following a tutorial or taking a course? This is pretty nice! 
Thanks Spirit 
Means a lot. :)

I've just finished the first year of a part-time foundation degree in Computer Science. I've done a module in C++, for which I created Minesweeper, and my Minesweeper worked pretty well. Realised a lot of stuff.
'Off the back of that' I created an XML/PHP CMS/directory for a Web Applications module, if you want to have a giggle it's at - none of the places are real. And it's very hackable I'm sure.
I've also been using a bit of JQuery for work stuff, so Javascript seemed like a good idea :).

I found one good video on getting started with HTML5 canvas, and used a blog page to figure out how to do object stuff in JS. The rest is all me :) Which is probably why it's terribly inefficient I'm sure, and there are lettle to no comments in my code XD

The vid I found for canvas:

The guy has a thick Scottish accent (though I speak fuent Scottish ;), and the links are dead, but it really helped me nonetheless.

(the one in #22 has a typo) 
Yeah That Looks Cool 
But unfortunately I can't find a larger version of the image. 223x600 is the largest :( And Quakeguy is a bit too small :D

'Cause it is a bit of a pain to make the sprites. 
First | Previous | Next | Last
You must be logged in to post in this thread.
Website copyright © 2002-2023 John Fitzgibbons. All posts are copyright their respective authors.