创建一个简易的网页版打弹珠游戏可以使用HTML、CSS和JavaScript。下面是一个基本的实现示例：
HTML (index.html)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打弹珠游戏</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>打弹珠游戏</h1>
<div id="gameArea">
<canvas id="gameCanvas"></canvas>
</div>
<button id="startButton">开始游戏</button>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css)
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#gameArea {
border: 2px solid #333;
position: relative;
}
#gameCanvas {
background-color: #fff;
display: block;
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
}
JavaScript (script.js)
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startButton = document.getElementById('startButton');
canvas.width = 800;
canvas.height = 600;
let balls = [];
let isGameRunning = false;
class Ball {
constructor(x, y, radius, color) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.dx = Math.random() * 4 - 2; // 随机水平速度
this.dy = Math.random() * 4 - 2; // 随机垂直速度
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
}
update() {
this.x += this.dx;
this.y += this.dy;
// 碰撞检测
if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
this.dx = -this.dx;
}
if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
this.dy = -this.dy;
}
}
}
function spawnBalls(num) {
for (let i = 0; i < num; i++) {
const radius = Math.random() * 20 + 10; // 随机半径
const x = Math.random() * (canvas.width - radius * 2) + radius;
const y = Math.random() * (canvas.height - radius * 2) + radius;
const color = '#' + Math.floor(Math.random() * 16777215).toString(16); // 随机颜色
balls.push(new Ball(x, y, radius, color));
}
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
balls.forEach(ball => {
ball.update();
ball.draw();
});
requestAnimationFrame(update);
}
function startGame() {
if (!isGameRunning) {
isGameRunning = true;
balls = [];
spawnBalls(10); // 生成10个弹珠
update();
}
}
startButton.addEventListener('click', startGame);
说明
- HTML: 创建了一个简单的页面结构，包括一个标题、一个画布和一个开始游戏的按钮。
- CSS: 设置了页面的基本样式，使其看起来更美观。
- JavaScript:
- 创建了一个
Ball类，用于表示弹珠。
spawnBalls函数用于生成随机位置和颜色的弹珠。update函数用于更新弹珠的位置并重绘画布。startGame函数用于开始游戏，生成弹珠并开始更新循环。
如何运行
- 将上述代码分别保存为
index.html、styles.css和script.js。
- 在浏览器中打开
index.html文件。
- 点击“开始游戏”按钮，开始游戏。
这个示例是一个非常基础的打弹珠游戏，你可以在此基础上添加更多功能，比如得分系统、碰撞检测、游戏结束条件等。