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;
color: white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#start:hover {
background: white;
color: black;
}
script.js
可以根据注释的信息来修改小游戏的各种参数，可以自定义属于自己的配置。
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
var cRect = canvas.getBoundingClientRect()
var fires = []
var balls = []
var mouse = { x: -100, y: -100 }
var ctime = 0 // 这个ctime就是通关的时间
var start = document.getElementById("start")
canvas.width = 800 // 画布的大小和宽度
canvas.height = 600
window.addEventListener("click", function (evt) { //鼠标点击事件改变点击目标
var x = evt.clientX - cRect.left
var y = evt.clientY - cRect.top
mouse.x = x
mouse.y = y
})
function newgame() { //初始化并开始游戏
start.style.display = "none"
for (var i = 0; i < 10; i++) { // 气球的数量
balls.push({
sx: parseInt(Math.random() * (canvas.width - 60)) + 30, //确保气球生成范围为 30~770
sy: parseInt(Math.random() * (canvas.height - 60)) + 30, //气球范围为 30~570
vx: 0.5 - Math.random(),
vy: 0.5 - Math.random(),
size: Math.random() * 10 + 15,
color: color()
})
}
}
function color() { //随机生成颜色代码
return "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")"
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.font = "30px sans-serif"
ctx.fillStyle = "#1e90ff"
ctx.fillText(ctime, 10, 40)
for (var i = 0; i < balls.length; i++) { //绘制气球
ball = balls[i]
ctx.fillStyle = ball.color
ctx.beginPath()
ctx.arc(ball.sx, ball.sy, ball.size, 0, 2 * Math.PI)
ctx.fill()
ball.sx += ball.vx
ball.sy += ball.vy
if (ball.sx - ball.size < 0 || ball.sx + ball.size > canvas.width) {
ball.vx = -ball.vx
}
if (ball.sy - ball.size < 0 || ball.sy + ball.size > canvas.height) {
ball.vy = -ball.vy
}
if (Math.sqrt(Math.pow((mouse.x - ball.sx), 2) + Math.pow((mouse.y - ball.sy), 2)) < ball.size) { //判断点击位置是否在气球范围内，
for (var j = 0; j < 50; j++) { //如果点到气球，则插入爆炸效果的元素
fires.push({
sx: ball.sx,
sy: ball.sy,
vx: 0.5 - Math.random(),
vy: 0.5 - Math.random(),
color: color(),
age: 200
})
}
balls.splice(i, 1)
}
}
for (var i = 0; i < fires.length; i++) { //绘制爆炸效果
fire = fires[i]
ctx.fillStyle = fire.color
ctx.fillRect(fire.sx, fire.sy, 4, 4)
fire.age--
fire.sx += fire.vx
fire.sy += fire.vy
fire.vy += 0.008 //加入向下的加速度
if (fire.age < 0) {
fires.splice(i, 1)
}
}
mouse.x = -100 //每次循环都将点击坐标移出画布
mouse.y = -100
if (balls.length > 0) { //有气球的情况下刷新计分器
ctime++
}
}
setInterval(draw, 1)
每日一个算法题
蚂蚁感冒
长 100 厘米的细长直杆子上有 n 只蚂蚁。
它们的头有的朝左，有的朝右。
每只蚂蚁都只能沿着杆子向前爬，速度是 1 厘米/秒。
当两只蚂蚁碰面时，它们会同时掉头往相反的方向爬行。
这些蚂蚁中，有 1 只蚂蚁感冒了。
并且在和其它蚂蚁碰面时，会把感冒传染给碰到的蚂蚁。
请你计算，当所有蚂蚁都爬离杆子时，有多少只蚂蚁患上了感冒。
输入格式
第一行输入一个整数 n, 表示蚂蚁的总数。
接着的一行是 n 个用空格分开的整数 Xi, Xi 的绝对值表示蚂蚁离开杆子左边端点的距离。
正值表示头朝右，负值表示头朝左，数据中不会出现 0 值，也不会出现两只蚂蚁占用同一位置。
其中，第一个数据代表的蚂蚁感冒了。
输出格式
输出1个整数，表示最后感冒蚂蚁的数目。
数据范围
1<n<50,
0<|Xi|<100
输入样例1：
3
5 -2 8
输出样例1：
1
输入样例2：
5
-10 8 -20 12 25
输出样例2：
3
难度：简单
时/空限制：1s / 64MB
总通过数：8499
总尝试数：16408
来源：第五届蓝桥杯省赛C++A/B组
算法分析
分析
首先我们必须要明白两只蚂蚁相撞掉头可以看作时一只蚂蚁穿过了另一只蚂蚁，因为相撞之后两只蚂蚁都感冒了，掉不掉头其实无所谓，毕竟都感冒了，这样的话这题就简单多了。我们先不考虑特殊情况，先来看看一般情况：
第一只蚂蚁不管方向朝哪里，只要它右边的蚂蚁向左走就可能碰撞感染，同样，第一只蚂蚁左边的蚂蚁只要朝右边走也可能被感染，这样就很容易得到ans=right+left+1。这里left表示左边蚂蚁向右走的数量，right表示右边蚂蚁向左走的数量，1是指第一只蚂蚁本身。
还有一种特殊情况，就是当第一只蚂蚁向左走的时候，如果第一只蚂蚁左边没有向右爬行的蚂蚁，由于爬行速度相同，所以不管第一只蚂蚁右边有多少向左爬行的，其右边的蚂蚁永远不可能被感染。同理，当第一只蚂蚁向右走的时候，如果第一只蚂蚁右边没有向左爬行的蚂蚁，其左边也永远不可能感染。
提交代码：
c++
#include<bits/stdc++.h>
using namespace std;
int n;
int x[110];
int main()
{
int left = 0, right = 0; // 分别表示在x[0]左边 然后从左往右走的蚂蚁数量， 在x[0]右边 然后从右往左走的蚂蚁数量
// left 的蚂蚁 和 right的蚂蚁最终会相互感染 这个就是这个题的核心
// 这里的一个核心是 就是在计算left和right的时候不要考虑第一只
// 蚂蚁的方向 不然这个题就做不出来了
cin >> n;
for (int i = 0; i < n; ++ i) cin >> x[i];
for (int i = 1; i < n; ++ i)
{
if (x[i] > 0 && abs(x[0]) > abs(x[i]) ) left ++;
else if (x[i] < 0 && abs(x[0]) < abs(x[i]) ) right ++;
}
if (x[0] > 0 && right == 0 || x[0] < 0 && left == 0) cout << 1 << endl; // 在这里的时候 才考虑第一只蚂蚁的
// 方向 也就是如果蚂蚁向右走 如果蚂蚁的右边没有
// 从右往左的蚂蚁 那么就只有自己感染
// 另一种情况同理
else cout << left + right + 1 << endl;
return 0;
}
Java
import java.util.*;
import java.io.*;
public class Main
{
static int left, right;
public static void main(String [] args) throws IOException
{
BufferedReader reader = new BufferedReader(new InputStreamReader(System.in));
int n = Integer.parseInt(reader.readLine());
String [] strs = reader.readLine().split(" ");
int [] x = new int [100];
for (int i = 0; i < n; ++ i) x[i] = Integer.parseInt(strs[i]);
for (int i = 1; i < n; ++ i)
{
if (x[i] > 0 && Math.abs(x[0]) > Math.abs(x[i])) left ++;
if (x[i] < 0 && Math.abs(x[0]) < Math.abs(x[i])) right ++;
}
if (x[0] > 0 && right == 0 || x[0] < 0 && left == 0) System.out.println("1");
else System.out.println(left + right + 1);
}
}
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
