首页
所有分类
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 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
JQuery从头学起第三讲
Jul 06 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
jquery事件与绑定事件
Mar 16 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
js实现京东轮播图效果
Jun 30 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
原生js实现弹窗消息动画
Nov 20 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
SRF-22W(1) A254(1) 华普R-96(1) 上海永华(1) 德劲1102(1) SRF-M100(1) 德劲1107(1) 安健(1) YH-R296(1) GF515(1)
You might like
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
php 数据结构之链表队列
2017/10/17 PHP
js实现简单模态窗口，背景灰显
2008/11/14 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
range 标准化之获取
2011/08/28 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
node.js 基于cheerio的爬虫工具的实现（需要登录权限的爬虫工具）
2019/04/10 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
Python3 处理JSON的实例详解
2017/10/29 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
Flask框架信号用法实例分析
2018/07/24 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
Python 创建TCP服务器的方法
2020/07/28 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
英国女士家居服网站：hush
2017/08/09 全球购物
Tarte Cosmetics官网：美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
俄罗斯品牌服装和鞋子在线商店：BRIONITY
2020/03/26 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
黄金搭档广告词
2014/03/21 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
Python办公自动化之Excel（中）
2021/05/24 Python