JavaScript 小游戏:FlappyBall

最新推荐文章于 2024-06-07 15:45:53 发布

houyanhua1

最新推荐文章于 2024-06-07 15:45:53 发布

阅读量937

点赞数 1

分类专栏： JavaScript 文章标签： javascript 小游戏

本文链接：https://blog.csdn.net/houyanhua1/article/details/79605362

版权

JavaScript 专栏收录该内容

140 篇文章 4 订阅

订阅专栏

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #game {
            width: 800px;
            height: 600px;
            border: 1px solid #000;
            background: url(images/sky.png);
            overflow: hidden;
            position: relative;
        }

        #game .pipeD {
            background: url(images/pipe1.png) top center;
            position: absolute;
        }

        #game .pipeU {
            background: url(images/pipe2.png) bottom center;
            position: absolute;
        }

        #bird {
            width: 34px;
            height: 26px;
            /*border-radius: 10px;*/
            /*background-color: red;*/
            position: absolute;
            top: 100px;
            left: 100px;
            background: url(images/birds.png) -8px -10px no-repeat;
        }

    </style>
</head>
<body>
<div id="game">
    <div id="bird"></div>
</div>
</body>
</html>
<script>
    var game = document.getElementById("game");
    var birdEle = document.getElementById("bird");
    var gameover = false;
    var g = 1;  //重力加速度

    var sky = {
        position: 0
    }

    var bird = {
        entity: birdEle,
        speedX: 5,
        speedY: 5,
        x: birdEle.offsetLeft,
        y: birdEle.offsetTop
    }

    function Pipe(position) {
        this.x = position;  //管道div的left属性值
        this.width = 52;
		this.upPipeY = 0;   //上管道div的top属性值
        this.upPipeH = parseInt(Math.random() * 175) + 100;  //上面管道div的高度
        this.downPipeY = this.upPipeH + 200;   //下管道div的top属性值
        this.downPipeH = 600 - this.downPipeY;  //下面管道div的高度。 600是div.game的高度

        var divUp = document.createElement("div");
		
        divUp.className = "pipeU";
        divUp.style.left = this.x + "px";
        divUp.style.top = this.upPipeY + "px";
        divUp.style.width = this.width + "px";
        divUp.style.height = this.upPipeH + "px";
        var divDown = document.createElement("div");
        divDown.className = "pipeD";
        divDown.style.left = this.x + "px";
        divDown.style.top = this.downPipeY + "px";
        divDown.style.width = this.width + "px";
        divDown.style.height = this.downPipeH + "px";
		
        game.appendChild(divUp);
        game.appendChild(divDown);

        var _this = this;
        setInterval(function () {
            _this.x -= 1;
            if (_this.x < -52) {
                _this.x = 800;
            }
			if (!gameover) {
                divUp.style.left = _this.x + "px";
                divDown.style.left = _this.x + "px";
            }
            var clsUp = (bird.x + 34 > _this.x) && (bird.x < _this.x + 52) && (bird.y < _this.upPipeH);
            var clsDown = (bird.x + 34 > _this.x) && (bird.x < _this.x + 52) && (bird.y + 26 > _this.downPipeY);
            if (clsUp || clsDown) {
                gameover = true;
            }
        }, 10)
    }


    setInterval(function () {
        if (!gameover) {
            bird.speedY = bird.speedY + g;
            bird.y = bird.y + bird.speedY;
            if (bird.y > 574) {
                bird.y = 574;
                gameover = true;
            }
            if (bird.y < 0) {
                bird.y = 0;
                gameover = true;
            }
            bird.entity.style.top = bird.y + "px";
            sky.position -= bird.speedX;
            game.style.backgroundPositionX = sky.position + "px";
        }
    }, 25)

    document.onmousedown = function () {
        bird.speedY = -10;
    }

    for (var i = 0; i < 4; i++) {
        new Pipe(400 + 800 / 4 * i);
    }
</script>

images/birds.png：

images/pipe1.png：

images/pipe2.png：

images/sky.png：

houyanhua1

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 小游戏:FlappyBall

demo.html： body { margin: 0; padding: 0; } #game { width: 800px; height: 600px; border: 1px soli
复制链接

扫一扫