鸡你太美
鸡你太美
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打砖块小游戏</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "微软雅黑", sans-serif;
}
body {
background: #1a1a1a;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
}
#gameBox {
border: 3px solid #42a5f5;
background: #000;
}
.info {
color: #fff;
font-size: 22px;
margin-bottom: 10px;
}
#resetBtn {
margin-top: 12px;
padding: 8px 24px;
font-size: 18px;
background: #2196F3;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
#resetBtn:hover {
background: #1976D2;
}
</style>
</head>
<body>
<div>得分：<span id="score">0</span></div>
<canvas id="gameBox" width="480" height="600"></canvas>
<button id="resetBtn">重新开始</button>
<script>
// 获取画布与上下文
const canvas = document.getElementById('gameBox');
const ctx = canvas.getContext('2d');
const scoreText = document.getElementById('score');
const resetBtn = document.getElementById('resetBtn');
// 挡板配置
const paddle = {
width: 90,
height: 16,
x: canvas.width / 2 - 45,
y: canvas.height - 30,
speed: 10
};
// 小球配置
const ball = {
r: 8,
x: canvas.width / 2,
y: canvas.height / 2,
dx: 4,
dy: -4
};
// 方块配置
const brickConfig = {
rows: 6,
cols: 8,
w: 50,
h: 20,
padding: 6,
offsetTop: 40,
offsetLeft: 10
};
let bricks = [];
let score = 0;
let gameOver = false;
let win = false;
// 初始化方块
function initBricks() {
bricks = [];
for (let r = 0; r < brickConfig.rows; r++) {
bricks[r] = [];
for (let c = 0; c < brickConfig.cols; c++) {
bricks[r][c] = {
x: c * (brickConfig.w + brickConfig.padding) + brickConfig.offsetLeft,
y: r * (brickConfig.h + brickConfig.padding) + brickConfig.offsetTop,
alive: true,
color: `hsl(${r * 40}, 80%, 55%)`
};
}
}
}
// 重置游戏
function resetGame() {
score = 0;
gameOver = false;
win = false;
scoreText.textContent = score;
// 小球归位
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.dx = 4;
ball.dy = -4;
// 挡板归中
paddle.x = canvas.width / 2 - paddle.width / 2;
initBricks();
}
// 绘制挡板
function drawPaddle() {
ctx.fillStyle = '#42a5f5';
ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
}
// 绘制小球
function drawBall() {
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.closePath();
}
// 绘制方块
function drawBricks() {
for (let r = 0; r < brickConfig.rows; r++) {
for (let c = 0; c < brickConfig.cols; c++) {
const b = bricks[r][c];
if (b.alive) {
ctx.fillStyle = b.color;
ctx.fillRect(b.x, b.y, brickConfig.w, brickConfig.h);
ctx.strokeStyle = '#000';
ctx.strokeRect(b.x, b.y, brickConfig.w, brickConfig.h);
}
}
}
}
// 碰撞检测：小球和方块
function brickCollision() {
for (let r = 0; r < brickConfig.rows; r++) {
for (let c = 0; c < brickConfig.cols; c++) {
const b = bricks[r][c];
if (b.alive) {
if (
ball.x > b.x &&
ball.x < b.x + brickConfig.w &&
ball.y > b.y &&
ball.y < b.y + brickConfig.h
) {
ball.dy = -ball.dy;
b.alive = false;
score += 10;
scoreText.textContent = score;
// 判断是否全部清除（胜利）
let allClear = true;
outer: for (let i = 0; i < brickConfig.rows; i++) {
for (let j = 0; j < brickConfig.cols; j++) {
if (bricks[i][j].alive) {
allClear = false;
break outer;
}
}
}
if (allClear) win = true;
}
}
}
}
}
// 游戏逻辑更新
function update() {
if (gameOver || win) return;
// 墙壁反弹
if (ball.x + ball.r > canvas.width || ball.x - ball.r < 0) {
ball.dx = -ball.dx;
}
if (ball.y - ball.r < 0) {
ball.dy = -ball.dy;
}
// 落到底部 游戏结束
if (ball.y + ball.r > canvas.height) {
gameOver = true;
}
// 挡板碰撞
if (
ball.y + ball.r > paddle.y &&
ball.x > paddle.x &&
ball.x < paddle.x + paddle.width
) {
ball.dy = -ball.dy;
}
// 小球移动
ball.x += ball.dx;
ball.y += ball.dy;
brickCollision();
}
// 渲染画面
function render() {
// 清空画布
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
drawBricks();
drawPaddle();
drawBall();
// 游戏结束文字
if (gameOver) {
ctx.fillStyle = '#f44336';
ctx.font = "36px 微软雅黑";
ctx.textAlign = "center";
ctx.fillText("游戏结束", canvas.width / 2, canvas.height / 2);
}
// 胜利文字
if (win) {
ctx.fillStyle = '#4caf50';
ctx.font = "36px 微软雅黑";
ctx.textAlign = "center";
ctx.fillText("恭喜通关！", canvas.width / 2, canvas.height / 2);
}
}
// 游戏循环
function gameLoop() {
update();
render();
requestAnimationFrame(gameLoop);
}
// 鼠标控制挡板
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
let mouseX = e.clientX - rect.left;
// 限制挡板不出界
if (mouseX > 0 && mouseX < canvas.width - paddle.width) {
paddle.x = mouseX;
}
});
// 重置按钮点击
resetBtn.addEventListener('click', resetGame);
// 启动游戏
resetGame();
gameLoop();
</script>
</body>
</html>