<!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. CPP全面总结（涵盖C++11标准）

    OOP之类和对象 1. this指针的引入 每个成员函数都有一个额外的隐含的形参,这个参数就是this指针,它指向调用对象的地址.默认情况下,this的类型是指向类类型非常量版本的常量指针.可以表示成 ...

  2. 踩了的Dockerfile的坑

    1.Dockerfile VOLUME的目录,RUN命令操作该目录无效 VOLUME $APP_HOME RUN mkdir -p $APP_HOME && mkdir -p $APP ...

  3. OSLab多线程

      日期:2019/3/26 内容:多线程. 一.基本知识 线程的定义 线程(thread)是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单 ...

  4. solr 高亮springdatasolr

    @Autowired private SolrTemplate solrTemplate; @Override public Map<String, Object> search(Map ...

  5. requests应用

    一.简介 什么是requests模块: requests模块是python中原生的基于网络请求的模块,其主要作用是用来模拟浏览器发起请求.功能强大,用法简洁高效.在爬虫领域中占据着半壁江山的地位. 为 ...

  6. springmvc接受及响应ajax请求。 以及@RequestBody 和@ResponseBody注解的使用

    1.发送ajax请求 $.ajax({ url:"user/testAjax", contentType:"application/json;charset=UTF-8& ...

  7. Android数据存储之SharedPreferences使用

    SharedPreferences是Android中一种轻型的数据存储类.本质上是基于XML文件进行存储Key-Value键值对的数据,生成的XML文件的目录在/data/data/包名/Shared ...

  8. Apache重写规则

    1..htaccess文件使用前提 .htaccess的主要作用就是实现url改写,也就是当浏览器通过url访问到服务器某个文件夹时,作为主人,我们可以来接待这个url,具体 地怎样接待它,就是此文件 ...

  9. ubuntu里面搭建虚拟环境过程中遇到的问题以及解决方法。

    今天开始学习Django,发现要搭建虚拟环境.就按照百度上面的方法在ubuntu中输入终端命名进行配置.发现自己是按照步骤来的.却总是在最后一步启动 source .bashrc 的时候出现''com ...

  10. Django中条件过滤：按时间筛选

    你有没有遇到过,需要按时间筛选的问题? 我在models中的字段为dateTimeField,那么我该如何构造一个时间格式来和它比较呢? 索性我们有datetime模块 import datetime ...