Swipe right to avoid the obstacle!
以下が実際のプログラムです。画面の左側には障害物が現れ、画面をスワイプすることで障害物を避けながら右側に進んでいくゲームになります。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Run Away</title>
<style>
.container {
position: relative;
width: 100%;
height: 100%;
background-color: #dedede;
overflow: hidden;
}
.runner {
position: absolute;
top: 50%;
left: 50px;
transform: translateY(-50%);
height: 50px;
width: 50px;
background-color: green;
}
.obstacle {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
height: 200px;
width: 50px;
background-color: black;
}
.swipe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: transparent;
z-index: 2;
}
.instructions {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="runner"></div>
<div class="obstacle"></div>
<div class="swipe"></div>
<div class="instructions">Swipe right to avoid the obstacle!</div>
</div>
<script>
const swipe = document.querySelector('.swipe');
const obstacle = document.querySelector('.obstacle');
const instructions = document.querySelector('.instructions');
const container = document.querySelector('.container');
const runner = document.querySelector('.runner');
let obstacleSpeed = 10;
let obstaclePosition = 100;
// Set up swipe gesture
let startX, startY, distX, distY;
let threshold = 50; // Minimum distance required to swipe
container.addEventListener('touchstart', function (e) {
startX = e.changedTouches[0].pageX;
startY = e.changedTouches[0].pageY;
});
container.addEventListener('touchmove', function (e) {
e.preventDefault(); // Prevent scrolling
distX = e.changedTouches[0].pageX - startX;
distY = e.changedTouches[0].pageY - startY;
// If swipe is long enough and mostly horizontal, move obstacle and clear instructions
if (Math.abs(distX) > threshold && Math.abs(distY) < Math.abs(distX) / 2) {
obstacle.style.right = `${distX}px`;
instructions.textContent = '';
}
});
// Move obstacle every frame
function moveObstacle() {
obstaclePosition -= obstacleSpeed;
obstacle.style.right = `${obstaclePosition}px`;
// If obstacle crosses the left border, reset its position
if (obstaclePosition <= -50) {
obstaclePosition = 100;
}
// Check for collision between runner and obstacle
let obstacleRect = obstacle.getBoundingClientRect();
let runnerRect = runner.getBoundingClientRect();
if (obstacleRect.left + obstacleRect.width > runnerRect.left && obstacleRect.left < runnerRect.left + runnerRect.width) {
obstacle.style.right = '0px';
alert('Game Over! Swipe right to play again');
document.showToast("再読み込みしてください");
}
// Call this function again next frame
requestAnimationFrame(moveObstacle);
}
// Start the game loop
requestAnimationFrame(moveObstacle);
</script>
</body>
</html>
```
ジョークとして、障害物が何かしらの動物だったり、アイテムだったりすることで遊び心を加えることができます。また、ゲームオーバー時に面白いメッセージや再挑戦の誘惑を表示することで、ユーザーの興味を引き付けることができます。