1 面向对象编程思想在程序项目中有着非常明显的优势:
1- 1 代码可读性高.由于继承的存在，即使改变需求，那么维护也只是在局部模块
1-2 维护非常方便并且成本较低。
2 这个demo是采用了面向对象的编程思想. 用JavaScript 语言编写的游戏小程序--贪吃蛇.
代码注释详细,逻辑清晰 . 非常适合新手前端开发者, 锻炼JavaScript语言的面向对象的编程思想.
该小Demo已上传GitHub,欢迎下载! 觉得好的话,随手给个star, 您的star是我最大的动力!
-经典面向对象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> </div> <button>模拟蛇吃到食物</button> <script src="https://www.jb51.net/tool.js"></script> <script src="https://www.jb51.net/food.js"></script> <script src="https://www.jb51.net/snake.js"></script> <script src="https://www.jb51.net/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 构造蛇对象