JavaScript面向对象编程小游戏---贪吃蛇

最新推荐文章于 2020-12-03 15:54:02 发布

邢晋宇

最新推荐文章于 2020-12-03 15:54:02 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_36017081/article/details/80397783

版权

本文介绍了使用JavaScript进行面向对象编程实现的经典小游戏——贪吃蛇的详细过程，主要涉及对象构造、运动逻辑和碰撞检测等核心概念。

摘要由CSDN通过智能技术生成

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 =