Forked from: msd's チャンチンチュンチョン View Diff (1) forked: チャンチンチュンチョン yxmedia18101 Follow 2018-12-11 11:48:54 License: All rights reserved Fork0 Fav0 View93 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 40 lines HTML 9 lines CSS 25 lines forked: チャンチンチュンチョン // forked from msd's "チャンチンチュンチョン" http://jsdo.it/msd/6sXZ let img_path=["http://jsrun.it/assets/U/9/W/h/U9WhL.png","http://jsrun.it/assets/M/z/Y/C/MzYCi.png","http://jsrun.it/assets/I/l/G/h/IlGht.png","http://jsrun.it/assets/0/e/e/n/0eenB.png"]; let collect="http://jsrun.it/assets/u/e/X/C/ueXCa.png"; let miss = "http://jsrun.it/assets/O/o/Q/H/OoQH4.png"; let se_collect=new Audio("http://jsrun.it/assets/w/J/X/w/wJXwh.mp3"); let se_miss=new Audio("http://jsrun.it/assets/A/q/Q/d/AqQdp.mp3"); let ans=0; let num=0; let score=0; let face = document.getElementById("face"); let face_id = document.getElementById("face_id"); changeFace(); function changeFace(){ // console.log("changeFace"); // console.log(face); // console.log(face_id); // console.log(img_path[0]); num = parseInt(Math.random()*4); face_id.src=img_path[num]; } function checkAnswer(ans){ console.log("ans:"+ans); if(ans == num){ console.log("collect"); face_id.src = collect; se_collect.play(); }else{ console.log("miss"); face_id.src = miss; se_miss.play(); } setTimeout(changeFace,1000); } <div id="face"> <img id="face_id" src = "http://jsrun.it/assets/0/e/e/n/0eenB.png"> </div> <div id="buttons"> <button type="button" class="btn" onClick="checkAnswer(2)">チャン</button> <button type="button" class="btn" onClick="checkAnswer(0)">陳</button> <button type="button" class="btn" onClick="checkAnswer(3)">チュン</button> <button type="button" class="btn" onClick="checkAnswer(1)">チョン</button> </div> forked: チャンチンチュンチョン * { margin: 0; padding: 0; border: 0; } body { background: #fff; font: 30px sans-serif; } #face{ width:240px; margin:auto; } #buttons{ width:100%; min-width:400px; margin:auto; text-align:center; } .btn{ width:75px; height:50px; font-size:20px; } // forked from msd's "チャンチンチュンチョン" http://jsdo.it/msd/6sXZ let img_path=["http://jsrun.it/assets/U/9/W/h/U9WhL.png","http://jsrun.it/assets/M/z/Y/C/MzYCi.png","http://jsrun.it/assets/I/l/G/h/IlGht.png","http://jsrun.it/assets/0/e/e/n/0eenB.png"]; let collect="http://jsrun.it/assets/u/e/X/C/ueXCa.png"; let miss = "http://jsrun.it/assets/O/o/Q/H/OoQH4.png"; let se_collect=new Audio("http://jsrun.it/assets/w/J/X/w/wJXwh.mp3"); let se_miss=new Audio("http://jsrun.it/assets/A/q/Q/d/AqQdp.mp3"); let ans=0; let num=0; let score=0; let face = document.getElementById("face"); let face_id = document.getElementById("face_id"); changeFace(); function changeFace(){ // console.log("changeFace"); // console.log(face); // console.log(face_id); // console.log(img_path[0]); num = parseInt(Math.random()*4); face_id.src=img_path[num]; } function checkAnswer(ans){ console.log("ans:"+ans); if(ans == num){ console.log("collect"); face_id.src = collect; se_collect.play(); }else{ console.log("miss"); face_id.src = miss; se_miss.play(); } setTimeout(changeFace,1000); } <div id="face"> <img id="face_id" src = "http://jsrun.it/assets/0/e/e/n/0eenB.png"> </div> <div id="buttons"> <button type="button" class="btn" onClick="checkAnswer(2)">チャン</button> <button type="button" class="btn" onClick="checkAnswer(0)">陳</button> <button type="button" class="btn" onClick="checkAnswer(3)">チュン</button> <button type="button" class="btn" onClick="checkAnswer(1)">チョン</button> </div> * { margin: 0; padding: 0; border: 0; } body { background: #fff; font: 30px sans-serif; } #face{ width:240px; margin:auto; } #buttons{ width:100%; min-width:400px; margin:auto; text-align:center; } .btn{ width:75px; height:50px; font-size:20px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author yxmedia181010 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/Q59t/js"></script> art&design 名前が覚えにくい Discussion Questions on this code? Tags art&design 名前が覚えにくい