JavaScript像素鸟案例

最新推荐文章于 2023-02-04 04:18:06 发布

北岭有燕

最新推荐文章于 2023-02-04 04:18:06 发布

阅读量626

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41160739/article/details/106117281

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

效果图：

<!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) {
                // 移动背景让小鸟实现水平运动
				//backgroundPositionX 属性设置背景图像的水平位置。
                sky.x -= 5;
                game.style.backgroundPositionX = sky.x + 'px';
                // 实现小鸟的向下加速运动  每次增加的距离1 2 3 4 5 6……
                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;
			//每点一次走-9 -8 -7 -6 …… 0  1 2
        }
        // 创建管道
        function createPipe(position) {
            var pipe = {};
            pipe.x = position;
			//上管道的高度在200-300之间,两个管道间距200
            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';
			//position：背景图片的定位。水平位置和垂直位置。
            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;
                    }
					//撞到上下管道的情况
					//bird.x + 34 > pipe.x小鸟进入管道  bird.x < pipe.x + 52没有出来管道  
					//bird.y < pipe.uHeight;小鸟的高度位置在上管道里面
					//bird.y < pipe.uHeight;小鸟的高度位置在下管道里面
                    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.png：

sky.png：

pipe1.png：

pipe2.png：

北岭有燕

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript像素鸟案例

效果图：<!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"> <titl
复制链接

扫一扫