ゾンビ引渡センターゲーム
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ゾンビ引渡センターゲーム</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#zombie-girl {
width: 300px;
height: 300px;
margin: 0 auto;
background-color: gray;
position: relative;
}
#zombie-girl img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.speech-bubble {
position: absolute;
width: auto;
height: auto;
max-width: 250px;
padding: 10px;
background-color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px gray;
font-size: 16px;
display: none;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: -10px;
left: 40px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: white transparent transparent transparent;
}
button {
padding: 10px 20px;
margin: 10px;
font-size: 16px;
background-color: gray;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition-duration: 0.4s;
}
button:hover {
opacity: 0.8;
}
#result {
font-size: 20px;
font-weight: bold;
margin-top: 20px;
display:none;
}
</style>
</head>
<body>
<h1>ゾンビ引渡センターゲーム</h1>
<div id="zombie-girl">
<img src="">
<div class="speech-bubble"></div>
</div>
<button id="appeal-btn" disabled>アピールする</button>
<button id="negotiate-btn" disabled>交渉する</button>
<div id="result"></div>
<script>
const zombies = [
{
name: "美咲",
fresh: "3日以内",
painless: "痛みはありません",
face: "綺麗な顔立ち",
body: "ムチムチしたボディ",
age: 20,
job: "モデル",
price: 0,
appeal: []
},
{
name: "優子",
fresh: "5日以内",
painless: "小さな痛みがあります",
face: "大きな瞳と整った顔立ち",
body: "スリムで引き締まったボディ",
age: 23,
job: "スチュワーデス",
price: 0,
appeal: []
},
{
name: "香菜",
fresh: "1日以内",
painless: "痛みはほとんどありません",
face: "薄いピンク色の唇と可愛らしい顔立ち",
body: "ふわふわと柔らかいボディ",
age: 18,
job: "アイドル",
price: 0,
appeal: []
},
{
name: "桃子",
fresh: "2日以内",
painless: "痛みはありません",
face: "黒髪ストレートの美しい顔立ち",
body: "細身でしなやかなボディ",
age: 25,
job: "キャバクラ嬢",
price: 0,
appeal: []
},
{
name: "千春",
fresh: "1日以内",
painless: "やや痛みがあります",
face: "小さな鼻と上品な顔立ち",
body: "女性らしい曲線美のボディ",
age: 28,
job: "CA",
price: 0,
appeal: []
},
{
name: "彩花",
fresh: "4日以内",
painless: "痛みはありません",
face: "はっきりとした線の整った顔立ち",
body: "引き締まった筋肉質なボディ",
age: 29,
job: "ボクサー",
price: 0,
appeal: []
},
{
name: "佳奈子",
fresh: "6日以内",
painless: "少し痛みがあります",
face: "知的で美しい顔立ち",
body: "華奢ながらも豊かな曲線美のボディ",
age: 32,
job: "美容師",
price: 0,
appeal: []
},
{
name: "奈央",
fresh: "2日以内",
painless: "痛みはありません",
face: "可愛らしい笑顔が魅力の顔立ち",
body: "ふっくらと柔らかいボディ",
age: 22,
job: "保育士",
price: 0,
appeal: []
},
{
name: "愛子",
fresh: "3日以内",
painless: "痛みはありません",
face: "健康的で透明感のある顔立ち",
body: "しなやかで美しい曲線美のボディ",
age: 21,
job: "水泳選手",
price: 0,
appeal: []
},
{
name: "美穂",
fresh: "4日以内",
painless: "痛みはありません",
face: "ハッとさせるくらい美しい顔立ち",
body: "完璧に整ったプロポーションのボディ",
age: 27,
job: "モデル",
price: 0,
appeal: []
}
];
const zombieGirl = document.querySelector('#zombie-girl');
const speechBubble = zombieGirl.querySelector('.speech-bubble');
const appealBtn = document.querySelector('#appeal-btn');
const negotiateBtn = document.querySelector('#negotiate-btn');
const result = document.querySelector('#result');
// ゾンビガールの画像をランダムに表示する
zombieGirl.querySelector('img').src = 'zombie-girl' + getRandomNum(1, 4) + '.jpg';
// ゾンビのアピールポイントをランダムに作成する
zombies.forEach(zombie => {
zombie.appeal.push('新鮮で' + zombie.fresh);
zombie.appeal.push(zombie.painless + '、無害です');
zombie.appeal.push('美しい' + zombie.face);
zombie.appeal.push('美しい' + zombie.body);
zombie.appeal.push(zombie.age + '歳で、' + zombie.job + 'だった' + (zombie.age < 15 ? '（学校に通っていました）' : ''));
});
// ボタンにイベントリスナーを設定する
appealBtn.addEventListener('click', () => {
showAppeal(zombies[getRandomNum(0, 9)]);
});
negotiateBtn.addEventListener('click', () => {
showNegotiation(zombies[getRandomNum(0, 9)]);
});
// ゾンビガールをクリックした際にアピールボタンと交渉ボタンを活性化する
zombieGirl.addEventListener('click', () => {
appealBtn.disabled = false;
negotiateBtn.disabled = false;
speechBubble.style.display = 'none';
});
// アピール内容を表示する
function showAppeal(zombie) {
const message = zombie.name + 'のアピール：' + zombie.appeal[getRandomNum(0, 4)];
displayMessage(message);
}
// 価格を提示する
function showNegotiation(zombie) {
let price = 0;
const parts = ['唇', '顔', '胸', '脚', '鼠径部', 'スリット'];
parts.forEach(part => {
const rating = getRandomNum(1, 5);
const message = zombie.name + 'の' + part + 'の評価：' + getRatingText(rating);
displayMessage(message);
price += rating * 1000;
});
price += getRandomNum(-5, 5) * 1000; // サクラの疲れによる値引き
const message = '引取価格は' + Math.max(price, 1000) + '円です。';
displayMessage(message);
result.innerHTML = '';
showNegotiationResult(zombie, price);
}
// 価格交渉の結果を表示する
function showNegotiationResult(zombie, price) {
const yesBtn = createButton('OK');
const noBtn = createButton('NG');
displayMessage('引取価格は' + price + '円です。引き渡しますか？', [yesBtn, noBtn]);
yesBtn.addEventListener('click', () => {
zombie.price = price;
const index = zombies.findIndex(z => z.name === zombie.name);
zombies.splice(index, 1);
if (zombies.length === 0) {
displayMessage('全てのゾンビが引き取られました。');
appealBtn.disabled = true;
negotiateBtn.disabled = true;
} else {
displayMessage(zombie.name + 'は引き渡されました。次のゾンビをチェックしてください。');
}
});
noBtn.addEventListener('click', () => {
showNegotiation(zombie);
});
}
// ランダムな数値を取得する
function getRandomNum(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// 評価に応じたテキストを返す
function getRatingText(rating) {
switch(rating) {
case 1:
return '最悪';
case 2:
return 'まあまあ';
case 3:
return '普通';
case 4:
return 'よい';
case 5:
return '最高';
default:
return '';
}
}
// ボタンを作成する
function createButton(label) {
const button = document.createElement('button');
button.textContent = label;
return button;
}
// メッセージを表示する
function displayMessage(text, buttons) {
speechBubble.textContent = text;
speechBubble.style.display = 'block';
if (buttons) {
buttons.forEach(button => {
speechBubble.appendChild(button);
});
}
result.innerHTML = '';
}
</script>
</body>
</html>
