前端学习笔记day17 h愤怒的小鸟

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        #box {
            width: 800px;
            height: 600px;    
            position: relative;
            overflow: hidden;
        }
        #sky {
            width: 1600px;
            height: 600px;    
            background: url('images/sky.png') repeat-x;
            position: absolute;
        }
        #bird {
            width: 30px;
            height: 30px;
            background: url('./images/birds.png') -10px -10px no-repeat;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>

</head>
<body>
    <div id='box'>
        <div id='sky'></div>
        <div id='bird'></div>
        <div class='stick'></div>
    </div>

    <script>
        var box = document.getElementById('box');
        var sky = document.getElementById('sky');
        var bird = document.getElementById('bird');
        var stickBox = document.createElement('div');
        stickBox.id = 'stickBox';
        stickBox.style.position = 'absolute';
        stickBox.style.width = '400px';
        stickBox.style.height = '600px';
        // stickBox.style.background = 'rgba(255,192,203,0.7)';
        // stickBox.style.left = parseInt(box.offsetWidth / 2) + 'px';
        box.appendChild(stickBox);
        var running = true;
        var step = 10;
        var stepBird = 0;

        var stickWidth = 52;
        var stickNum = 4;
        var boxWidth = parseInt(box.offsetWidth);

        for(var i = 0;i < stickNum;i++) {
            var div = document.createElement('div');
            div.style.width = stickWidth + 'px';
            div.style.height = getHeight(200,300) + 'px';
            div.style.background = 'url(' + './images/pipe2.png' + ') no-repeat center bottom';
            div.style.position = 'absolute';
            div.style.left = parseInt(box.offsetWidth / 2) + (stickWidth + 180)*i + 'px';
            div.className = 'stickU';
            stickBox.appendChild(div);

            var divB = document.createElement('div');
            divB.style.width = stickWidth + 'px';
            divB.style.height = box.offsetHeight -170 - div.offsetHeight + 'px';
            divB.style.background = 'url(' + './images/pipe1.png' + ') no-repeat center top';
            divB.style.position = 'absolute';
            divB.style.left = parseInt(box.offsetWidth / 2) + (stickWidth + 180)*i + 'px';
            divB.style.top = div.offsetHeight + 170 + 'px';
            divB.className = 'stickB';
            stickBox.appendChild(divB);
            
        }
        var stick = document.getElementById('stickBox');
        var sticksU = document.getElementsByClassName('stickU');
        var sticksB = document.getElementsByClassName('stickB');

        timeId = setInterval(function(){
            var current = sky.offsetLeft;
            var currentBird = bird.offsetTop;
            // var currentStick = stickBox.offsetLeft;
            if(running){
                //背景运动
                current -= step;
                if(current <= -box.offsetWidth){
                    current = 0;
                }
                sky.style.left = current + 'px';

                // 柱子运动
                // currentStick -= 3;
                // if(currentStick <= -stickWidth) {
                //     currentStick = box.offsetWidth;
                // }
                // stickBox.style.left = currentStick + 'px';


                // 小鸟运动
                stepBird +=1;
                currentBird += stepBird;
                bird.style.top = currentBird + 'px';
        
                if(currentBird >= box.offsetHeight-bird.offsetHeight){
                    running = false;
                    bird.style.top = box.offsetHeight-bird.offsetHeight + 5 + 'px';
                    clearInterval(timeId);
                }    
                if(bird.offsetTop <= 15) {
                    running = false;
                    bird.style.top = 0 + 'px';
                    clearInterval(timeId);
                }    


                for(var i = 0;i < stickNum;i++) {
                    var currentStick = sticksU[i].offsetLeft;
                    currentStick -= 3;
                    if(currentStick <= -stickWidth) {
                        currentStick = box.offsetWidth;
                    }
                    // stickBox.style.left = currentStick + 'px';
                    sticksU[i].style.left = currentStick + 'px';
                    sticksB[i].style.left = currentStick + 'px';

                    var left = sticksU[i].offsetLeft + stickBox.offsetLeft -bird.offsetWidth;
                    var right = left + sticksU[i].offsetWidth;
                    var top = sticksB[i].offsetTop - bird.offsetHeight;
                    // var bottom = top + sticksB[i].offsetHeight;
                    if(bird.offsetLeft >= left && bird.offsetLeft <= right && bird.offsetTop <= sticksU[i].offsetHeight){
                        running = false;
                        clearInterval(timeId);
                    }    

                    if(bird.offsetLeft >= left && bird.offsetLeft <= right && bird.offsetTop >= top){
                        running = false;
                        clearInterval(timeId);
                    }    
                } 
                        
            }
        },50)

        document.onclick = function() {
            stepBird -=10;
        }
        
        function getHeight(min,max) {
            return Math.floor(Math.random()*(max - min + 1)) +  min; 
        }


    </script>
</body>
</html>
运行结果：
前端学习笔记day17 h愤怒的小鸟

猜你喜欢
