Native JavaScript Realizes Snake Game
- 2021-09-12 00:11:02
- OfStack
This article example for everyone to share the JavaScript implementation of the snake game specific code, for your reference, the specific content is as follows
1. HTML part, there are very few things
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Greedy snake </title>
<style>
*{
margin: 0px;
padding: 0px;
}
td{
border-radius: 30%;
}
</style>
</head>
<body>
<script type="text/javascript" src="./snake.js"></script>
</body>
</html>
2. JavaScript section
var arrayBox = new Array(); // Store cells
var arraySnake = new Array(); // Store snakes
var food; // Food
var snakeHead; // Snake head
var key = true; // Determine whether the page needs initialization
var timekey; // Motion timer constant
function newGame() {
bgInit();
arrayBoxInit();
initSnake();
randomFood();
}
newGame();
document.onclick = function () {
if (key) {
gameStart(arraySnake);
key = false;
}
}
// Initializes the cell array of the record
function arrayBoxInit() {
for (var y = 0; y < 20; y++) {
arrayBox[y] = new Array();
for (var x = 0; x < 20; x++) {
arrayBox[y][x] = 0;
}
}
}
// Background initialization
function bgInit() {
var table = document.createElement("table");
table.style = "border-spacing:0px; border:1px solid #3c3c3c;margin:10% auto";
for (var y = 0; y < 20; y++) {
var tr = document.createElement("tr");
for (var x = 0; x < 20; x++) {
var td = "<td class='box-" + y + "-" + x + "' style='width: 20px; height: 20px;'></td>";
tr.innerHTML += td;
}
table.appendChild(tr);
}
document.body.insertBefore(table, document.getElementsByTagName("script")[0]);
}
// Initialization snake
function initSnake() {
var x = Math.floor(Math.random() * 20);
var y = Math.floor(Math.random() * 20);
var initA = document.getElementsByClassName("box-" + y + "-" + x)[0];
snakeHead = initA; // Snake head
var b = initBFn(x, y);
var initB = document.getElementsByClassName(b)[0];
arraySnake.push(initB);
arraySnake.push(initA);
initA.style.backgroundColor = "#9c9c9c";
initB.style.backgroundColor = "#9c9c9c";
arrayBox[y][x] = 1;
arrayBox[b.split("-")[1]][b.split("-")[2]] = 1;
}
// Initialize snake body
function initBFn(x, y) {
if (x != 19 && x != 0) {
if (y != 19 && y != 0) {
if (Math.random() > 0.5) {
if (Math.random() > 0.5) {
return "box-" + y + "-" + (x + 1);
} else {
return "box-" + y + "-" + (x - 1);
}
} else {
if (Math.random() > 0.5) {
return "box-" + (y + 1) + "-" + x;
} else {
return "box-" + (y - 1) + "-" + x;
}
}
} else if (y == 0) {
if (Math.random() > 0.5) {
return "box-0-" + (x + 1);
} else {
return "box-0-" + (x - 1);
}
} else if (y == 19) {
if (Math.random() > 0.5) {
return "box-19-" + (x + 1);
} else {
return "box-19-" + (x - 1);
}
}
} else if (x == 0) {
if (y != 19 && y != 0) {
if (Math.random() > 0.5) {
return "box-" + (y + 1) + "-0";
} else {
return "box-" + (y - 1) + "-0";
}
} else if (y == 0) {
if (Math.random() > 0.5) {
return "box-1-0";
} else {
return "box-0-1";
}
} else if (y == 19) {
if (Math.random() > 0.5) {
return "box-18-0";
} else {
return "box-19-1";
}
}
} else if (x == 19) {
if (y != 19 && y != 0) {
if (Math.random() > 0.5) {
return "box-" + (y + 1) + "-19";
} else {
return "box-" + (y - 1) + "-19";
}
} else if (y == 0) {
if (Math.random() > 0.5) {
return "box-1-19";
} else {
return "box-0-18";
}
} else if (y == 19) {
if (Math.random() > 0.5) {
return "box-18-19";
} else {
return "box-19-18";
}
}
}
}
// Randomly produce food food
function randomFood() {
var x = Math.floor(Math.random() * 20);
var y = Math.floor(Math.random() * 20);
if (!arrayBox[y][x]) {
document.getElementsByClassName("box-" + y + "-" + x)[0].style = "background-color:#9c9c9c;border-radius:50%";
arrayBox[y][x] = 1;
food = document.getElementsByClassName("box-" + y + "-" + x)[0];
} else {
addSnakeLength();
}
}
// Start the game
function gameStart(arraySnake) {
var Ax = arraySnake[1].className.split("-")[2];
var Ay = arraySnake[1].className.split("-")[1];
var Bx = arraySnake[0].className.split("-")[2];
var By = arraySnake[0].className.split("-")[1];
if (Ay == By) {
if (Ax > Bx) {
moveRight();
} else {
moveLeft()
}
} else {
if (Ay > By) {
moveDown()
} else {
moveUp()
}
}
}
// Initialize movement, (direction: right, left, up and down)
function moveRight() {
timekey = setInterval(function () {
var nextBox = document.getElementsByClassName("box-" + arraySnake[arraySnake.length - 1].className.split("-")[1] + "-" + (parseInt(arraySnake[arraySnake.length - 1].className.split("-")[2]) + 1))[0];
if (nextBox) {
arrayBox[arraySnake[arraySnake.length - 1].className.split("-")[1]][(parseInt(arraySnake[arraySnake.length - 1].className.split("-")[2]) + 1)] = 1;
nextBox.style.backgroundColor = "#9c9c9c";
arraySnake.push(nextBox);
arrayBox[arraySnake[0].className.split("-")[1]][arraySnake[0].className.split("-")[2]] = 0;
arraySnake[0].style.backgroundColor = "#fff";
arraySnake.shift();
eatFood();
}
}, 200);
}
function moveLeft() {
timekey = setInterval(function () {
var nextBox = document.getElementsByClassName("box-" + arraySnake[arraySnake.length - 1].className.split("-")[1] + "-" + (parseInt(arraySnake[arraySnake.length - 1].className.split("-")[2]) - 1))[0];
if (nextBox) {
arrayBox[arraySnake[arraySnake.length - 1].className.split("-")[1]][(parseInt(arraySnake[arraySnake.length - 1].className.split("-")[2]) - 1)] = 1;
nextBox.style.backgroundColor = "#9c9c9c";
arraySnake.push(nextBox);
arrayBox[arraySnake[0].className.split("-")[1]][arraySnake[0].className.split("-")[2]] = 0;
arraySnake[0].style.backgroundColor = "#fff";
arraySnake.shift();
eatFood();
}
}, 200);
}
function moveUp() {
timekey = setInterval(function () {
var nextBox = document.getElementsByClassName("box-" + (parseInt(arraySnake[arraySnake.length - 1].className.split("-")[1]) - 1) + "-" + arraySnake[arraySnake.length - 1].className.split("-")[2])[0];
if (nextBox) {
arrayBox[(parseInt(arraySnake[arraySnake.length - 1].className.split("-")[1]) - 1)][arraySnake[arraySnake.length - 1].className.split("-")[2]] = 1;
nextBox.style.backgroundColor = "#9c9c9c";
arraySnake.push(nextBox);
arrayBox[arraySnake[0].className.split("-")[1]][arraySnake[0].className.split("-")[2]] = 0;
arraySnake[0].style.backgroundColor = "#fff";
arraySnake.shift();
eatFood();
}
}, 200);
}
function moveDown() {
timekey = setInterval(function () {
var nextBox = document.getElementsByClassName("box-" + (parseInt(arraySnake[arraySnake.length - 1].className.split("-")[1]) + 1) + "-" + arraySnake[arraySnake.length - 1].className.split("-")[2])[0];
if (nextBox) {
arrayBox[(parseInt(arraySnake[arraySnake.length - 1].className.split("-")[1]) + 1)][arraySnake[arraySnake.length - 1].className.split("-")[2]] = 1;
nextBox.style.backgroundColor = "#9c9c9c";
arraySnake.push(nextBox);
arrayBox[arraySnake[0].className.split("-")[1]][arraySnake[0].className.split("-")[2]] = 0;
arraySnake[0].style.backgroundColor = "#fff";
arraySnake.shift();
eatFood();
}
}, 200);
}
// Keyboard operation turning
document.addEventListener("keydown", function (e) {
if (e.code == "ArrowDown") {
turnDown();
} else if (e.code == "ArrowUp") {
turnUp();
} else if (e.code == "ArrowLeft") {
turnLeft();
} else if (e.code == "ArrowRight") {
turnRight();
}
}, false);
// Downturn
function turnDown() {
if (arraySnake[arraySnake.length - 1].className.split("-")[1] == arraySnake[arraySnake.length - 2].className.split("-")[1]) {
clearInterval(timekey);
moveDown();
}
}
// Downturn
function turnUp() {
if (arraySnake[arraySnake.length - 1].className.split("-")[1] == arraySnake[arraySnake.length - 2].className.split("-")[1]) {
clearInterval(timekey);
moveUp();
}
}
// Turn left
function turnLeft() {
if (arraySnake[arraySnake.length - 1].className.split("-")[2] == arraySnake[arraySnake.length - 2].className.split("-")[2]) {
clearInterval(timekey);
moveLeft();
}
}
// Turn right
function turnRight() {
if (arraySnake[arraySnake.length - 1].className.split("-")[2] == arraySnake[arraySnake.length - 2].className.split("-")[2]) {
clearInterval(timekey);
moveRight();
}
}
// Snakes eat food
function eatFood() {
var temp = food;
if (arrayBox[food.className.split("-")[1]][food.className.split("-")[2]] == 0) {
randomFood();
addSnakeLength(temp);
}
}
// Increase the length at the tail of the snake
function addSnakeLength(temp) {
arraySnake.unshift(temp);
}
Knock down the whole process alone, knock for more than two hours, the basic functions have been realized, because there is no reference to anything, so there are many, many places that need to be optimized, please like it
More interesting classic game implementation topics, share with you:
C + + Classic Games Summary
python Classic Games Summary
python Tetris Game Collection
JavaScript classic games can't stop playing
java Classic Games Summary
javascript Classic Games Summary