How to create a javascript snake game
This tutorial is for How to create a javascript snake game. Snake is an older classic video game that was first created in the late 70s. This game is about a snake that eats an apple, and its body grows. This game use html5 Canvas. HTML5 canvas is used for game graphics, rendering graphs, art, or other visual images on the fly. snake in control with the cursor keys. If the game is finished, the Game Over image is displayed in the middle of the canvas.
index.html
<!DOCTYPE html>
<html>
<head>
<title>How to create javascript snake game</title>
<style>
canvas {
background: black
}
</style>
<script src="snake.js"></script>
</head>
<body onload="init();">
<h1>Snake game online</h1>
<canvas id="idCanvas" width="500" height="500"></canvas>
<div style="display:none;">
<img id="source" src="gameover.png">
</div>
</body>
</html>snake.js
// How to create javascript snake game
// Author Devnote team
var canvas;
var ctx;
var head;
var apple;
var ball;
var dots;
var apple_x;
var apple_y;
var directionLeft = false;
var directionRight = true;
var directionUp = false;
var directionDown = false;
var gameIn = true;
const DOT_SIZE = 10;
const ALL_DOTS = 900;
const MAX_RAND = 29;
const DELAY = 140;
const C_HEIGHT = 500;
const C_WIDTH = 500;
const LEFT_KEY = 37;
const RIGHT_KEY = 39;
const UP_KEY = 38;
const DOWN_KEY = 40;
var x = new Array(ALL_DOTS);
var y = new Array(ALL_DOTS);
function init() {
canvas = document.getElementById('idCanvas'); // canvas id add
ctx = canvas.getContext('2d');
image = document.getElementById('source');
imagesLoad();
snakeCreate();
appleLocate();
setTimeout("cycleGame()", DELAY);
}
function imagesLoad() {
head = new Image();
head.src = 'reddot.png';
ball = new Image();
ball.src = 'greendot.png';
apple = new Image();
apple.src = 'apple.png';
}
function snakeCreate() {
dots = 3;
for (var z = 0; z < dots; z++) {
x[z] = 50 - z * 10;
y[z] = 50;
}
}
function appleCheck() {
if ((x[0] == apple_x) && (y[0] == apple_y)) {
dots++;
appleLocate();
}
}
function doDrawing() {
ctx.clearRect(0, 0, C_WIDTH, C_HEIGHT);
if (gameIn) {
ctx.drawImage(apple, apple_x, apple_y);
for (var z = 0; z < dots; z++) {
if (z == 0) {
ctx.drawImage(head, x[z], y[z]);
} else {
ctx.drawImage(ball, x[z], y[z]);
}
}
} else {
gameOver();
}
}
function gameOver() {
// ctx.fillStyle = 'white';
// ctx.textBaseline = 'middle';
// ctx.textAlign = 'center';
// ctx.font = 'normal bold 20px serif';
// ctx.fillText('Game over', C_WIDTH/2, C_HEIGHT/2);
ctx.drawImage(image,
canvas.width / 2 - image.width / 2,
canvas.height / 2 - image.height / 2
);
}
function appleCheck() {
if ((x[0] == apple_x) && (y[0] == apple_y)) {
dots++;
appleLocate();
}
}
function move() {
for (var z = dots; z > 0; z--) {
x[z] = x[(z - 1)];
y[z] = y[(z - 1)];
}
if (directionLeft) {
x[0] -= DOT_SIZE;
}
if (directionRight) {
x[0] += DOT_SIZE;
}
if (directionUp) {
y[0] -= DOT_SIZE;
}
if (directionDown) {
y[0] += DOT_SIZE;
}
}
function checkCollision() {
for (var z = dots; z > 0; z--) {
if ((z > 4) && (x[0] == x[z]) && (y[0] == y[z])) {
gameIn = false;
}
}
if (y[0] >= C_HEIGHT) {
gameIn = false;
}
if (y[0] < 0) {
gameIn = false;
}
if (x[0] >= C_WIDTH) {
gameIn = false;
}
if (x[0] < 0) {
gameIn = false;
}
}
function appleLocate() {
var r = Math.floor(Math.random() * MAX_RAND);
apple_x = r * DOT_SIZE;
r = Math.floor(Math.random() * MAX_RAND);
apple_y = r * DOT_SIZE;
}
function cycleGame() {
if (gameIn) {
appleCheck();
checkCollision();
move();
doDrawing();
setTimeout("cycleGame()", DELAY);
}
}
onkeydown = function(e) {
var key = e.keyCode;
if ((key == LEFT_KEY) && (!directionRight)) {
directionLeft = true;
directionUp = false;
directionDown = false;
}
if ((key == RIGHT_KEY) && (!directionLeft)) {
directionRight = true;
directionUp = false;
directionDown = false;
}
if ((key == UP_KEY) && (!directionDown)) {
directionUp = true;
directionRight = false;
directionLeft = false;
}
if ((key == DOWN_KEY) && (!directionUp)) {
directionDown = true;
directionRight = false;
directionLeft = false;
}
};
