案例：随机小方块

产生随机数对象，自调用构造函数

产生小方块对象，自调用构造函数，里面存放：
食物的构造函数
给原型对象添加方法：初始化小方块的显示的效果及位置---显示地图上
给原型对象添加方法，产生随机位置
实例化对象
 
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    .map {

      width: 800px;

      height: 600px;

      background-color: #CCC;

      position: relative;

    }

  </style>

</head>

<body>

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

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

  <script>

    //产生随机数对象的

    (function (window) {

      function Random() {

      };

      Random.prototype.getRandom = function (min, max) {

        return Math.floor(Math.random() * (max - min) + min);

      };

      window.Random = new Random;

    })(window); //自调用构造函数的方式, 分号一定要加上

    //产生小方块对象

    (function (window) {

      var map = document.querySelector(".map");

      //食物的构造函数

      function Food(width, height, color) {

        this.width = width || 20;

        this.height = height || 20;

        //横坐标,纵坐标

        this.x = 0;//横坐标随机产生的

        this.y = 0;//纵坐标随机产生的

        this.color = color;//小方块的背景颜色

        this.element = document.createElement("div");

      }

      //初始化小方块的显示的效果及位置---显示地图上

      Food.prototype.init = function (map) {

        //设置小方块的样式

        var div = this.element;

        div.style.position = "absolute";//脱离文档流

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

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

        div.style.backgroundColor = this.color;

        //把小方块加到map地图中

        map.appendChild(div);

        this.render(map);

      };

      //产生随机位置

      Food.prototype.render = function (map) {

        //随机产生横纵坐标

        var x = Random.getRandom(0, map.offsetWidth / this.width) * this.width;

        var y = Random.getRandom(0, map.offsetHeight / this.height) * this.height;

        this.x = x;

        this.y = y;

        var div = this.element;

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

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

      };

      //实例化对象

      var fd = new Food(20, 20, "green");

      fd.init(map);

      console.log(fd.x + "=====" + fd.y);

    })(window);

  </script>

</body>

</html>

JS高级---案例：随机小方块 （贪吃蛇的食物部分）的更多相关文章

  1. JavaScript面向对象编程小游戏---贪吃蛇

    1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1- 2 维护非常方便并且成本较低. ​ 2 这个demo是采用了 ...

  2. Java_GUI小游戏--贪吃蛇

    贪吃蛇游戏:是一条蛇在封闭围墙里,围墙里随机出现一个食物,通过按键盘四个光标键控制蛇向上下左右四个方向移动,蛇头撞倒食物,则食物被吃掉,蛇身体长一节,接着又出现食物,等待蛇来吃,如果蛇在移动中撞到墙或 ...

  3. 用Python实现童年小游戏贪吃蛇

    贪吃蛇作为一款经典小游戏,早在 1976 年就面世了,我最早接触它还是在家长的诺基亚手机中.

  4. 第一个windows 小游戏 贪吃蛇

    最近用dx尝试做了一个小的贪吃蛇游戏,代码放到github上面:https://github.com/nightwolf-chen/MyFreakout 说一下自己实现的过程: 首先,我把蛇这个抽象成 ...

  5. JS高级---案例：贪吃蛇小游戏

    案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...

  6. JS高级---案例贪吃蛇，把封装的函数移动到js文件中

    案例贪吃蛇,把封装的函数移动到js文件中 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. 手把手教学h5小游戏 - 贪吃蛇

    简单的小游戏制作,代码量只有两三百行.游戏可自行扩展延申. 源码已发布至github,喜欢的点个小星星,源码入口:game-snake 游戏已发布,游戏入口:http://snake.game.yan ...

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

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

  9. 用Canvas制作小游戏——贪吃蛇

    今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...

随机推荐

  1. java - 虚拟机性能监控与故障处理工具

    背景 在项目开发中往往不是一个人完成整个项目,而是由一个团队进行开发,而团队中成员的编程能力参差不齐难免会影响项目性能.当一个项目基本定型后难免会遇到项目产品使用的效果不理想例如长时间失去响应.系统卡 ...

  2. thinkphp5.x全版本任意代码执行getshell

    ThinkPHP官方2018年12月9日发布重要的安全更新,修复了一个严重的远程代码执行漏洞.该更新主要涉及一个安全更新,由于框架对控制器名没有进行足够的检测会导致在没有开启强制路由的情况下可能的ge ...

  3. 机器学习作业（七）非监督学习——Matlab实现

    题目下载[传送门] 第1题 简述:实现K-means聚类,并应用到图像压缩上. 第1步:实现kMeansInitCentroids函数,初始化聚类中心: function centroids = kM ...

  4. Qtree1 - 树链剖分

    树剖裸题?(复习练练手) // luogu-judger-enable-o2 #include <bits/stdc++.h> using namespace std; ],size[], ...

  5. Javascript 利用 switch 语句进行范围判断

    ; switch (true) { ): alert("less than five"); break; ): alert("between 5 and 8") ...

  6. js报错 Uncaught TypeError: xxxx.each is not a function

    在处理ajax返回的json数组时错误的使用了 list.each(function(){ }); 实际上当遍历json数组是应该使用 $.each(list,function(index,cours ...

  7. 安装多个jdk环境7、8、11等，并且切换默认使用版本

    背景 在公司开发时,不同项目往往使用不同的jdk.目前使用最多的应该是JDK1.8,但是有些老项目使用1.7甚至1.6等 或者你想学习JDK最新版本,一些新特新如JDK11,现在最新都有JDK13 1 ...

  8. springboot整合websocket实现客户端与服务端通信

    定义  WebSocket是通过单个TCP连接提供全双工(双向通信)通信信道的计算机通信协议.此WebSocket API可在用户的浏览器和服务器之间进行双向通信.用户可以向服务器发送消息并接收事件驱 ...

  9. android 代码实现模拟用户点击、滑动等操作

    /** * 模拟用户点击 * * @param view 要触发操作的view * @param x 相对于要操作view的左上角x轴偏移量 * @param y 相对于要操作view的左上角y轴偏移 ...

  10. 0216 aop和打印数据库执行日志

    需求 maven依赖 <dependency> <groupId>p6spy</groupId> <artifactId>p6spy</artif ...