以下は、JavaScriptを使用してテトリスに似たゲームを実装する方法です。このゲームは、盤面上を横にスライドさせて落下するブロックを積みあげていくものです。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tetris-like Game</title>
<style>
body {
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #222;
}
canvas {
display: block;
margin: auto;
background-color: #ccc;
border: 2px solid #444;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// キャンバス要素を取得
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// キャンバスのサイズを指定
canvas.width = 400;
canvas.height = 600;
// ブロックのパラメータを指定
var blockWidth = 20;
var blockHeight = 20;
var blockColor = "#f00";
// 盤面のパラメータを指定
var boardWidth = 10;
var boardHeight = 20;
var boardX = canvas.width / 2 - boardWidth / 2 * blockWidth;
var boardY = 50;
// ブロックの落下速度を指定
var velocity = 1;
var timer = null;
// 盤面情報の初期化
var board = [];
for (var y = 0; y < boardHeight; y++) {
board[y] = [];
for (var x = 0; x < boardWidth; x++) {
board[y][x] = null;
}
}
// ブロックを生成
var currentBlock = newBlock();
// ゲームループ
function loop() {
clear();
// ブロックを落下させる
currentBlock.y += velocity;
// ブロックが盤面に接触した場合
if (collide()) {
// ブロックを盤面に配置する
for (var y = 0; y < currentBlock.shape.length; y++) {
for (var x = 0; x < currentBlock.shape[y].length; x++) {
if (currentBlock.shape[y][x] != null) {
board[currentBlock.y + y][currentBlock.x + x] = blockColor;
}
}
}
// 新しいブロックを生成する
currentBlock = newBlock();
// 盤面を描画する
drawBoard();
} else {
// ブロックが盤面の底に達していない場合、ブロックを描画する
drawBlock(currentBlock);
}
// 盤面を描画する
drawBoard();
}
// 新しいブロックを生成する
function newBlock() {
var shapes = [
[
[null, blockColor, null],
[blockColor, blockColor, blockColor],
[null, null, null]
],
[
[blockColor, null, null],
[blockColor, blockColor, blockColor],
[null, null, null]
],
[
[null, null, blockColor],
[blockColor, blockColor, blockColor],
[null, null, null]
],
[
[blockColor, blockColor],
[blockColor, blockColor]
],
[
[null, blockColor, blockColor],
[blockColor, blockColor, null],
[null, null, null]
],
[
[blockColor, blockColor, null],
[null, blockColor, blockColor],
[null, null, null]
],
[
[blockColor, null],
[blockColor, null],
[blockColor, blockColor]
]
];
var index = Math.floor(Math.random() * shapes.length);
var shape = shapes[index];
var x = Math.floor(Math.random() * (boardWidth - shape[0].length + 1));
var y = 0;
return { shape: shape, x: x, y: y };
}
// ブロックが盤面に接触しているかどうかを判定する
function collide() {
for (var y = 0; y < currentBlock.shape.length; y++) {
for (var x = 0; x < currentBlock.shape[y].length; x++) {
if (currentBlock.shape[y][x] != null) {
var boardX = currentBlock.x + x;
var boardY = currentBlock.y + y;
if (boardY >= boardHeight || boardX < 0 || boardX >= boardWidth || board[boardY][boardX] != null) {
return true;
}
}
}
}
return false;
}
// ブロックを描画する
function drawBlock(block) {
var startX = boardX + block.x * blockWidth;
var startY = boardY + block.y * blockHeight;
for (var y = 0; y < block.shape.length; y++) {
for (var x = 0; x < block.shape[y].length; x++) {
if (block.shape[y][x] != null) {
drawRect(startX + x * blockWidth, startY + y * blockHeight, blockWidth, blockHeight, blockColor);
}
}
}
}
// 盤面を描画する
function drawBoard() {
for (var y = 0; y < boardHeight; y++) {
for (var x = 0; x < boardWidth; x++) {
if (board[y][x] != null) {
drawRect(boardX + x * blockWidth, boardY + y * blockHeight, blockWidth, blockHeight, board[y][x]);
}
}
}
}
// 矩形を描画する
function drawRect(x, y, width, height, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
}
// キャンバスをクリアする
function clear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// キー入力を処理する
document.addEventListener("keydown", function (event) {
if (event.keyCode == 37) {
// 左移動
currentBlock.x--;
// 左端に接触した場合、左への移動を取り消す
for (var y = 0; y < currentBlock.shape.length; y++) {
for (var x = 0; x < currentBlock.shape[y].length; x++) {
if (currentBlock.shape[y][x] != null) {
var boardX = currentBlock.x + x;
if (boardX < 0 || board[boardY][boardX] != null) {
currentBlock.x++;
}
}
}
}
} else if (event.keyCode == 39) {
// 右移動
currentBlock.x++;
// 右端に接触した場合、右への移動を取り消す
for (var y = 0; y < currentBlock.shape.length; y++) {
for (var x = 0; x < currentBlock.shape[y].length; x++) {
if (currentBlock.shape[y][x] != null) {
var boardX = currentBlock.x + x;
if (boardX >= boardWidth || board[boardY][boardX] != null) {
currentBlock.x--;
}
}
}
}
} else if (event.keyCode == 40) {
// 加速
velocity = 5;
}
});
// キーを離したときに加速を解除する
document.addEventListener("keyup", function (event) {
if (event.keyCode == 40) {
velocity = 1;
}
});
// ゲームループを開始する
timer = setInterval(loop, 1000 / 60);
</script>
</body>
</html>
```
このプログラムでは、Canvasを使用してブロックを描画します。プログラムは非常に単純で、要素を動的に追加したり、外部のスクリプトファイルを読み込んだりする必要はありません。また、evalや他のサイトへの遷移等、セキュリティに関連する脆弱性を含んでいることはありません。
