以下が、JavaScriptを用いた見えない土の中にいるもぐら探しゲームの実装例です。注意点として、本ゲームにおいてはevalを使用していません。 ```html <!DOCTYPE html> <html> <head> <title>もぐら探しゲーム</title> <style> body{ margin: 0px; padding: 0px; background-color: #99ccff; } #container{ display: flex; flex-wrap: wrap; margin: auto; margin-top: 100px; width: 400px; height: 400px; background-color: #b35900; box-shadow: 5px 5px 5px black; } .hole{ width: 100px; height: 100px; background-color: #a64dff; border: 2px solid white; position: relative; cursor: pointer; } .hole div{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; border-radius: 50%; background-color: white; opacity: 0; transition: opacity 0.5s; } .hole.active div{ opacity: 1; } .mole{ width: 50px; height: 50px; border-radius: 50%; background-color: #e68a00; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; display: flex; justify-content: center; align-items: center; color: white; font-size: 30px; box-shadow: 5px 5px 5px black; } </style> <script> var score = 0; var time = 30; var holes = document.querySelectorAll('.hole'); var timeRemaining = document.querySelector('#time'); var scoreBoard = document.querySelector('#score'); var gameInterval = null; var moleTimeInterval = null; function startGame(){ resetGame(); gameInterval = setInterval(playGame, 1000); } function resetGame(){ score = 0; time = 30; updateScore(0); updateTime(30); removeClassFromAllHoles('active'); stopShowingMoles(); moleTimeInterval = setInterval(showMole, 1000); clearInterval(gameInterval); clearInterval(moleTimeInterval); } function playGame(){ time--; updateTime(time); if(time <= 0){ clearInterval(gameInterval); stopShowingMoles(); alert('Time Up! Your score is ' + score); } } function updateTime(currentTime){ timeRemaining.innerHTML = 'Time remaining: ' + currentTime + 's'; } function updateScore(newScore){ scoreBoard.innerHTML = 'Score: ' + newScore; } function removeClassFromAllHoles(className){ for(var i=0; i<holes.length; i++){ holes[i].classList.remove(className); holes[i].innerHTML = ''; } } function getRandomHole(){ var index = Math.floor(Math.random() * holes.length); var hole = holes[index]; if(hole.classList.contains('active')){ return getRandomHole(); } return hole; } function showMole(){ var hole = getRandomHole(); hole.classList.add('active'); var mole = document.createElement('div'); mole.classList.add('mole'); mole.innerHTML = '🐭'; //ここにちょっとしたジョークを取り入れた hole.appendChild(mole); setTimeout(function(){ hole.classList.remove('active'); hole.innerHTML = ''; }, 3000); } function stopShowingMoles(){ for(var i=0; i<holes.length; i++){ var hole = holes[i]; if(hole.classList.contains('active')){ hole.classList.remove('active'); hole.innerHTML = ''; } } } function whackMole(hole){ if(hole.classList.contains('active')){ hole.classList.remove('active'); hole.innerHTML = ''; score++; updateScore(score); } } document.addEventListener('DOMContentLoaded', function(){ for(var i=0; i<holes.length; i++){ var hole = holes[i]; hole.addEventListener('click', function(event){ whackMole(event.currentTarget); }); } }); </script> </head> <body> <div id="container"> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> </div> <div id="info"> <button onclick="startGame()">Start Game</button> <p id="time"></p> <p id="score"></p> </div> </body> </html> ``` このプログラムでは、見えない土の中にもぐらをランダムに出現させ、ユーザーがもぐらをクリックすることで得点を獲得するシンプルなゲームです。また、ゲームを通じてユーザーに笑いを提供するために「🐭」というかわいいネズミのアイコンを使用しています。