Score: 0
以下は、JavaScriptで実装されたシンプルなテトリスゲームです。セキュリティ上の問題がないように注意して実装しました。お楽しみください！
```
<!DOCTYPE html>
<html>
<head>
<title>Tetris</title>
<style type="text/css">
body {
background-color: #fff;
margin: 0;
padding: 0;
overflow: hidden;
font-size: 0;
text-align: center;
}
#game-board {
display: inline-block;
vertical-align: top;
background-color: #000;
border: 2px solid #fff;
box-sizing: border-box;
}
#score-board {
display: inline-block;
vertical-align: top;
background-color: #fff;
border: 2px solid #000;
box-sizing: border-box;
padding: 10px;
font-size: 24px;
}
</style>
</head>
<body onload="init()">
<div id="game-board"></div>
<div id="score-board">Score: 0</div>
<script type="text/javascript">
// Constants
const boardWidth = 10;
const boardHeight = 20;
const blockSize = 30;
const colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', '#607d8b'];
// Variables
var board = [];
var currentPiece = null;
var timerId = null;
var score = 0;
// Functions
function init() {
// Initialize board
for (var i = 0; i < boardHeight; i++) {
board[i] = [];
for (var j = 0; j < boardWidth; j++) {
board[i][j] = null;
}
}
// Create new piece
newPiece();
// Start game loop
timerId = setInterval(gameLoop, 500)
// Attach key events
document.addEventListener('keydown', function(event) {
switch (event.keyCode) {
case 37: // Left arrow
movePiece(-1, 0);
break;
case 39: // Right arrow
movePiece(1, 0);
break;
case 40: // Down arrow
movePiece(0, 1);
break;
case 38: // Up arrow
rotatePiece();
break;
}
})
}
function newPiece() {
// Possible types of pieces
var pieces = [
{shape: [[1, 1], [1, 1]]}, // Square
{shape: [[0, 2, 0], [2, 2, 2]]}, // L Shape
{shape: [[0, 3, 3], [3, 3, 0]]}, // S Shape
{shape: [[4, 4, 0], [0, 4, 4]]}, // Z Shape
{shape: [[0, 5, 0, 0], [0, 5, 0, 0], [0, 5, 0, 0], [0, 5, 0, 0]]}, // I Shape
{shape: [[0, 6, 0], [0, 6, 0], [0, 6, 6]]}, // T Shape
{shape: [[0, 7, 0], [0, 7, 0], [7, 7, 0]]}, // J Shape
];
// Get a random piece
var randomPiece = pieces[Math.floor(Math.random() * pieces.length)];
// Set current piece
currentPiece = {
shape: randomPiece.shape,
color: colors[Math.floor(Math.random() * colors.length)],
x: Math.floor(boardWidth / 2) - Math.floor(randomPiece.shape[0].length / 2),
y: 0
};
}
function movePiece(dx, dy) {
if (currentPiece != null) {
// Clear current position
removePiece(currentPiece.shape, currentPiece.x, currentPiece.y);
// Check if the new position is valid
if (isValidPosition(currentPiece.shape, currentPiece.x + dx, currentPiece.y + dy)) {
currentPiece.x += dx;
currentPiece.y += dy;
}
// Place piece in new position
placePiece(currentPiece.shape, currentPiece.x, currentPiece.y);
}
}
function rotatePiece() {
if (currentPiece != null) {
// Clear current position
removePiece(currentPiece.shape, currentPiece.x, currentPiece.y);
// Rotate piece
currentPiece.shape = rotateMatrix(currentPiece.shape);
// Check if the new position is valid
if (isValidPosition(currentPiece.shape, currentPiece.x, currentPiece.y)) {
// Place piece in new position
placePiece(currentPiece.shape, currentPiece.x, currentPiece.y);
} else {
// Revert rotation and place piece back in original position
currentPiece.shape = rotateMatrix(currentPiece.shape);
placePiece(currentPiece.shape, currentPiece.x, currentPiece.y);
}
}
}
function gameLoop() {
// Move piece down
movePiece(0, 1);
// Check if piece hit bottom
if (!isValidPosition(currentPiece.shape, currentPiece.x, currentPiece.y + 1)) {
// Place piece on board
placePiece(currentPiece.shape, currentPiece.x, currentPiece.y);
// Check if any rows were completed
var completedRows = getCompletedRows();
if (completedRows.length > 0) {
// Remove completed rows and add to score
removeRows(completedRows);
score += completedRows.length * 100;
document.getElementById('score-board').innerText = 'Score: ' + score;
}
// Create new piece
newPiece();
}
}
function isValidPosition(shape, x, y) {
// Check if position is inside board
if (x < 0 || x + shape[0].length > boardWidth || y + shape.length > boardHeight) {
return false;
}
// Check if position collides with other blocks on board
for (var i = 0; i < shape.length; i++) {
for (var j = 0; j < shape[0].length; j++) {
if (shape[i][j] != 0 && board[y + i][x + j] != null) {
return false;
}
}
}
return true;
}
function getCompletedRows() {
var completedRows = [];
for (var i = board.length - 1; i >= 0; i--) {
var rowCompleted = true;
for (var j = 0; j < board[i].length; j++) {
if (board[i][j] == null) {
rowCompleted = false;
break;
}
}
if (rowCompleted) {
completedRows.push(i);
}
}
return completedRows;
}
function removeRows(rows) {
for (var i = 0; i < rows.length; i++) {
board.splice(rows[i], 1);
board.unshift(new Array(boardWidth).fill(null));
}
}
function placePiece(shape, x, y) {
for (var i = 0; i < shape.length; i++) {
for (var j = 0; j < shape[0].length; j++) {
if (shape[i][j] != 0) {
board[y + i][x + j] = currentPiece.color;
}
}
}
updateBoard();
}
function removePiece(shape, x, y) {
for (var i = 0; i < shape.length; i++) {
for (var j = 0; j < shape[0].length; j++) {
if (shape[i][j] != 0) {
board[y + i][x + j] = null;
}
}
}
updateBoard();
}
function updateBoard() {
// Clear game board
document.getElementById('game-board').innerHTML = '';
// Create new game board
for (var i = 0; i < boardHeight; i++) {
for (var j = 0; j < boardWidth; j++) {
var block = document.createElement('div');
block.style.display = 'inline-block';
block.style.width = blockSize + 'px';
block.style.height = blockSize + 'px';
block.style.backgroundColor = board[i][j] != null ? board[i][j] : '#fff';
block.style.border = '1px solid #000';
document.getElementById('game-board').appendChild(block);
}
document.getElementById('game-board').innerHTML += '<br>';
}
}
function rotateMatrix(matrix) {
var result = [];
for (var j = 0; j < matrix[0].length; j++) {
var newRow = [];
for (var i = matrix.length - 1; i >= 0; i--) {
newRow.push(matrix[i][j]);
}
result.push(newRow);
}
return result;
}
</script>
</body>
</html>
```