-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
448 lines (424 loc) · 19.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>X炎上回避ゲーム（再構築版）</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #15202b;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#game-container {
width: 100%;
max-width: 600px;
background-color: #192734;
border-radius: 15px;
padding: 20px;
box-shadow: 0 0 10px rgba(255,255,255,0.1);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.followers {
font-size: 18px;
}
.tweet {
background-color: #22303c;
border-radius: 15px;
padding: 15px;
margin-bottom: 20px;
}
.tweet-text {
font-size: 18px;
line-height: 1.4;
}
.flame-probability {
color: #f45d22;
font-weight: bold;
margin-top: 10px;
}
.actions {
display: flex;
justify-content: space-around;
}
button {
background-color: #1da1f2;
color: white;
border: none;
padding: 10px 20px;
border-radius: 50px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #1991db;
}
#result {
text-align: center;
font-size: 18px;
margin-top: 20px;
font-weight: bold;
}
#restart-button {
display: none;
margin: 20px auto 0;
}
#message {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(29, 161, 242, 0.8);
color: white;
padding: 10px 20px;
border-radius: 20px;
font-weight: bold;
display: none;
z-index: 1000;
}
#kuso-reply {
background-color: #22303c;
border-radius: 15px;
padding: 15px;
margin-top: 20px;
font-style: italic;
color: #e0245e;
display: none;
}
</style>
</head>
<body>
<div id="game-container">
<div class="header">
<h1>X炎上回避ゲーム</h1>
<div class="followers">
<div>フォロワー: <span id="follower-count">100</span></div>
<div>最高フォロワー数: <span id="high-score">100</span></div>
</div>
</div>
<div class="tweet">
<p class="tweet-text" id="tweet-text"></p>
<p class="flame-probability">炎上度: <span id="flame-probability"></span></p>
</div>
<div class="actions">
<button id="post-button">投稿する</button>
<button id="avoid-button">回避する</button>
</div>
<div id="result"></div>
<div id="kuso-reply"></div>
<button id="restart-button">ゲームを再開する</button>
</div>
<div id="message"></div>
<script>
const tweets = [
{ text: "現代人は鈍感すぎる。昔のように体罰も必要だ", flameProbability: 0.53, category: "社会批判" },
{ text: "駅前のトイレ、臭すぎ", flameProbability: 0.14, category: "不満" },
{ text: "政治家の不祥事、もう許せない！", flameProbability: 0.30, category: "政治" },
{ text: "最近の若者は根性がない", flameProbability: 0.40, category: "世代間" },
{ text: "今日の朝ごはんは納豆ご飯", flameProbability: 0.05, category: "日常" },
{ text: "電車でマスクしてない人多すぎ。みんな非常識", flameProbability: 0.46, category: "マナー" },
{ text: "ペットボトルのお茶、高すぎない？", flameProbability: 0.18, category: "不満" },
{ text: "芸能人の不倫、別に個人の自由じゃない？", flameProbability: 0.37, category: "芸能" },
{ text: "気候変動は嘘。科学者の陰謀だ", flameProbability: 0.59, category: "陰謀論" },
{ text: "今日の夕焼けがきれい", flameProbability: 0.03, category: "日常" },
{ text: "有名人の過去の失言を掘り起こして批判するの、やめるべき", flameProbability: 0.35, category: "SNS" },
{ text: "給食費の無償化、本当に必要？", flameProbability: 0.43, category: "教育" },
{ text: "スマホ依存症の人多すぎ。もっと現実を見よう", flameProbability: 0.27, category: "技術" },
{ text: "電車で化粧する人、正直引く", flameProbability: 0.38, category: "マナー" },
{ text: "今日のラーメン、美味しかった！", flameProbability: 0.05, category: "グルメ" },
{ text: "外国人労働者の受け入れ、もっと規制すべき", flameProbability: 0.50, category: "政治" },
{ text: "ジェンダーレス社会って、本当に必要？", flameProbability: 0.47, category: "ジェンダー" },
{ text: "今日の富士山、綺麗だった", flameProbability: 0.04, category: "日常" },
{ text: "子育ては女性の仕事。男は外で稼ぐべき", flameProbability: 0.56, category: "ジェンダー" },
{ text: "電車の中で電話する人、迷惑だよね", flameProbability: 0.20, category: "マナー" },
{ text: "高齢ドライバーの免許返納、もっと厳しくすべき", flameProbability: 0.41, category: "交通" },
{ text: "今日の夕食はカレーライス！", flameProbability: 0.06, category: "グルメ" },
{ text: "TPPは日本の農業を破壊する", flameProbability: 0.34, category: "経済" },
{ text: "SNSの影響で、若者のコミュニケーション能力が低下している", flameProbability: 0.29, category: "SNS" },
{ text: "今日の満月、本当に美しい", flameProbability: 0.02, category: "自然" },
{ text: "死刑制度は必要。凶悪犯罪者に人権はない", flameProbability: 0.53, category: "法律" },
{ text: "ワクチンは危険。自然免疫を信じるべき", flameProbability: 0.58, category: "健康" },
{ text: "電車の優先席、若者が座りすぎ", flameProbability: 0.31, category: "マナー" },
{ text: "今日の朝日、心が洗われる", flameProbability: 0.02, category: "自然" },
{ text: "男女平等って、逆差別じゃない？", flameProbability: 0.54, category: "ジェンダー" },
{ text: "コンビニの弁当、最近値上がりしすぎ", flameProbability: 0.21, category: "経済" },
{ text: "宗教の自由は制限すべき。過激思想の温床になる", flameProbability: 0.56, category: "宗教" },
{ text: "今日の星空、まるで天の川", flameProbability: 0.04, category: "自然" },
{ text: "喫煙者の権利も守るべき。過度な規制はおかしい", flameProbability: 0.46, category: "健康" },
{ text: "電車の遅延、もっと補償すべき", flameProbability: 0.24, category: "交通" },
{ text: "今日の夕陽、海に沈む様子が魔法のよう", flameProbability: 0.03, category: "自然" },
{ text: "移民政策は甘すぎる。もっと厳しくすべき", flameProbability: 0.52, category: "政治" },
{ text: "スーパーのビニール袋、有料化は行き過ぎ", flameProbability: 0.34, category: "環境" },
{ text: "今日の新緑、目に染みる美しさ", flameProbability: 0.02, category: "自然" },
{ text: "SNSは若者の精神を蝕む。規制すべき", flameProbability: 0.49, category: "SNS" },
{ text: "電車のマナー、昔の方が良かった", flameProbability: 0.25, category: "マナー" },
{ text: "学校でのスマホ使用、完全に禁止すべき", flameProbability: 0.39, category: "教育" },
{ text: "今日の桜、満開で綺麗", flameProbability: 0.05, category: "自然" },
{ text: "選挙に行かない若者は国を良くする資格がない", flameProbability: 0.46, category: "政治" },
{ text: "ベーシックインカム導入で貧困問題は解決する", flameProbability: 0.36, category: "経済" },
{ text: "今日の雪景色、まるで絵画のよう", flameProbability: 0.03, category: "自然" },
{ text: "外国人観光客のマナーが悪すぎる。規制すべき", flameProbability: 0.44, category: "観光" },
{ text: "日本の教育システムは古すぎる。根本的な改革が必要", flameProbability: 0.26, category: "教育" },
{ text: "今日の紅葉、息をのむほど美しい", flameProbability: 0.04, category: "自然" }
];
const kusoReplies = {
"社会批判": [
"お前が社会を変えられると思ってんの？笑わせるな",
"そんなこと言って、自分は何をしてるんだ？",
"お前の意見なんて誰も聞いてないよ"
],
"不満": [
"不満なら自分で何とかしろよ",
"そんなことでグチグチ言うなよ。めんどくせぇ",
"お前の人生、そんなに暇なの？"
],
"政治": [
"お前に政治語る資格あんの？",
"そんなこと言って、選挙には行ってんの？",
"政治批判ばっかりして楽しいか？"
],
"世代間": [
"老害乙",
"若者叩いて楽しいか？自分の若い頃を思い出せよ",
"時代遅れの考えは要らないから"
],
"日常": [
"誰も興味ないぞ",
"で？",
"そんなどうでもいいこと呟くな"
],
"マナー": [
"マナーマナーうるせぇんだよ",
"お前がマナー警察か？うざっ",
"人のこと気にしすぎ。自分の生活に集中しろよ"
],
"芸能": [
"芸能ニュースにかまけてる暇あったら働けよ",
"他人の人生に首つっこむなよ",
"芸能人の話題で盛り上がる人生って寂しくない？"
],
"陰謀論": [
"はいはい、また陰謀論者か",
"そんなデマを信じてる時点でお前の頭のレベルが分かるわ",
"陰謀論とか言ってる奴が一番社会の害悪だよな"
],
"SNS": [
"SNSの話ばっかりして、リアルな友達いるの？",
"ネットの中だけで生きてんじゃねーよ",
"SNSに依存してる奴が何言ってんだか"
],
"教育": [
"教育のこと語るなら、まず自分が勉強しろよ",
"お前みたいなのが教育を語るから日本の教育は終わるんだよ",
"子供のことなんて他人事みたいに語るなよ"
],
"技術": [
"技術オンチが何言ってんだ",
"お前、スマホなしで生きていけるの？",
"テクノロジー批判してる割に、SNSには依存してそうだな"
],
"グルメ": [
"飯の写真うpすんな、見てて不快だわ",
"そんなもの食って、舌大丈夫か？",
"食べログでもやってろよ"
],
"ジェンダー": [
"ジェンダーのことなんて、お前に分かるわけないだろ",
"そんな古い考え方、恥ずかしくないの？",
"ジェンダー問題を語る前に、自分の偏見を見直せよ"
],
"交通": [
"お前が運転するな。事故るぞ",
"交通ルールも守れないくせに偉そうなこと言うなよ",
"歩きスマホしながら文句言ってんじゃねーよ"
],
"経済": [
"経済のこと語るなら、まず自分の財布の中身見直せよ",
"そんな薄っぺらい経済観で大丈夫か？",
"景気が悪いのはお前みたいなのが多いからだよ"
],
"自然": [
"自然なんか見てないで働けよ",
"写真撮ってSNSにアップするのが目的だろ？",
"そんな暇があるなら環境保護でもしてろよ"
],
"法律": [
"法律のこと語るなら、まず自分が守れよ",
"お前が裁判官にでもなったつもりか？",
"そんな単純な考えで法律語るなよ"
],
"健康": [
"健康オタクは一番不健康だぞ",
"そんなに健康が大事なら、まずその言葉遣いをどうにかしろよ",
"健康のことばっか気にして、心の健康は大丈夫か？"
],
"宗教": [
"宗教の自由も理解できないのか？頭大丈夫か？",
"お前こそ洗脳されてんじゃねーの？",
"宗教の話するなら、まず寛容な心を持てよ"
],
"環境": [
"環境問題語るなら、まず自分のゴミ出し見直せよ",
"エコバッグ持ってるだけで偉いと思ってんじゃねーよ",
"環境のこと気にするなら、そのスマホやめろよ"
],
"観光": [
"観光客がいなくなったら、お前の街なんて廃れるだけだぞ",
"外国人観光客に文句言う前に、自分の行動を見直せよ",
"観光客批判してる暇があったら、おもてなしの心でも学べよ"
],
"その他": [
"お前の発言、意味不明",
"そんなくだらないこと呟いて恥ずかしくないの？",
"お前の脳みそ、大丈夫か？"
]
};
let followers = 100;
let highScore = 100;
let currentTweet;
const followerCountElement = document.getElementById('follower-count');
const highScoreElement = document.getElementById('high-score');
const tweetTextElement = document.getElementById('tweet-text');
const flameProbabilityElement = document.getElementById('flame-probability');
const postButton = document.getElementById('post-button');
const avoidButton = document.getElementById('avoid-button');
const resultElement = document.getElementById('result');
const restartButton = document.getElementById('restart-button');
const messageElement = document.getElementById('message');
const kusoReplyElement = document.getElementById('kuso-reply');
function updateFollowers() {
followerCountElement.textContent = followers.toLocaleString();
if (followers > highScore) {
highScore = followers;
highScoreElement.textContent = highScore.toLocaleString();
}
}
function getRandomTweet() {
let newTweet;
do {
newTweet = tweets[Math.floor(Math.random() * tweets.length)];
} while (newTweet === currentTweet);
return newTweet;
}
function showTweet(tweet) {
currentTweet = tweet;
tweetTextElement.textContent = tweet.text;
const flameProb = (tweet.flameProbability * 100).toFixed(0);
flameProbabilityElement.textContent = `${flameProb}%`;
kusoReplyElement.style.display = 'none';
}
function showMessage(text) {
messageElement.textContent = text;
messageElement.style.display = 'block';
setTimeout(() => {
messageElement.style.display = 'none';
}, 2000);
}
function showKusoReply() {
const category = currentTweet.category || "その他";
const replies = kusoReplies[category] || kusoReplies["その他"];
const randomReply = replies[Math.floor(Math.random() * replies.length)];
kusoReplyElement.textContent = randomReply;
kusoReplyElement.style.display = 'block';
}
function gameOver(message) {
resultElement.textContent = message;
postButton.disabled = true;
avoidButton.disabled = true;
restartButton.style.display = 'block';
}
function nextRound() {
const tweet = getRandomTweet();
showTweet(tweet);
}
function restartGame() {
followers = 100;
updateFollowers();
resultElement.textContent = '';
kusoReplyElement.style.display = 'none';
postButton.disabled = false;
avoidButton.disabled = false;
restartButton.style.display = 'none';
nextRound() }
function calculateFollowerGain(currentFollowers) {
// 基本増加率を5%とし、フォロワー数が増えるほど増加率も上がる
const baseRate = 0.25;
const accelerationFactor = 1 + (currentFollowers / 10000); // フォロワー数に応じて加速
return Math.floor(currentFollowers * baseRate * accelerationFactor);
}
function calculateFollowerLoss(currentFollowers) {
// 基本減少率を3%とし、フォロワー数に比例して減少
const baseRate = 0.3;
return Math.floor(currentFollowers * baseRate);
}
function postTweet() {
const randomValue = Math.random();
const flameChance = currentTweet.flameProbability;
if (randomValue < flameChance) {
showKusoReply();
gameOver("炎上してしまいました！");
} else {
const gain = calculateFollowerGain(followers);
followers += gain;
updateFollowers();
showMessage(`+${gain.toLocaleString()} フォロワー`);
nextRound();
}
}
function avoidTweet() {
const loss = calculateFollowerLoss(followers);
followers -= loss;
if (followers <= 0) {
followers = 0;
updateFollowers();
gameOver("フォロワーがゼロになりました！");
} else {
updateFollowers();
showMessage(`-${loss.toLocaleString()} フォロワー`);
nextRound();
}
}
function updateFollowers() {
followerCountElement.textContent = followers.toLocaleString();
if (followers > highScore) {
highScore = followers;
highScoreElement.textContent = highScore.toLocaleString();
}
}
function gameOver(message) {
resultElement.textContent = message;
postButton.disabled = true;
avoidButton.disabled = true;
restartButton.style.display = 'block';
kusoReplyElement.style.display = 'block'; // クソリプを表示
}
function restartGame() {
followers = 100;
updateFollowers();
resultElement.textContent = '';
kusoReplyElement.textContent = '';
kusoReplyElement.style.display = 'none';
postButton.disabled = false;
avoidButton.disabled = false;
restartButton.style.display = 'none';
nextRound();
}
postButton.addEventListener('click', postTweet);
avoidButton.addEventListener('click', avoidTweet);
restartButton.addEventListener('click', restartGame);
// ゲーム開始
nextRound();
</script>
</body>
</html>