赛跑小游戏：es6面向对象应用

class的练习以及class的继承

CSS代码：

.girl{
	width: 79px;
	height: 108px;
	background:url(../images/aisidier.png);
	background-position: 0px -216px;
	position: absolute;
	left: 0;
	top: 100px;
	text-align: center;
}
#info span{
	font-size: 24px;color: red;
}

js代码：

<script>
        class Person {
            constructor() {
                this.PosX = 50;
                this.PosY = Person.randomNum(50, 500);
                this.speed = Person.randomNum(1, 5);
                this.step = 0;// 第0张图
                this.addDiv();
            }

            static randomNum(min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            }

            // 动态生成div
            addDiv() {
                this.div = document.createElement('div');
                this.div.setAttribute('class', 'girl');
                this.div.style.left = this.PosX + 'px';
                this.div.style.top = this.PosY + 'px';
                document.body.appendChild(this.div);
            }

            go() {
                this.step++;
                // 如果到了最后一张回到第一张
                if (this.step > 7) {
                    this.step = 0;
                }
                // 背景图左移
                this.div.style.backgroundPositionX = -this.step * 79 + 'px';

                this.PosX += this.speed;
                // 人向左移动
                this.div.style.left = this.PosX + 'px';
            }
            // 停的时候就是回到第一张精灵图
            stop() {
                this.div.style.backgroundPositionX = '0px';
            }
        }
        class Girl extends Person {
            constructor(name) {
                super();
                this.name = name;
                this.addName();
            }
            addName() {
                this.div.innerText = this.name;
            }
        }
        let girlArr = [];
        let girltime = new Set();
        let score = new Set();
        
        girlArr.push(new Girl('001'));
        girlArr.push(new Girl('002'));
        girlArr.push(new Girl('003'));

        let t = setInterval(() => {
            for (let i = 0; i < girlArr.length; i++) {
                if (girlArr[i].PosX > 100) {
                    girlArr[i].stop();
                    score.add(girlArr[i].name);
                    girltime.add(100/girlArr[i].speed*50/1000);
                } else {
                    girlArr[i].go();
                }
            }
            // 判断当所有人都到达终点以后，停止定时器,显示排名
            if (score.size == girlArr.length) {
                clearInterval(t);
                let arr = Array.from(score);
                let girl = Array.from(girltime);
                document.body.appendChild(document.createTextNode(arr[0] + '第一名,用时' + girl[0] + '秒'))
            }
        }, 50);
        
        
    </script>