もぐらたたき！
どうも！LSSです！！
これまで、仕事から帰宅後、２～３時間のうちにブログを書いてアップして…アップしてきたものの中には、
JavaScriptで作ったゲームなどもありますが、
「そんな短時間の間にゲーム作って記事にしてアップしていた事が自分で信じられない」ｗｗｗ
※必ずしも短時間で作っていたわけでもないですが。
そんなわけで、面白い面白くないは二の次として、「短時間ゲーム作成チャレンジ」してみました！！
もぐらたたき！
ゲームスタート
遊び方
「ゲームスタート」をクリックすると始まります。
３つある枠のどこかに「もぐら」が出現するので、それをクリック！
「もぐら」が消えるまでにクリックできると、Scoreが１点増えます。
クリックできないうちに「もぐら」が消えるとMissが１増えます。
Missが３になったらゲームオーバー。
「ゲームオーバー」の文字をクリックすると、ScoreとMissがリセットされて、再度ゲームが始まります。
コード
<style><!--
#gamen{
display:grid;
grid-template-columns:repeat(3,100px);
}
#gamen div{
background-color:lightblue;
text-align:center;
width:100px;
height:100px;
padding-top:1em;
border:1px solid black;
}
--></style>
<div id="gamen">
<div id="m0"> </div>
<div id="m1"> </div>
<div id="m2"> </div>
</div>
<div id="scr">ゲームスタート</div>
<script>// <![CDATA[
mg=[];
mgt=0;
sc=0;
miss=0;
hf=true;
gs=true;
document.getElementById('scr').addEventListener("click",gstart,false);
for(i=0;i<3;i++){
mg[i]=0;
document.getElementById('m'+i).addEventListener("click",clk,false);
}
function tk(){
mg[mgt]++;
if(mg[mgt]>9){document.getElementById('m'+mgt).innerHTML='';mg[mgt]=0;mgt=Math.floor(Math.random()*3);if(hf){miss++;sw();if(miss>2){clearInterval(tm0);}};hf=true;}
if(mg[mgt]==3){document.getElementById('m'+mgt).innerHTML='もぐら';};
}
function clk(e){
if(hf && e.srcElement.id=='m'+mgt && mg[mgt]>=3){document.getElementById('m'+mgt).innerHTML='HIT!';sc++;sw();hf=false;}
}
function gstart(e){
if(gs){sc=0;miss=0;tm0=setInterval("tk()",120);sw();gs=false;}
}
function sw(){
scr.innerHTML='Score:'+sc+' Miss:'+miss;
if(miss>2){scr.innerHTML+='<br/>ゲームオーバー';gs=true;}
}
// ]]></script>
あとがき
はい、「面白い面白くないは二の次」と書いた通り、「何の変哲もない もぐらたたき」ですｗ
作るのにかかった時間、４０分ぐらいかな。
「やればできるじゃん、自分！」ってちょっと自信を取り戻したかもですｗ
（ブログ記事としては「…。」ですがｗｗｗ）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
