<!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; } #obstacle { width: 30px; height: 30px; background-color: #e74c3c; position: absolute; bottom: 50px; right: 0; } </style> </head> <body> <h1>シンプルなジャンプゲーム</h1> <div id="gameArea"> <div id="player"></div> <div id="obstacle"></div> </div> <button onclick="jump()">ジャンプ</button> <script> let isJumping = false; function jump() { if (!isJumping) { isJumping = true; document.getElementById('player').style.bottom = '100px'; } } </script> </body> </html>