以下が実装例になります。evalを使わないように十分に注意し、XSS攻撃やクリックジャッキング攻撃を防ぐためにtarget属性を使うか、rel属性を使って外部サイトへの遷移を制限してください。
```html
<!DOCTYPE html>
<html>
<head>
<title>Zombie Game</title>
<style>
#wrapper {
width: 400px;
height: 400px;
margin: 0 auto;
}
.person {
position: absolute;
width: 50px;
height: 50px;
background-color: #1abc9c;
border-radius: 50%;
cursor: pointer;
}
.zombie {
background-color: #e74c3c;
}
</style>
</head>
<body>
<div id="wrapper">
</div>
<script>
// 画面全体をクリックしたときのデフォルトの動作を無効化する
document.addEventListener('click', function(e) {
e.preventDefault();
});
// 画面上を逃げ回る人の配列
let people = [];
// ランダムな位置に人を追加する関数
function addPerson() {
const person = document.createElement('div');
person.classList.add('person');
person.style.left = Math.floor(Math.random() * 350) + 'px';
person.style.top = Math.floor(Math.random() * 350) + 'px';
person.addEventListener('click', function() {
person.classList.add('zombie');
});
people.push(person);
document.getElementById('wrapper').appendChild(person);
}
// 30人を追加する
for(let i = 0; i < 30; i++) {
addPerson();
}
</script>
</body>
</html>
```
ジョークとして、人をタップして「🧟♀️へ変更しました」というアラートを出すといいかもしれません。ただし、このプログラムではalertを使わないことが要求されているため、そういった演出は実装しないようにしてください。
