js实现像素小鸟游戏

22x艾克斯

于 2023-10-30 21:54:18 发布

阅读量248

点赞数

CC 4.0 BY-SA版权

文章标签：游戏前端 javascript

本文链接：https://blog.csdn.net/xllllll___/article/details/134052024

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个像素鸟游戏，包括游戏页面布局、动画效果、小鸟移动、碰撞检测、分数统计和音效控制。3.0版本增加了翅膀扇动和鸟头摇摆功能，同时优化了计分和用户交互问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.H5页面实现

设置一个总的游戏页面，一个父元素盒子，把提示游戏开始的页面，小鸟的页面，分数显示的页面都在总页面下面写下，也就是用一个大的div来包裹游戏元素。

<body >
   <div id="game" onclick="gameclick()" >
      <div id="bird">
        <img id="niao"  src="E:\js\img\bird_00.png">
      </div>
      <div id="fs">0</div>
      <div id="kaishi"></div>
      <audio src="./王晖 - 像素游戏.mp3" autoplay="true" id="aud" preload="metadata" loop="true"></audio>
    </div>
    <script src="dy.js"></script>
</body>

二.CSS实现

在css中设置属性的时候，以game的盒子为父元素，设置其定位为relative，把其他子元素的定位设置为绝对定位从而来设置页面布局。

在CSS这一块儿中，主要增加了一个开始页面的动画元素。

*{
    margin: 0;
    padding: 0;
}
body{
    -webkit-user-select: none;/*禁止选中文本*/
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#game{
    width: 800px;
    height: 600px;
    background: url(./img/12.jpg) ;
    position: relative;
    margin: auto;
    overflow: hidden;
    background-size: cover;
}
#bird{
    width: 50px;
    height: 76px;
    position: absolute;
    top: 100px;
    left: 100px;
}
#fs{
    position: absolute;
    font-size: 32px;
    left: 15px; 
    color: palevioletred;
    z-index: 2;
}
#kaishi{
    position: absolute;
    width: 400px;
    height: 200px;
    font-size: 60px;
    font-weight: bold;
    color: chocolate;
    top: 290px;
    left: 250px;
    background: url(.\\img\\09.png) no-repeat;
    animation: tiaodong 0.7s infinite alternate;
}
@keyframes tiaodong{
    from{
        margin-top: 100px;
    }
    to{
        margin-top: 10px
    }
}

三.js实现

基本的游戏元素设置完成后，就是让游戏动起来，其实小鸟的前进飞行的效果是靠背景的移动和管道来实现，小鸟只是通过鼠标点击事件来控制它上下移动，也就是小鸟在x轴方向的位置不改变，只改变在y轴方向上的位置。

游戏思路：1.设置背景位置和小鸟的初始位置和小鸟的速度。

2.判断游戏是否处于运行中。

若在游戏状态中，则管道和背景移动，鼠标能够控制小鸟的上下移动；若检测到碰撞，则网页显示游戏结束，重新刷新页面，背景和管道停止运动。

3.设置鼠标点击事件

每次一点击鼠标，让小鸟在y轴方向的坐标减小，即实现小鸟向上飞的效果，当鼠标点击开始时，开始的页面属性显示为隐藏。

4.创建管道

上管道和下管道的x轴位置一样，在Y轴方向上上管道和下管道高度随机，但是要设置上下管道的高度差为200。把创建管道的节点添加到游戏页面中。

5.管道的移动

游戏开始时，让管道在x轴上动起来，当管道在x轴上的位置小于-52时，让管道再回到原来的位置，以实现管道循环的效果。

if(pipe.x<-52){
               pipe.x=800;
               /* fs+=1;
                fs1.innerHTML=fs;*/
             }

n2=setInterval(function(){
        if(running){
            pipe.x-=2;
            upPipe.style.left=pipe.x+'px';
            doPipe.style.left=pipe.x+'px';

6.碰撞检测

碰撞检测分为三个检测条件，即小鸟的位置与管道的左边界，上管道的下边界以及下管道的上边界，满足其中三个条件的一个都会改变游戏的运行状态，让游戏返回结束的状态。

 var uCheck=bird.x+45>pipe.x&&bird.x<pipe.x+52&&bird.y<pipe.upHeight;
             var dCheck=bird.x+45>pipe.x&&bird.x<pipe.x+52&&bird.y>pipe.upHeight+167;
             if(uCheck||dCheck){
                 running=false;
                 /*zhuangtai.style.display='block';*/
                 yinyue1.pause();
                 bird.y=600;
                 location.reload();
                 alert("游戏结束");
             }

7.分数统计的实现

分数的统计实现的比较简单，就用管道的位置来实现分数的增加，如果管道在x轴方向能够运动到-52的位置，那么小鸟一定越过了管道，分数就实现加一。

 if(pipe.x<-52){
               pipe.x=800;
                fs+=1;
                fs1.innerHTML=fs;
             }

8.背景音乐的添加

在h5的页面通过媒体标签来引入背景音乐，当游戏处于运行状态时，让音乐处于播放状态，当游戏状态结束时，背景音乐播放暂停。

9.设置定时器

游戏的进行状态通过设置定时器来实现，js中通过设置定时器按照指定的周期（以毫秒计算）来调用函数或计算表达式，方法会不停地调用函数，直到clearInterval()被调用或者是窗口被关闭。

10.管道的放置

在写完创建管道的函数之后，调用创建管道的函数，在放置管道位置的参数位置设置x轴的坐标，来放置管道的初始位置。

creatPipe(400);
creatPipe(600);
creatPipe(800);
creatPipe(1000);

11.游戏结束

当小鸟撞到管道时，碰撞检测成功，则游戏结束，游戏网页显示游戏结束，自动刷新游戏页面，清空本局的游戏分数。

以上就是用js实现像素鸟小游戏的大体思路，1.0和2.0版本的大致内容就是这些。在基本的功能实现的基础上，又对小鸟的状态做了一些变化，可以说是3.0版本。

四.3.0版本的一些内容：

1.小鸟翅膀扇动的实现

小鸟翅膀的扇动通过小鸟三个图片的轮流交换来实现，然后通过设置定时器每间隔80ms调用函数，来实现小鸟不停地扇动翅膀的效果。

var num=0;
   function shandong(){
    num++;
    if(num>2){
        num=0;
    }
    img.src="E:/js/img/bird_0"+num+".png";
   }
   setInterval(shandong,80);

2.鸟头向下摇摆的实现

鸟头向下摆就是设置一个函数，让鸟头的旋转角度不断自加，等到小鸟的头旋转到25度时，回到原来的位置，然后设置一个定时器，每隔100ms调用旋转的函数。

function rotate(){
     setInterval(fun,100);
}
var deg=0;
function fun(){
    var obj=document.getElementById("niao");
    deg+=5;
    var d=deg+"deg";
    /*bird.style.transform="rotate("+d+")";*/
    obj.style.transform="rotate("+d+")";
    if(deg==25){
        deg=0;
    }
}

五一些问题的改进

在游戏进行的时候，当鼠标点击游戏页面多次时，小鸟的区域会变成蓝色，在CSS3的参考手册中是这样解释的

出现这种情况可能就是在css属性设置中允许用户选中或者检索文本，在css中添加了以下属性解决了这个问题

body{

-webkit-user-select: none;

}

禁止用户选中文本就不会出现这种情况了。

六计分方式的改进

在实现另一种方法实现分数页面的时候遇到了一种情况，在一个区域内检测小鸟是否越过管道时，在实现分数自加条件时，分数会一直不断地自加，这是因为在游戏运行的函数中添加了定时器，在实现分数增加的时候没有关闭定时器，就导致分数会一直自加。在后来改进的时候，使用了一个方法。在管道的位置做一个标记，标记管道的位置，因为小鸟在x轴方向的位置是不会改变的，就判断管道正中间的位置是否越过了小鸟在x轴的位置，如果越过分数就增加1，再把标记的位置置为1000，这样就可以实现一个精确及时的计分方式了。