学习js高级第一天

贪吃蛇(上)----随机小方块
  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #map {
                width: 600px;
                height: 600px;
                background-color: silver;
                position: relative;
                /*小方块要脱离标准文档流*/
            }
        </style>
    </head>
    <body>
    <div id="map"></div>
    <script>
        //对象: 随机数, 下方块
    
        //产生随机数的对象
        ((function () {
            //1.产生随机数的构造函数
            function Random() {
    
            }
    
            //2.在原型中添加方法
            Random.prototype.getRandom = function (min, max) {
                return Math.floor(Math.random() * (max - min) + min)
            }
            //3.把局部对象暴露给window
            window.Random = Random;
        })())
    
        var rm = new Random();
        // console.log(rm.getRandom(10, 50));
    
        //产生小方块的对象
        ((function () {
    
            function Food(width, height, color, x, y) {
                this.width = width || 20;
                this.height = height || 20;//默认小方块的宽高
                this.color = color || "green";
                //随机产生的
                this.x = x || 0;
                this.y = y || 0;
    
                //创建一个div盒子
                this.element = document.createElement("div")
            }
    
            //设置小方块显示的效果和位置--->显示在地图上
            Food.prototype.init = function (map) {
                //1.储存div元素对象
                var div = this.element;
                //2.设置小方块的样式
                div.style.width = this.width + "px";
                div.style.height = this.height + "px";
                div.style.backgroundColor = this.color;
                div.style.position = "absolute";
                //3.把小方块添加到map中
                map.appendChild(div);
                //随机的位置
                this.random(map);
                // setInterval(function () {
                //     div.random(map);
                //     div.style.backgroundColor="silver";
                // },20)
            }
    
            //产生随机的位置
            Food.prototype.random=function (map) {
                    this.x=rm.getRandom(0,map.offsetWidth/this.width)*this.width;
                    this.y=rm.getRandom(0,map.offsetHeight/this.height)*this.height;
                    this.element.style.left=this.x+"px";
                    this.element.style.top=this.y+"px";
            }
    
            setInterval(function () {
    
            },20)
    
            //实例化对象
            var food = new Food();
            food.init(document.getElementById("map"))
    
        })())
    
    </script>
    </body>
    </html>
学习js高级第一天

猜你喜欢
