<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ランダムに降るオブジェクト</title>
<style>
body {
margin: 0;
overflow: hidden;
font-family: 'Arial', sans-serif;
}
#key-object {
position: absolute;
width: 100px;
height: 100px;
top: 90%;
left: 50%;
transform: translateX(-50%);
}
#score {
position: absolute;
top: 5px;
left: 5px;
font-size: 16px;
color: #fff;
display: none; /* 最初は非表示 */
}
/* 落ちてくるオブジェクトのスタイル */
.falling-object {
position: absolute;
width: 50px;
height: 50px;
}
/* グリーンのオブジェクトのスタイル */
.green {
background-color: transparent; /* 透明な背景色 */
content: url('rapi.png'); /* グリーンのオブジェクトの画像パスを指定 */
}
/* オレンジのオブジェクトのスタイル */
.orange {
background-color: transparent; /* 透明な背景色 */
content: url('Ruby.png'); /* オレンジのオブジェクトの画像パスを指定 */
}
</style>
</head>
<body>
<img id="key-object" src="toruhito.png">
<h1>物取り</h1>
<h3><div id="score">スコア: <span id="score-value">0</span></div></h3>
<script>
const keyObject = document.getElementById("key-object");
const scoreValue = document.getElementById("score-value");
const scoreContainer = document.getElementById("score");
let keyObjectPositionX = window.innerWidth / 2;
let score = 0;
const moveSpeed = 40;
function moveKeyObject() {
keyObject.style.left = keyObjectPositionX + "px";
requestAnimationFrame(moveKeyObject);
}
document.addEventListener("keydown", (event) => {
if (event.code === "ArrowLeft" && keyObjectPositionX > 0) {
keyObjectPositionX -= moveSpeed;
} else if (event.code === "ArrowRight" && keyObjectPositionX < window.innerWidth - keyObject.clientWidth) {
keyObjectPositionX += moveSpeed;
}
});
moveKeyObject();
function createFallingObject() {
const fallingObject = document.createElement("div");
fallingObject.className = "falling-object";
// ランダムにグリーンまたはオレンジのオブジェクトを選択
fallingObject.classList.add(Math.random() < 0.5 ? "green" : "orange");
fallingObject.style.left = Math.random() * (window.innerWidth - 50) + "px";
fallingObject.style.top = -50 + "px";
document.body.appendChild(fallingObject);
function moveFallingObject() {
const speed = 2;
const positionY = parseFloat(fallingObject.style.top) + speed;
fallingObject.style.top = positionY + "px";
if (isColliding(fallingObject, keyObject)) {
score++;
scoreValue.textContent = score;
scoreContainer.style.display = "block";
fallingObject.remove();
}
if (positionY >= window.innerHeight) {
fallingObject.remove();
} else {
requestAnimationFrame(moveFallingObject);
}
}
moveFallingObject();
}
function isColliding(obj1, obj2) {
const rect1 = obj1.getBoundingClientRect();
const rect2 = obj2.getBoundingClientRect();
return (
rect1.top < rect2.bottom &&
rect1.bottom > rect2.top &&
rect1.left < rect2.right &&
rect1.right > rect2.left
);
}
setInterval(createFallingObject, 2000);
</script>
</body>
</html>
