<!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. Codeforces Round #553 (Div. 2) C. Problem for Nazar 数学

    题意:从奇数列 1 3 5 7 9 ....  偶数列2 4 6 8 10...分别轮流取 1 2 4 ....2^n 个数构成新数列 求新数列的区间和 (就一次询问) 思路:首先单次区间和就是一个简 ...

  2. 【UNR #1】火车管理（主席树）

    [UNR #1]火车管理(主席树) 好好的代码被 \(extra\ test\) 卡常了...我就放一个目前最快的版本吧... 题意简化: 有 \(n\) 个栈,\(m\) 次操作. 将 \(x\) ...

  3. java 手动实现远程执行功能（深入理解java虚拟机）

     1.功能类 功能类共有五,分别是: package org.jvm; import java.io.*; /** * 对字节数组操作的工具类 */ public class ByteUtils { ...

  4. 开源性能测试工具Locust使用篇（一）

    1. 环境准备 安装python3.6 ,安装步骤略 pip install locust 安装完成后使用locust -V检查 2.locust使用,先编辑一个简单的load_test.py的脚本 ...

  5. 用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目

    一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project ...

  6. java-null简介

    对于每一个Java程序员来说,null肯定是一个让人头痛的东西,连Java的发明者都承认这是一项巨大的设计失误,今天就来总结一下Java中关于null的知识. 1.null不属于任何类型,可以被转换成 ...

  7. 前端下载excel文件功能的三种方法

    1 从后端接收json数据,前端处理生成excel下载 JsonExportExcel的github地址:https://github.com/cuikangjie/JsonExportExcel 这 ...

  8. python学习记录（一）

    1.打印操作 >>> print('hello') hello >>> print(1+2) 3 2.字符串操作 ① ') Traceback (most rece ...

  9. sublime text 前端开发插件安装和配置

    前端开发sublimeconfig mac配置 此文件目录中文件主要是关于sublime的插件配置,快捷键配置,主题和字体配置. 插件列表 所有插件都可以使用Package Control安装,具体的 ...

  10. springboot shiro开启注释

    shiroconfiguration中增加 @Bean public AuthorizationAttributeSourceAdvisor authorizationAttributeSourceA ...