アーシの毎日インプット

毎日1つ以上学習する。学習した内容を公開する。を目標に自分のスキルアップを目指します。

●を捕まえるゲーム

スポンサードリンク

JavaScriptを使って●を捕まえるゲームを作りました。

 

●を10回捕まえてみてください!

 

 

先日いっぱいぴょんぴょんしたので、

arsinput.hatenablog.jp

JavaScriptを用いての動いて触ってについては基礎知識がついたように思えます。

 

できれば捕まえた回数を表示したかったなど、チューンアップできる部分は多々残されていますが、最低限のゲームは完成させられたものと思っています。

 

今後もJavaScriptで色々と動くものを作っていきます!

 

 

 

今回のソースはこちら

<div id="gamen" style="position: relative; background-color: #aaaaaa; width: 400px; height: 300px;"> </div>
<p>
<script>// <![CDATA[
x=20;
y=100;
mx=3;
my=0;
j=0;
g=0;
tm0=setInterval('jp()',50);

function jp(){
x+=mx;
y+=my;
if(x>=370){
if(g<3){mx=-4;}
if(g>=3 && g<7){
mx=-9;
my++
}
if(g>=7){
mx=-16;
my=my+2
}
}
if(x<=0){
if(g<2){mx=3;}
if(g>=2 && g<5){mx=11;}
if(g>=5 && g<8){mx=17;}
if(g>=8){mx=25;}
}
if(y>=250){
my=-my
}
if(y<=-30){
my=-my
}
if(j>0){
if(x<165){
x=x+165
mx=mx+my
}else{
x=x-165
mx=-mx+my
}
if(y<110){
y=y+140
my=my+3
}else{
y=y-140
my=my-3
}
g++;
j=0;
}
if(g>=10){
gamen.innerHTML='<div style="position:absolute;bottom:120px;left:60px;font-size:30px;">クリアおめでとう!</div>';
}else{
gamen.innerHTML='<div style="position:absolute;bottom:'+y+'px;left:'+x+'px;font-size:48px;" onmouseover="if(j==0){j=1;}">●</div>';
}
}
// ]]></script>
</p>

 

まだまだJavaScriptをあまり理解しない中作ったので、より改善できる点があればご指摘ください!

ちょっとした工夫は、捕まえた回数によって速度が若干変わる事です。

【アーシの原点】

【頭を鍛える迷路集】


スポンサードリンク