どうも！LSSです！！
ふと思いついた動作があって、JavaScriptで作ってみました。
なにか…ゲームになりそうで、まだなってない、そんな謎の状態ですが公開してみます！
まるを大きくするゲーム未満のなにか
遊びかた（？）
青い○をクリックすると、○が大きくなった後、小さくなっていき、また大きくなりはじめます。
小さくなる方が多いので、放っておくとどんどん小さくなってしまいます。
大きくなり終えたタイミングでクリックすると、また大きくなり始めるので、タイミングよくクリックするとどんどん大きくなります。
ただし、大きくなりつつある時にクリックしてしまうと、その時点で小さくなり始めるので、余計に小さくなってしまう事になります。
ある程度大きくする事に成功すると、○が赤くなり、スコアが追加されます。
小さくなりすぎてしまうと、○が消滅します。
そのどちらの場合でも、すぐにまた次の○が現れて続く事になります。
このスクリプトのコード
<style>
#gamen{
position:relative;
height:330px;
overflow:hidden;
}
#maru{
position:absolute;
width:100px;
height:100px;
}
</style>
<div id="gamen">
<div id="score">下の〇をクリックしてスタート！</div>
<div id="maru"></div>
</div>
<p>
<script>
g=false;//ゲーム開始フラグ
s=0;//スコア
a=0;//maruの大きさ
p=0;//maruのサイズ変更値。+8から-10まで変化。
maru.addEventListener('click',maruclk,false);
init();
function init(){//初期化
a=100;
p=8;
maruw();
if(g){gw();}
}
function maruw(){//maruの位置・サイズ・イメージを設定
maru.style.top=(300-a)/2+'px';
maru.style.left=(300-a)/2+'px';
maru.style.width=a+'px';
maru.style.height=a+'px';
if(a<300){
maru.style.backgroundImage='radial-gradient(farthest-side,#cccceeff 30%,#ccccee00 90%,#cccceeff 99%,#ccccee00 100%)';
}else{
maru.style.backgroundImage='radial-gradient(farthest-side,#eeccccff 30%,#eecccc00 90%,#eeccccff 99%,#eecccc00 100%)';
}
}
function gw(){//ゲームメインルーチン
a+=p;
maruw();
if(p<-10){p=8;}else{p--;}
if(a>0 && a<300){
setTimeout(gw,50);
}else{
if(a>=300){
s++;
score.innerHTML='SCORE : '+s;
}
setTimeout(init,1000);
}
}
function maruclk(){//クリック時の動作
if(g){
if(p>0){p=0;}else{p=8;}
}else{
g=true;
gw();
}
}
</script>
</p>
あとがき
うーん…なんだこりゃｗ
操作的に面白くなりそうな予感はありますが、なにより遊び方の説明が難しいです^^;;;
そしてどうゲーム性を持たせるかも、うーん…。って感じですねｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
