JS实现简易版贪吃蛇小游戏

来源：动视网责编：小采时间：2020-11-27 15:25:06

JS实现简易版贪吃蛇小游戏

JS实现简易版贪吃蛇小游戏:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>新建网页</title> <meta http-equiv="Content-Type" c

推荐度：

点击下载本文 文档为doc格式

导读JS实现简易版贪吃蛇小游戏:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>新建网页</title> <meta http-equiv="Content-Type" c

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <title>新建网页</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="description" content=""/>
 <meta name="keywords" content=""/>

 <script type="text/javascript">
 //① 绘制地图
 function Map() {
 //私有成员(不会随便发生变化)
 var w = 800;
 var h = 400;

 //成员方法，绘制地图
 this.showmap = function () {
 //创建p、设置css样式、追加给body
 var tu = document.createElement('p');

 tu.style.width = w + "px";
 tu.style.height = h + "px";
 tu.style.backgroundImage = "url(./12.jpg)";

 document.body.appendChild(tu);
 }
 }

 //② 绘制食物
 function Food() {
 var len = 20;
 //把食物(权值)坐标声明为公开的，以便在外部访问
 this.xFood = 0;
 this.yFood = 0;
 this.piece = null; //页面上唯一的食物对象
 //绘制
 this.showfood = function () {
 //创建p、设置css样式、追加给body
 if (this.piece === null) {
 this.piece = document.createElement('p');
 this.piece.style.width = this.piece.style.height = len + "px";
 this.piece.style.backgroundColor = "green";
 this.piece.style.position = "absolute";

 document.body.appendChild(this.piece);
 }
 //食物设置绝对定位(position/left/top)
 //食物位置“随机”摆放
 //移动步进值：20px
 //食物“权值”坐标： X轴(0-39) Y轴(0-19) 
 //食物真实坐标：权值坐标 * 步进值
 this.xFood = Math.floor(Math.random() * 40); //0-39的随机数
 this.yFood = Math.floor(Math.random() * 20); //0-19的随机数

 this.piece.style.left = this.xFood * len + "px";
 this.piece.style.top = this.yFood * len + "px";

 }
 }

 //③ 小蛇
 function Snake() {
 var len = 20;
 this.redirect = "right"; //默认向右边移动
 //后期snakebody要变化，因此声明为公开的(每个蛇节：[x坐标，y坐标，颜色，蛇节对象])
 this.snakebody = [[0, 1, 'green', null], [1, 1, 'green', null], [2, 1, 'green', null], [3, 1, 'red', null]];
 //a.绘制小蛇
 this.showsnake = function () {
 //遍历小蛇的各个蛇节，并依次创建即可
 for (var i = 0; i < this.snakebody.length; i++) {
 //this.snakebody[i]//代表每个蛇节
 //创建蛇节p
 if (this.snakebody[i][3] === null) {//判断没有创建对应的蛇节
 this.snakebody[i][3] = document.createElement('p');
 //设置css样式(宽度、高度、颜色)
 this.snakebody[i][3].style.width = this.snakebody[i][3].style.height = len + "px";
 this.snakebody[i][3].style.backgroundColor = this.snakebody[i][2];
 //绝对定位及位置
 this.snakebody[i][3].style.position = "absolute";
 //把蛇节追加给body
 document.body.appendChild(this.snakebody[i][3]);
 }
 this.snakebody[i][3].style.left = this.snakebody[i][0] * len + "px";
 this.snakebody[i][3].style.top = this.snakebody[i][1] * len + "px";
 }
 }

 //b.移动小蛇
 this.movesnake = function () {
 //非蛇头蛇节(当前蛇节的新坐标 是"下个蛇节"的旧坐标)
 for (var i = 0; i < this.snakebody.length - 1; i++) {
 this.snakebody[i][0] = this.snakebody[i + 1][0];
 this.snakebody[i][1] = this.snakebody[i + 1][1];
 }
 if (this.redirect == "right") {
 //蛇头x坐标递增
 this.snakebody[this.snakebody.length - 1][0] += 1;
 }
 if (this.redirect == "left") {
 //蛇头x坐标递减
 this.snakebody[this.snakebody.length - 1][0] -= 1;
 }
 if (this.redirect == "up") {
 //蛇头y坐标递减
 this.snakebody[this.snakebody.length - 1][1] -= 1;
 }
 if (this.redirect == "down") {
 //蛇头y坐标递增
 this.snakebody[this.snakebody.length - 1][1] += 1;
 }

 //判断蛇头碰到食物
 //蛇头坐标
 var xSnake = this.snakebody[this.snakebody.length - 1][0];
 var ySnake = this.snakebody[this.snakebody.length - 1][1];
 //食物坐标food.xFood/food.yFood;
 if (xSnake == food.xFood && ySnake == food.yFood) {
 //吃食物增加蛇节
 var newjie = [this.snakebody[0][0], this.snakebody[0][1], 'green', null];
 this.snakebody.unshift(newjie);//把newjie放到数组的第一个位置去

 //原食物消失，重新生成一个食物
 food.showfood();
 }

 //控制小蛇在地图范围内移动
 if (xSnake < 0 || xSnake > 39 || ySnake < 0 || ySnake > 19) {
 alert('game over');
 clearInterval(mytime);
 return false;
 }
 //吃到自己判断(蛇头坐标与其他蛇节坐标一致)
 for (var k = 0; k < this.snakebody.length - 1; k++) {
 if (this.snakebody[k][0] == xSnake && this.snakebody[k][1] == ySnake) {
 alert('game over kill you by yourself');
 clearInterval(mytime);
 return false;
 }
 }

 //根据新坐标绘制小蛇
 this.showsnake();
 }
 }

 window.onload = function () {
 var map = new Map();
 map.showmap();

 food = new Food();//声明为全局的以便在该加载事件函数外部访问
 food.showfood();

 snake = new Snake();//声明为全局的snake对象
 snake.showsnake();

 //移动小蛇
 //setInterval(全局变量，时间)
 mytime = setInterval("snake.movesnake()", 200);

 //设置键盘事件，控制器小蛇移动方向
 document.onkeydown = function (evt) {
 var num = evt.keyCode;//通过事件对象获得数值码，进而知道被触发键子
 if (num == 38) {
 snake.redirect = "up";
 }
 if (num == 40) {
 snake.redirect = "down";
 }
 if (num == 37) {
 snake.redirect = "left";
 }
 if (num == 39) {
 snake.redirect = "right";
 }
 }
 }
 </script>

 <style type="text/css">
 body {
 margin: 0;
 }
 </style>
</head>
<body></body>
</html>

本文展示了JS实现简易版贪吃蛇小游戏的相关代码，更多相关内容请关注喷绘Gxl网。
相关推荐：

简易 PHP+MySQL 分页类

HTML转Excel，并实现打印，下载功能

两个不用递归的树形数组构造函数