Simple HTML Tetris Game - Play Now!
<!DOCTYPE html>
<html>
<head>
<style>
#tetris-container {
width: 600px;
height: 400px;
margin: 10px auto;
background-color: #ccc;
position: relative;
border: 1px solid #000;
}
#tetris-container div {
width: 20px;
height: 20px;
position: absolute;
background: #000;
}
</style>
<script>
// Create a 2D array for the game board
var board = new Array();
for (var row=0; row<20; row++) {
board[row] = new Array();
for (var col=0; col<10; col++) {
board[row][col] = 0;
}
}
<pre><code>// Create a 2D array for our pieces
var pieces = [
[[1,1],[1,1]], // Square
[[2,2,2],[0,0,2]], // J
[[3,3,3],[3,0,0]], // L
[[4,4,4,4]], // Line
[[5,5],[5,5]], // S
[[6,6,6],[0,6,0]], // T
[[7,7,7],[0,7,7]] // Z
];
// Keep track of the current position of the piece
var currentX = 0;
var currentY = 0;
// Keep track of the current piece
var currentPiece = 0;
// Keep track of the next piece
var nextPiece = 0;
// Score
var score = 0;
// Function to draw the board
function drawBoard() {
for (var row=0; row<20; row++) {
for (var col=0; col<10; col++) {
var square = document.getElementById('s' + row + col);
if (board[row][col] == 0) {
square.style.backgroundColor = '#ccc';
}
else {
square.style.backgroundColor = '#' + board[row][col];
}
}
}
}
// Function to draw the current piece
function drawPiece() {
for (var row=0; row<pieces[currentPiece].length; row++) {
for (var col=0; col<pieces[currentPiece][row].length; col++) {
if (pieces[currentPiece][row][col] != 0) {
var square = document.getElementById('s' + (row + currentY) + (col + currentX));
square.style.backgroundColor = '#' + pieces[currentPiece][row][col];
}
}
}
}
// Function to remove the current piece
function removePiece() {
for (var row=0; row<pieces[currentPiece].length; row++) {
for (var col=0; col<pieces[currentPiece][row].length; col++) {
if (pieces[currentPiece][row][col] != 0) {
var square = document.getElementById('s' + (row + currentY) + (col + currentX));
square.style.backgroundColor = '#ccc';
}
}
}
}
// Function to add the current piece to the board
function addPieceToBoard() {
for (var row=0; row<pieces[currentPiece].length; row++) {
for (var col=0; col<pieces[currentPiece][row].length; col++) {
if (pieces[currentPiece][row][col] != 0) {
board[row + currentY][col + currentX] = pieces[currentPiece][row][col];
}
}
}
}
// Function to check for a full row
function checkFullRow() {
for (var row=0; row<20; row++) {
var full = true;
for (var col=0; col<10; col++) {
if (board[row][col] == 0) {
full = false;
break;
}
}
if (full) {
// Clear the row
for (var col=0; col<10; col++) {
board[row][col] = 0;
}
// Move all rows down one
for (var y=row; y>1; y--) {
for (var col=0; col<10; col++) {
board[y][col] = board[y-1][col];
}
}
// Increase the score
score++;
// Update the score display
document.getElementById('score').innerHTML = 'Score: ' + score;
}
}
}
// Function to get the next piece
function getNextPiece() {
currentPiece = nextPiece;
nextPiece = Math.floor(Math.random() * 7);
currentX = 3;
currentY = 0;
drawPiece();
drawNextPiece();
document.getElementById('score').innerHTML = 'Score: ' + score;
}
// Function to draw the next piece
function drawNextPiece() {
for (var row=0; row<pieces[nextPiece].length; row++) {
for (var col=0; col<pieces[nextPiece][row].length; col++) {
if (pieces[nextPiece][row][col] != 0) {
var square = document.getElementById('n' + row + col);
square.style.backgroundColor = '#' + pieces[nextPiece][row][col];
}
else {
var square = document.getElementById('n' + row + col);
square.style.backgroundColor = '#ccc';
}
}
}
}
// Function to check if the piece can move down
function canMoveDown() {
for (var row=pieces[currentPiece].length - 1; row>=0; row--) {
for (var col=0; col<pieces[currentPiece][row].length; col++) {
if (pieces[currentPiece][row][col] != 0) {
if (typeof board[row + currentY + 1] == 'undefined') {
return false;
}
else {
if (board[row + currentY + 1][col + currentX] != 0) {
return false;
}
}
}
}
}
return true;
}
// Function to move the piece down
function moveDown() {
if (canMoveDown()) {
removePiece();
currentY++;
drawPiece();
}
else {
addPieceToBoard();
checkFullRow();
getNextPiece();
}
}
// Function to check if the piece can move to the left
function canMoveLeft() {
for (var row=0; row<pieces[currentPiece].length; row++) {
for (var col=0; col<pieces[currentPiece][row].length; col++) {
if (pieces[currentPiece][row][col] != 0) {
if (typeof board[row + currentY][col + currentX - 1] == 'undefined') {
return false;
}
else {
if (board[row + currentY][col + currentX - 1] != 0) {
return false;
}
}
}
}
}
return true;
}
// Function to move the piece to the left
function moveLeft() {
if (canMoveLeft()) {
removePiece();
currentX--;
drawPiece();
}
}
// Function to check if the piece can move to the right
function canMoveRight() {
for (var row=0; row<pieces[currentPiece].length; row++) {
for (var col=pieces[currentPiece][row].length - 1; col>=0; col--) {
if (pieces[currentPiece][row][col] != 0) {
if (typeof board[row + currentY][col + currentX + 1] == 'undefined') {
return false;
}
else {
if (board[row + currentY][col + currentX + 1] != 0) {
return false;
}
}
}
}
}
return true;
}
// Function to move the piece to the right
function moveRight() {
if (canMoveRight()) {
removePiece();
currentX++;
drawPiece();
}
}
// Function to rotate the piece
function rotatePiece() {
var newPiece = new Array();
for (var row=0; row<pieces[currentPiece][0].length; row++) {
newPiece[row] = new Array();
for (var col=pieces[currentPiece].length - 1; col>=0; col--) {
newPiece[row][col] = pieces[currentPiece][col][row];
}
}
if (canPlacePiece(newPiece)) {
removePiece();
pieces[currentPiece] = newPiece;
drawPiece();
}
}
// Function to check if the piece can be placed
function canPlacePiece(piece) {
for (var row=0; row<piece.length; row++) {
for (var col=0; col<piece[row].length; col++) {
if (piece[row][col] != 0) {
if (typeof board[row + currentY][col + currentX] == 'undefined') {
return false;
}
else {
if (board[row + currentY][col + currentX] != 0) {
return false;
}
}
}
}
}
return true;
}
// Function to start the game
function startGame() {
getNextPiece();
setInterval(moveDown, 500);
}
// Create the HTML for the game board
var container = document.getElementById('tetris-container');
for (var row=0; row<20; row++) {
for (var col=0; col<10; col++) {
var square = document.createElement('div');
square.id = 's' + row + col;
square.style.top = (row * 20) + 'px';
square.style.left = (col * 20) + 'px';
container.appendChild(square);
}
}
// Create the HTML for the next piece
var nextContainer = document.getElementById('next-container');
for (var row=0; row<4; row++) {
for (var col=0; col<4; col++) {
var square = document.createElement('div');
square.id = 'n' + row + col;
square.style.top = (row * 20) + 'px';
square.style.left = (col * 20) + 'px';
nextContainer.appendChild(square);
}
}
// Add event listeners for keyboard input
document.addEventListener('keydown', function(e) {
if (e.keyCode == 37) { // Left arrow
moveLeft();
}
else if (e.keyCode == 39) { // Right arrow
moveRight();
}
else if (e.keyCode == 40) { // Down arrow
moveDown();
}
else if (e.keyCode == 38) { // Up arrow
rotatePiece();
}
});
// Start the game
startGame();
</code></pre>
</script>
</head>
<body>
<div id='tetris-container'></div>
<div id='next-container'>Next piece:</div>
<div id='score'>Score: 0</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmpd 著作权归作者所有。请勿转载和采集!