chatGPTで「HTML、CSS、JSでテトリス風ゲームを作ってください。 ゲームは矢印キーでブロックを操作、スペースキーでブロックを回転するようにしてください」と言って作ってもらいました。
下のボタンで見れます!
やり方
↑↓←→の矢印きーでブロックを動かします。
スペースキーでブロックを回転できます。
上まで積み上げると動作が停止します。
URL
※新しいタブで開きます
コード
コードはこちら↓↓↓(htmlファイルです)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris Game</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #111;
color: #fff;
font-family: Arial, sans-serif;
}
#game-container {
position: relative;
width: 200px;
height: 400px;
background-color: #222;
border: 2px solid #555;
overflow: hidden;
}
.block {
position: absolute;
width: 20px;
height: 20px;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.effect {
position: absolute;
width: 20px;
height: 20px;
background-color: yellow;
opacity: 0.8;
animation: fadeOut 0.5s forwards;
}
@keyframes fadeOut {
0% { opacity: 0.8; }
100% { opacity: 0; }
}
#game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: red;
font-size: 2rem;
display: none;
}
</style>
</head>
<body>
<div id="game-container">
<div id="game-over">Game Over</div>
</div>
<script>
const gameContainer = document.getElementById('game-container');
const gameOverText = document.getElementById('game-over');
const rows = 20;
const cols = 10;
const blockSize = 20;
const gameSpeed = 500; // in milliseconds
const shapes = [
{ shape: [[1, 1, 1, 1]], color: '#0ff' }, // I shape
{ shape: [[1, 1], [1, 1]], color: '#ff0' }, // O shape
{ shape: [[0, 1, 0], [1, 1, 1]], color: '#f0f' }, // T shape
{ shape: [[1, 1, 0], [0, 1, 1]], color: '#f00' }, // Z shape
{ shape: [[0, 1, 1], [1, 1, 0]], color: '#0f0' }, // S shape
{ shape: [[1, 1, 1], [1, 0, 0]], color: '#00f' }, // L shape
{ shape: [[1, 1, 1], [0, 0, 1]], color: '#ffa500' } // J shape
];
let board = Array.from({ length: rows }, () => Array(cols).fill(0));
let currentShape = null;
let currentColor = null;
let currentX = 0;
let currentY = 0;
function drawBoard() {
gameContainer.innerHTML = '';
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
if (board[r][c]) {
const block = document.createElement('div');
block.classList.add('block');
block.style.backgroundColor = board[r][c];
block.style.top = `${r * blockSize}px`;
block.style.left = `${c * blockSize}px`;
gameContainer.appendChild(block);
}
}
}
}
function drawShape() {
currentShape.forEach((row, r) => {
row.forEach((cell, c) => {
if (cell) {
const block = document.createElement('div');
block.classList.add('block');
block.style.backgroundColor = currentColor;
block.style.top = `${(currentY + r) * blockSize}px`;
block.style.left = `${(currentX + c) * blockSize}px`;
gameContainer.appendChild(block);
}
});
});
}
function canMove(newX, newY, newShape) {
return newShape.every((row, r) => {
return row.every((cell, c) => {
if (!cell) return true;
const x = newX + c;
const y = newY + r;
return x >= 0 && x < cols && y < rows && !board[y][x];
});
});
}
function rotateShape(shape) {
return shape[0].map((_, c) => shape.map(row => row[c]).reverse());
}
function placeShape() {
currentShape.forEach((row, r) => {
row.forEach((cell, c) => {
if (cell) {
board[currentY + r][currentX + c] = currentColor;
}
});
});
}
function clearLines() {
let clearedLines = 0;
board = board.filter((row, rIndex) => {
if (row.every(cell => cell)) {
clearedLines++;
row.forEach((_, cIndex) => {
const effect = document.createElement('div');
effect.classList.add('effect');
effect.style.top = `${rIndex * blockSize}px`;
effect.style.left = `${cIndex * blockSize}px`;
gameContainer.appendChild(effect);
});
setTimeout(() => {
const effects = document.querySelectorAll('.effect');
effects.forEach(effect => effect.remove());
}, 500); // Wait for the animation to complete
return false;
}
return true;
});
while (board.length < rows) {
board.unshift(Array(cols).fill(0));
}
}
function spawnShape() {
const randomShape = shapes[Math.floor(Math.random() * shapes.length)];
currentShape = randomShape.shape;
currentColor = randomShape.color;
currentX = Math.floor((cols - currentShape[0].length) / 2);
currentY = 0;
if (!canMove(currentX, currentY, currentShape)) {
gameOverText.style.display = 'block';
clearInterval(gameInterval);
return;
}
}
function gameLoop() {
if (canMove(currentX, currentY + 1, currentShape)) {
currentY++;
} else {
placeShape();
clearLines();
spawnShape();
}
drawBoard();
drawShape();
}
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft' && canMove(currentX - 1, currentY, currentShape)) {
currentX--;
} else if (e.key === 'ArrowRight' && canMove(currentX + 1, currentY, currentShape)) {
currentX++;
} else if (e.key === 'ArrowDown' && canMove(currentX, currentY + 1, currentShape)) {
currentY++;
} else if (e.key === ' ' || e.code === 'Space') {
const rotatedShape = rotateShape(currentShape);
if (canMove(currentX, currentY, rotatedShape)) {
currentShape = rotatedShape;
}
}
drawBoard();
drawShape();
});
spawnShape();
const gameInterval = setInterval(gameLoop, gameSpeed);
</script>
</body>
</html>
コメント