6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

高輪ゲートウェイでズンドコキヨシを作ってみよう!

Last updated at Posted at 2020-03-17

#2020年3月14日
###半世紀ぶりに山手線に新駅開業!
おめでとうございます。

というわけで、本題に入ります。
##何をするの?

今回は...
####「Javascriptでズンドコキヨシみたいな高輪ゲートウェイを作成!」
です!

この時点では意味がわからないと思います。

では、実際の画像です。

image.png

こんな感じで、「高輪」「ゲート」「ウェイ」がランダムに配列から取り出されて、

高輪ゲートウェイが出たら成功!みたいなゲームです!

完全にズンドコキヨシですね!

####実際にプレイしたい方はこちら

では、ソースコードです

##ソースコード

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高輪ゲートウェイ</title>
    <link rel="stylesheet" href="style.css">
    </style>
</head>
<body>
    <div class="takanawa">
        <p id="text"></p>
    </div>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

style.css
body{
    font-family:serif;
    background-color:#dddddd;
    color:#ffffff;
    margin:0;
    
}
.takanawa {
    position: relative;
    height: 40vh;
    background-color: #008000;
    text-align:center;
    font-size:20vh;
}
.takanawa p {
    width: 100%;
    text-align: center;
}
script.js
        const takanawa=["高輪","ゲート","ウェイ"] ///ズンドコ風配列
        for(let i=0;i<3;i++){
            let random = Math.floor( Math.random() * takanawa.length );///ランダム
            document.getElementById("text").innerHTML+=takanawa[random]///innerHTMLで挿入
        }

##工夫した点

  • 実際のフォント(明朝体)に似せた
  • 色合いも似せた
  • ゲームとして成立させた
  • オリジナリティ
6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?