网页小游戏《笨鸟快飞》(纯JavaScript编写)

编程入门 行业动态 更新时间:2024-10-26 20:33:47

网页<a href=https://www.elefans.com/category/jswz/34/1769974.html style=小游戏《笨鸟快飞》(纯JavaScript编写)"/>

网页小游戏《笨鸟快飞》(纯JavaScript编写)

更多原生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

更多推荐

网页小游戏《笨鸟快飞》(纯JavaScript编写)

本文发布于:2024-02-26 00:05:45,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1700705.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:小游戏   网页   JavaScript   笨鸟快飞

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!