以下が実際のプログラムです。JavaScriptのevalを使用しないため、セキュリティ上の問題はありません。また、リダイレクトや他のサイトへの遷移なども行われません。
```html
<!DOCTYPE html>
<html>
<head>
<title>Emoji Attack Game</title>
</head>
<body>
<canvas id="game-canvas" width="400" height="400"></canvas>
<script>
// 画面中央部の絵文字（ミサイル）の定義
const missile = {
emoji: "😈", // ミサイルの絵文字
x: 175, // ミサイルの初期位置（x座標）
y: 350, // ミサイルの初期位置（y座標）
speed: 10, // ミサイルの速度
moveLeft: function() {
this.x -= this.speed; // 左に移動
this.draw(); // ミサイルを再描画
},
moveRight: function() {
this.x += this.speed; // 右に移動
this.draw(); // ミサイルを再描画
},
draw: function() {
const canvas = document.getElementById("game-canvas"); // キャンバス要素を取得
const ctx = canvas.getContext("2d"); // 2Dレンダリングコンテキストを取得
ctx.clearRect(0, 0, canvas.width, canvas.height); // キャンバスをクリア
ctx.font = "50px serif"; // フォントサイズを設定
ctx.fillText(this.emoji, this.x, this.y); // 絵文字を描画
},
fire: function() {
const intervalId = setInterval(() => {
this.moveUp(); // ミサイルを上に移動
enemies.forEach(enemy => {
if (this.x >= enemy.x && this.x <= enemy.x + enemy.width && this.y <= enemy.y + enemy.height) {
clearInterval(intervalId); // 敵に当たった場合は弾を消す
enemy.hit(); // 敵をヒットさせる
}
});
if (this.y <= 0) clearInterval(intervalId); // キャンバス上部に達した場合は弾を消す
this.draw(); // 弾を再描画
}, 30);
},
moveUp: function() {
this.y -= this.speed; // 上に移動
}
};
// 敵の定義
const enemy = {
emoji: "👾", // 敵の絵文字
width: 50, // 敵の横幅
height: 50, // 敵の縦幅
startX: 50, // 敵の初期位置（x座標）
startY: 50, // 敵の初期位置（y座標）
spacing: 70, // 敵同士の間隔
columns: 6, // 列数
rows: 3, // 行数
list: [], // 敵のリスト
create: function() {
for (let i = 0; i < this.columns; i++) {
for (let j = 0; j < this.rows; j++) {
const x = this.startX + i * this.spacing;
const y = this.startY + j * this.spacing;
this.list.push({
x: x,
y: y,
hit: function() {
const index = enemy.list.indexOf(this); // 自身のインデックスを取得
enemy.list.splice(index, 1); // 自身を敵リストから削除
if (enemy.list.length === 0) alert("Congratulations! You win!"); // 全敵を倒した場合はゲームクリア
else if (Math.random() > 0.5) enemy.moveFaster(); // 倒した後は敵を速くする
}
});
}
}
},
draw: function() {
const canvas = document.getElementById("game-canvas"); // キャンバス要素を取得
const ctx = canvas.getContext("2d"); // 2Dレンダリングコンテキストを取得
this.list.forEach(enemy => {
ctx.font = "50px serif"; // フォントサイズを設定
ctx.fillText(this.emoji, enemy.x, enemy.y); // 絵文字を描画
});
},
move: function() {
if (this.list[0].x <= 0 || this.list[this.list.length - 1].x + this.width >= 400) enemy.direction *= -1; // 敵の左右の移動範囲を超えた場合は方向を変える
this.list.forEach(enemy => {
enemy.x += enemy.direction * enemy.speed; // 敵を移動させる
});
this.draw(); // 敵を再描画
},
moveFaster: function() {
this.list.forEach(enemy => {
enemy.speed *= 1.1; // 全敵を速くする
});
console.log("The enemy is furious!");
}
};
enemy.create(); // 敵を生成
// プレイヤーのキーボード操作でミサイル（絵文字）を移動させる
document.addEventListener("keydown", event => {
switch (event.key) {
case "ArrowLeft":
missile.moveLeft();
break;
case "ArrowRight":
missile.moveRight();
break;
case " ": // スペースキーを押したら弾を発射
missile.fire();
break;
}
});
// ゲームループ
setInterval(() => {
enemy.move(); // 敵を移動
}, 500);
// 初期表示
missile.draw();
enemy.draw();
</script>
</body>
</html>
```
ジョークとして、全敵を倒した場合に「Congratulations! You win!」と表示されるようにしました。また、敵を倒した後に敵を速くする処理があり、その際に「The enemy is furious!」とコンソールログに表示されるようにしました。
