javascript实现贪吃蛇。

最新推荐文章于 2022-09-26 17:12:15 发布

heyanmeicomeon

最新推荐文章于 2022-09-26 17:12:15 发布

阅读量307

点赞数

文章标签： dom

本文链接：https://blog.csdn.net/heyanmeicomeon/article/details/38561013

版权

看完javascript，知识点都是碎的，所以用javascript写了贪吃蛇。当然，前提是先理解了老师的算法思想。因为对dom不熟悉。先从模仿开始。有些知识点我没有理解的时候，我一般就会不用，然后到后面遇到问题才明白这个知识点的用意。

<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script>
var map;
var food;
var snake;
var timer;
//地图类
function Map() {
this.width = 800;
this.height = 400;
this.backgroundColor = '#cccccc';
this.position = 'absolute';
this.divObj = null;

this.create = function () {
  //奇怪，局部变量属性就不能出来提示？
  this.divObj = document.createElement('div');
  //alert(DivObj.tagName);
  this.divObj.style.width = this.width;
  this.divObj.style.height = this.height;
  this.divObj.style.backgroundColor = this.backgroundColor;
  this.divObj.style.position = this.position;

  document.getElementsByTagName('body')[0].appendChild(this.divObj);
}
}
//食物类
function Food() {
this.width = 20;
this.height = 20;
this.backgroundColor = 'green';
this.position = 'absolute';
this.divFood = null;
this.x = null;
this.y = null;

this.create = function() {
  if(this.divFood == null)
   this.divFood = document.createElement('div');

  this.divFood.style.width = this.width;
  this.divFood.style.height = this.height;
  this.divFood.style.backgroundColor = this.backgroundColor;
  this.divFood.style.position = this.position;
  //alert(parseInt(Math.random(47)*40)*this.width);
  this.x = parseInt(Math.random(47)*40);
  this.y = parseInt(Math.random(47)*20);
  this.divFood.style.left = this.x * this.width;
  this.divFood.style.top = this.y * this.height;



  map.divObj.appendChild(this.divFood);
}
}
//蛇类
function Snake() {
this.width = 20;
this.height = 20;
this.position = 'absolute';
this.bodys = [[4,2,'red','false',null],[3,2,'blue','false',null]];
this.direction = null;
        //刷新蛇
this.create = function () {
  //alert(this.bodys.length);
  for(var i = 0; i < this.bodys.length; i++) {
   if(this.bodys[i][3] == 'false') {
   this.bodys[i][4] = document.createElement('div');
   this.bodys[i][3] = 'true';
   }
   //alert(this.bodys[i][3]);
   this.bodys[i][4].style.width = this.width;
   this.bodys[i][4].style.height = this.height;
   this.bodys[i][4].style.left = this.width * this.bodys[i][0];
   this.bodys[i][4].style.top = this.height * this.bodys[i][1];
   this.bodys[i][4].style.position = this.position;
   this.bodys[i][4].style.backgroundColor = this.bodys[i][2];
   map.divObj.appendChild(this.bodys[i][4]);
  }
}

this.receiveCode = function (code) {
  this.direction = code;
}
//蛇移动
this.move = function () {
  for(var i = this.bodys.length - 1; i > 0; i --) {
   this.bodys[i][0] = this.bodys[i - 1][0];
   this.bodys[i][1] = this.bodys[i - 1][1];
   //alert(this.bodys[i][0] + "...." + this.bodys[i][1]);
  }
  switch(this.direction) {
   case 38:
    //this.direction = 'up';
    this.bodys[0][1] = this.bodys[0][1] - 1;
    break;
   case 40:
    //this.direction = 'down';
    this.bodys[0][1] = this.bodys[0][1] + 1;
    break;
   case 37:
    //this.direction = 'left';
    this.bodys[0][0] = this.bodys[0][0] - 1;
    break;
   case 39:
    //this.direction = 'right';
    this.bodys[0][0] += 1;
    break;

  }
  //吃掉食物
  //alert(this.bodys[0][0] + "...." + this.bodys[0][1] + "kkk");
  if((this.bodys[0][0] == food.x)&&(this.bodys[0][1] == food.y)) {
   //alert("好吃");
   var x = this.bodys[this.bodys.length-1][0];
   var y = this.bodys[this.bodys.length-1][1];
   this.bodys.push([x,y,'blue','false',null]);
   food.create();
  }
  //撞墙
  if((this.bodys[0][0] <= 0) || (this.bodys[0][0] >= 40) || (this.bodys[0][1]

<= 0) || (this.bodys[0][1] >= 20)) {
   alert("撞了");
   clearTimeout(timer);
  }
  else
   this.create();
}
}
window.onload = function () {

map = new Map();
food = new Food();
snake = new Snake();

map.create();
food.create();
snake.create();

document.onkeydown = function () {
  var code = event.keyCode;
  snake.receiveCode(code);
  //定时器。这个有点意思，里面的函数不能有自定义参数
  if(timer == null)
  timer = setInterval("snake.move()",200);
}
}