写一个js的俄罗斯方块
时间: 2023-12-31 09:05:44 浏览: 54
好的,以下是一个简单的JS俄罗斯方块游戏:
HTML
```html
<!DOCTYPE html>
<html>
<head>
<title>Tetris</title>
<style>
body {
background-color: #444;
color: #fff;
font-family: sans-serif;
}
#canvas {
margin: 0 auto;
display: block;
background-color: #222;
border: 5px solid #444;
}
</style>
</head>
<body>
<canvas id="canvas" width="240" height="400"></canvas>
<script src="tetris.js"></script>
</body>
</html>
```
JS
```javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 游戏区域
var board = [];
for (var row = 0; row < 20; row++) {
board[row] = [];
for (var col = 0; col < 10; col++) {
board[row][col] = 0;
}
}
// 方块
var pieces = [
// I
[
[1, 1, 1, 1]
],
// J
[
[1, 0, 0],
[1, 1, 1]
],
// L
[
[0, 0, 1],
[1, 1, 1]
],
// O
[
[1, 1],
[1, 1]
],
// S
[
[0, 1, 1],
[1, 1, 0]
],
// T
[
[0, 1, 0],
[1, 1, 1]
],
// Z
[
[1, 1, 0],
[0, 1, 1]
]
];
// 随机方块
function randomPiece() {
var index = Math.floor(Math.random() * pieces.length);
return pieces[index];
}
// 当前方块
var currentPiece = randomPiece();
var currentRow = 0;
var currentCol = 3;
// 绘制方块
function drawPiece(piece, row, col, color) {
for (var r = 0; r < piece.length; r++) {
for (var c = 0; c < piece[r].length; c++) {
if (piece[r][c]) {
drawBlock(row + r, col + c, color);
}
}
}
}
// 绘制方块块
function drawBlock(row, col, color) {
ctx.fillStyle = color;
ctx.fillRect(col * 24, row * 24, 24, 24);
ctx.strokeStyle = "#fff";
ctx.strokeRect(col * 24, row * 24, 24, 24);
}
// 游戏循环
var interval;
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制游戏区域
for (var row = 0; row < board.length; row++) {
for (var col = 0; col < board[row].length; col++) {
if (board[row][col]) {
drawBlock(row, col, "#fff");
}
}
}
// 绘制当前方块
drawPiece(currentPiece, currentRow, currentCol, "#f00");
// 检查是否碰撞
if (collides(currentPiece, currentRow + 1, currentCol)) {
// 固定方块
fixPiece(currentPiece, currentRow, currentCol);
// 随机下一个方块
currentPiece = randomPiece();
currentRow = 0;
currentCol = 3;
// 检查是否游戏结束
if (collides(currentPiece, currentRow, currentCol)) {
clearInterval(interval);
alert("Game Over");
}
} else {
currentRow++;
}
// 循环
interval = setTimeout(loop, 500);
}
loop();
// 固定方块
function fixPiece(piece, row, col) {
for (var r = 0; r < piece.length; r++) {
for (var c = 0; c < piece[r].length; c++) {
if (piece[r][c]) {
board[row + r][col + c] = 1;
}
}
}
}
// 检查是否碰撞
function collides(piece, row, col) {
for (var r = 0; r < piece.length; r++) {
for (var c = 0; c < piece[r].length; c++) {
if (piece[r][c]) {
var newRow = row + r;
var newCol = col + c;
// 检查是否越界
if (newRow < 0 || newRow >= board.length || newCol < 0 || newCol >= board[0].length) {
return true;
}
// 检查是否与已有方块重叠
if (board[newRow][newCol]) {
return true;
}
}
}
}
return false;
}
// 键盘事件
document.addEventListener("keydown", function(event) {
if (event.keyCode === 37) { // 左箭头
if (!collides(currentPiece, currentRow, currentCol - 1)) {
currentCol--;
}
} else if (event.keyCode === 39) { // 右箭头
if (!collides(currentPiece, currentRow, currentCol + 1)) {
currentCol++;
}
} else if (event.keyCode === 40) { // 下箭头
if (!collides(currentPiece, currentRow + 1, currentCol)) {
currentRow++;
}
} else if (event.keyCode === 38) { // 上箭头
// 旋转方块
var rotatedPiece = [];
for (var r = 0; r < currentPiece[0].length; r++) {
rotatedPiece[r] = [];
for (var c = 0; c < currentPiece.length; c++) {
rotatedPiece[r][c] = currentPiece[currentPiece.length - 1 - c][r];
}
}
if (!collides(rotatedPiece, currentRow, currentCol)) {
currentPiece = rotatedPiece;
}
}
});
```