Introduction
Would you like to know how to change your snake game from barely functional to a masterpiece? Well, look no further! In a few simple steps, we’ll significantly improve your snake game. Any other changes will be an exercise for you, the reader.
WASD
The first step to improving your snake game is changing your controls from the simple-minded, horrendous arrow keys to the magnificent, angelic WASD keys. Not only are these the optimal controls for any game, but it’s a simple solution to fixing the problem in which when you use arrow keys to move your snake, the website scrolls with the snake!
If you may have noticed already, in the snake code that was provided, there is a section for “Key Inputs and Actions” where the controls for the game can be found.
/* Key Inputs and Actions */
/////////////////////////////////////////////////////////////
let changeDir = function(key){
// test key and switch direction
switch(key) {
case 37: // left arrow
if (snake_dir !== 1) // not right
snake_next_dir = 3; // then switch left
break;
case 38: // up arrow
if (snake_dir !== 2) // not down
snake_next_dir = 0; // then switch up
break;
case 39: // right arrow
if (snake_dir !== 3) // not left
snake_next_dir = 1; // then switch right
break;
case 40: // down arrow
if (snake_dir !== 0) // not up
snake_next_dir = 2; // then switch down
break;
}
}
While the code is a bit complicated, what we care about is quite simple to find. You’ll see each part of the code is commented to highlight what function such code provides. You’ll also have noticed that each section of the code has it’s own “case,” which is a means of identification for all types of keystrokes.
- Case 37 = Left Arrow
- Case 38 = Up Arrow
- Case 39 = Right Arrow
- Case 40 = Down Arrow
To change these controls to WASD, all you have to do is find the corresponding keys that match W, A, S, & D. The following would output you these results.
- Case 65 = A (Left)
- Case 87 = W (Up)
- Case 68 = D (Right)
- Case 83 = S (Down)
Here’s a list of a all the different key identifications for javascript
/* Key Inputs and Actions */
/////////////////////////////////////////////////////////////
let changeDir = function(key){
// test key and switch direction
switch(key) {
case 65: // A (Left)
if (snake_dir !== 1) // not right
snake_next_dir = 3; // then switch left
break;
case 87: // W (Up)
if (snake_dir !== 2) // not down
snake_next_dir = 0; // then switch up
break;
case 68: // D (Right)
if (snake_dir !== 3) // not left
snake_next_dir = 1; // then switch right
break;
case 83: // S (Down)
if (snake_dir !== 0) // not up
snake_next_dir = 2; // then switch down
break;
}
}
This is what your code should look like now. Each arrow has been changed to a WASD key. Now you should be fully converted to WASD and have solved the issue of the website scrolling up and down when using arrow keys.
Green Snake, Red Apple
The code of the game is developed so that both the snake and the apple share the same color. Changing it so these two entities have two different colors isn’t as complicated as some make it out to be.
/* Dot for Food or Snake part */
/////////////////////////////////////////////////////////////
let activeDot = function(x, y){
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(x * BLOCK, y * BLOCK, BLOCK, BLOCK);
}
You’ll see that the following code defines the color for the snake and apple. Both are defined to be white. So how can we make the food a different color, so that the snake, for now, will be white, and the apple will be red.
Well, you’ll notice that this code is within the activeDot function, so if we wanted to have two different colors, why not make a function called activeDot2?
/* Dot for Food or Snake part */
/////////////////////////////////////////////////////////////
//Color For Snake
let activeDot = function(x, y){
ctx.fillStyle = "#7CFC00";
ctx.fillRect(x * BLOCK, y * BLOCK, BLOCK, BLOCK);
}
// Color for Apple
let activeDot2 = function(x, y){
ctx.fillStyle = "#DC143C";
ctx.fillRect(x * BLOCK, y * BLOCK, BLOCK, BLOCK);
}
Now we have two different functions, defining two different colors. The color of the snake is now defined to be the color green (change in the hex value) and the apple is defined to be red. Now, one other step must be done in order for the colors to be different.
In another part of the code, to paint the food activeDot is called upon. However, we want to change this to activeDot2.
// Paint food
activeDot(food.x, food.y);
// Paint food
activeDot2(food.x, food.y);
A slight, but essential difference. Doing all of this will make both your snake and apple have two different and distinct colors.
Master of Small Changes
Often overlooked, but very important in having a great game, is a compound of small details that make the overall experience much better than it would be without. I’ll provide one example in which you should add to your own game. And that change would be changing the design of your score counter. Be default this code is small, found in the left corner of the screen, and barely noticeable.
<header class="pb-3 mb-4 border-bottom border-primary text-dark">
<p class="fs-4">Snake score: <span id="score_value">0</span></p>
</header>
Instead of having the score be “Snake score: 0,” why not have the score be signified as “🍎: 0” It’s a much simpler and nicer design which conveys the same message. The score/how much food the snake has eaten.
<p class="fs-4">🍎: <span id="score_value">0</span></p>
This itself though is not enough, you have to style this particular to make it look even better.
.fs-4 {
font-size: 40px;
font-weight: bold;
text-align: center;
}
The following code should be added to the style section of your code. This code specifies that .fs-4 (the class being used for our score) should have a large font, bold text, and centered to the middle of the screen. All of this will make the score very prominent, while still in no way being a distraction when playing the game. It’s changes like this that make a good game a great game.
Ending Notes
Both WASD, different colors for your snake and the apple, and bolder snake score is but of the beginning of your endeavor. Consider adding audio, easter eggs, different themes, and a lot of small, meaningful changes. There is so much more to do and I hope you can improve your snake game to be that of wonder.