PDA

View Full Version : [DHTML] Cross-Browser Snake



blm126
08-05-2006, 10:45 PM
1) CODE TITLE: Cross-Browser Snake

2) AUTHOR NAME/NOTES:Brady Mulhollem

3) DESCRIPTION:
A simple snake game. Tested in IE 5+,FF1+,Opera 7.5+,and the latest Safari release.

4) URL TO CODE: Demo (http://www.bradyontheweb.com/demo/snake/k3.html)
Edit: Updated link to version with Konqueror support(buggy).

Twey
08-05-2006, 11:17 PM
Pretty good :)

If you want to improve it, I'd eliminate most of those global variables, and maybe object-orient it so it's easier to work with and modify.

mburt
08-05-2006, 11:29 PM
Umm.. What exactly does it do?

Twey
08-05-2006, 11:41 PM
It's a game of Snake. Click one of the speeds at the bottom to start, then use the arrow keys to try to grab the "apple" (the red dot). Don't crash into the walls or yourself.
/EDIT: Argh, got to 53 on medium then hit myself. :(

blm126
08-05-2006, 11:53 PM
Umm.. What exactly does it do?
That reminds me... I need to add directions.

Twey
08-06-2006, 12:13 AM
Lol, it's Snake. What more is there to say? :p

blm126
08-06-2006, 01:07 AM
hmmm....
I'm trying to make an object oriented version...but how do you call setTimout on an object method?

Twey
08-06-2006, 01:09 AM
You need to keep an index of all instances of the object.

blm126
08-06-2006, 03:29 AM
Ok,well here's an object oriented version (http://www.bradyontheweb.com/demo/snake/k3.html). It works fine in IE 5.0, IE 6, IE 7,FF1+,and Opera 7.5 +. It crashes IE 5.5 for some reason,and I haven't gotten a chance to test safari.

mburt
08-06-2006, 01:53 PM
Yeah, I could play this for hours :)

Twey
08-06-2006, 02:57 PM
If you create an object method like this:
function MyObject() {
this.func = function() { doNothing(); };
}Every time you create a new instance of MyObject, a new copy of that function is created. This is inefficient. Instead, if you do:
function MyObject() {
}

MyObject.prototype.func = function() { doNothing(); };... the function is only created once, then pointers to it assigned to each new copy of MyObject.

In Konqueror, there's an interesting bug: on hitting the apple for the first time, the snake jumps back to its starting point then back to where it was after a few seconds, after which it is unable to collide with the apple (although it can still hit walls).

/EDIT: Also, if you toggle between speeds a few times, your snake goes super-sonic. :)

shachi
08-06-2006, 03:06 PM
Oh, this is awesome.

I would be more Interested if you could write a tutorial on how did you make this.

ddadmin
08-06-2006, 04:40 PM
Not bad at all. Functionality wise one thing I'd change is the speed difference between Medium and Fast- right now the two basically are both insanely and similarily fast to me. :)

blm126
08-06-2006, 06:52 PM
shachi: Take a look through the source. I don't think I did anything to advanced.

ddadmin: Thanks for the suggestion! My original link has been updated to include a faster 'fast'.

Twey: Thanks for the tip. Changing to that method also stops IE 5.5 from crashing. I have added support for Konqueror. :) It didn't like how I used innerHTML. So I switched to appendChild. It is still pretty buggy though. I also prevented super-sonic,but my solution is a little cheap :p

Here's the latest version... (http://www.bradyontheweb.com/demo/snake/k3.html)

jr_yeo
08-06-2006, 07:26 PM
pretty cool if u could add a 'Pause' feature :p

Twey
08-06-2006, 08:37 PM
Yeah, I thought about suggesting that.

blm126
08-06-2006, 08:59 PM
Ok, I added a pause feature :) thanks for the suggestion.

ddadmin
08-09-2006, 10:14 PM
Ok, I'm going to post this script to DD soon. Did you want the OO version to be the one showcased? You should pick the one you plan on making any updates to to.

jr_yeo
08-09-2006, 10:23 PM
Ok, I added a pause feature :) thanks for the suggestion.
so how do i pause the game then? :cool:

Twey
08-09-2006, 10:40 PM
Press space.
Like it says in the instructions.
:p

blm126
08-10-2006, 01:20 AM
Ok, I'm going to post this script to DD soon. Did you want the OO version to be the one showcased? You should pick the one you plan on making any updates to to.
The OO one, latest version is here (http://www.bradyontheweb.com/demo/snake/k3.html). I have updated all my links to point to the OO one actually as it is much better code wise. :)

jr_yeo
08-12-2006, 03:25 PM
Press space.
Like it says in the instructions.
:p
there's an instructions? :p

<edit>
didn't click the newer version. thats why. :cool:

ddadmin
08-17-2006, 06:42 PM
Ok, script just featured on Dynamic Drive: http://www.dynamicdrive.com/dynamicindex12/snake/index.htm A couple of suggestions on improvements:

-The blocks alignment seem to be a little off (between black and the red block). Also, when the black blocks hit the wall, they do not stop until going into the wall.

-The script relies on absolute positioning, which means in order to embed the script on a normal page, an iframe needs to be used. Otherwise, the orientation becomes out of place.

Thanks!

blm126
08-17-2006, 10:54 PM
-The blocks alignment seem to be a little off (between black and the red block). Also, when the black blocks hit the wall, they do not stop until going into the wall.

As to the alignment, it is caused by the fact that the script doesn't have a true "grid system".Therefore, it is possible to hit the apple dead on, it is just not required.Also,I'll take a look and see if there is a fix for the wall problem.


-The script relies on absolute positioning, which means in order to embed the script on a normal page, an iframe needs to be used. Otherwise, the orientation becomes out of place.

I'll take a look and see if absolute positioning is really required(I doubt it is).However, I still think an iframe is a good idea. It will probably reduce the number of problems inexperienced people will encounter.

blm126
08-24-2006, 02:03 AM
Ok, got some spare time for an update(based on your suggestions, and few of my own). Demo is here (http://www.bradyontheweb.com/demo/snake/snake.htm).
Full support in

Firefox 1+
Opera 9+
IE 5.5+
Latest Safari

IE 5,Opera 7.5&8 don't support the opacity(not a big deal).I was unable to test Konqueror. Based on my previous problems I would say that konqueror will be a little jumpy when you hit the wall, besides that it should be fine(Twey, could you confirm?).

A couple of suggestions on improvements:

-The blocks alignment seem to be a little off (between black and the red block). Also, when the black blocks hit the wall, they do not stop until going into the wall.

Alignment has been fixed(wasn't as hard as I thought). The wall problem has only been partially fixed.


-The script relies on absolute positioning, which means in order to embed the script on a normal page, an iframe needs to be used. Otherwise, the orientation becomes out of place.
Absolute positioning is still used. However, I added a position:relative to the parent so it won't be based off the body tag.Margins have been added to the demo to illustrate this.Also, I have made a small update to allow easy placement in a page(no iframe needed).

ddadmin
08-24-2006, 03:55 AM
Great, the misalignment was a little disconcerting. I'll get to updating this script with the changes at the end of this week then. If you had something to add, please just post an update.

Twey
08-24-2006, 12:03 PM
Based on my previous problems I would say that konqueror will be a little jumpy when you hit the wall, besides that it should be fine(Twey, could you confirm?).Confirmed. No opacity either.

blm126
08-24-2006, 01:44 PM
Confirmed. No opacity either.
No opacity? I thought that was what -khtml-opacity was for.

Twey
08-24-2006, 02:54 PM
Yeah, I haven't figured out Konqueror's opacity yet. The newer versions are supposed (I think) to support the W3C opacity: property instead of -khtml-opacity:, but it doesn't seem to do anything.

blm126
08-24-2006, 09:37 PM
Ok, due to lack of support for opacity. I decided it is easier to fake it with background colors. Also, I modified it slightly to hopefully work better in Konqueror(I don't really know I lost my SLAX live cd).Updated link above.

ddadmin
09-22-2006, 11:26 PM
Ok, I know this is a long time coming, but script on DD just updated with the script here (http://www.bradyontheweb.com/demo/snake/snake.htm): http://www.dynamicdrive.com/dynamicindex12/snake/index.htm I guess the only problem with the removal of the iframe is that the browser will instinctively scroll up and down when you press the up/down keyboard buttons.

blm126
09-23-2006, 03:28 AM
Yes, I am aware of that, but not much can be done.

blm126
09-28-2006, 02:12 AM
Update: No longer scrolls while you are playing(except in Opera). It is now available here (http://www.webtech101.com/index.php?page=snake), the version linked to above is out of date.

ddadmin
10-02-2006, 06:16 AM
Thanks for the update, script updated on DD as well with the latest change. I also changed the URL listed on the page to http://www.webtech101.com, since I assume that's your main site now.

Thanks,

shachi
10-02-2006, 09:30 AM
blm126: how'd you do that?? =o

datagutten
01-24-2007, 09:04 PM
It scrolls in FF for mac 2.0.0.1, and i think it react a bit slow.
I am working on a highscore system for this based on php and mysql. If someone is interested, i can publish the source code when i am finshed with it.

mitchoum52
01-26-2007, 03:39 PM
Hi ! :)
I wanted to know ,if it's possible...,how to extract the score we've made ? :confused:
Because i wanted to put it in a php variable to make a "best score system" . ;)
Thanks !!!

PS: excuse me if i made bad words ... i'm french... :D

Twey
01-26-2007, 05:41 PM
It would be impossible to do correctly. That is to say, any user can just make up a score and submit it.

mitchoum52
01-26-2007, 07:34 PM
Ah ! that's so bad :(

I tried to do that all the PM and i didn't found how to...
If somone think of a solution to make a hiscore system in this game...even if it's without php... :confused:

Thanks for your help ! ;)
See you later !
bye !

Twey
01-26-2007, 08:09 PM
It may be possible, but it would involve moving significant portions of the game server-side, which may result in significant lag (whatever people might say, HTTP is really not the ideal protocol for this sort of thing).

mburt
01-26-2007, 09:11 PM
moving significant portions of the game server-side
Not really, seeings you only need to store two variables (name, and score). You could get the score from the JS code, simply write a variable in js and document.write it and for the name, just use a form.

Twey
01-26-2007, 09:35 PM
Nope. Remember that anything in JS is under the control of the user. There's nothing to stop a smart user bumping his/her score up by a couple of thousand points before it gets submitted. The only way to do it would be to actually submit each move to the server for evaluation, rather than relying on JS to calculate the score.

mitchoum52
01-27-2007, 10:04 AM
hello ! :)
when i look at what you said it looks to be too much difficult to do... :o
i think i must give this idea up.
thanks to your answers ! ;)
i will probably come here sometimes to see if someone has succeed to do that.
bye !

datagutten
01-27-2007, 10:37 AM
In my solution I have a hidden form field that gets value from the JS. When the submit button is pressed, the value is sent to a php script.
As someone said before, it is easy for a skilled user to fake his score with this solution, but I don't think this would be a big problem as if I see someone who has an extremely high score compared with the others, I can just delete it from the DB.

Twey
01-27-2007, 11:47 AM
And when that person realises this, s/he will simply set his/her score perhaps five points above the highest. You'd also be running the risk of deleting the score of someone who genuinely is an expert at Snake (and that's someone I'd hate to meet at a party :)).

blm126
02-05-2007, 03:47 PM
Nope. Remember that anything in JS is under the control of the user. There's nothing to stop a smart user bumping his/her score up by a couple of thousand points before it gets submitted. The only way to do it would be to actually submit each move to the server for evaluation, rather than relying on JS to calculate the score.
Yes, that is probably the only perfect way, but you could, of course, calculate what the maximum possible score is and automatically reject scores over that, and you could also use timestamps to see if it is possible for the user to have gotten that high of a score. I actually thought of doing this before, but realized that if I could think up a way around every single check, then someone else could too

hypedup.co.uk
03-21-2007, 11:53 PM
i have just added the snake game to my website. i have put a scoreboard with it. i know others have said that people could fake their scores, but i cant see how they could do it with mine. well there probably is a way if you have the time and inclination, but i cant imagine many people knowing how to do it. i know i am tempting fate now!

i have also improved and made a few changes to the snake game. there are a few bugs which i have fixed, i improved the look of the game, plus i tidied up and reduced the javascript code.

the game is at www.hypedup.co.uk/games/snake.html

Twey
03-22-2007, 06:59 PM
i know others have said that people could fake their scores, but i cant see how they could do it with mine.By POSTing to snake.cgi with an arbitrary value in the cookie. There are some other values your server or various other scripts set in that cookie, too, but I didn't bother checking what they did; I just copied and pasted.
Reproduce: get onto the high score list (or call formfields() manually), then use:
javascript:scoreFrame.document.cookie = scoreFrame.document.cookie.replace(/snake=\d+/, "snake=2222");... in your browser's address bar. Enter a name and submit.