数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

JavaScript面向对象编程小游戏---贪吃蛇代码实例

来源:脚本之家  责任编辑:小易  

1 面向对象编程思想在程序项目中有着非常明显的优势:
1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块
1-2 维护非常方便并且成本较低。

​2 这个demo是采用了面向对象的编程思想. 用JavaScript 语言编写的游戏小程序--贪吃蛇.
​ 代码注释详细,逻辑清晰 . 非常适合新手前端开发者, 锻炼JavaScript语言的面向对象的编程思想. 
该小Demo已上传GitHub,欢迎下载!  觉得好的话,随手给个star,  您的star是我最大的动力!

https://github.com/XingJYGo/snakePlay#javascript-经典面向对象demo-贪吃蛇

代码展示:
代码结构:
--index.html 地图页面,展示蛇和食物,进行游戏
--food.js   构造食物对象
--game.js   构造游戏对象
--snake.js   构造蛇对象
--tool.js   常用数据工具封装

--index.html 地图页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  #map{
   width: 500px;
   height: 500px;
   background-color: lightblue;
   position: relative;
  }
  
 </style>
</head>
<body>
<div id="map">
 
</div>
<button id="btn">模拟蛇吃到食物</button>
<script src="tool.js"></script>
<script src="food.js"></script>
<script src="snake.js"></script>
<script src="game.js"></script>
<script>
 
////==========前后方向设定后 ==================
var game = new Game();
game.start();
 
 
 
</script>
 
</body>
</html>

--food.js   构造食物对象

// 封装一个食物对象
//沙箱模式
(function(){
 var container; //用于存储之前的食物
 function Food(option) {
  //防止用户不传参数会报错
  option = option || {};
  this.width = option.width || 20;
  this.height = option.height || 20;
  this.bgc = option.bgc || 'orange';
  this.x = option.x || 0;
  this.y = option.y || 0;
  this.borderRadius = option.borderRadius |10;
 }
 
 Food.prototype.render = function () {
  //每一次渲染新的之前就把原来的移除掉
  if(container){
   map.removeChild(container);
  }
  // 创建食物对象
  var food = document.createElement('div');
  //存到全局变量里
  container = food;
  food.style.width = this.width + 'px';
  food.style.height = this.height + 'px';
  food.style.backgroundColor = this.bgc;
  food.style.position = 'absolute';
   //获得随机位置
   //由于要让食物的位置在每一个格子里面,所有获取随机数的算法要重新计算
  this.x = Tool.getRandom(0, (map.offsetWidth/ this.width-1)) * this.width;
  this.y = Tool.getRandom(0, (map.offsetHeight/ this.height-1)) * this.height;
  food.style.left = this.x + 'px';
  food.style.top = this.y + 'px';
  food.style.borderRadius = this.borderRadius + 'px';
  //渲染上食物
  map.appendChild(food);
 }
 
 //因为要在全局使用Food,需要把Food拿到全局中
 window.Food = Food;
})();

--game.js   构造游戏对象

(function () {
//  1 由于游戏对象要控制蛇和食物,
//   所以游戏对象应该拥有蛇的实例和食物的实例
  //存储定时器的id
  var timeid;
  function Game() {
    this.snake = new Snake();
    this.food = new Food();
  }
 
  //2 开始游戏
  Game.prototype.start = function () {
    this.snake.render();
    this.food.render();
 
    // 2-1 游戏一开始,蛇和食物就渲染出来
    timeid = setInterval(function () {
      //2-2 -1 蛇的数据改变
      this.snake.move();
      // 2-3 判断蛇是否到达边界
      var snakeHead = this.snake.body[0];
      //2-3-1 求蛇头可以移动的水平/垂直坐标的最大位置
      var maxX = map.offsetWidth/this.snake.width -1;
      var maxY = map.offsetHeight/this.snake.height -1;
      if (snakeHead.x <0 ||snakeHead.x > maxX ||snakeHead.y <0 ||snakeHead.y > maxY){
        clearInterval(timeid);
        alert("gave over");
        //注:当X超出范围,代码应立即终止,
        // 防止2-2-2 渲染出下一个盒子.展示出来
        return;
      }
 
 
      //2-4 蛇吃食物
      //依据: 蛇头的坐标 和 食物的坐标重合
      var snakeX = snakeHead.x * this.snake.width;
      var snakeY = snakeHead.y * this.snake.height;
      var foodX = this.food.x;
      var foodY = this.food.y;
 
      //如果符合条件, 证明吃到了食物
       if (snakeX === foodX && snakeY === foodY){
         // 2-4-1 食物消失, 渲染新食物
         this.food.render();
         // 2-4-2 蛇,变长
         //  其实就是往snake.body.push个新对象
         //  bug: 为了解决新添加蛇节闪下的问题, 把蛇的最后一节对象,作为新的对象.
         var last = this.snake.body[this.snake.body.length -1];
         this.snake.body.push({
           x:last.x,
           y:last.y,
           col:last.col
         })
         // this.snake.body.push(last);
         // 注:last本身已经在数组中了,
       }
      //2-2 -2渲染到页面上,真正看到的蛇动起来
      this.snake.render();
 
    }.bind(this), 150)
 
    // 3 给页面注册键盘按下的事件
    // 3-1 监听用户是否按下了上,下,左,右的按键
 
    document.onkeydown = function(e){
      // console.log(this);
      e = e || window.event;
      console.log(e.keyCode);
      // 左37 上38 右39  下40
      switch(e.keyCode){
 
        case 37:
          //3-11 需要找到蛇,修改蛇的direction属性
          //防止原地掉头
          if(this.snake.direction === 'right'){
            return;
          }
          this.snake.direction = 'left';
          break;
        case 38:
          if(this.snake.direction === 'bottom'){
            return;
          }
          this.snake.direction = 'top';
          break;
        case 39:
          if(this.snake.direction === 'left'){
            return;
          }
          this.snake.direction = 'right';
          break;
        case 40:
          if(this.snake.direction === 'top') return; //如果if中只有一行代码就可以不写花括号,然后这一行代码要紧跟在if后面记得加分号
          this.snake.direction = 'bottom';
          break;
 
      }
    }.bind(this);
 
 
 
  };
 
  //2-2 蛇变量赋予全局
  window.Game = Game;
 
})();

--snake.js   构造蛇对象

(function () {
  var arr = []; //用于存储蛇的每一节数据
 
  // 1 创建蛇对象
  function Snake(option) {
    option = option || {};
    this.width = option.width || 20;
    this.height = option.height || 20;
    this.body = [
      {x: 3, y: 2, col: 'green'},//蛇头的位置和颜色
      {x: 2, y: 2, col: 'orange'},//蛇头身体的位置和颜色
      {x: 1, y: 2, col: 'orange'}];
    this.direction = option.direction || 'right';
  }
 
 
  //2 渲染蛇的方法
  Snake.prototype.render = function () {
    // 2-3 为了防止多个sanke渲染到页面上,一渲染之前先清除掉原来的
    for (var i = 0; i < arr.length; i++) {
      map.removeChild(arr[i]);//移除页面上的蛇节
    }
    arr.splice(0,arr.length);//蛇节都被移除掉了,那么数组中也应该都移除.
 
    //2-1 根据body中的个数,动态的创建蛇节
    this.body.forEach(function (item, index) {
      //2-0 动态的创建蛇节
      var snakeNode = document.createElement('div');
      //2-4 遍历添加蛇节新数据
      arr.push(snakeNode);
      snakeNode.style.width = this.width + 'px';
      snakeNode.style.height = this.height + 'px';
      snakeNode.style.position = 'absolute';
      snakeNode.style.left = item.x * this.width + 'px';
      snakeNode.style.top = item.y * this.height + 'px';
      snakeNode.style.backgroundColor = item.col;
      map.appendChild(snakeNode);
 
    }.bind(this))
    //  2-2 上面的this是在snake里面,指向snake.`
    //  否则,默认指向window
  };
 
 
 
  //3 蛇移动的方法:body 头数组赋值给身体.
  Snake.prototype.move = function () {
    //3-1 蛇后面的数据给前面
    for (var i = this.body.length -1; i >0; i--) {
      this.body[i].x = this.body[i - 1].x;
      this.body[i].y = this.body[i - 1].y;
    }
  //  3-2暂时蛇头往右走
  //   this.body[0].x +=1;
  //
  //3-2蛇头一定的位置,要根据蛇的方向来决定
    switch(this.direction){
 
      case 'left':
        this.body[0].x -= 1;
        break;
      case 'right':
        this.body[0].x += 1;
        break;
      case 'top':
        this.body[0].y -= 1;
        break;
      case 'bottom':
        this.body[0].y += 1;
        break;
    }
  };
 
 
 
  //赋予全局变量
  window.Snake = Snake;
})();

--tool.js   常用数据工具封装

//用于存放一些常用的功能性的函数
 
//  function getRandom(){
//
// }
var Tool = {
 //获取min - max之间的随机整数
 getRandom: function(min, max){
  return Math.floor(Math.random() * (max - min + 1)) + min;
 }
}
 
// Tool.getRandom()

以上所述是小编给大家介绍的JavaScript贪吃蛇的实现详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:


  • 本文相关:
  • 20行js代码实现的贪吃蛇小游戏
  • 纯原生js实现贪吃蛇游戏
  • js实现贪吃蛇小游戏(容易理解)
  • js贪吃蛇游戏实现思路和源码
  • js编写“贪吃蛇”的小游戏
  • javascript编写贪吃蛇游戏
  • 原生js实现的贪吃蛇网页版游戏完整实例
  • javascript实现简单的贪吃蛇游戏
  • javascript贪吃蛇完整版(源码)
  • js写的贪吃蛇游戏(个人练习)
  • 浅谈js数据类型判断与数组判断
  • javascript算法题:求任意一个1-9位不重复的n位数在该组合中的大
  • js 针对html dom元素操作等经验累积
  • 浅谈如何使用 webpack 优化资源
  • javascript与css3动画结合使用小结
  • 谈谈为什么你的 javascript 代码如此冗长
  • js去除浏览器默认底图的方法
  • javascrip关于继承的小例子
  • 网页挂马方式整理及详细介绍
  • 新发现原来documenet.url也可以实现页面跳转
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved