Final result of that part should looks like this: Simple game with HTML5 Canvas part 1, and sources are available on my Github account: Tutorial: Simple game with HTML5 Canvas Part 1 - Introduction & Background Part 2 - Character & Animation Part 3 - Physics & Controls Part 4 - Platforms & Collisions Part 5 - Scrolling & Game States. Sep 26, 2019 Basic Snake HTML Game. Snake is a fun game to make as it doesn't require a lot of code (less than 100 lines with all comments removed). This is a basic implementation of the snake game, but it's missing a few things intentionally and they're left as further exploration for the reader.
Active3 years, 7 months ago
$begingroup$
I created a classic snake game in the canvas element. I have not considered best practices when doing this, I just wanted to finish it first. Now it's time to improve the coding practice. You can help me out by mentioning bad practices, giving code improvements and suggesting anything else.
You can see a live version of the game here.
Pimgd
21.4k55 gold badges5959 silver badges142142 bronze badges
VigneshVignesh
23811 gold badge55 silver badges1313 bronze badges
$endgroup$
4 Answers$begingroup$
From a once over:
Good
Not so good
27.7k44 gold badges5858 silver badges237237 bronze badges
$endgroup$$begingroup$
Some thoughts on your general code style (some points might depend on personal preference):
SyjinSyjin
$endgroup$$begingroup$
I would suggest drawing the snake as a single polyline instead of as a bunch of blocks, so that you only call
stroke once instead of calling fillRect as many times as blocks has the snake.
In general, it would be more efficient to stroke one complex shape instead of a bunch of simple ones. You can see that in this test.
Another option that I would consider is to
clearRect only the last block of the snake and then draw (fillRect ) only the new one, so that you don't have to redraw all the scene, only the parts that have changed. Another test here.
You will have to test both options and see which is better for you, but I would go for the second one.
I would also consider using
requestAnimationFrame insted of setTimeout . From the MDN doc:
The
window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.
Also check this post about that. It explains the basics and also how to set a custom frame rate, so that you can still use
refresh_rate in your code.
There are two options:
Escan for windows 10. EScan Antivirus for Windows 10 Free Download 32/64 Bit This provides an additional protection for both incoming and outgoing mails. It even scans the mail attachments if needed.
Wrapping the
requestAnimationFrame in a setTimeout :
Or using deltas:
In your case I think it would be better the first option because the snake can only be drawn in certain blocks, so it doesn't make much sense to me to use deltas here.
Simple Html Game Code Online
DanzigerDanziger
$endgroup$$begingroup$
To @Sykin's answer, I would add:
If you press down and then left faster than the snake takes to slither 'one step', the snake turns around and slithers over itself.
I find that JSLint really helps me get a consistent code style.
I suggest you use strict mode in your JS, by starting with a line
'use strict';
Community♦
ANevesANeves
$endgroup$
protected by Jamal♦Dec 2 '15 at 16:26
Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead? Not the answer you're looking for? Browse other questions tagged javascripthtml5canvassnake-game or ask your own question.Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |