Canvas Snake Game guide
Canvas Snake Game: collect apples while keeping a clear route
Created by Ahsan Ayaz, Canvas Snake Game is a small JavaScript, HTML and Canvas version of the classic grid game. The yellow snake moves toward red apples after you choose a direction with an arrow key. Each apple adds one point and increases the configured tail length by one. The board has 20 rows and 20 columns, and crossing one edge brings the head back on the opposite side. Your main obstacle is the body created by the route you have already taken.
How to start Canvas Snake Game and steer
- Load the game. Select Play Canvas Snake above and wait for the original demo. It loads inside an external frame, so give that play area focus before using the keyboard. The verified controls are the four arrow keys.
- Choose a direction. Press and release Left, Up, Right or Down. The demo changes direction when the key is released and then keeps moving that way. Holding the next key delays the turn until release, so use short presses while checking the next few squares for your body.
- Reach an apple. Move the head onto the red apple. The score increases by one, the tail length increases by one and a new apple position is chosen from the 20×20 coordinate range.
- Plan the next route. Check where the next apple appears and where the body now lies. The head can cross a board edge, but you still need a destination that does not meet the body on the opposite side.
Canvas Snake Game grid size, growth and score
The board contains 400 coordinate positions because it is 20 squares wide and 20 squares tall. It starts the player coordinates at 10,10, the apple at 15,15 and the score at zero. Those starting values explain the first layout, but later apple positions are chosen randomly.
From the starting square (10,10), the first apple at (15,15) is five columns right and five rows down. An L-shaped route therefore takes ten grid moves: reach column 15, then turn down toward row 15. Watch the head instead of timing a key press by the clock. Continuing past the target column changes the route you need.
The source configures a tail length of four while the body-position array begins empty. That value is the configured history length as movement builds; it should not be described as four distinct body segments already visible on the first frame. The loop draws the recorded positions as play continues.
Each apple increases score and tail length by one. After three apples without a self-collision reset, the score is three and the configured tail length is seven. After five apples, those values are five and nine. Score and tail length therefore remain separate numbers even though the same apple event raises both.
The next apple coordinates are selected randomly from zero through nineteen on each axis. Follow the apple actually displayed rather than expecting a fixed sequence. The program does not promise that the next target will be close to the head or convenient for the route already occupied by the body.
How wraparound edges work
The outer boundary is not a solid wall. Moving off the left side puts the head on the right side, while leaving the right puts it on the left. The top and bottom connect in the same way. Crossing an edge alone does not reset the run.
If the head is beside the left edge and continues left, its next horizontal coordinate becomes nineteen on the right edge of that row. Before using that route, check the destination. Wraparound does not make an occupied square safe; meeting the body after crossing still triggers self-collision.
What happens when the head hits its body
When the head reaches a recorded body position, the program returns the player coordinates to 10,10, restores tail length to four, resets score to zero and sets both movement velocities to zero. That is the self-collision response; touching a boundary is not the cause.
Because velocity returns to zero, the demo waits for another arrow direction after the reset. Check the new head position before moving again. The next route begins with a zero score and the initial tail-length setting, even if the previous run had collected several apples.
What the Canvas Snake Game source confirms
Rendering in the demo uses an HTML Canvas drawing surface and a JavaScript loop configured for ten updates per second. The source paints a black background, yellow body squares and a red apple. It draws the current score near the top of the Canvas, so the displayed number can be checked after every apple.
The input handler defines the four arrow-key directions. It does not define WASD or swipe controls in the checked source. For that reason, this guide treats a keyboard with arrow keys as the supported starting point and does not promise touch steering.
Collecting an apple changes three things in the checked loop: tail length rises by one, the apple receives new random coordinates and score rises by one. The source does not increase the ten-updates-per-second setting during that event, so you manage a longer route at the same configured loop rate.
Questions and troubleshooting
Why did my score return to zero?
A self-collision resets score, player position, movement and tail length. If the reset happens after crossing an edge, check the destination on the opposite side; the boundary itself is passable.
Can I play using only a touch screen?
The checked source defines keyboard arrow controls, and this page does not add touch direction buttons. A keyboard-equipped device is the dependable choice for these instructions; do not assume that swiping changes direction.
Why do the arrow keys scroll instead of steering?
The keyboard may still be focused on the guide instead of the embedded player. Select the play area and try again. If it still does not receive input, open the original playable demo from the source section.
What should I do if the player stays blank?
The demo is served by an external GitHub Pages host. Give it time to load, try Reload beneath the player, then use the original link. No separate installer is needed, but the external host and your connection must be available.
Does crossing an edge end a run?
No. The board wraps left to right, right to left, top to bottom and bottom to top. A crossing becomes unsafe only if the head reaches a recorded body position at the destination.
Why is the snake waiting instead of moving?
At launch, the project has horizontal and vertical velocity set to zero, and self-collision restores both values to zero. Press and release an arrow key while the frame has focus to choose the next direction.
Does tail length four mean four visible segments?
No. The source initializes the body-position array empty and configures tail length as four. The recorded history builds as the loop runs, so four distinct segments are not present on the first frame.
Source and attribution
The embedded demo is served by Ahsan Ayaz's GitHub Pages project. Its public repository contains the JavaScript Canvas implementation and identifies the code license as MIT. The grid, color, growth, wraparound, input and reset facts in this guide follow the checked source.
Blockdeck supplies an independent guide and entry point. Blockdeck is not the original developer and does not host a replacement copy of the project. The repository license is not a claim that Blockdeck owns the project's name or artwork. Read the original source for current files and license terms, and our external game privacy notes for the external-host boundary.
Open the original Canvas Snake project ↗ · Open the original playable demo ↗
Continue playing or switch puzzles
Try 2048 if you want a grid puzzle built around numbered tiles, or visit Astray for a maze with a different movement system. Their rules are separate from Snake's wraparound board.
Return to Canvas Snake Game when you are ready. Choose an arrow direction, find the red apple, check the growing route and leave a clear destination for the next turn.