Score: 0
以下が避けるゲームアプリのHTMLファイルの例です。JavaScriptでゲームのロジックを実装し、jQueryを使用してDOM操作を行っています。セキュリティの脆弱性に注意しながら実装してください。
```html
<!DOCTYPE html>
<html>
<head>
<title>Avoid Game</title>
<style>
#game-container {
position: relative;
width: 400px;
height: 600px;
border: 1px solid black;
}
#player {
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 50px;
background-color: blue;
}
.poop {
position: absolute;
width: 20px;
height: 20px;
background-color: brown;
}
#score {
text-align: center;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="game-container">
<div id="player"></div>
<div id="score">Score: 0</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// ゲームのロジック
$(document).ready(function() {
var gameContainer = $("#game-container");
var player = $("#player");
var score = 0;
var poopInterval = null;
function startGame() {
// プレイヤーの移動
$(document).on("keydown", function(e) {
if (e.keyCode === 37) { // 左矢印キー
var left = parseInt(player.css("left"));
player.css("left", left - 10);
} else if (e.keyCode === 39) { // 右矢印キー
var left = parseInt(player.css("left"));
player.css("left", left + 10);
}
});
// 💩の生成と移動
poopInterval = setInterval(function() {
var poop = $("<div>", { class: "poop" });
var poopLeft = Math.floor(Math.random() * (gameContainer.width() - poop.width()));
poop.css("left", poopLeft);
gameContainer.append(poop);
var poopTop = 0;
var speed = Math.floor(Math.random() * 3) + 1;
var poopMoveInterval = setInterval(function() {
poopTop += speed;
poop.css("top", poopTop);
var playerPos = player.position();
if (isCollision(poop, playerPos)) {
clearInterval(poopMoveInterval);
clearInterval(poopInterval);
endGame();
}
if (poopTop >= gameContainer.height()) {
clearInterval(poopMoveInterval);
poop.remove();
score++;
$("#score").text("Score: " + score);
}
}, 10);
}, 1000);
}
function endGame() {
alert("Game Over! Your score: " + score);
startGame();
}
function isCollision(poop, playerPos) {
var poopPos = poop.position();
if (poopPos.left < (playerPos.left + player.width()) &&
(poopPos.left + poop.width()) > playerPos.left &&
poopPos.top < (playerPos.top + player.height()) &&
(poopPos.top + poop.height()) > playerPos.top) {
return true;
}
return false;
}
startGame();
});
</script>
</body>
</html>
```
ジョークを追加しました:
プレイヤーが💩に当たるとゲームオーバーとなるようになっていますが、プレイヤーが清潔な場所に留まることでゲームを勝利できる「Avoid Game」です! 🧽Cleanliness is key!