<!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. Hadoop 综合揭秘——MapReduce 基础编程（介绍 Combine、Partitioner、WritableComparable、WritableComparator 使用方式）

    前言 本文主要介绍 MapReduce 的原理及开发,讲解如何利用 Combine.Partitioner.WritableComparator等组件对数据进行排序筛选聚合分组的功能.由于文章是针对开 ...

  2. 错误：无效参数：could not find capabilities for arch=aarch64

    现象:错误:无效参数:could not find capabilities for arch=aarch64 解决: qemu源码编译:(需要指定--cpu=aarch64) ./configure ...

  3. 深入浅出TCP/IP协议

    目录 什么是网络协议? 谁来制定这个网络协议? TCI/IP协议 什么是socket? http协议属于应用层还是传输层? soap可以使用HTTP协议进行传输吗? 各层协议举例 什么是网络协议? 话 ...

  4. 分布式任务调度系统xxl-job源码探究（二、服务中心）

    接下来看下服务端代码 服务端源码 服务端通过管理quartz定时任务组件,分发任务 先从入口看起,由web.xml进入,可以看出,自己编写的代码从applicationcontext-xxl-job- ...

  5. Shell-7--环境变量配置文件

    环境变量配置文件修改后需要重启才生效,如果想不重启生效,需要 source 配置文件 . 配置文件

  6. OpenStack-Ocata版+CentOS7.6 云平台环境搭建 — 2.安装配置OpenStack基础服务

    节点配置情况说明: 控制节点:controller: IP:192.168.164.128 hostname&hosts:likeadmin 计算加点:Nova: IP:192.168.164 ...

  7. $.parseJson()定义和用法

    $.parseJSON() 函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象. 例子: 这里首先给出JSON字符串集,字符串集如下: var data="  { ...

  8. 机器学习与Tensorflow（4）——卷积神经网络与tensorflow实现

    1.标准卷积神经网络 标准的卷积神经网络由输入层.卷积层(convolutional layer).下采样层(downsampling layer).全连接层(fully—connected laye ...

  9. 对于python setup.py install安装的包如何卸载

    easy_install 安装 卸载命令 easy_install -m package-name setup.py安装 帮助你纪录安装细节方便你卸载 python setup.py install ...

  10. 可以用软连接的方式解决linux内存空间不足的问题

    突然提示说/var空间满了,然后接着系统卡死,最后彻底没辙,重启试试,没想到提示什么系统错误,请联系管理员之类的提示语,也进不去登陆界面啥了.之后用其他电脑连接SSH用root账号访问. # cd / ...