Snake贪吃蛇小游戏纯js代码

Snake贪吃蛇小游戏纯js代码
先给个效果图，一样的简单而又纯朴，回归贪吃蛇最原始的状态

还是先分析一下，使用面向对象编程真的降低了编程的难度（只要前期把思路想好，各个类，属性，方法抽象出来），就真的蛮简单的了（开玩笑）。
贪吃蛇分析一哈，里面有什么呢（蛇、食物嗯嗯嗯好像没了。。。），确实蛮好想的哈（此处我应该发我的表情包）；最后把整个游戏再包装成一个Game对象，再来一个必备的工具类Tools，分析结束，完美撒花（表情包，想象一下）。
下面就上代码了。
等等忘了分析对象里面的方法了
简单说一下，（像宽，高，颜色这些必备且简单的就不提了）
蛇snake : rander渲染方法、move移动、remove删除（移动之后，删除原来渲染的）
食物food： rander渲染，remover删除（蛇吃了，之后删除）
game: start(调用snake,food的渲染方法统一渲染)，SnakeMove（游戏内蛇的运动）解释的好片面。。。再加一个bindKey（键盘绑定事件，上下左右）,就这样吧累了。
首先还是html代码,就简单的一个div

index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Greedy Snake贪吃蛇</title><link rel="stylesheet" href="./css/index.css">
</head>
<body><div class="map"></div><script src="./js/Tools.js"></script><script src="./js/food.js"></script><script src="./js/snake.js"></script><script src="./js/game.js"></script><script src="./js/main.js"></script>
</body>
</html>

css代码
index.css啥都没有（蛇、食物的css通过js设置）

 *{margin: 0;padding: 0;}.map{position: relative;width: 800px;height: 800px;border: 10px solid rgb(114, 111, 111);background-color: rgb(196, 189, 189);margin: 20px auto;}

js代码（大头。。。头大），所有类全被立即执行函数包裹，这样会形成一个局部作用域，不会在全局暴露太多东西，安全可靠，点赞（window，undefined）为啥这样传，百度一下，你就知道。
tools.js工具人/类

 (function (window, undefined) {var Tools = {getRandom: function (min, max) {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值  }}window.Tools = Tools;})(window, undefined)

snake.js蛇类

(function (window, undefined) {var ps = 'absolute';function Snake(target) {// 对参数target数据类型进行判断target = target instanceof Object ? target : {};// 设置属性this.width = target.width || 20;this.height = target.height || 20;this.section = [{x: 3,y: 2,color: 'red'},{x: 2,y: 2,color: 'green'},{x: 1,y: 2,color: 'green'}];// 开始方向this.direction = 'right';this.eles = [];}// rander渲染Snake.prototype.rander = function (map) {var section = this.section;for (var i = 0; i < section.length; i++) {var ele = document.createElement('div');ele.style.width = this.width + 'px';ele.style.height = this.height + 'px';ele.style.left = section[i].x * this.width + 'px';ele.style.top = section[i].y * this.height + 'px';ele.style.backgroundColor = section[i].color;ele.style.position = ps;this.eles.push(ele);// 渲染map.appendChild(ele);}}// Snake运动Snake.prototype.move = function () {// 遍历蛇身，使每一节的位置变为上一节for (var i = this.section.length - 1; i > 0; i--) {this.section[i].x = this.section[i - 1].x;this.section[i].y = this.section[i - 1].y;}var head = this.section[0];switch (this.direction) {case "right":head.x++;break;case "left":head.x--;break;case "top":head.y--;break;case "bottom":head.y++;break;}}// Snake的removeSnake.prototype.remove = function (map) {for (var i = this.eles.length - 1; i >= 0; i--) {map.removeChild(this.eles[i]);}this.eles = [];}// 暴露出Snake window.Snake = Snake;
})(window, undefined)

food.js食物类

(function (window, undefined) {// 食物定位var ps = 'absolute';// Food食物构造函数function Food(target) {// 对参数target数据类型进行判断target = target instanceof Object ? target : {};// 设置属性this.width = target.width || 20;this.height = target.height || 20;this.left = this.width || 0;this.top = this.height || 0;this.color = target.color || 'green';// 存食物this.eles = [];}// rander渲染到map上Food.prototype.rander = function (map) {this.left = Tools.getRandom(0, map.clientWidth / this.width) * this.width || 0;this.top = Tools.getRandom(0, map.clientHeight / this.height) * this.height || 0;// 创建食物elevar ele = document.createElement('div');ele.style.width = this.width + 'px';ele.style.height = this.height + 'px';ele.style.left = this.left + 'px';ele.style.top = this.top + 'px';ele.style.backgroundColor = this.color;ele.style.position = ps;this.eles.push(ele);// 渲染map.appendChild(ele);}// 食物删除removeFood.prototype.remove = function (map, i) {map.removeChild(this.eles[i]);this.eles.splice(i, 1);}window.Food = Food;
})(window, undefined);

game.js把蛇和食物封装起来形成game对象/类

(function (window, undefined) {// 存放this指针var that;function Game(map) {this.food = new Food;this.snake = new Snake;this.map = map;// 存放this指针that = this;}// Game渲染Game.prototype.start = function () {this.food.rander(this.map);this.food.rander(this.map);this.food.rander(this.map);this.snake.rander(this.map);SnakeMove();bindKey();}function SnakeMove() {var timer = setInterval(function () {that.snake.move();that.snake.remove(that.map);that.snake.rander(that.map);// 蛇头最大位置var maxX = that.map.clientWidth / that.snake.width * that.snake.width;var maxY = that.map.clientHeight / that.snake.height * that.snake.height;// 蛇头位置var bx = that.snake.section[0].x * that.snake.width;var by = that.snake.section[0].y * that.snake.height;// 多个食物的情况for (var i = 0; i < that.food.eles.length; i++) {// console.log(that.food.eles[i].offsetLeft);if (that.food.eles[i].offsetLeft === bx && that.food.eles[i].offsetTop === by) {that.food.remove(that.map, i);that.food.rander(that.map);var last = that.snake.section[that.snake.section.length - 1];// console.log(that.snake.section);that.snake.section.push({x: last.x,y: last.y,color: last.color})}}// 游戏结束条件if (bx < 0 || bx > maxX || by < 0 || by > maxY) {clearInterval(timer);alert('Game Over');}}, 150);}// 绑定键盘事件function bindKey() {document.onkeydown = function (e) {switch (e.keyCode) {case 37:that.snake.direction = 'left';break;case 38:that.snake.direction = 'top';break;case 39:that.snake.direction = 'right';break;case 40:that.snake.direction = 'bottom';break;}}}window.Game = Game;
})(window, undefined);

最后main.js执行游戏，通过game实例对象。。。完结撒花

(function (window, undefined) {var map = document.querySelector('.map');var game = new Game(map);game.start();
})(window, undefined);

Snake贪吃蛇小游戏纯js代码相关推荐

贪吃蛇小游戏java实现代码分析
贪吃蛇小游戏java实现代码分析贪吃蛇的小游戏,网上的代码比较多,今天周五,在教研室没啥事做,在电脑中发现了一个贪吃蛇的小游戏,于是就看了下实现的源码,发现别人写的代码确实挺好的,自己也是边加注释边 ...
python简易贪吃蛇小游戏任务书含代码
目录第一章绪论 1.1 开发的背景 1.2 开发的目的 1.3 开发的意义 1.4 开发工具简介第二章需求分析 (1) 利用方向键来改变蛇的运行方向. (2) 在随机的地方产生食物. (3 ...
c++编写手机小游戏代码_C++代码实现贪吃蛇小游戏
本文实例为大家分享了C++实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 1.游戏描述贪吃蛇可谓是从小玩到大的经典趣味小游戏,蛇每吃到一次食物,身体就会长一节,如果撞到墙或者撞到自身,游戏结束 ...
安卓c语言自动补全软件吾爱,C语言实现贪吃蛇小游戏
本文实例为大家分享了C语言实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下一.程序实现的原理: 1.构造蛇身:定义一个坐标数组,存放的是蛇的每一节蛇身所在的坐标位置.这样就将移动蛇身的操作转换为 ...
简易贪吃蛇小游戏java版_用GUI实现java版贪吃蛇小游戏
本文实例为大家分享了java版贪吃蛇小游戏的具体代码,供大家参考,具体内容如下项目结构新建一个JFrame窗口,作为程序入口 public class GameStart{ public stat ...
用 Java 实现贪吃蛇小游戏
程序说明这是一个用 Java Awt 实现的贪吃蛇小游戏的完整代码算法分析 (一)启动一个独立线程根据 direction 重绘面板实现蛇身移动效果,运行过程: 记录上次头部的坐标到 tempBo ...
基于Linux ncurses图形库的贪吃蛇小游戏
达者为先师者之意基于Linux ncurses图形库的贪吃蛇小游戏前言 1 ncurses库程序的标准模式 2 ncurses库的常用函数 3 基于Linux ncurses图形库的贪吃蛇小游 ...
100行代码，使用 Pygame 制作一个贪吃蛇小游戏！
作者 | 周萝卜来源 | 萝卜大杂烩相信我们大家都玩过贪吃蛇游戏,今天我们就从头一起来写一个贪吃蛇小游戏,只需要100多行的代码就完成了. 用到的 Pygame 函数贪吃蛇小游戏用到的函数功能 ...
python 贪吃蛇小游戏代码_10分钟再用Python编写贪吃蛇小游戏
Python编写贪吃蛇前不久我们公众号发布了一篇C++编写贪吃蛇小游戏的推文,反响空前.看来大家对这类简单易上手小游戏还是很喜爱的. 恰逢2018年IEEE Spectrum编程语言排行榜新鲜出炉, ...

Snake贪吃蛇小游戏纯js代码

Snake贪吃蛇小游戏纯js代码相关推荐

最新文章

热门文章