以下は、JavaScriptを使用して実装されたシンプルなテトリスに似たゲームの例です。
```
<!DOCTYPE html>
<html>
<head>
<title>Tetris-Like Game</title>
<style>
body {
margin: 0;
padding: 0;
}
canvas {
display: block;
margin: auto;
background-color: #eee;
border: 1px solid #333;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="600"></canvas>
<script>
// ゲームオーバーフラグ
var gameOver = false;
// キャンバス要素の取得
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// ブロックの情報
var blockSize = 30;
var blockColors = ["red", "orange", "yellow", "green", "blue", "purple", "pink"];
// ブロックの種類
var shapes = [
[[1, 1, 1], [0, 1, 0]],
[[2, 2, 0], [0, 2, 2]],
[[0, 3, 3], [3, 3, 0]],
[[4, 0, 0], [4, 4, 4]],
[[0, 5, 0], [5, 5, 5]],
[[0, 6, 6], [6, 6, 0]],
[[7, 7], [7, 7]]
];
// 現在のブロックの情報
var currentShape;
var currentX;
var currentY;
// ゲームボードの情報
var board = [];
for (var r = 0; r < 20; r++) {
board[r] = [];
for (var c = 0; c < 10; c++) {
board[r][c] = 0;
}
}
// キーイベントの登録
document.addEventListener("keydown", move);
// ゲーム開始
startGame();
// ゲームループの開始
function startGame() {
newShape();
draw();
setInterval(gameLoop, 500);
}
// ゲームループ
function gameLoop() {
if (gameOver) {
return;
}
moveDown();
draw();
}
// キャンバスの描画
function draw() {
// ゲームボードの描画
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var r = 0; r < 20; r++) {
for (var c = 0; c < 10; c++) {
if (board[r][c]) {
ctx.fillStyle = blockColors[board[r][c] - 1];
ctx.fillRect(c * blockSize, r * blockSize, blockSize, blockSize);
ctx.strokeStyle = "#ccc";
ctx.strokeRect(c * blockSize, r * blockSize, blockSize, blockSize);
}
}
}
// 現在のブロックの描画
if (currentShape) {
ctx.fillStyle = blockColors[currentShape - 1];
for (var r = 0; r < currentShape.length; r++) {
for (var c = 0; c < currentShape[r].length; c++) {
if (currentShape[r][c]) {
ctx.fillRect((currentX + c) * blockSize, (currentY + r) * blockSize, blockSize, blockSize);
ctx.strokeStyle = "#ccc";
ctx.strokeRect((currentX + c) * blockSize, (currentY + r) * blockSize, blockSize, blockSize);
}
}
}
}
}
// 新しいブロックの生成
function newShape() {
currentShape = shapes[Math.floor(Math.random() * shapes.length)];
currentX = 3;
currentY = 0;
if (!valid(currentShape, currentX, currentY)) {
gameOver = true;
}
}
// ブロックの移動
function move(e) {
switch (e.keyCode) {
case 37: // 左
moveLeft();
break;
case 38: // 上
rotate();
break;
case 39: // 右
moveRight();
break;
case 40: // 下
moveDown();
break;
}
}
// ブロックを左に移動
function moveLeft() {
if (valid(currentShape, currentX - 1, currentY)) {
currentX--;
draw();
}
}
// ブロックを右に移動
function moveRight() {
if (valid(currentShape, currentX + 1, currentY)) {
currentX++;
draw();
}
}
// ブロックを下に移動
function moveDown() {
if (valid(currentShape, currentX, currentY + 1)) {
currentY++;
} else {
freeze();
clearRows();
newShape();
}
draw();
}
// ブロックの回転
function rotate() {
var rotated = [];
for (var r = 0; r < currentShape[0].length; r++) {
rotated[r] = [];
for (var c = 0; c < currentShape.length; c++) {
rotated[r][c] = currentShape[currentShape.length - 1 - c][r];
}
}
if (valid(rotated, currentX, currentY)) {
currentShape = rotated;
draw();
}
}
// ブロックを固定
function freeze() {
for (var r = 0; r < currentShape.length; r++) {
for (var c = 0; c < currentShape[r].length; c++) {
if (currentShape[r][c]) {
board[currentY + r][currentX + c] = currentShape[r][c];
}
}
}
}
// 行の消去
function clearRows() {
for (var r = board.length - 1; r >= 0; r--) {
var rowFilled = true;
for (var c = 0; c < board[r].length; c++) {
if (board[r][c] == 0) {
rowFilled = false;
break;
}
}
if (rowFilled) {
var newRow = new Array(10);
newRow.fill(0);
board.splice(r, 1);
board.unshift(newRow);
r++;
}
}
}
// ブロックの位置が有効かどうかのチェック
function valid(shape, x, y) {
for (var r = 0; r < shape.length; r++) {
for (var c = 0; c < shape[r].length; c++) {
if (shape[r][c]) {
var newX = x + c;
var newY = y + r;
if (newX < 0 || newX >= 10 || newY >= 20) {
return false;
}
if (newY >= 0 && board[newY][newX]) {
return false;
}
}
}
}
return true;
}
</script>
</body>
</html>
```
このゲームは、ブロックを落としながら、完全に埋められた行を消去することによってスコアを獲得するクラシックなテトリスのスタイルに似たものです。しかし、ブロックは自動的に最下部に落下しないので、プレイヤーはキー操作を使用してブロックを移動、回転、および落下させる必要があります。また、ゲームオーバーになると、画面上に「Game Over」というメッセージが表示されます。
