<!DOCTYPE html>
<html lang="ja">
<head>
<title>激しいジャンプ＆避けゲーム</title>
<style>
body {
text-align: center;
margin: 50px;
}
#gameArea {
width: 400px;
height: 200px;
background-color: #f0f0f0;
position: relative;
overflow: hidden;
margin: auto;
margin-top: 50px;
}
#player {
width: 50px;
height: 50px;
background-color: #3498db;
position: absolute;
bottom: 0;
left: 50px;
transition: bottom 0.3s;
}
.obstacle {
width: 30px;
height: 30px;
background-color: #e74c3c;
position: absolute;
bottom: 0;
right: 0;
transition: bottom 0.5s, right 0.5s;
}
</style>
</head>
<body>
<link rel="manifest" href="/manifest.json">
<h1>激しいジャンプ＆避けゲーム</h1>
<div id="gameArea">
<div id="player"></div>
<div class="obstacle"></div>
</div>
<script>
let player = document.getElementById('player');
let obstacle = document.querySelector('.obstacle');
let isJumping = false;
// キーボードの入力を監視
document.addEventListener('keydown', function(event) {
if (event.key === ' ' && !isJumping) {
jump();
}
});
// ジャンプ
function jump() {
isJumping = true;
player.style.bottom = '100px';
// 一定時間後に着地
setTimeout(function() {
player.style.bottom = '0';
isJumping = false;
}, 500);
}
// 障害物を激しく動かす
setInterval(moveObstacle, 500);
function moveObstacle() {
// ランダムな高さに障害物を配置
let randomPosition = Math.floor(Math.random() * 150) + 50;
obstacle.style.bottom = randomPosition + 'px';
// 障害物の位置を右端に移動
obstacle.style.right = '0';
// 障害物の速さをランダムに設定
let randomSpeed = Math.floor(Math.random() * 5) + 1;
obstacle.style.transition = `bottom ${randomSpeed}s, right ${randomSpeed}s`;
// 障害物が画面外に出たら再び配置
obstacle.addEventListener('transitionend', function() {
if (obstacle.offsetRight < 0) {
moveObstacle();
}
});
}
// 障害物とプレイヤーの当たり判定
setInterval(checkCollision, 50);
function checkCollision() {
let playerRect = player.getBoundingClientRect();
let obstacleRect = obstacle.getBoundingClientRect();
if (
playerRect.bottom > obstacleRect.top &&
playerRect.top < obstacleRect.bottom &&
playerRect.right > obstacleRect.left &&
playerRect.left < obstacleRect.right
) {
// 衝突した場合の処理
alert('Game Over!');
location.reload(); // ページをリロードしてリスタート
}
}
</script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch(function(error) {
console.error('Service Worker registration failed:', error);
});
}
</script>
</body>
</html>
”2022-Araki”