网页赛车小游戏（纯JavaScript编写）

最新推荐文章于 2022-06-26 12:57:05 发布

置顶

aguang5241

最新推荐文章于 2022-06-26 12:57:05 发布

阅读量2.5k

点赞数 3

分类专栏：技术项目

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

版权

这是一款使用JavaScript编写的赛车小游戏，随着游戏进程，路障的移动速度会逐渐增加，玩家通过键盘控制赛车躲避路障。游戏结束条件是赛车与路障碰撞。此外，游戏还实时显示生存时间和得分。

摘要由CSDN通过智能技术生成

赛车（改良版）

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

利用js实现以下功能：

在四个赛道随记生成路障，其移动速度随用户生存的时间增加而增加

用户可以通过方向键或者A、D键控制用户小车左右移动，躲避路障

当路障与用户小车碰撞，游戏结束

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

效果展示

在这里插入图片描述

源代码

html

<!DOCTYPE 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/street.css">
  <script src="js/street.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="background">
    <div id="bg">
      <img src="img/bgImg.png" alt="" id="bgImg">
      <div id="mybox"></div>
    </div>
    <div id="band">
      <p id="score">Score: 0</p>
      <hr>
      <p id="timeLast">Time: 0s</p>
    </div>
  </div>
</body>

</html>

css

* {
   
  margin: 0;
  padding: 0;
}
body {
   
  text-align: center;
}
#background {
   
  margin: 0 auto;
  width: 1000px;
  background: url(../img/bg.jpg) no-repeat #5f5762

最低0.47元/天解锁文章

aguang5241

关注

3
点赞
踩
27

收藏

觉得还不错? 一键收藏
1
评论
网页赛车小游戏（纯JavaScript编写）

赛车（改良版）更多原生js小项目，参见本人GitHub—Aguang5241利用js实现以下功能：在四个赛道随记生成路人小车，其运动速度随用户生存的时间增加而增加用户可以通过方向键或者A、D键控制用户小车左右移动，躲避路人小车当路人小车与用户小车碰撞，游戏结束效果展示源代码html<!DOCTYPE html><html lang="en"&gt...
复制链接

扫一扫