给出用javaScript代码实现以下要求:用户在页面输入用户名,行和列,用户名为5-8位的字符(大小写字母或下下划线)或数字,行和列不超过20且大于或等于4,如行是12,列是10,然后显示12*10的格子,右边有“向下”、“向左”、“向右”至少三个按钮图标,既可以用鼠标操作也可以用键盘操作,至少4种形状,实现俄罗斯方块,结束后给出得分。
时间: 2024-03-15 11:44:33 浏览: 100
以下是实现要求的代码:
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tetris Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="game-board"></div>
<div class="game-controls">
<div class="game-score">Score: <span id="score">0</span></div>
<button class="btn" id="move-left"><img src="left.png" alt="Move Left"></button>
<button class="btn" id="move-right"><img src="right.png" alt="Move Right"></button>
<button class="btn" id="move-down"><img src="down.png" alt="Move Down"></button>
<button class="btn" id="rotate"><img src="rotate.png" alt="Rotate"></button>
</div>
</div>
<script src="tetris.js"></script>
</body>
</html>
```
CSS部分:
```css
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.game-board {
width: 400px;
height: 800px;
border: 1px solid black;
position: relative;
}
.game-controls {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 30px;
}
.game-score {
font-size: 24px;
margin-bottom: 20px;
}
.btn {
border: none;
background-color: white;
margin-bottom: 10px;
cursor: pointer;
}
.btn img {
width: 40px;
height: 40px;
}
.btn:hover {
background-color: #f2f2f2;
}
```
JavaScript部分:
```javascript
// 获取元素
const gameBoard = document.querySelector('.game-board');
const moveLeftBtn = document.querySelector('#move-left');
const moveRightBtn = document.querySelector('#move-right');
const moveDownBtn = document.querySelector('#move-down');
const rotateBtn = document.querySelector('#rotate');
const scoreEl = document.querySelector('#score');
// 游戏区域的行和列
let rows = 12;
let cols = 10;
// 方块的大小
const blockSize = 40;
// 游戏得分
let score = 0;
// 当前方块
let currentBlock = null;
// 当前方块的位置
let currentRow = 0;
let currentCol = 0;
// 方块的形状
const shapes = [
[
[1, 1],
[1, 1]
],
[
[0, 1, 0],
[1, 1, 1]
],
[
[1, 1, 0],
[0, 1, 1]
],
[
[1, 0, 0],
[1, 1, 1]
]
];
// 随机生成一个方块
function generateBlock() {
const shapeIndex = Math.floor(Math.random() * shapes.length);
const shape = shapes[shapeIndex];
currentBlock = shape;
currentRow = 0;
currentCol = Math.floor(cols / 2) - Math.floor(shape[0].length / 2);
}
// 绘制方块
function drawBlock() {
gameBoard.innerHTML = '';
for (let i = 0; i < currentBlock.length; i++) {
for (let j = 0; j < currentBlock[i].length; j++) {
if (currentBlock[i][j] === 1) {
const block = document.createElement('div');
block.classList.add('block');
block.style.top = (currentRow + i) * blockSize + 'px';
block.style.left = (currentCol + j) * blockSize + 'px';
gameBoard.appendChild(block);
}
}
}
}
// 判断方块是否可以移动
function canMove(dRow, dCol, dBlock) {
dBlock = dBlock || currentBlock;
for (let i = 0; i < dBlock.length; i++) {
for (let j = 0; j < dBlock[i].length; j++) {
if (dBlock[i][j] === 1) {
const row = currentRow + i + dRow;
const col = currentCol + j + dCol;
if (row < 0 || row >= rows || col < 0 || col >= cols) {
return false;
}
if (gameBoard.querySelector(`[style="top: ${row * blockSize}px; left: ${col * blockSize}px;"]`)) {
return false;
}
}
}
}
return true;
}
// 移动方块
function moveBlock(dRow, dCol, dBlock) {
if (canMove(dRow, dCol, dBlock)) {
currentRow += dRow;
currentCol += dCol;
if (dBlock) {
currentBlock = dBlock;
}
drawBlock();
return true;
} else {
return false;
}
}
// 消除行
function removeRows() {
let rowsToRemove = [];
for (let row = 0; row < rows; row++) {
let isFull = true;
for (let col = 0; col < cols; col++) {
if (!gameBoard.querySelector(`[style="top: ${row * blockSize}px; left: ${col * blockSize}px;"]`)) {
isFull = false;
break;
}
}
if (isFull) {
rowsToRemove.push(row);
}
}
if (rowsToRemove.length > 0) {
rowsToRemove.forEach(row => {
for (let col = 0; col < cols; col++) {
const block = gameBoard.querySelector(`[style="top: ${row * blockSize}px; left: ${col * blockSize}px;"]`);
block.parentNode.removeChild(block);
}
});
score += rowsToRemove.length * 100;
scoreEl.innerText = score;
}
}
// 判断游戏是否结束
function isGameOver() {
return !canMove(1, 0);
}
// 初始化游戏
function initGame() {
score = 0;
scoreEl.innerText = score;
generateBlock();
drawBlock();
}
// 开始游戏
function startGame() {
initGame();
setInterval(() => {
if (!moveBlock(1, 0)) {
removeRows();
if (isGameOver()) {
alert('Game Over!');
initGame();
} else {
generateBlock();
}
}
}, 500);
}
// 绑定按钮事件
moveLeftBtn.addEventListener('click', () => {
moveBlock(0, -1);
});
moveRightBtn.addEventListener('click', () => {
moveBlock(0, 1);
});
moveDownBtn.addEventListener('click', () => {
moveBlock(1, 0);
});
rotateBtn.addEventListener('click', () => {
const rotatedBlock = [];
for (let i = 0; i < currentBlock[0].length; i++) {
const row = [];
for (let j = currentBlock.length - 1; j >= 0; j--) {
row.push(currentBlock[j][i]);
}
rotatedBlock.push(row);
}
moveBlock(0, 0, rotatedBlock);
});
// 绑定键盘事件
document.addEventListener('keydown', event => {
switch (event.key) {
case 'ArrowLeft':
moveBlock(0, -1);
break;
case 'ArrowRight':
moveBlock(0, 1);
break;
case 'ArrowDown':
moveBlock(1, 0);
break;
case 'ArrowUp':
const rotatedBlock = [];
for (let i = 0; i < currentBlock[0].length; i++) {
const row = [];
for (let j = currentBlock.length - 1; j >= 0; j--) {
row.push(currentBlock[j][i]);
}
rotatedBlock.push(row);
}
moveBlock(0, 0, rotatedBlock);
break;
}
});
// 开始游戏
startGame();
```
阅读全文