鬼滅の刃がハマってしまって。。。

こんばんわ！

鬼滅の刃にハマり、狂ったようにプログラミングとも呼べないシステムを作り続けるヤマラボです！笑

今回、勉強の”テイ”でPHPとJavaScriptで同様のサイトを作りましたので、コードを公開したいと思います。

まずはPHP!

<style>
body {
  font-size: 100%;
  font-family: 'Hiragino Maru Gothic ProN';
  background-color: #f5f5f5;
}

a {
color: #6a5acd;
font-weight: 900;
text-decoration:none;
}
#top {
width: 85%;
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
border-radius: 10px;
filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
}
button {
font-size:30px;
margin:20px;
padding:20px;
}
#fmbox {
position:relative;
top:50%;
}

<? //以下、条件でカラー反転
if($_POST['kimetu'] == "4"){
?>
body {
color:#fff;
}
#top {
background-color:#000;
}
<? } ?>
</style>
</head>
<body>
<div id="top">
<?
if($_POST['kimetu'] == "4"){
$kimeText = "鬼　滅　の　刃";
}
?>
<center><h3>■■■ <? echo $kimeText; ?> ■■■</h3></center>
<hr>
<?
echo "<center>";

echo "<div id='fmbox'>";

if(empty($_POST['kimetu'])){
echo "<form method='post' action='index.php'><button type='submit' name='kimetu' value='1'>👹</button></form>";
}
if($_POST['kimetu'] == "4"){
echo "<button type='submit' name='kimetu' value='1'>👹</button>";
}

if($_POST['kimetu'] == "1"){
echo "<form method='post' action='index.php'><button type='submit' name='kimetu' value='2'>👹</button></form>";
}

if($_POST['kimetu'] == "2"){
echo "<form method='post' action='index.php'><button type='submit' name='kimetu' value='3'>👹</button></form>";
}

if($_POST['kimetu'] == "3"){
echo "<form method='post' action='index.php'><button type='submit' name='kimetu' value='4'>👹</button></form>";
}

echo "</div>";

$kimetu = $_POST['kimetu'];
switch($kimetu){
case $kimetu == "0":
$kimeText = "";
break;
case $kimetu == "1":
$kimeText = "鬼";
break;
case $kimetu == "2":
$kimeText = "鬼　滅";
break;
case $kimetu == "3":
$kimeText = "鬼　滅　の";
break;
case $kimetu == "4":
$min = 0;
$max = 10;
$kata = mt_rand($min,$max);
$mizu = array("刀が折れた！？", "壱ノ型<br>『水面斬り』", "弐ノ型<br>『水車』", "参ノ型<br>『流流舞い』", "肆ノ型<br>『打ち潮』", "伍ノ型<br>『干天の慈雨』", "陸ノ型<br>『ねじれ渦』", "漆ノ型<br>『雫波紋突き･曲』", "捌ノ型<br>『滝壷』", "玖ノ型<br>『水流飛沫･乱』", "拾ノ型<br>『生生流転』");
$kimeText = $mizu[$kata];
break;
}

echo "<p style='font-size:40px;'>{$kimeText}</p>";

if($_POST['kimetu'] == "4"){
echo "<a href='index.php'><button>鬼を退治する</button></a>";
}

echo "</center>";
?>
</div>
</body>

続いてJavaScript!

出来上がり確認

<script>
function oni() {
oniTarget = document.getElementById("output");
oniTarget.innerHTML = "<button onclick='oni2()'>👹</button><p style='font-size:40px;'>鬼</p>";
}

function oni2() {
oniTarget = document.getElementById("output");
oniTarget.innerHTML = "<button onclick='oni3()'>👹</button><p style='font-size:40px;'>鬼　滅</p>";
}

function oni3() {
oniTarget = document.getElementById("output");
oniTarget.innerHTML = "<button onclick='oni4()'>👹</button><p style='font-size:40px;'>鬼　滅　の</p>";
}

var random = Math.floor( Math.random() * 11 );
var mizu = ["刀が折れた！？", "壱ノ型<br>『水面斬り』", "弐ノ型<br>『水車』", "参ノ型<br>『流流舞い』", "肆ノ型<br>『打ち潮』", "伍ノ型<br>『干天の慈雨』", "陸ノ型<br>『ねじれ渦』", "漆ノ型<br>『雫波紋突き･曲』", "捌ノ型<br>『滝壷』", "玖ノ型<br>『水流飛沫･乱』", "拾ノ型<br>『生生流転』"];
function oni4() {
oniTarget = document.getElementById("output");
oniTarget.innerHTML = "<button><span style='/*text-decoration: line-through;*/ color:blue;'><-👹--</span></button><p style='font-size:40px;'>" + mizu[random] + "</p><a href='index.php'><button>鬼を退治する</button></a>";

stTarget = document.getElementById("st-output");
stTarget.innerHTML = "<style>body {color:#fff;}#top {background-color:#000;}</style>";

titleTarget = document.getElementById("title-output");
titleTarget.innerHTML = "鬼　滅　の　刃";
}
</script>
<style>
body {
  font-size: 100%;
  font-family: 'Hiragino Maru Gothic ProN';
  background-color: #f5f5f5;
}

a {
color: #6a5acd;
font-weight: 900;
text-decoration:none;
}

#top {
width: 85%;
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
border-radius: 10px;
filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
}

button {
font-size:30px;
margin:20px;
padding:20px;
}

#fmbox {
position:relative;
top:50%;
}
</style>
<!--反転スタイル呼び出し-->
<div id="st-output"></div>
</head>
<body>
<div id="top">
<center><h3>■■■ <div id="title-output"></div> ■■■</h3></center>
<hr>
<center>
<div id='fmbox'>
<div id='output'><button onclick='oni()'>👹</button></div>
</div>
</center>
</div>
</body>

こんな感じになりました！

個人的には、動的なサイトは、やはりJavaScriptの方がストレスなく、動くという感想でした！

参考になれば幸いです！

余談ですが、私、95%はスマホのアプリでコード書いてます！

パソコンはもってますよ！笑

ではまた！

鬼滅の刃がハマってしまって。。。