first commit
This commit is contained in:
commit
eec5018647
270
game.js
Normal file
270
game.js
Normal file
@ -0,0 +1,270 @@
|
||||
const canvas = document.getElementById('gameCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const nextCanvas = document.getElementById('nextCanvas');
|
||||
const nextCtx = nextCanvas.getContext('2d');
|
||||
const scoreElement = document.getElementById('score');
|
||||
const startBtn = document.getElementById('startBtn');
|
||||
const pauseBtn = document.getElementById('pauseBtn');
|
||||
|
||||
// 方块形状
|
||||
const SHAPES = [
|
||||
[[1, 1, 1, 1]], // I
|
||||
[[1, 1], [1, 1]], // O
|
||||
[[1, 1, 1], [0, 1, 0]], // T
|
||||
[[1, 1, 1], [1, 0, 0]], // L
|
||||
[[1, 1, 1], [0, 0, 1]], // J
|
||||
[[1, 1, 0], [0, 1, 1]], // S
|
||||
[[0, 1, 1], [1, 1, 0]] // Z
|
||||
];
|
||||
|
||||
// 方块颜色
|
||||
const COLORS = [
|
||||
'#00f0f0', '#f0f000', '#a000f0',
|
||||
'#f0a000', '#0000f0', '#00f000', '#f00000'
|
||||
];
|
||||
// 游戏配置
|
||||
const BLOCK_SIZE = 30;
|
||||
const COLS = 10;
|
||||
const ROWS = 20;
|
||||
canvas.width = COLS * BLOCK_SIZE;
|
||||
canvas.height = ROWS * BLOCK_SIZE;
|
||||
|
||||
// 计算预览区域尺寸
|
||||
const maxShapeWidth = Math.max(...SHAPES.map(shape => shape[0].length));
|
||||
const maxShapeHeight = Math.max(...SHAPES.map(shape => shape.length));
|
||||
nextCanvas.width = maxShapeWidth * BLOCK_SIZE;
|
||||
nextCanvas.height = maxShapeHeight * BLOCK_SIZE;
|
||||
|
||||
|
||||
|
||||
let board = [];
|
||||
let currentPiece = null;
|
||||
let nextPiece = null;
|
||||
let score = 0;
|
||||
let gameLoop = null;
|
||||
let gameSpeed = 1000;
|
||||
let gameOver = false;
|
||||
|
||||
function initBoard() {
|
||||
board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
|
||||
}
|
||||
|
||||
function createPiece() {
|
||||
const index = Math.floor(Math.random() * SHAPES.length);
|
||||
return {
|
||||
shape: SHAPES[index],
|
||||
color: COLORS[index],
|
||||
x: Math.floor(COLS/2) - 1,
|
||||
y: 0
|
||||
};
|
||||
}
|
||||
|
||||
function drawBlock(ctx, x, y, color) {
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE-1, BLOCK_SIZE-1);
|
||||
}
|
||||
|
||||
function drawBoard() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// 绘制已落下的方块
|
||||
for (let y = 0; y < ROWS; y++) {
|
||||
for (let x = 0; x < COLS; x++) {
|
||||
if (board[y][x]) {
|
||||
drawBlock(ctx, x, y, board[y][x]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 绘制当前下落的方块
|
||||
if (currentPiece) {
|
||||
currentPiece.shape.forEach((row, y) => {
|
||||
row.forEach((value, x) => {
|
||||
if (value) {
|
||||
drawBlock(ctx, currentPiece.x + x, currentPiece.y + y, currentPiece.color);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function drawNextPiece() {
|
||||
nextCtx.clearRect(0, 0, nextCanvas.width, nextCanvas.height);
|
||||
const shapeWidth = nextPiece.shape[0].length;
|
||||
const shapeHeight = nextPiece.shape.length;
|
||||
const startX = (maxShapeWidth - shapeWidth) / 2;
|
||||
const startY = (maxShapeHeight - shapeHeight) / 2;
|
||||
nextPiece.shape.forEach((row, y) => {
|
||||
row.forEach((value, x) => {
|
||||
if (value) {
|
||||
drawBlock(nextCtx, startX + x, startY + y, nextPiece.color);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function isValidMove(piece, newX, newY) {
|
||||
return piece.shape.every((row, dy) => {
|
||||
return row.every((value, dx) => {
|
||||
let x = newX + dx;
|
||||
let y = newY + dy;
|
||||
return (
|
||||
value === 0 ||
|
||||
(x >= 0 && x < COLS && y < ROWS && !board[y][x])
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function rotatePiece() {
|
||||
const rotated = currentPiece.shape[0].map((_, i) =>
|
||||
currentPiece.shape.map(row => row[i]).reverse()
|
||||
);
|
||||
const previousShape = currentPiece.shape;
|
||||
currentPiece.shape = rotated;
|
||||
if (!isValidMove(currentPiece, currentPiece.x, currentPiece.y)) {
|
||||
currentPiece.shape = previousShape;
|
||||
}
|
||||
}
|
||||
|
||||
function mergePiece() {
|
||||
currentPiece.shape.forEach((row, y) => {
|
||||
row.forEach((value, x) => {
|
||||
if (value) {
|
||||
board[currentPiece.y + y][currentPiece.x + x] = currentPiece.color;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function clearLines() {
|
||||
let linesCleared = 0;
|
||||
for (let y = ROWS - 1; y >= 0; y--) {
|
||||
if (board[y].every(cell => cell !== 0)) {
|
||||
board.splice(y, 1);
|
||||
board.unshift(Array(COLS).fill(0));
|
||||
linesCleared++;
|
||||
y++;
|
||||
}
|
||||
}
|
||||
if (linesCleared > 0) {
|
||||
score += linesCleared * 100;
|
||||
scoreElement.textContent = score;
|
||||
gameSpeed = Math.max(100, gameSpeed - 50);
|
||||
}
|
||||
}
|
||||
|
||||
// 在dropPiece函数中增加暂停按钮隐藏逻辑
|
||||
function dropPiece() {
|
||||
if (isValidMove(currentPiece, currentPiece.x, currentPiece.y + 1)) {
|
||||
currentPiece.y++;
|
||||
} else {
|
||||
mergePiece();
|
||||
clearLines();
|
||||
currentPiece = nextPiece;
|
||||
nextPiece = createPiece();
|
||||
drawNextPiece();
|
||||
if (!isValidMove(currentPiece, currentPiece.x, currentPiece.y)) {
|
||||
gameOver = true;
|
||||
clearInterval(gameLoop);
|
||||
startBtn.textContent = '重新开始';
|
||||
startBtn.style.display = 'block';
|
||||
pauseBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function moveHorizontal(dx) {
|
||||
const newX = currentPiece.x + dx;
|
||||
if (isValidMove(currentPiece, newX, currentPiece.y)) {
|
||||
currentPiece.x = newX;
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyPress(e) {
|
||||
if (gameOver) return;
|
||||
switch(e.key) {
|
||||
case 'ArrowLeft': moveHorizontal(-1); break;
|
||||
case 'ArrowRight': moveHorizontal(1); break;
|
||||
case 'ArrowDown': dropPiece(); break;
|
||||
case 'ArrowUp': rotatePiece(); break;
|
||||
}
|
||||
drawBoard();
|
||||
}
|
||||
|
||||
// 移动端控制
|
||||
document.getElementById('left').addEventListener('click', () => {
|
||||
moveHorizontal(-1);
|
||||
drawBoard();
|
||||
});
|
||||
document.getElementById('right').addEventListener('click', () => {
|
||||
moveHorizontal(1);
|
||||
drawBoard();
|
||||
});
|
||||
document.getElementById('rotate').addEventListener('click', () => {
|
||||
rotatePiece();
|
||||
drawBoard();
|
||||
});
|
||||
document.getElementById('down').addEventListener('click', () => {
|
||||
dropPiece();
|
||||
drawBoard();
|
||||
});
|
||||
|
||||
startBtn.addEventListener('click', () => {
|
||||
initBoard();
|
||||
score = 0;
|
||||
gameSpeed = 1000;
|
||||
gameOver = false;
|
||||
scoreElement.textContent = score;
|
||||
startBtn.style.display = 'none';
|
||||
currentPiece = createPiece();
|
||||
nextPiece = createPiece();
|
||||
drawNextPiece();
|
||||
if (gameLoop) clearInterval(gameLoop);
|
||||
gameLoop = setInterval(() => {
|
||||
dropPiece();
|
||||
drawBoard();
|
||||
}, gameSpeed);
|
||||
});
|
||||
|
||||
// 初始化游戏
|
||||
document.addEventListener('keydown', handleKeyPress);
|
||||
initBoard();
|
||||
drawBoard();
|
||||
|
||||
// 新增暂停功能
|
||||
let isPaused = false;
|
||||
|
||||
pauseBtn.addEventListener('click', () => {
|
||||
if (gameOver) return;
|
||||
isPaused = !isPaused;
|
||||
if (isPaused) {
|
||||
clearInterval(gameLoop);
|
||||
pauseBtn.textContent = '继续';
|
||||
} else {
|
||||
gameLoop = setInterval(gameStep, gameSpeed);
|
||||
pauseBtn.textContent = '暂停';
|
||||
}
|
||||
});
|
||||
|
||||
function gameStep() {
|
||||
dropPiece();
|
||||
drawBoard();
|
||||
}
|
||||
|
||||
startBtn.addEventListener('click', () => {
|
||||
initBoard();
|
||||
score = 0;
|
||||
gameSpeed = 1000;
|
||||
gameOver = false;
|
||||
isPaused = false;
|
||||
scoreElement.textContent = score;
|
||||
startBtn.style.display = 'none';
|
||||
pauseBtn.style.display = 'inline-block';
|
||||
pauseBtn.textContent = '暂停';
|
||||
currentPiece = createPiece();
|
||||
nextPiece = createPiece();
|
||||
drawNextPiece();
|
||||
if (gameLoop) clearInterval(gameLoop);
|
||||
gameLoop = setInterval(gameStep, gameSpeed);
|
||||
});
|
||||
37
index.html
Normal file
37
index.html
Normal file
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>俄罗斯方块</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="game-container">
|
||||
<div class="game-info">
|
||||
<div class="score-board">
|
||||
<h2>得分</h2>
|
||||
<div id="score">0</div>
|
||||
</div>
|
||||
<div class="next-block">
|
||||
<h2>下一个</h2>
|
||||
<canvas id="nextCanvas" width="100" height="100"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="gameCanvas"></canvas>
|
||||
|
||||
<div class="controls">
|
||||
<button id="startBtn" class="control-btn">开始游戏</button>
|
||||
<button id="pauseBtn" class="control-btn" disabled>暂停</button>
|
||||
<div class="mobile-controls">
|
||||
<button class="control-btn arrow-btn" id="left">←</button>
|
||||
<button class="control-btn arrow-btn" id="rotate">↻</button>
|
||||
<button class="control-btn arrow-btn" id="right">→</button>
|
||||
<button class="control-btn arrow-btn" id="down">↓</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="game.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
104
style.css
Normal file
104
style.css
Normal file
@ -0,0 +1,104 @@
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
|
||||
font-family: Arial, sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.game-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
canvas {
|
||||
border: 2px solid #444;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.game-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.score-board, .next-block {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.next-block canvas {
|
||||
background: #000;
|
||||
margin-top: 10px;
|
||||
width: 120px; /* 根据最大方块尺寸设置 */
|
||||
height: 90px;
|
||||
border: 2px solid #444;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
padding: 12px 24px;
|
||||
background: linear-gradient(145deg, #4CAF50, #45a049);
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.control-btn:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.mobile-controls {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.arrow-btn {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
padding: 0;
|
||||
font-size: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#rotate {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
#down {
|
||||
grid-column: 1 / 4;
|
||||
}
|
||||
/* 暂停按钮样式 */
|
||||
#pauseBtn {
|
||||
background: linear-gradient(145deg, #2196F3, #1976D2);
|
||||
}
|
||||
|
||||
.control-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user