<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
</head>
<body>
? ? <style>
? ? ? ? ?* {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ?
? ? ? ? #game {
? ? ? ? width: 800px;
? ? ? ? height: 600px;
? ? ? ? background: url('./img/sky.png');
? ? ? ? position: relative;
? ? ? ? margin: auto;
? ? ? ? overflow: hidden;
? ? ? ? }
? ?
? ? ? ? #bird {
? ? ? ? width: 34px;
? ? ? ? height: 25px;
? ? ? ? background: url('./img/birds.png') -10px -8px no-repeat;
? ? ? ? position: absolute;
? ? ? ? top: 100px;
? ? ? ? left: 100px;
? ? ? ? }
? ? ? ? .btnGame{
? ? ? ? ? margin: 2% 45%;
? ? ? ? }
? ? </style>
? ? <div id="game">
? ? ? ? <!-- 小鸟 -->
? ? ? ? <div id="bird"></div>
? ? </div>
? ? <input type="button" value="重新开始" class="btnGame" οnclick="replaceDoc()">
? ? <div style="width: 100vw;">
? ? ? <div ?style="color: #409Eff; margin-left: 30%; ">注明: 碰到上管道或下管道临界值则游戏终止 不能让小鸟落下通过鼠标左键点击让小鸟 保持在中间位置</div>
? ? </div>
? ? <script>
? ? ? ? function replaceDoc(){
? ? ? ? ? ? window.location.reload()
? ? ? ? }
? ? //获取游戏背景和小鸟
? ? var game = document.getElementById('game');
? ? var birdEle = document.getElementById('bird');
? ?
? ? //初始化背景图
? ? var sky = {
? ? ? x: 0 //背景图初始位置为0
? ? }
? ?
? ? //初始化小鸟
? ? var bird = {
? ? ? speedX: 5, //小鸟在X轴的速度
? ? ? SpeedY: 0, //小鸟在Y轴的速度
? ? ? //小鸟坐标
? ? ? x: birdEle.offsetLeft, //小鸟初始位置在绝对定位的位置
? ? ? y: birdEle.offsetTop,
? ? }
? ?
? ? var runing = true; //游戏状态
? ?
? ? setInterval(function () {
? ? ? if (runing) {
? ? ? ? //小鸟飞行(其实是背景在动)
? ? ? ? sky.x -= 5; //背景每次-5px，以实现向左运动的效果
? ? ? ? game.style.backgroundPositionX = sky.x + 'px';
? ? ? ? //小鸟上下运动
? ? ? ? bird.SpeedY += 1; //每一次点击小鸟向上10px后开始自增也就是再自动向下
? ? ? ? bird.y += bird.SpeedY; //小鸟自动不断向下运动
? ? ? ? //判断游戏状态
? ? ? ? if (bird.y < 0) { //超出游戏背景顶部时游戏结束
? ? ? ? ? runing = false;
? ? ? ? ? bird.y = 0;
? ? ? ? }
? ? ? ? if (bird.y + birdEle.offsetHeight > 600) { //超出游戏背景底部时游戏结束
? ? ? ? ? runing = false;
? ? ? ? ? bird.y = 600 - birdEle.offsetHeight;
? ? ? ? }
? ? ? ? birdEle.style.top = bird.y + 'px';
? ? ? }
? ? }, 30);
? ?
? ? //点击时小鸟向上运动
? ? document.onclick = function () {
? ? ? bird.SpeedY = -10; //点击一次向上运动10px
? ? }
? ?
? ? //创建管道
? ? function creatPipe(position) {
? ? ? var pipe = {};
? ? ? pipe.x = position;
? ? ? pipe.upHeight = 200 + parseInt(Math.random() * 100); //上管道高度为200 - 300px
? ? ? pipe.doHeight = 600 - pipe.upHeight - 200; //下管道高度
? ? ? pipe.doTop = pipe.upHeight + 200; //上下两管道之间200px
? ?
? ? ? //创建上管道
? ? ? var upPipe = document.createElement('div'); //新建div
? ? ? upPipe.style.width = '52px';
? ? ? upPipe.style.height = pipe.upHeight + 'px';
? ? ? upPipe.style.background = 'url(./img/pipe2.png) no-repeat center bottom';
? ? ? upPipe.style.position = 'absolute';
? ? ? upPipe.style.top = '0px';
? ? ? upPipe.style.left = pipe.x + 'px';
? ? ? game.appendChild(upPipe); //将上管道追加到游戏页面中
? ?
? ? ? //创建下管道
? ? ? var doPipe = document.createElement('div'); //新建div
? ? ? doPipe.style.width = '52px';
? ? ? doPipe.style.height = pipe.doHeight + 'px';
? ? ? doPipe.style.background = 'url(./img/pipe1.png) no-repeat center top';
? ? ? doPipe.style.position = 'absolute';
? ? ? doPipe.style.top = pipe.doTop + 'px';
? ? ? doPipe.style.left = pipe.x + 'px';
? ? ? game.appendChild(doPipe); //将下管道追加到游戏页面中
? ?
? ? ? //管道进行运动
? ? ? setInterval(function () {
? ? ? ? if (runing) { //游戏处于运行状态时管道再运动
? ? ? ? ? pipe.x -= 2; //x方向不断-2px，以实现管道向左运动的效果
? ? ? ? ? upPipe.style.left = pipe.x + 'px';
? ? ? ? ? doPipe.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.upHeight;
? ? ? ? ? var dCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y > pipe.upHeight + 200;
? ? ? ? ? if (uCheck || dCheck) { //碰到上管道或下管道临界值则游戏终止
? ? ? ? ? ? runing = false;
? ? ? ? ? }
? ? ? ? }
? ? ? }, 30)
? ? }
? ? creatPipe(400); //产生四组管道
? ? creatPipe(600);
? ? creatPipe(800);
? ? creatPipe(1000);
? </script>
</body>
</html>
