以下が、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>
```
このプログラムでは、見えない土の中にもぐらをランダムに出現させ、ユーザーがもぐらをクリックすることで得点を獲得するシンプルなゲームです。また、ゲームを通じてユーザーに笑いを提供するために「🐭」というかわいいネズミのアイコンを使用しています。