网页小游戏《笨鸟快飞》（纯JavaScript编写）

最新推荐文章于 2023-02-11 16:12:01 发布

置顶

aguang5241

最新推荐文章于 2023-02-11 16:12:01 发布

阅读量849

点赞数 2

分类专栏：技术项目文章标签：鸟 JavaScript 游戏 html css

本文链接：https://blog.csdn.net/aguang5241/article/details/102779080

版权

更多原生js小项目，参见本人GitHub—Aguang5241

利用js实现以下功能：

通过点击鼠标或者键盘空格键控制小鸟向上飞

非点击状态小鸟会自由下降

当小鸟撞击边缘或者移动障碍物则游戏结束

实时记录和显示生存时间以及所得分数

效果展示

在这里插入图片描述

源代码

html
index.html

<!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">
  <link rel="stylesheet" href="css/index.css">
  <title>StupidBird</title>
</head>
<body>
  <div id="bg">
    <p id="header">游戏规则</p>
    <br>
    <p id="rules">点击 <b>鼠标</b> 或者 <b>空格</b> 保持StupidBird不要掉下去或者碰到障碍物</p>
    <br>
    <a href="stupidbird.html">开始游戏</a>
  </div>
</body>
</html>

stupidbird.html

<!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">
  <link rel="stylesheet" href="css/stupidBird.css">
  <script src="js/stupidBird.js"></script>
  <title>StupidBird</title>
</head>
<body>
  <div id="container">
    <div id="score"><span id="survivalTime">Time: 3.1s</span>

最低0.47元/天解锁文章

aguang5241

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
网页小游戏《笨鸟快飞》（纯JavaScript编写）

更多原生js小项目，参见本人GitHub—Aguang5241利用js实现以下功能：通过点击鼠标或者键盘空格键控制小鸟向上飞非点击状态小鸟会自由下降当小鸟撞击边缘或者移动障碍物则游戏结束实时记录和显示生存时间以及所得分数效果展示源代码htmlindex.html<!DOCTYPE html><html lang="en"><hea...
复制链接

扫一扫