<!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. 如何使用Visual Studio 2017调试.net库源代码

    在Visual Studio 2017按如下步骤设置: 1.取消选中(工具 - >选项 - >调试 - >仅我的代码)复选框.2.确保设置了(工具 - >选项 - >调试 ...

  2. 安装VS2017后打开项目提示 asp.net 4.0尚未web服务器注册

    Visual Studio 2017 出来了,手痒安装完成后打开原来的项目缺提示,asp.net 4.0尚未web服务器注册.郁闷了… 按照提示的方法,如何:将 ASP.NET Web 应用程序升级到 ...

  3. HttpClient Fluent API 高并发优化

    apache的httpcomponents-client 4.2之后提供了一套易于使用的facade API称为Fluent API,对于一般使用场景来说,使用起来非常简便,且性能也有一定保证,因为其 ...

  4. Swift5 语言指南(十一) 结构和类

    结构和类是通用的,灵活的结构,它们成为程序代码的构建块.您可以使用与定义常量,变量和函数相同的语法来定义属性和方法,以便为结构和类添加功能. 与其他编程语言不同,Swift不要求您为自定义结构和类创建 ...

  5. KNN算法简介

    KNN算法 K-近邻算法原理 K最近邻(kNN,k-NearestNeighbor)分类算法,见名思意. 我们的目的是要预测某个学生在数学课上的成绩... 先来说明几个基本概念:图中每个点代表一个样本 ...

  6. 测试工具之Jmeter（使用badboy录制脚本）

    前面使用badboy工具时说过,badboy是可以录制Jmeter的测试脚本,这样省去了自己设计测试用例的麻烦 Jmeter主要是一个性能测试工具,不光在web和http,现在扩展很多功能都可以在Jm ...

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

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

  8. spring cloud（服务消费者（利用feign实现服务消费及负载均衡）——初学三）

    Feign是一个声明式的Web Service客户端,我们只需要使用Feign来创建一个接口并用注解来配置它既可完成. 它具备可插拔的注解支持,包括Feign注解和JAX-RS注解.Feign也支持可 ...

  9. 从零开始学 Web 之 CSS（四）CSS初始化、定位、overflow、标签规范

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  10. Debug技巧

    多线程调试 有些时候为了观察多个线程间变量的不同状态,以及锁的获取等,就会想到在代码里加个断点debug一下. 在IDE里断点停下来的时候,可以切换到另外的线程中,跑其他的代码,不会互相影响.这里是有 ...