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>

巴特西

JS高级---案例：随机小方块（贪吃蛇的食物部分）

案例：随机小方块

最新文章

热门文章

巴特西

JS高级---案例：随机小方块 （贪吃蛇的食物部分）

案例：随机小方块

最新文章

热门文章

JS高级---案例：随机小方块（贪吃蛇的食物部分）