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;})();
新闻热点
疑难解答
图片精选
