原神のようなゲームが作りたいけれど

htmlコードをコピーする

<!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 { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 20px; text-align: center; } #game-container { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-width: 400px; margin: auto; } .button { display: inline-block; margin: 10px; padding: 10px 20px; font-size: 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } .button:disabled { background-color: #cccccc; cursor: not-allowed; } #message { margin: 20px 0; font-size: 18px; } </style> </head> <body> <div id="game-container"> <div id="message">玄関に入るにはボタンを押してください。</div> <button id="enter-button" class="button">玄関に入る</button> <button id="greet-button" class="button" disabled>頼子に挨拶する</button> <button id="exit-button" class="button" disabled>玄関から出る</button> </div> <script> const enterButton = document.getElementById('enter-button'); const greetButton = document.getElementById('greet-button'); const exitButton = document.getElementById('exit-button'); const message = document.getElementById('message'); enterButton.addEventListener('click', function() { message.textContent = '玄関に入った。'; enterButton.disabled = true; greetButton.disabled = false; }); greetButton.addEventListener('click', function() { message.textContent = 'こんにちは、頼子！元気だった？'; greetButton.disabled = true; exitButton.disabled = false; }); exitButton.addEventListener('click', function() { message.textContent = '玄関から出た。'; exitButton.disabled = true; }); </script> </body> </html>

説明

HTML部分: ゲームのインターフェースを構築するための基本的なHTML要素を定義しています。
- divタグでゲームコンテナを作成し、ユーザーにメッセージを表示する領域と3つのボタンを配置しています。
CSS部分: 基本的なスタイルを適用しています。
- ボタンやメッセージの見た目を調整し、全体的なレイアウトを整えています。
JavaScript部分: ゲームのロジックを実装しています。
- ボタンをクリックするたびにメッセージを更新し、次のアクションができるようにボタンの有効/無効を切り替えています。

このコードを使用すれば、簡単なインタラクティブなゲームがブラウザで動作します。より複雑なシナリオや追加の機能が必要な場合、ここからさらに発展させることができます。