原生JavaScript實(shí)現(xiàn)貪吃蛇游戲
更新時(shí)間：2020年11月04日 08:27:34 作者：perkzAN27Xy
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)貪吃蛇游戲的具體代碼，供大家參考，具體內(nèi)容如下
1.HTML部分，東西很少
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>貪吃蛇</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部分
var arrayBox = new Array(); // 存放單元格
var arraySnake = new Array(); // 存放蛇
var food; // 食物
var snakeHead; // 蛇頭
var key = true; // 判斷頁(yè)面是否需要初始化
var timekey; // 運(yùn)動(dòng)定時(shí)器常量
function newGame() {
bgInit();
arrayBoxInit();
initSnake();
randomFood();
}
newGame();
document.onclick = function () {
if (key) {
gameStart(arraySnake);
key = false;
}
}
// 記錄的單元格數(shù)組初始化
function arrayBoxInit() {
for (var y = 0; y < 20; y++) {
arrayBox[y] = new Array();
for (var x = 0; x < 20; x++) {
arrayBox[y][x] = 0;
}
}
}
// 背景初始化
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]);
}
// 初始化蛇
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; //蛇頭
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;
}
// 初始化蛇身
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";
}
}
}
}
// 隨機(jī)產(chǎn)生食物食物
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();
}
}
// 開始游戲
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()
}
}
}
// 初始化運(yùn)動(dòng)，（方向：右左上下）
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);
}
// 鍵盤操作拐彎
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);
// 下拐
function turnDown() {
if (arraySnake[arraySnake.length - 1].className.split("-")[1] == arraySnake[arraySnake.length - 2].className.split("-")[1]) {
clearInterval(timekey);
moveDown();
}
}
// 下拐
function turnUp() {
if (arraySnake[arraySnake.length - 1].className.split("-")[1] == arraySnake[arraySnake.length - 2].className.split("-")[1]) {
clearInterval(timekey);
moveUp();
}
}
// 左拐
function turnLeft() {
if (arraySnake[arraySnake.length - 1].className.split("-")[2] == arraySnake[arraySnake.length - 2].className.split("-")[2]) {
clearInterval(timekey);
moveLeft();
}
}
// 右拐
function turnRight() {
if (arraySnake[arraySnake.length - 1].className.split("-")[2] == arraySnake[arraySnake.length - 2].className.split("-")[2]) {
clearInterval(timekey);
moveRight();
}
}
// 蛇吃食物
function eatFood() {
var temp = food;
if (arrayBox[food.className.split("-")[1]][food.className.split("-")[2]] == 0) {
randomFood();
addSnakeLength(temp);
}
}
// 增加長(zhǎng)度在蛇尾
function addSnakeLength(temp) {
arraySnake.unshift(temp);
}
全程獨(dú)自敲下來，敲了兩個(gè)多小時(shí)，基本功能都實(shí)現(xiàn)了，由于沒有參考任何東西，所以有很多很多需要優(yōu)化的地方，點(diǎn)個(gè)贊吧
更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript 實(shí)現(xiàn)拖拽效果組件功能(兼容移動(dòng)端)
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)拖拽效果組件功能(兼容移動(dòng)端),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
OpenLayers3實(shí)現(xiàn)地圖鷹眼以及地圖比例尺的添加
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)地圖鷹眼以及地圖比例尺的添加，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
復(fù)選框全選與全不選操作實(shí)現(xiàn)思路
通過js簡(jiǎn)單實(shí)現(xiàn)下復(fù)選框全選與全不選，很常用的一個(gè)操作，具體實(shí)現(xiàn)思路及代碼如下，有需求的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
使用戶點(diǎn)擊后退按鈕使效三行代碼...2007-07-07
我最開始寫過一個(gè)富交互的頁(yè)面，其中的JavaScript代碼包含了很多html標(biāo)簽2012-09-09
ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法總結(jié)
echarts是我們經(jīng)常用到的數(shù)據(jù)可視化圖形,但是后端反饋給我們的數(shù)據(jù)經(jīng)常是數(shù)組包對(duì)象的集合類型,下面這篇文章主要給大家介紹了關(guān)于ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法,需要的朋友可以參考下2022-11-11
JavaScrip數(shù)組刪除特定元素的幾種方法總結(jié)
從js數(shù)組中刪除指定元素是我們每個(gè)人都遇到的問題，網(wǎng)上這方面的資料也很多，但有的時(shí)間過于久遠(yuǎn)，有的內(nèi)容不夠全面，所以自己來整理下，這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScrip數(shù)組刪除特定元素的多種方法，需要的朋友可以參考下。2017-09-09
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)多選框的操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
JavaScript代碼判斷點(diǎn)擊第幾個(gè)按鈕
javascript點(diǎn)擊按鈕需求，在項(xiàng)目開發(fā)過程中經(jīng)常遇到，本文通過一段代碼給大家分享javascript代碼判斷點(diǎn)擊第幾個(gè)按鈕，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2015-12-12