首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生JavaScript实现贪吃蛇游戏

Posted in Javascript onNovember 04, 2020

本文实例为大家分享了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;
 }
 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; // 判断页面是否需要初始化
var timekey; // 运动定时器常量

function newGame() {
 bgInit();
 arrayBoxInit();
 initSnake();
 randomFood();
}

newGame();
document.onclick = function () {
 if (key) {
  gameStart(arraySnake);
  key = false;
 }
}



// 记录的单元格数组初始化
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";
   }
  }
 }
}

// 随机产生食物食物
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()
  }
 }
}


// 初始化运动，（方向：右左上下）
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);
 }
}
// 增加长度在蛇尾
function addSnakeLength(temp) {
 arraySnake.unshift(temp);
}

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

原生JavaScript实现贪吃蛇游戏

- Author -

perkzAN27Xy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
JS实现横向轮播图（中级版）
Jan 18 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 #Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 #Javascript
解决vant-UI库修改样式无效的问题
Nov 03 #Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 #Javascript
如何在vue中使用百度地图添加自定义覆盖物（水波纹）
Nov 03 #Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 #Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 #Javascript
Android Studio(4) 迪杰斯特拉(1) 优先队列(1) Dijkstra(1) 三角函数(1) MyBatis(5) nacos(1) Carbon(1) seata(1) 动态代理(1)
You might like
php 缩略图实现函数代码
2011/06/23 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
python实现bitmap数据结构详解
2014/02/17 Python
深入浅析Python字符编码
2015/11/12 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
Python @property及getter setter原理详解
2020/03/31 Python
python如何判断IP地址合法性
2020/04/05 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
Expedia西班牙：预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
建筑工程专业毕业生自荐信
2013/10/19 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
三方合作协议书范本
2014/04/18 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书