JS高级---案例:随机小方块 (贪吃蛇的食物部分)

案例:随机小方块 产生随机数对象,自调用构造函数 产生小方块对象,自调用构造函数,里面存放: 食物的构造函数 给原型对象添加方法:初始化小方块的显示的效果及位置---显...

案例:随机小方块

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

产生小方块对象,自调用构造函数,里面存放:
食物的构造函数
给原型对象添加方法:初始化小方块的显示的效果及位置---显示地图上
给原型对象添加方法,产生随机位置
实例化对象
 
<!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>
  • 发表于 2020-01-01 21:20
  • 阅读 ( 227 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除