Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

もぐらたたき!

 どうも!LSSです!!

 

これまで、仕事から帰宅後、2~3時間のうちにブログを書いてアップして…アップしてきたものの中には、

JavaScriptで作ったゲームなどもありますが、
「そんな短時間の間にゲーム作って記事にしてアップしていた事が自分で信じられない」www
※必ずしも短時間で作っていたわけでもないですが。

 

そんなわけで、面白い面白くないは二の次として、「短時間ゲーム作成チャレンジ」してみました!!

 

 

もぐらたたき!

 
 
 
ゲームスタート

 

 

遊び方

「ゲームスタート」をクリックすると始まります。

3つある枠のどこかに「もぐら」が出現するので、それをクリック!

「もぐら」が消えるまでにクリックできると、Scoreが1点増えます。

クリックできないうちに「もぐら」が消えるとMissが1増えます。

Missが3になったらゲームオーバー。

「ゲームオーバー」の文字をクリックすると、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>

 

 

あとがき

 はい、「面白い面白くないは二の次」と書いた通り、「何の変哲もない もぐらたたき」ですw

 

作るのにかかった時間、40分ぐらいかな。

 

「やればできるじゃん、自分!」ってちょっと自信を取り戻したかもですw 
(ブログ記事としては「…。」ですがwww)

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^