• 像素鸟游戏


    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            #game {
                width: 800px;
                height: 600px;
                background: url('./images/sky.png');
                position: relative;
                overflow: hidden;
            }
    
            #bird {
                width: 34px;
                height: 25px;
                background: url('./images/birds.png') -8px -10px no-repeat;
                position: absolute;
                top: 100px;
                left: 100px;
            }
        </style>
    </head>
    
    <body>
        <div id="game">
            <div id="bird"></div>
        </div>
        <script>
            // 让小鸟飞起来
            // 移动的背景
            // top
            // 定时器
            // 动画原理 leader = leader + step
            // 获取相应的元素
            var game = document.getElementById('game');
            var birdEle = document.getElementById('bird');
            // 初始化背景图的值
    
            var sky = {
                x: 0
            }
            // 初始bird 的值
            var bird = {
                speedX: 5,
                speedY: 0,
                x: birdEle.offsetLeft,
                y: birdEle.offsetTop
            }
            // 游戏的状态
            var running = true;
            setInterval(function () {
                if (running) {
                    // 移动背景让小鸟实现水平运动
                    sky.x -= 5;
                    game.style.backgroundPositionX = sky.x + 'px';
                    // 实现小鸟的上下运动
                    bird.speedY += 1;
                    bird.y += bird.speedY;
                    if (bird.y < 0) {
                        running = false;
                        bird.y = 0;
                    }
                    if (bird.y + birdEle.offsetHeight > 600) {
                        running = false;
                        bird.y = 600 - birdEle.offsetHeight;
                        console.log(bird.y)
                    }
    
                    birdEle.style.top = bird.y + 'px';
                }
    
            }, 30)
            // 点击文档的时候实现小鸟向上运动
            document.onclick = function () {
                bird.speedY = -10;
            }
            // 创建管道
            function createPipe(position) {
                var pipe = {};
                pipe.x = position;
                pipe.uHeight = 200 + parseInt(Math.random() * 100);
                pipe.dHeight = 600 - pipe.uHeight - 200;
                pipe.dTop = pipe.uHeight + 200;
                var uPipe = document.createElement('div');
                uPipe.style.width = '52px';
                uPipe.style.height = pipe.uHeight + 'px';
                uPipe.style.background = 'url("./images/pipe2.png") no-repeat center bottom';
                uPipe.style.position = 'absolute';
                uPipe.style.top = '0px';
                uPipe.style.left = pipe.x + 'px';
                game.appendChild(uPipe);
    
                var dPipe = document.createElement('div');
                dPipe.style.width = '52px';
                dPipe.style.height = pipe.dHeight + 'px';
                dPipe.style.background = 'url("./images/pipe1.png") no-repeat center  top';
                dPipe.style.position = 'absolute';
                dPipe.style.top = pipe.dTop + 'px';
                dPipe.style.left = pipe.x + 'px';
                game.appendChild(dPipe);
                // 让管道运动起来
                setInterval(function () {
                    if (running) {
                        pipe.x -= 2;
                        uPipe.style.left = pipe.x + 'px';
                        dPipe.style.left = pipe.x + 'px';
                        if (pipe.x < -52) {
                            pipe.x = 800;
                        }
                        var uCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y < pipe.uHeight;
                        var dCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y > pipe.uHeight + 200;
                        if (uCheck || dCheck) {
                            running = false;
                        }
                    }
                }, 30)
            }
            createPipe(400);
            createPipe(600);
            createPipe(800);
            createPipe(1000);
    
        </script>
    </body>
    
    </html>

    图birds

    图pipe1

    图pipe2

     图sky

  • 相关阅读:
    sql server 2016新特性 查询存储(Query Store)的性能影响
    Spring 事务管理详情介绍
    python爬虫之快速对js内容进行破解
    python爬虫的一个常见简单js反爬
    温习pycharm
    宋朝官员分析随堂理解笔记
    K-Means改进模式
    jupyter 饼图
    WebDriver常用的API使用详解
    从浏览器启动开始
  • 原文地址:https://www.cnblogs.com/jiumen/p/11423461.html
Copyright © 2020-2023  润新知