-
Notifications
You must be signed in to change notification settings - Fork 0
/
pptp.html
85 lines (76 loc) · 3.57 KB
/
pptp.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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div id="app">
<h1>「ポ」「プ」「テ」「ピピック」をランダムに出力して「ポプテピピック」が完成したら竹●房を破壊するVue.js</h1>
<button v-on:click="start">クリックしてね!</button>
<br>
<pop-team-epic v-for="pop in pops" :text="pop.token"></pop-team-epic>
<destroyed-take :destroyed="destroyed"></destroyed-take>
</div>
<script src="vue/vue.js"></script>
<script>
const TOKENS = [ 'ポ', 'プ', 'テ', 'ピピック' ]
Vue.component('destroyedTake', {
template: '\
<div :class="{ hide: !destroyed }">\
------- 、 rへ------、 <br>\
___、+\'\'"~ 八 ~\'\'< つ \ <br>\
_、+\'\'"~ ./ ,: ^ 丶 ヽく__ ∧ <br>\
, -r- / / / -、 \'´ ̄!\‘, ‘:, | \/ <br>\
/ .∧ \..゙|/_,,.。*\'/ /|,\/\__/^ヽ /,,_ `! \', | <br>\
/ ∧ \ 〈〉. , .| y\'\'"ヽ______ 7´⌒ヽ _| ト;′ <br>\
〈 ∧ (竹) .∨... || ,r ヽ 三三/ ‘:, Y! .|,′ <br>\
∨ ∧ ∨... | .|八 °,!三三{. ° ノ 八 /---、 <br>\
. ∨ ∧ ∨....∨(.^ 、_,、_, \` ,.ィ^!./_ \', <br>\
∨ /三ミメ、 ∨ 冫≧=‐------‐ァ=≦/ .|/ } ! <br>\
. ∨三三三三圦__.\\/ \|イ `\'\'<:\/:::::/ | (___) <br>\
〈〉 ノ ゞ三シ. \ \; { / `¨ヘ⌒こフ .∨ 〔、、、_) <br>\
) \八 `^i、_ __ \\ .∨ `¨´ <br>\
<ヘ_/三\_/|\、.\ /::/ ) `\'´ _ ,∨、 <br>\
|\三三三三:/ |. \/^ゞク≦---‐=≦::::::「:::::::::|::::/ <br>\
/:::::::/:::::::/:::::::::;′:::::::::|::::::::::|:人<br>\
happy end!!\n\
</div>',
props: ['destroyed']
})
Vue.component('popTeamEpic', {
template: '<span>{{ text }}</span>',
props: ['text']
})
var app = new Vue({
el: '#app',
data: {
pops: [],
destroyed: false
},
methods: {
pushToken: function() {
this.pops.push({ token: TOKENS[ Math.floor(Math.random() * TOKENS.length) ] });
let lastFourTokens = this.pops.slice(-4).reduce(function(previous, current, index, array) {
return previous + current.token;
}, '');
if (lastFourTokens == 'ポプテピピック') {
this.destroyed = true;
clearInterval(this.interval);
}
},
start: function() {
this.pops = [];
this.destroyed = false;
this.interval = setInterval(this.pushToken, 20);
}
}
})
</script>
</body>
</html>