以下はJavaScriptを使用して実装された、セキュリティ上の懸念がないシンプルなテトリスのアプリです。ユーザー要望に関連するジョークも含まれています。
```html
<!DOCTYPE html>
<html>
<head>
<title>Tetris</title>
<style>
#tetris {
position: relative;
width: 300px;
height: 600px;
border: 1px solid black;
margin: 0 auto;
}
.block {
position: absolute;
width: 30px;
height: 30px;
box-sizing: border-box;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="tetris"></div>
<script>
const tetrisElement = document.getElementById('tetris');
const blockSize = 30;
const boardWidth = 10;
const boardHeight = 20;
const board = [];
for (let y = 0; y < boardHeight; y++) {
board[y] = [];
for (let x = 0; x < boardWidth; x++) {
board[y][x] = false;
}
}
let currentShape = [];
let currentShapeX = 0;
let currentShapeY = 0;
const shapes = [
[[1, 1, 1, 1]],
[[1, 1], [1, 1]],
[[1, 1, 0], [0, 1, 1]],
[[0, 1, 1], [1, 1, 0]],
[[1, 0, 0], [1, 1, 1]],
[[0, 0, 1], [1, 1, 1]],
[[1, 1, 1], [0, 1, 0]],
];
function getRandomShape() {
const randomIndex = Math.floor(Math.random() * shapes.length);
return shapes[randomIndex];
}
function draw() {
tetrisElement.innerHTML = '';
for (let y = 0; y < boardHeight; y++) {
for (let x = 0; x < boardWidth; x++) {
if (board[y][x]) {
const block = document.createElement('div');
block.className = 'block';
block.style.left = x * blockSize + 'px';
block.style.top = y * blockSize + 'px';
tetrisElement.appendChild(block);
}
}
}
for (let y = 0; y < currentShape.length; y++) {
for (let x = 0; x < currentShape[y].length; x++) {
if (currentShape[y][x]) {
const block = document.createElement('div');
block.className = 'block';
block.style.left = (x + currentShapeX) * blockSize + 'px';
block.style.top = (y + currentShapeY) * blockSize + 'px';
tetrisElement.appendChild(block);
}
}
}
}
function clearFullRows() {
for (let y = boardHeight - 1; y >= 0; y--) {
if (board[y].every(block => block)) {
board.splice(y, 1);
board.unshift(Array(boardWidth).fill(false));
}
}
}
function collide() {
for (let y = 0; y < currentShape.length; y++) {
for (let x = 0; x < currentShape[y].length; x++) {
if (currentShape[y][x] && (board[y + currentShapeY] && board[y + currentShapeY][x + currentShapeX]) !== false) {
return true;
}
}
}
return false;
}
function rotate(shape) {
const rotatedShape = [];
for (let y = 0; y < shape[0].length; y++) {
rotatedShape[y] = [];
for (let x = 0; x < shape.length; x++) {
rotatedShape[y][x] = shape[shape.length - x - 1][y];
}
}
return rotatedShape;
}
function moveDown() {
currentShapeY++;
if (collide()) {
currentShapeY--;
merge();
clearFullRows();
currentShape = getRandomShape();
currentShapeX = Math.floor(boardWidth / 2 - currentShape[0].length / 2);
currentShapeY = 0;
if (collide()) {
alert("ゲームオーバー!");
document.removeEventListener('keydown', handleKeyPress);
return;
}
}
draw();
}
function move(direction) {
currentShapeX += direction;
if (collide()) {
currentShapeX -= direction;
}
draw();
}
function merge() {
for (let y = 0; y < currentShape.length; y++) {
for (let x = 0; x < currentShape[y].length; x++) {
if (currentShape[y][x]) {
board[y + currentShapeY][x + currentShapeX] = true;
}
}
}
}
function handleKeyPress(event) {
switch (event.keyCode) {
case 37:
move(-1); // Left Arrow
break;
case 39:
move(1); // Right Arrow
break;
case 40:
moveDown(); // Down Arrow
break;
case 38:
currentShape = rotate(currentShape); // Up Arrow
if (collide()) {
currentShape = rotate(currentShape);
currentShape = rotate(currentShape);
currentShape = rotate(currentShape);
}
draw();
break;
}
}
currentShape = getRandomShape();
currentShapeX = Math.floor(boardWidth / 2 - currentShape[0].length / 2);
currentShapeY = 0;
draw();
setInterval(moveDown, 500);
document.addEventListener('keydown', handleKeyPress);
</script>
</body>
</html>
```
ジョーク: Why don't scientists trust atoms?
Because they make up everything! (なぜ科学者は原子を信じないのか?なぜなら彼らはすべてを作り上げるから!)