我用端午假期写了个贪吃蛇，学弟玩的不亦乐乎！附（思路注释+源码）

学弟玩法：（蚯蚓找妈）

我的玩法：（王母摇头）

模块化开发

为什么要用面向对象写，有三大特性：封装、继承、多态。

为什么要封装 ： 实现模块化开发，封装为一个块一个块的，利于维护，有某个模块出现bug只用修改这个模块，其他模块不受影响。在工作中，开发速度快，同时开发模块。

分三个模块写：地图，食物，蛇。

蛇模块分为：定义蛇、蛇移动、蛇死亡、蛇吃食物、蛇移动方向、蛇显示。

地图模块：

创建地图板块，设置样式

function Map() {// 创建一个divthis.map = document.createElement('div')this.setStyle(this.map, {width: "700px",height: '500px',border: "10px solid #ccc",backgroundColor: "#abcdef",position: "relative"})// 将div放到body中document.body.appendChild(this.map)}// 添加一个设置样式的函数Map.prototype.setStyle = function (ele, styleObj) {for (var attr in styleObj) {ele.style[attr] = styleObj[attr]}}// 添加一个获取随机数的方法Map.prototype.getRandom = function (a, b = 0) {var max = Math.max(a, b);var min = Math.min(a, b)return Math.floor(Math.random() * (max - min)) + min}var m = new Map()

食物模块：

1. 创建食物div
2. 放入到地图中
3. 随机产生食物的范围，随机位置函数

    function Food() {// 创建一个小divthis.food = document.createElement('div')m.setStyle(this.food, {width: "10px",height: "10px",backgroundColor: "blue",position: "absolute",left: parseInt(m.getRandom(m.map.clientWidth - 10) / 10) * 10 + 'px',top: parseInt(m.getRandom(m.map.clientHeight - 10) / 10) * 10 + 'px',})// 放到地图中m.map.appendChild(this.food)}var f = new Food()

定义蛇模块：

1. 蛇由多个div组成，蛇头样式和蛇身区分设置
2. 初始蛇大小由三个div组成，蛇移动以后，创建三个新的div给蛇，删除原有的三个div
3. 随着蛇吃食物，组成蛇的div越多，根据原来的身体的位置，多加相应的div
4. 每个div都是一个对象组成，由left top坐标组成
5. 蛇移动方向默认是向右移动

function Snake() {// 属性// 身体this.body = [{x: 0,y: 0},{x: 10,y: 0},{x: 20,y: 0},{x: 30,y: 0},{x: 40,y: 0},{x: 50,y: 0}]this.direction = 'right'this.timer = null// 让蛇显示的方法this.show()// 改变蛇移动的方向方法this.changeDirection()}// 初始化方法Snake.prototype.init = function () {// 移动方法this.timer = setInterval(() => {this.move()}, 100)}// 蛇移动的方法Snake.prototype.move = function () {// 根据方向移动// 先移动除了蛇头的其他身体for (var i = 0; i < this.body.length - 1; i++) { // 少循环一次，把蛇头排除了// 注意：这里是复杂数据类型赋值，赋的是地址// this.body[i] = this.body[i+1]this.body[i].x = this.body[i + 1].xthis.body[i].y = this.body[i + 1].y}

蛇移动模块：

1. 移动时，当前蛇div坐标就是上一个蛇div的坐标
2. 先移动其他身体，最后再移动蛇头，身体不能跑到蛇头的位置
3. 改变蛇头方向

Snake.prototype.move = function () {// 根据方向移动// 先移动除了蛇头的其他身体for (var i = 0; i < this.body.length - 1; i++) { // 少循环一次，把蛇头排除了// 注意：这里是复杂数据类型赋值，赋的是地址// this.body[i] = this.body[i+1]this.body[i].x = this.body[i + 1].xthis.body[i].y = this.body[i + 1].y}// 根据方向改变蛇头switch (this.direction) {case 'right':this.body[this.body.length - 1].x += 10break;case 'left':this.body[this.body.length - 1].x -= 10;break;case 'up':this.body[this.body.length - 1].y -= 10break;case 'down':this.body[this.body.length - 1].y += 10break;}this.show()// 检测是否迟到食物this.eat()// 检测是否死亡this.die()}

蛇死亡模块：

1. 蛇撞墙死、和蛇撞自己身体死
2. 蛇的left 和top 大于地图的右边界和下边界，判断撞墙
3. 身体div的x和蛇头div的x相等 或 身体div的y和蛇头div的y相等，蛇撞自己

Snake.prototype.die = function () {// 撞墙if (this.body[this.body.length - 1].x < 0 || this.body[this.body.length - 1].y < 0 || this.body[this.body.length - 1].x > m.map.clientWidth - 10 || this.body[this.body.length - 1].y > m.map.clientHeight - 10) {clearInterval(this.timer)alert('GAME OVER')}// 撞自己身体for (var i = 0; i < this.body.length - 1; i++) {if (this.body[i].x === this.body[this.body.length - 1].x && this.body[i].y === this.body[this.body.length - 1].y) {clearInterval(this.timer)alert('GAME OVER')break;}}}// 蛇吃食物的方法Snake.prototype.eat = function () {// 蛇头和食物的坐标重合就是吃到了if (this.body[this.body.length - 1].x === f.food.offsetLeft && this.body[this.body.length - 1].y === f.food.offsetTop) {// 从开头添加一节身体this.body.unshift({x: this.body[0].x,y: this.body[0].y})// 让食物删除并重新创建食物m.map.removeChild(f.food)// 重新创建食物f = new Food()}}

蛇吃食物模块：

1. 蛇头如果和食物重叠，就吃到食物了，
2. 注意设置蛇移动大小的像素和食物生成位置的坐标，需要让蛇和食物能重叠
3. 蛇吃到食物后，删除食物div，再生成随机坐标的新食物

  Snake.prototype.eat = function () {// 蛇头和食物的坐标重合就是吃到了if (this.body[this.body.length - 1].x === f.food.offsetLeft && this.body[this.body.length - 1].y === f.food.offsetTop) {// 从开头添加一节身体this.body.unshift({x: this.body[0].x,y: this.body[0].y})// 让食物删除并重新创建食物m.map.removeChild(f.food)// 重新创建食物f = new Food()}}

https://blog.csdn.net/weixin_44070254/article/details/117846779

改变蛇移动方向模块：

1. 设置蛇移动方向对应的键盘按键码

 Snake.prototype.changeDirection = function () {document.onkeydown = e => {var e = e || window.event;var keycode = e.keyCode || e.which;// console.log(keycode);var keyword = String.fromCharCode(keycode).toLowerCase()switch (keyword) {case 'a':this.direction = 'left'break;case 'd':this.direction = 'right';break;case 'w':this.direction = 'up';break;case 's':this.direction = 'down';break;}}}

蛇显示模块：

1. 每一节身体div设置大小10个像素，应该和食物一样大
2. 设置蛇的样式 蛇头蛇身颜色和坐标
3. 蛇放入地图中
4. 先删除原来的身体，再显示新的身体

Snake.prototype.show = function () {// 先删除原来的身体再显示新的身体var snakes = document.querySelectorAll('.snake')if (snakes.length) {for (var i = 0; i < snakes.length; i++) {m.map.removeChild(snakes[i])}}// 根据身体数组创建div，设置坐标for (var i = 0; i < this.body.length; i++) {var div = document.createElement('div')div.className = 'snake'm.setStyle(div, {width: "10px",height: "10px",backgroundColor: "#000",position: "absolute",left: this.body[i].x + "px",top: this.body[i].y + "px"})// 放到地图中m.map.appendChild(div)if (i === this.body.length - 1) {m.setStyle(div, {backgroundColor: "red",borderRadius: "50%"})}}}

源码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>document</title>
</head><body><button>开始</button>
</body>
<script>// 地图function Map() {// 创建一个divthis.map = document.createElement('div')this.setStyle(this.map, {width: "700px",height: '500px',border: "10px solid #ccc",backgroundColor: "#abcdef",position: "relative"})// 将div放到body中document.body.appendChild(this.map)}// 添加一个设置样式的函数Map.prototype.setStyle = function (ele, styleObj) {for (var attr in styleObj) {ele.style[attr] = styleObj[attr]}}// 添加一个获取随机数的方法Map.prototype.getRandom = function (a, b = 0) {var max = Math.max(a, b);var min = Math.min(a, b)return Math.floor(Math.random() * (max - min)) + min}var m = new Map()// 食物function Food() {// 创建一个小divthis.food = document.createElement('div')m.setStyle(this.food, {width: "10px",height: "10px",backgroundColor: "blue",position: "absolute",left: parseInt(m.getRandom(m.map.clientWidth - 10) / 10) * 10 + 'px',top: parseInt(m.getRandom(m.map.clientHeight - 10) / 10) * 10 + 'px',})// 放到地图中m.map.appendChild(this.food)}var f = new Food()// 蛇function Snake() {// 属性// 身体this.body = [{x: 0,y: 0},{x: 10,y: 0},{x: 20,y: 0},{x: 30,y: 0},{x: 40,y: 0},{x: 50,y: 0}]this.direction = 'right'this.timer = null// 让蛇显示的方法this.show()// 改变蛇移动的方向方法this.changeDirection()}// 初始化方法Snake.prototype.init = function () {// 移动方法this.timer = setInterval(() => {this.move()}, 100)}// 蛇移动的方法Snake.prototype.move = function () {// 根据方向移动// 先移动除了蛇头的其他身体for (var i = 0; i < this.body.length - 1; i++) { // 少循环一次，把蛇头排除了// 注意：这里是复杂数据类型赋值，赋的是地址// this.body[i] = this.body[i+1]this.body[i].x = this.body[i + 1].xthis.body[i].y = this.body[i + 1].y}// 根据方向改变蛇头switch (this.direction) {case 'right':this.body[this.body.length - 1].x += 10break;case 'left':this.body[this.body.length - 1].x -= 10;break;case 'up':this.body[this.body.length - 1].y -= 10break;case 'down':this.body[this.body.length - 1].y += 10break;}this.show()// 检测是否迟到食物this.eat()// 检测是否死亡this.die()}// 蛇死亡的方法Snake.prototype.die = function () {// 撞墙if (this.body[this.body.length - 1].x < 0 || this.body[this.body.length - 1].y < 0 || this.body[this.body.length - 1].x > m.map.clientWidth - 10 || this.body[this.body.length - 1].y > m.map.clientHeight - 10) {clearInterval(this.timer)alert('GAME OVER')}// 撞自己身体for (var i = 0; i < this.body.length - 1; i++) {if (this.body[i].x === this.body[this.body.length - 1].x && this.body[i].y === this.body[this.body.length - 1].y) {clearInterval(this.timer)alert('GAME OVER')break;}}}// 蛇吃食物的方法Snake.prototype.eat = function () {// 蛇头和食物的坐标重合就是吃到了if (this.body[this.body.length - 1].x === f.food.offsetLeft && this.body[this.body.length - 1].y === f.food.offsetTop) {// 从开头添加一节身体this.body.unshift({x: this.body[0].x,y: this.body[0].y})// 让食物删除并重新创建食物m.map.removeChild(f.food)// 重新创建食物f = new Food()}}// 改变移动方向Snake.prototype.changeDirection = function () {document.onkeydown = e => {var e = e || window.event;var keycode = e.keyCode || e.which;// console.log(keycode);var keyword = String.fromCharCode(keycode).toLowerCase()switch (keyword) {case 'a':this.direction = 'left'break;case 'd':this.direction = 'right';break;case 'w':this.direction = 'up';break;case 's':this.direction = 'down';break;}}}// 让蛇显示的方法Snake.prototype.show = function () {// 先删除原来的身体再显示新的身体var snakes = document.querySelectorAll('.snake')if (snakes.length) {for (var i = 0; i < snakes.length; i++) {m.map.removeChild(snakes[i])}}// 根据身体数组创建div，设置坐标for (var i = 0; i < this.body.length; i++) {var div = document.createElement('div')div.className = 'snake'm.setStyle(div, {width: "10px",height: "10px",backgroundColor: "#000",position: "absolute",left: this.body[i].x + "px",top: this.body[i].y + "px"})// 放到地图中m.map.appendChild(div)if (i === this.body.length - 1) {m.setStyle(div, {backgroundColor: "red",borderRadius: "50%"})}}}var s = new Snake()document.querySelector('button').onclick = function () {s.init()}
</script></html>

觉得博主总结的不错的，可以收藏支持一波~

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！