用 JavaScript 编写的简单俄罗斯方块游戏
<!DOCTYPE html>
<html>
<head>
<title>俄罗斯方块</title>
<style>
#game-board {
border: 1px solid black;
width: 200px;
height: 400px;
position: relative;
}
.block {
width: 20px;
height: 20px;
position: absolute;
}
</style>
</head>
<body>
<div id="game-board"></div>
<pre><code><script>
const boardWidth = 10;
const boardHeight = 20;
const blockSize = 20;
const shapes = [
[[1, 1, 1, 1]],
[[1, 1], [1, 1]],
[[1, 1, 0], [0, 1, 1]],
[[0, 1, 1], [1, 1, 0]],
[[1, 1, 1], [1, 0, 0]],
[[1, 1, 1], [0, 0, 1]],
[[0, 1, 0], [1, 1, 1]]
];
let board = [];
let currentShape = null;
let currentShapeX = 0;
let currentShapeY = 0;
function createBoard() {
for (let row = 0; row < boardHeight; row++) {
board[row] = [];
for (let col = 0; col < boardWidth; col++) {
board[row][col] = 0;
}
}
}
function createShape() {
const randomIndex = Math.floor(Math.random() * shapes.length);
currentShape = shapes[randomIndex];
currentShapeX = Math.floor((boardWidth - currentShape[0].length) / 2);
currentShapeY = 0;
}
function drawBoard() {
const gameBoard = document.getElementById("game-board");
gameBoard.innerHTML = "";
for (let row = 0; row < boardHeight; row++) {
for (let col = 0; col < boardWidth; col++) {
if (board[row][col] === 1) {
const block = document.createElement("div");
block.className = "block";
block.style.left = col * blockSize + "px";
block.style.top = row * blockSize + "px";
gameBoard.appendChild(block);
}
}
}
}
function drawCurrentShape() {
for (let row = 0; row < currentShape.length; row++) {
for (let col = 0; col < currentShape[row].length; col++) {
if (currentShape[row][col] === 1) {
const block = document.createElement("div");
block.className = "block";
block.style.left = (currentShapeX + col) * blockSize + "px";
block.style.top = (currentShapeY + row) * blockSize + "px";
document.getElementById("game-board").appendChild(block);
}
}
}
}
function checkCollision() {
for (let row = 0; row < currentShape.length; row++) {
for (let col = 0; col < currentShape[row].length; col++) {
if (currentShape[row][col] === 1) {
const newX = currentShapeX + col;
const newY = currentShapeY + row;
if (newX < 0 || newX >= boardWidth || newY >= boardHeight || board[newY][newX] === 1) {
return true;
}
}
}
}
return false;
}
function mergeShape() {
for (let row = 0; row < currentShape.length; row++) {
for (let col = 0; col < currentShape[row].length; col++) {
if (currentShape[row][col] === 1) {
const boardX = currentShapeX + col;
const boardY = currentShapeY + row;
board[boardY][boardX] = 1;
}
}
}
}
function removeCompletedRows() {
for (let row = boardHeight - 1; row >= 0; row--) {
const isRowCompleted = board[row].every(cell => cell === 1);
if (isRowCompleted) {
board.splice(row, 1);
board.unshift(new Array(boardWidth).fill(0));
}
}
}
function update() {
currentShapeY++;
if (checkCollision()) {
currentShapeY--;
mergeShape();
removeCompletedRows();
createShape();
if (checkCollision()) {
alert("Game Over!");
createBoard();
}
}
drawBoard();
drawCurrentShape();
}
function handleKeyPress(event) {
switch (event.keyCode) {
case 37: // Left arrow
currentShapeX--;
if (checkCollision()) {
currentShapeX++;
}
break;
case 39: // Right arrow
currentShapeX++;
if (checkCollision()) {
currentShapeX--;
}
break;
case 40: // Down arrow
currentShapeY++;
if (checkCollision()) {
currentShapeY--;
}
break;
}
}
createBoard();
createShape();
setInterval(update, 1000);
document.addEventListener("keydown", handleKeyPress);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/pxUi 著作权归作者所有。请勿转载和采集!