全国服务热线:4008-888-888

技术知识

怎么制作小程序_原生JavaScript完成贪吃蛇游戏

原生JavaScript实现贪吃蛇游戏       这篇文章主要为大家详细介绍了原生JavaScript实现贪吃蛇游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下

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;
 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; // 判断页面是否需要初始化
var timekey; // 运动定时器常量
function newGame() {
 bgInit();
 arrayBoxInit();
 initSnake();
 randomFood();
newGame();
document.onclick = function () {
 if (key) {
 gameStart(arraySnake);
 key = false;

var table = document.createElement("table"); table.style = "border-spacing:0px; border:1px solid #3c3c3c;margin:10% auto"; for (var y = 0; y y++) { var tr = document.createElement("tr"); for (var x = 0; x x++) { var td = " td class='box-" + y + "-" + x + "' /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"; // 随机产生食物食物 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()
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); // 增加长度在蛇尾 function addSnakeLength(temp) { arraySnake.unshift(temp); }

全程独自敲下来,敲了两个多小时,基本功能都实现了,由于没有参考任何东西,所以有很多很多需要优化的地方,点个赞吧

更多有趣的经典小游戏实现专题,分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服