【JavaScript】練習プログラム、どどすこ作ってみた【初心者】

2023年4月9日2023年6月25日

どどすこ。

知っていますか。

しばらく前に流行りましたよね。

どこかで、プログラミングの練習に使えると聞きました。

小さいプログラムをこなすことで、理解深めたいと考えている管理人にちょうどよさそうです。

ってことで早速作っていきます。

概要

まず、初めにどのような流れのプログラムを作るか説明させていただきます。

①ボタンを押すと、「どど、すこ」のどちらかを4回ランダムに選択し文字列を作る

②どどすこすこすことという文字列になったか判定

③条件が満たされた場合、動画を流す

完成したもの

リンクはこちら

ソースコード

<!DOCTYPE html>
<html lang="ja">

<head>

    <meta charset="utf-8">
    <title>どどすこひうゆき</title>

    <style>


        .start {

            height: 50px;
            width: 200px;
            background: hsl(0, 52%, 75%);
  
        }

     
    </style>
        
   
</head>

<body>
 
<div id="edit_area"></div>
<div id="movie"></div>

<video  id="video" src="./video/おしゃべりひろゆき.mp4"  height="350px" width="350px">

  <p>ご使用のブラウザでは動画再生に対応していません</p>

</video>

<br></br>
<div id="love"></div>
<input type="button" value="ラブ注入♡" onclick="set()" id="start">

</body>

 <script>

        let array=["どど","すこ"];
        let result=[];
        let answer="どど,すこ,すこ,すこ";
        let love=0;

        const disp=document.getElementById("video");

        disp.style.display='none';

        function set(){

            let rnd=0;
            let tmp="";
            love++;

            document.getElementById("love").innerHTML=`${love}回目のラブ注入です`;

            for(let loop=0;loop<4;loop++){

                rnd=Math.floor( Math.random() * 2 );
                result[loop]=array[rnd];
                
            }
            
            document.getElementById('edit_area').innerHTML = String(result.join(""));

            if(result.join()===answer){

                console.log(result.join());
                let play=document.getElementById("video");

                disp.style.display="";
                play.play();

            }

        }

    </script>

</html>