4.小羊奔跑

小样奔跑

结果图:

这是小羊拖拽所使用的;本质就是一直刷新现在的点和上一个点的距离

// 鼠标按下的事件
// 获取点击的鼠标,距离页面的距离
sheepClass.x = ed.pageX;
sheepClass.y = ed.pageY;

// 在鼠标移动事件里面
 // 每两个点相减,得到移动的距离
var chax = e.pageX - sheepClass.x ;
var chay = e.pageY - sheepClass.y ;
sheepClass.x = e.pageX;//更新鼠標屏幕上的x坐標
sheepClass.y = e.pageY;//更新鼠標屏幕上的Y坐標

<!-- 最外层的外部容器；这个容器需要铺满整个的页面（css样式) -->
    <div class="container">
        <!-- 先测试的页面中有一只羊 ；图片以背景图片的形式显示-->
        <!-- <div class="sheep"></div> -->
    </div>
    <script src="../js/index.js"></script>

/* 最外层的容器 需要她铺满整个容器 */
/* 让div铺满全屏方法详见：https://www.cnblogs.com/cnyaokai/p/6512519.html */
.container{
    /* 需要她铺满整个容器,所以设置宽高均为100%如果只写container的宽高但还是高度0 */
    /* 1.若不给他设置定位，他的100%均是相对于父级来说的；所以后面给它的父级一次设置宽高都为100% */
    /* 2.设置定位 */
    width:100%;
    height:100%;
    background: #4a96ee;
    position:absolute;
}

body{
    overflow:hidden;
}
/* 父级宽高为100% */
/* body,html{
    width:100%;
    height:100%;
} */


/* 给小羊的div设置样式 */
.sheep{
    /* 设置div的宽高等同于图片中一只羊的宽高 */
    width: 164px;
    height: 122px;

    /* 给他设置绝对定位 因为他要在右下方出现；这里他是要相对于它父级定位的，要给container设置定位，所以选择第二种铺满全屏的方法 */
    position:absolute;
    bottom:0px;
    right:0px;

    /* 设置背景图片，以及图片的定位，不重复 */
    background: url(../img/sheep.png) no-repeat;
    background-position: 0px 0px;

    /* 设置鼠标样式为抓取 */
    cursor:grabbing;


}

    //  从此改用单对象编程;把所有需要用到的以及设置的参数函数均放到对象obj里面
     var obj = {
        // 全局用到的设置参数
        sPars : {
            // 设置动画定时器的值
            timer:70,
            // 容器
            container: document.getElementsByClassName('container')[0],
            // 从右往左每次移动
            speed : 7,
            // 屏幕中最大羊的数量
            maxSheep : 8,
            // 控制背景图片的坐标的
            backNum : 0,

        },

        // 一般都会有一个入口函数
        init:function(){
            this.createSheep();
        },

        // 创造多只小羊
        createSheep : function(){
            // 创造小羊的模具;这里的形参obj,其实传入的实参obj.sPars
            function SheepClass(obj){
                // 这里面包含了每一只羊需要设置的所有参数
                this.sheep = document.createElement('div');
                this.sheep.className = 'sheep';
                obj.container.appendChild(this.sheep);

                // 每个小羊的跑动频率不一样,所以要在设置的timer基础上,让他随机
                // 设置的timer = 70-> 30-100
                this.frequency = Math.floor(Math.random() * obj.timer) + 30;
                this.backNum = obj.backNum;
                this.speed = obj.speed;
                this.stage = obj.container;
                this.top = 0;

                // 保留当前的速度,推拽
                this.currentSpeed = this.speed;
            }

            // 设置定时器,因为定时器里面的this并不指向obj
            var _this = this;
            var time = setInterval(function(){
                // 先获取现有的container里面有多少只羊
                var sheepNum = _this.sPars.container.children.length;

                if(sheepNum < _this.sPars.maxSheep){
                    // 若小于最大羊的数量,则生成
                    var oneSheep = new SheepClass(_this.sPars);
                    // 动画
                    _this.SheepRun(oneSheep);
                }
            },1000);
           
            

        },

        SheepRun : function(sheepClass){
            sheepClass.sheepAnimate = setInterval(function(){
                // 让一只小羊完成自动走动  逐帧动画，每隔多少毫秒，便改变背景图片的background-position；翻页画的效果
                // 记录背景图片的定位
                sheepClass.backNum -= 164;
                // 当他超过图片宽度,设为0,重新开始
                if(sheepClass.backNum <= -1302){
                    sheepClass.backNum = 0;
                }
                sheepClass.sheep.style.backgroundPosition = `${sheepClass.backNum}px ${sheepClass.top}px`;

                // 用于记录小羊离左边页面的距离 left值
                var newLeft = sheepClass.sheep.offsetLeft - sheepClass.speed;
                if(newLeft <= -164){
                    clearInterval(sheepClass.sheepAnimate);
                    sheepClass.stage.removeChild(sheepClass.sheep);
                }
                sheepClass.sheep.style.left = newLeft + 'px';
            },sheepClass.frequency);


            sheepClass.sheep.onmousedown = function(ed){
                // 当一只小羊被点下时,他的行走的速度应该变为0,背景图片的top值应该改变为-128;即向上移动一只一只小羊的高度
                sheepClass.speed = 0;
                sheepClass.top = -128;

                // 获取点击的鼠标,距离页面的距离
                sheepClass.x = ed.pageX;
                sheepClass.y = ed.pageY;

                // 移动
                document.onmousemove = function(e){
                    // 每两个点相减,得到移动的距离
                    var chax = e.pageX - sheepClass.x ;
                    var chay = e.pageY - sheepClass.y ;
                    sheepClass.sheep.style.left = chax + sheepClass.sheep.offsetLeft + 'px';
                    sheepClass.sheep.style.top = chay + sheepClass.sheep.offsetTop + 'px';

                    sheepClass.x = e.pageX;//更新鼠標屏幕上的x坐標
                    sheepClass.y = e.pageY;//更新鼠標屏幕上的Y坐標
                }

                // 当小羊被放开时
                this.onmouseup = function(){
                    // 当鼠标抬起时,应该清除鼠标移动事件,然后将速度,和背景图片位置复原
                    document.onmousemove = null;
                    sheepClass.speed = sheepClass.currentSpeed;
                    sheepClass.top = 0;

                }
            }
        }
        


     }
     obj.init();