今回はHTML,CSS,JavaScriptを使って「蛇口」を作ります。
実際に動作するサンプルはこちら https://www.o--o.cf/
※このURLは私の作品置き場なので、違う作品に入れ替わっている可能性もあります。
どのようなものかというと、下の画像のようなものです。
このプログラムのポイント
・水の流れを再現
・水流調節機能を搭載
・水が流れる「ジャー」という音を出すことができる
それではソースコードを載せていきます。
<!doctype html><html><head><metacharset="utf-8"><title>作業おばけ</title><style>*{text-align:center;background-color:black;color:white;margin:0;padding:0;}h1{color:gold;}h1:hover{font-size:34px;}.header{display:inline-block;padding:1em2em;margin:1em0;font-weight:bold;border:solid3pxsilver;border-radius:10px;}canvas{background:white;display:block;margin:0auto;}button{font-size:30px;color:skyblue;}.button_padding{padding:30px;}</style></head><body><spanclass="header"><h1>作業おばけ</h1></span><canvasid="myCanvas"width="320"height="320"></canvas><audioid="sound-file"preload="auto"><sourcesrc="https://drive.google.com/uc?id=1cRrFxLRh7iOOttapwTSXHpBZ5WQcezpR"type="audio/mp3"></audio><divclass="button_padding"><buttonclass="run"onclick="run();">水量調節</button><buttononclick="sound();">サウンド</button></div><script>letcanvas=document.getElementById("myCanvas");letctx=canvas.getContext("2d");letwater=10000;functionsound(){document.getElementById('sound-file').play();}functiondraw(){ctx.clearRect(0,0,320,320);ctx.beginPath();ctx.rect(10,10,200,50);ctx.rect(150,60,60,30);ctx.fillStyle="silver";ctx.fill();ctx.closePath();for(letn=0;n<water;n++){letx=Math.floor(Math.random()*50)+155;lety=Math.floor(Math.random()*280)+90;ctx.beginPath();ctx.rect(x,y,1,1);ctx.fillStyle="skyblue";ctx.fill();ctx.closePath();}}setInterval(draw,16.7);functionrun(){water=water-2000;if(water<2000){water=10000;}}</script></body></html>以上がソースコードです
このようなものが出来上がります。
今回はこれで終わりますm(_ _)m