<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         #map {

             width: 800px;

             height: 600px;

             background-color: grey;

             position: relative;

         }

     </style>

 </head>

 <body>

 <div id="map"></div>

 <script src="common.js"></script>

 <script>

     (function Food(x, y, width, height, color) {

             var elements = [];

             Food.prototype.init = function (map) {

                 //调用这个函数是为了防止多次初始化带来多个食物的效果

                 remove();

                 var div = document.createElement("div");

                 map.appendChild(div);

                 div.style.backgroundColor = this.color;

                 div.style.width = this.width + "px";

                 div.style.height = this.height + "px";

                 div.style.position = "absolute";

                 this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width;

                 this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height;

                 div.style.left = this.x + "px";

                 div.style.top = this.y + "px";

                 elements.push(div);

             }

             //删除div 函数   思路：利用之前elements数组存储的元素 找到它的父级元素 也就是map 再用map把elements中的小方块删掉

             function remove() {

                 for (var i = 0; i < elements.length; i++) {

                     var ele = elements[i];

                     ele.parentNode.removeChild(ele);

                     elements.splice(i, 1);

                 }

             }

             this.x = x;

             this.y = y;

             this.width = width || 20;

             this.height = height || 20;

             this.color = color || "green";

             window.Food = Food;

         }()

     );

     (function Snake(width, height, direction) {

             var elements = [];

             this.width = width || 20;

             this.height = height || 20;

             this.body = [

                 {x: 3, y: 2, color: "red"},

                 {x: 2, y: 2, color: "orange"},

                 {x: 1, y: 2, color: "orange"},

             ];

             //小蛇移动的方向

             this.direction = direction || "right";

             Snake.prototype.init = function (map) {

                 remove();

                 for (var i = 0; i < this.body.length; i++) {

                     var div = document.createElement("div");

                     map.appendChild(div);

                     div.style.position = "absolute";

                     div.style.width = this.width + "px";

                     div.style.height = this.height + "px";

                     div.style.left = this.body[i].x * this.width + "px";

                     div.style.top = this.body[i].y * this.height + "px";

                     div.style.backgroundColor = this.body[i].color;

                     elements.push(div);

                 }

                 function remove() {

                     var i = elements.length - 1;

                     for (; i >= 0; i--) {

                         var ele = elements[i];

                         ele.parentNode.removeChild(ele);

                         elements.splice(i, 1);

                     }

                 }

             }

             Snake.prototype.move = function (map, food) {

                 var i = this.body.length - 1;

                 for (; i > 0; i--) {

                     this.body[i].x = this.body[i - 1].x;

                     this.body[i].y = this.body[i - 1].y;

                 }

                 var headX = this.body[0].x * this.width;

                 var headY = this.body[0].y * this.height;

                 if (headX == food.x && headY == food.y) {

                     var last = this.body[this.body.length - 1];

                     this.body.push(

                         {

                             x: last.x,

                             y: last.y,

                             color: last.color

                         }

                     );

                     food.init(map);

                 }

                 switch (this.direction) {

                     case "left":

                         this.body[0].x -= 1;

                         break;

                     case "right":

                         this.body[0].x += 1;

                         break;

                     case "top":

                         this.body[0].y -= 1;

                         break;

                     case "bottom":

                         this.body[0].y += 1;

                         break;

                 }

             }

             window.Snake = Snake;

         }()

     );

     (function () {

             var that = null;

             function Game(map) {

                 this.food = new Food();

                 this.snake = new Snake();

                 this.map = map;

                 that = this;

                 Game.prototype.init = function (map) {

                     this.food.init(this.map);

                     this.snake.init(this.map);

                     this.bindkey();

                     var maxX = that.map.offsetWidth / that.snake.width;

                     var maxY = that.map.offsetHeight / that.snake.height;

                     var timeid = setInterval(function () {

                         if (that.snake.body[0].x >= maxX || that.snake.body[0].x >= maxX < 0) {

                             alert("结束了哦");

                             clearInterval(timeid);

                         }

                         if (that.snake.body[0].y >= maxY || that.snake.body[0].y < 0) {

                             alert("结束了哦");

                             clearInterval(timeid);

                         }

                         that.snake.move(that.map, that.food);

                         that.snake.init(that.map);

                     }, 150);

                 }

                 Game.prototype.bindkey = function () {

                     document.addEventListener("keydown", function (e) {

                         switch (e.keyCode) {

                             case 37:

                                 if (that.snake.direction != "right") {

                                     that.snake.direction = "left";

                                 }

                                 break;

                             case 38:

                                 if (that.snake.direction != "bottom") {

                                     that.snake.direction = "top";

                                 }

                                 break;

                             case 39:

                                 if (that.snake.direction != "left") {

                                     that.snake.direction = "right";

                                 }

                                 break;

                             case 40:

                                 if (that.snake.direction != "top") {

                                     that.snake.direction = "bottom";

                                 }

                                 break;

                         }

                     }, false)

                 }

             }

             window.Game = Game;

         }()

     );

     var Gm = new Game(my$("map"));

     Gm.init(my$("map"));

 </script>

 </body>

 </html>

用JS来实现的第一个简单游戏 ：贪吃蛇的更多相关文章

  1. d3.js 制作简单的贪吃蛇

    d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏–贪吃蛇.话不多说先上图片. 1. js snaker类 class Sna ...

  2. C#简单实现贪吃蛇程序（LinQ + Entity）

    做梦想起来的C#简单实现贪吃蛇程序(LinQ + Entity) 最近一直在忙着单位核心开发组件的版本更新,前天加了一个通宵,昨天晚上却睡不着,脑子里面突然不知怎的一直在想贪吃蛇的实现方法.以往也有类 ...

  3. TOJ 3973 Maze Again && TOJ 3128 简单版贪吃蛇

    TOJ3973传送门:http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=3973 时间限制(普通 ...

  4. Java一个简单的贪吃蛇

    Java一个简单的贪吃蛇 虽然GUI已经要淘汰了,但是手动写写界面还是有助于理解语法的,像构造函数 ,函数调用,内部类,继承,接口.有助于半初学者强化理解. 直接上代码 游戏主体类: package ...

  5. GUI简单实战——贪吃蛇

    将前面学到的GUI基础知识完成实战,完成一个简单的贪吃蛇项目 项目功能 用键盘上下左右实现贪吃蛇的自动移动 贪吃蛇吃到食物后,长度加一,分数加一 贪吃蛇吃到自己的身体,则游戏结束 按空格键实现游戏的暂 ...

  6. 做梦想起来的C#简单实现贪吃蛇程序（LinQ + Entity）

    最近一直在忙着单位核心开发组件的版本更新,前天加了一个通宵,昨天晚上却睡不着,脑子里面突然不知怎的一直在想贪吃蛇的实现方法.以往也有类似的情况,白天一直想不通的问题,晚上做梦有时会想到更好的版本,于是 ...

  7. 使用JavaScript实现简单的小游戏-贪吃蛇

    最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...

  8. JavaScript实践-简单的贪吃蛇小游戏

    实现逻辑: //获取Html中的格子(行,列) //建立数组存储所有格子(x,y) //建立数组用于存储蛇身(x,y) //生成随机坐标(x,y)的函数 //随机创建蛇身并存储到蛇身数组 //创建食物 ...

  9. js编写简单的贪吃蛇游戏

    css代码 *{ margin:; padding:; } td{ width: 4px; height: 4px; background: #ccc; border: 2px solid #ccc; ...

随机推荐

  1. 用scp这个命令来通过ssh传输文件

    小结: 1. upload files 到 ssh 服务器 localhost $ scp localfile root@172.20.34.**:~/remotepath 2. 从 ssh 服务器d ...

  2. 剑指offer编程题Java实现——面试题13在O(1)时间内删除链表节点

    题目:给定单向链表的头指针和一个节点指针,定义一个函数在O(1)时间删除该节点. 由于给定的是单向链表,正常删除链表的时间复杂度是查找链表的时间复杂度即O(n),如果要求在O(1)时间复杂度内删除节点 ...

  3. linux 软件安装篇

    在linux下安装软件,不像windows一样,下一步下一步安装,但是也有很方便的方式.也有自定义的安装方式,总体来说,套路还不算太深,但是要实践才能出真知哦! linux版本有很多,但是大部分命令都 ...

  4. 使用docker redis-cluster集群搭建

    参考https://www.cnblogs.com/cxbhakim/p/9151720.html此文 主要搭建过程参考上文,此处讲下主要过程和遇到的坑 首先是镜像的基础搭建,我不知道是否是作者编写时 ...

  5. 天了噜，Java 8 要停止维护了！

    前些天的中兴事件,已经让国人意识到自己核心技术的不足,这次的 JDK 8 对企业停止免费更新更是雪上加霜.. 以下是 Oracle 官网提示的 JDK8 终止更新公告. 原文内容:Oracle wil ...

  6. inception安装使用

    一个集审核.执行.备份及生成回滚语句于一身的MySQL自动化运维工具,由去哪网开源 安装 CentOS 7 Python 3.6 安装基础环境 yum -y install cmake libncur ...

  7. Flask源码复习之路由

    构建路由规则 一个 web 应用不同的路径会有不同的处理函数,路由就是根据请求的 URL 找到对应处理函数的过程. 在执行查找之前,需要有一个规则列表,它存储了 url 和处理函数的对应关系.最容易想 ...

  8. oracle中查询用户表/索引/视图创建语句

    不多说,直接上干货 1.查询当前用户下表的创建语句 select dbms_metadata.get_ddl('TABLE','ux_future') from dual; 2.查询其他用户下表的创建 ...

  9. 通过Anaconda在Ubuntu16.04上安装 TensorFlow(GPU版本)

    一. 安装环境 Ubuntu16.04.3 LST GPU: GeForce GTX1070 Python: 3.5 CUDA Toolkit 8.0 GA1 (Sept 2016) cuDNN v6 ...

  10. 关于jquery中prev()和next()的用法

    用prev()和next()方法动态的添加class.以达到当前元素的前面几个元素或后面的几个元素添加class <body> <ul> <li>1</li& ...