Help with First HTML5 Game

[aking]

Hi,

 

I'm using HTML5 (canvas) and javascript to implement the well-known snake game. I opted to encapsulate the game within the 3 following classes: "renderer", "snake", and "game". I use a "Uint8Array" to store the location (x,y) of each section of the snake, therefore the maximum distance the snake can travel is 255x255. Here lies the issue I'm facing. While the border of the game is set at 255, the snake "visually" seems to meet this border before that value. However, the x coordinate upon debugging does equal 255. I'd appreciate help in understanding why the visual does not match the underlying setup. To experience this "bug", just open the html file in a browser and when the green square displays on the canvas, hit the right arrow -- the snake piece will continue in that direction until it "dies," .i.e. meets the border. I'd appreciate any other suggestions and/or insights on improving the game both from design and code perspectives. Thanks.

 

snake.zip

[gregkarber]

I just tried debugging it, and found that "head.x" did equal 255 when it said that the snake was dead, despite it not looking -- visually -- as if the sneak were at the edge. I also noticed that the snake can go well below the visual boundary before it says that the snake is dead.

I am a rank amateur, so this is all I can say right now.

[gregkarber]

Okay, more thoroughly useless investigation: I have found that the bottom of your playfield seems to be at about 150, that is, when the green dot is at the bottom of the square, the y location seems to be 150. Not sure if this helps!

[Sebi]

Not going to look deeper into your code but it looks like you never set the canvas width and height to 255.

this.canvas2d = document.createElement("canvas");this.ctx2d = this.canvas2d.getContext("2d");this.width = this.canvas2d.width;this.height = this.canvas2d.height;

this.canvas2d.width doesnt equal the width that you set via css.

this.canvas2d = document.createElement("canvas");this.ctx2d = this.canvas2d.getContext("2d");this.canvas2d.width = 255;this.canvas2d.height = 255;this.width = this.canvas2d.width;this.height = this.canvas2d.height;

Also no need to play around with canvas, just start using a rendering framework like pixi, it sure will make your life easier.

[aking]

Okay, more thoroughly useless investigation: I have found that the bottom of your playfield seems to be at about 150, that is, when the green dot is at the bottom of the square, the y location seems to be 150. Not sure if this helps!

Thanks for taking the time to debug the code I posted and for sharing your findings.

 

Not going to look deeper into your code but it looks like you never set the canvas width and height to 255.

this.canvas2d = document.createElement("canvas");this.ctx2d = this.canvas2d.getContext("2d");this.width = this.canvas2d.width;this.height = this.canvas2d.height;

this.canvas2d.width doesnt equal the width that you set via css.

this.canvas2d = document.createElement("canvas");this.ctx2d = this.canvas2d.getContext("2d");this.canvas2d.width = 255;this.canvas2d.height = 255;this.width = this.canvas2d.width;this.height = this.canvas2d.height;

Also no need to play around with canvas, just start using a rendering framework like pixi, it sure will make your life easier.

Thanks for pointing out the issue; I was under the impress canvas values (i.e. size) could be set via CSS. I certainly plan on using frameworks (like pixi, easel, quintus, etc) but thought it best to first become familiar with the underlying toolset. Of these frameworks do you have any recommendations?

 

FYI: The posted code has other "bugs" and/or warts, for example, I originally wrote the code in object literal syntax but later switched. I can post an acceptable (read more complete), revised version later if anyone would be interested.

[Sebi]

CSS width/height is just scaling the element but not defining the base width/height.

I can't really give you an advice, only used pixi so far and afaik it outperforms the other frameworks.

 

I think your time is better spend on understanding those frameworks and finding out which you feel most confident with. I wasted a lot time back then too and now I don't use any of it anymore.