js实现网页版贪吃蛇游戏

使用原生 js 实现贪吃蛇小游戏,首先这个 小游戏的目录结构如下: 有 贪吃蛇 , 食物 ,地图 ,还有 游戏

当我们在浏览器打开 index.html 的时候,会出现 移动的小蛇 ,随机生成的食物(这里只有一个,当前食物被吃掉,才会初始化下一个),用户通过键盘上的方向键控制小蛇移动的方向

当小蛇触碰到了墙,即画布边缘的时候,游戏结束!

接下来就是代码实现啦 ~

食物模块

//食物的自调用函数
 (function(){

 //创建一个数组 来存放元素
 var elements=[];

 //食物就是一个对象 有宽 有高 有颜色 有横纵坐标 先有构造函数 然后创建对象
 function Food(width,height,color,x,y){
 //元素的宽和高 默认20
 this.width=width||20;
 this.height=height||20;
 //元素的颜色 默认绿色
 this.color=color||"green";
 //元素的横纵坐标 默认为0
 this.x=x||0;
 this.y=y||0;
 }

 //为元素添加初始化的方法 最好放原型里 公用 在页面上显示 所以需要map
 Food.prototype.init=function(map) {
 //先删除食物
 //外部无法访问的函数
 remove();
 // 创建元素
 var div=document.createElement("div");
 // 把元素追加到map中
 map.appendChild(div);
 // 设置元素的样式 宽 高 颜色
 div.style.width=this.width+"px";
 div.style.height=this.height+"px";
 div.style.backgroundColor=this.color;
 //先脱离文档流
 div.style.position="absolute";
 //横纵坐标随机产生的
 this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;
 this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
 //元素的横纵坐标
 div.style.left=this.x+"px";
 div.style.top=this.y+"px";

 //把div元素追加到elements数组中
 elements.push(div);
 }; 

 //私有的函数 删除食物的
 function remove(){
 //elements数组中有这个食物
 for(var i=0;i<elements.length;i++){
  var ele=elements[i];
  //找到这个食物的父级元素 从地图上删除食物
  ele.parentNode.removeChild(ele);
  //删除数组的div元素 在i处删除一项
  elements.splice(i,1);
 }
 }

 //把Food暴露给window
 window.Food=Food;
 }());

小蛇模块

//小蛇的自调用函数
 (function(){

 //定义一个数组 存放小蛇
 var elements=[];

 // 小蛇的构造函数
 function Snake(width,height,direction){
 //每个部分的宽和高
 this.width=width||20;
 this.height=height||20;
 //小蛇的身体部分
 this.body=[
  {x:3,y:2,color:"red"},//小蛇的头部
  {x:2,y:2,color:"orange"},//小蛇的身体
  {x:1,y:2,color:"orange"}//小蛇的身体
 ];
 //方向
 this.direction=direction||"right";
 }

 //通过原型添加方法,给小蛇添加初始化方法
 Snake.prototype.init=function(map){
 remove();
 //循环遍历
 for(var i=0;i<this.body.length;i++){
  //每一个数组元素都是一个对象
  var obj=this.body[i];
  //创建div
  var div=document.createElement("div");
  //追加到map中
  map.appendChild(div);
  //设置div的样式
  div.style.position="absolute";
  div.style.width=this.width+"px";
  div.style.height=this.height+"px";
  //横纵坐标
  div.style.left=obj.x*this.width+"px";
  div.style.top=obj.y*this.height+"px";
  //背景颜色
  div.style.backgroundColor=obj.color;
  //方向暂定
  //把div追加到elements数组中 目的是为了删除
  elements.push(div);
 }
 };

 //通过原型添加move方法
 Snake.prototype.move=function(food,map) {
 //小蛇的身体部分 把前一个的横纵坐标给下一个
 var i=this.body.length-1;
 //逆序循环
 for(;i>0;i--){
  this.body[i].x=this.body[i-1].x;
  this.body[i].y=this.body[i-1].y;
 }

 // 判断方向 改变小蛇的头部的坐标
 switch(this.direction){
  case "right":
  this.body[0].x+=1;
  break;
  case "left":
  this.body[0].x-=1;
  break;
  case "top":
  this.body[0].y-=1;
  break;
  case "bottom":
  this.body[0].y+=1;
  break;
 }

 //判断有没有吃到食物
 //小蛇的头的坐标和食物的坐标一致
 var headX=this.body[0].x*this.width;
 var headY=this.body[0].y*this.height;
 //判断小蛇的头部坐标和食物的坐标是否相同
 if(headX==food.x&&headY==food.y){
  //获取小蛇的最后的尾巴
  var last=this.body[this.body.length-1];
  //加入到数组中 以对象的方式加入
  this.body.push({
  x:last.x,
  y:last.y,
  color:last.color
  });
  //把食物删除 初始化食物
  food.init(map);
 }
 };

 //添加私有的删除函数
 function remove(){
 var i=elements.length-1;
 //逆序 找到这个元素的父元素 删除
 for(;i>=0;i--){
  var ele=elements[i];
  //从地图上删除元素
  ele.parentNode.removeChild(ele);
  //从数组中删除
  elements.splice(i,1);
 }
 }

 //把Snake暴露给window
 window.Snake=Snake;
 }());

游戏模块

//游戏的自调用函数
 (function(){

 var that=null;
 //游戏的构造函数
 function Game(map){
 this.food=new Food();//食物对象
 this.snake=new Snake();//小蛇对象
 this.map=map;//地图
 that=this;//保留当前的实例对象到that变量中 此时that 就是this
 }

 //游戏初始化
 Game.prototype.init=function(){
 //食物初始化
 this.food.init(this.map);
 //小蛇初始化
 this.snake.init(this.map);//先让小蛇显示
 //调用设置小蛇移动的方法
 this.runSnake(this.food,this.map);
 //调用按键的方法
 this.bindKey();
 };

 //添加原型函数 设置小蛇可以自由移动
 Game.prototype.runSnake=function(food,map){
 //此时的this是实例对象
 //setInterval 方法是通过window调用的 this指向改变了
 var timeId=setInterval(function(){
  this.snake.move(food,map);
  this.snake.init(map);
  //横坐标的最大值 map的属性在style标签中
  var maxX=map.offsetWidth/this.snake.width;
  //纵坐标的最大值
  var maxY=map.offsetHeight/this.snake.height;
  var headX=this.snake.body[0].x;
  var headY=this.snake.body[0].y;
  // 横坐标方向的检测
  if(headX<0||headX>=maxX){
  //撞墙了 停止定时器
  clearInterval(timeId);
  alert("游戏结束");
  }
  //纵坐标方向的检测
  if(headY<0||headY>=maxY){
  //撞墙了 停止定时器
  clearInterval(timeId);
  alert("游戏结束");
  }
 }.bind(that),200);//绑定到that中 即实例对象
 };

 //获取用户的按键 改变小蛇的方向
 Game.prototype.bindKey=function(){
 //这里的this 应该是触发keydown事件的对象 --document
 //所以这里的this就是document
 //获取用户的按键
 document.addEventListener("keydown",function(e){
  switch(e.keyCode){
  case 37:
  this.snake.direction="left";
  break;
  case 38:
  this.snake.direction="top";
  break;
  case 39:
  this.snake.direction="right";
  break;
  case 40:
  this.snake.direction="bottom";
  break;
  }
 }.bind(that),false);//绑定实例对象
 };

 //暴露给window
 window.Game=Game;
 }());

主页面

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>贪吃蛇</title>
 <style>
 .map {
 width: 1800px;
 height: 800px;
 background-color: gray;
 position: relative;
 margin: 0 auto;
 }
 </style>
</head>
<body>
 <!-- 画出地图 设置样式 -->
 <div class="map"></div>
 <script src="../js/food.js"></script>
 <script src="../js/snake.js"></script>
 <script src="../js/game.js"></script>
 <script>

 //初始化游戏对象
 var game=new Game(document.querySelector(".map"));
 //初始化游戏
 game.init();
 </script>
</body>
</html>

小编还为大家准备了精彩的专题:javascript经典小游戏汇总

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

(0)

相关推荐

  • 原生js实现的贪吃蛇网页版游戏完整实例

    本文实例讲述了原生js实现的贪吃蛇网页版游戏.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生js写的贪吃蛇网页版游戏</title> </head> <body> </body> <sc

  • javascript实现简单的贪吃蛇游戏

    javascript实现简单的贪吃蛇游戏,功能很简单,代码也很实用,就不多废话了,小伙伴们参考注释吧. <html> <head> <meta http-equiv='content-type' content='text/html;charset=utf-8'> <title>贪吃蛇</title> <script type="text/javascript"> var map; //地图 var snake;

  • js贪吃蛇网页版游戏特效代码分享(挑战十关)

    js贪吃蛇网页版游戏特效,经测试图片切换过程非常酷,相信大家一定都玩过这个经典小游戏吧,但是它是怎么实现的呐,感兴趣的朋友快来学习学习吧 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js贪吃蛇网页版游戏特效代码如下 <body><title>js贪吃蛇网页版游戏特效</title></body> <script>

  • JS实现的贪吃蛇游戏完整实例

    本文实例讲述了JS实现的贪吃蛇游戏.分享给大家供大家参考,具体如下: 思想: 1.设计蛇:属性有宽.高.方向.状态(有多少节),方法:显示,跑 2.设计食物:属性宽.高 3.显示蛇:根据状态向地图里加元素 4.蛇跑起来:下一节到前一节的位置,蛇头根据方向变,删除原来的蛇,新建蛇:当出界时,死亡,初始化:当蛇头吃到自己的时候,死亡,初始化 5.食物被吃掉,蛇加一节,去掉原来的食物,生成新的食物 6.添加定时器,绑定按键 完整示例: <!doctype html> <html lang=&q

  • 纯原生js实现贪吃蛇游戏

    本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>贪吃蛇游戏</title> <style type="text/css"> * { margin: 0; padding: 0;

  • javascript贪吃蛇完整版(源码)

    javascript贪吃蛇完整版 注释完整,面向对象 复制代码 代码如下: <html><head>    <title>贪吃蛇 Snake v2.4</title><style>    body{        font-size:9pt;    }    table{        border-collapse: collapse;        border:solid #333 1px;    }    td{        heigh

  • JS写的贪吃蛇游戏(个人练习)

    JS贪吃蛇游戏,个人练习之用,放在这备份一下,   复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS贪吃蛇-练习</t

  • JavaScript编写一个贪吃蛇游戏

    写的比较乱,有个逻辑错误:蛇吃了果果后应该是蛇尾加一节,写成了蛇头部增加一节- -. 可用键盘的上下左右键操作: 效果图: 代码如下: <html> <head> <title> 贪吃蛇 </title> <style type="text/css"> body{margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:n

  • js贪吃蛇游戏实现思路和源码

    本文实例为大家分享了js贪吃蛇游戏的相关代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇小游戏</title> <style> *{margin:0; padding:0;} header { display: block; margin: 0 auto;

  • javascript编写贪吃蛇游戏

    代码很简单,这里就不多BB了,小伙伴们直接看示例吧 <!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

随机推荐