html+css+js实现点球球小游戏

原创

已于 2023-01-19 20:39:35 修改 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #javascript

于 2023-01-19 20:26:21 首次发布

本文介绍了一个使用HTML、CSS和JavaScript实现的休闲点球球小游戏，游戏包含随机生成和爆炸特效。代码中使用了Canvas画布进行图形渲染。此外，文章还提出了一个算法问题——蚂蚁感冒，讨论了蚂蚁在直杆上相遇时的感冒传播情况，给出了解题思路和C++、Java的解决方案。

该文章已生成可运行项目，

html+css+js实现点球球小游戏

简介：这是一款休闲类的小游戏，在这款游戏里面你可以通过鼠标点击屏幕中生成的小球，小球爆炸是有特效的，小球的运行方向和生成位置也是随机的，可以通过修改代码来控制，小球生成的数量。

这款游戏还可以进行一定的魔改，比如把这些生成的小球球当作敌人，然后把自己鼠标加上一个枪一样的东西，然后这个小游戏就被魔改成了一款射击类的小游戏了。
效果展示：
点击中间的开始，这个游戏就可以开始了。
在这里插入图片描述
游戏开始只有，就会出现很多小球球，点击小球球，小球球就会爆炸，然后消失一个。

最左上角的位置就是这个游戏的分数了，后面可以连接数据库，把每个玩家的分数记录下来。

当小球球点击完了之后，这个游戏就结束了。
在这里插入图片描述

代码实现

首先是html部分，可以看出，这个前端厉害的特效还是因为使用了，canvas画布，才可以实现的，可以看出厉害的前端工程师还是需要，会一定的算法的。

Canvas 中文名称叫“画布”，它是游戏中所有UI组件的“容器”。一个场景中，可以允许多个Canvas对象的存在，还允许Canvas之间可以进行“嵌套”使用。需要注意的是，场景中的任何一个UI对象，都肯定是某个Canvas对象的“子级”。

index.html

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas"></canvas>
    <button id="start" onclick="newgame()">START!</button>
</body>

</html>
<script src="script.js"></script>

css部分
style.css

* {
   
   
  margin: 0;
  padding: 0;
}
body {
   
   
  background: #333;
}
#canvas {
   
   
  width: 800px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid white;
  filter: blur(1px);
  cursor: crosshair;
}
#start {
   
   
  font-size: 30px;
  padding: 10px;
  border: 1px solid white;
  background: transparent;
  border-radius: 5px