[HTML5でゲームづくり]フラッピーバード02(制作)

前回決定した設計に従ってコードを書いていきます。

作っているときに気づいたことだがスペースキーでジャンプさせたほうがPCでは操作しやすかったのでその機能も追加した。

<script> //グローバル変数の用意 var py,vy,co,t,ts,st,po; var bh=30;bw=5;g=0.5; var wall; wall = new Array(6); for(x=0;x<6;x++){ wall[x] = new Array(2); } window.onload = function(){ //最初に行う処理 reset();ts=5; } function reset(){ //ゲームをリセットする処理 vy=0;py=150;t=0;po=0; for(i=0;i<6;i++){ j=randN(1,6); wall[i][0]=j; wall[i][1]=8-j; } resetc(); } function resetc(){ //canvasを描画し直す処理 var canvas = document.getElementById('canp'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.clearRect(0,0,canvas.width,canvas.height); drawObj(); ctx.strokeStyle = 'rgb(0,0,0)'; ctx.strokeRect(0, 0, canvas.width, canvas.height); }function drawObj(){ //Canvasに筒や丸(鳥)を描く var canvas = document.getElementById('canp'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.fillStyle = 'rgb(200,0,0)'; ctx.arc(50, py, 5, 0, Math.PI*2, false); ctx.fill(); ctx.strokeStyle = 'rgb(0,100,0)'; for(i=0;i<6;i++){ if(i*100-t<-50){ ctx.strokeRect(i*100-t+600, 0, bw, wall[i][0]*bh); ctx.strokeRect(i*100-t+600, canvas.height, bw, -wall[i][1]*bh); }else{ ctx.strokeRect(i*100-t, 0, bw, wall[i][0]*bh); ctx.strokeRect(i*100-t, canvas.height, bw, -wall[i][1]*bh); } } ctx.font = "20px 'MYMBOL'"; ctx.fillStyle = 'rgb(0, 150, 150)'; ctx.fillText("Point:"+po,5,30); }function drawGO(){ //GameOverをcanvasに描く var canvas = document.getElementById('canp'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.font = "50px 'MYMBOL'"; ctx.fillStyle = 'rgb(250, 150, 0)'; ctx.fillText("GAME-OVER",100,150); }function countdown(n){ //ゲーム開始前のカウントダウンの数を描画する。 var canvas = document.getElementById('canp'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.font = "50px 'MYMBOL'"; ctx.fillStyle = 'rgb(250, 150, 0)'; ctx.fillText(n,225,150); } function loop(n){ //処理の中心となる部分 if(n==0){ if(ts!=5){ reset(); } st=0;ts=3; setTimeout("loop(1)",30); }else{ if(ts>0){ resetc(); countdown(ts); ts--; setTimeout("loop(1)",1000); }else{ t++; t=t%600; movep(); check(); resetc(); if(st==0){ setTimeout("loop(1)",30); }else if(st==2){ drawGO(); } } } }function jumpy(){ //上向きの速度を増やす vy-=15; }function movep(){ //現在の速度や位置に合わせて丸(鳥)を動かす vy+=g; py=parseInt(py+vy); if(py<0){ py=0;vy=0; }else if(py>300){ py=300;vy=0; } }function stopstart(){ //一時停止と再開の処理 if(st==0){ st=1; }else if(st==1){ st=0;loop(1); } }function check(){ //当たり判定と画面外の筒のを作り直す for(i=0;i<6;i++){ if(i*100-t==-50){ j=randN(1,6); wall[i][0]=j; wall[i][1]=8-j; }else if(i*100-t==50){ if(wall[i][0]*bh>py){ st=2; }else if(300-wall[i][1]*bh<py){ st=2; }else{ po++; } }else if(i*100-t+600==50){ if(wall[i][0]*bh>py){ st=2; }else if(300-wall[i][1]*bh<py){ st=2; }else{ po++; } } } } function randN(min,max){ //指定された最小値から最大値の中から整数をランダムで生み出す var a; var i; for(;;){ a=(Math.random()*(max+1))%(max+1); if(min<=a&&a<=max+1){ for(i=min;i<a;i++){ ; }i--; return i; } } } document.onkeydown = function (e){ //キーボードの変化を取得する // InternetExplorer 用 f=e; if (!e) f = window.event; f=f.keyCode; // window.alert("e="+e); if(f==32)jumpy(); if(e!=null){ e.preventDefault(); e.stopPropagation(); }else{ event.returnValue = false; event.cancelBubble = true; } }; </script> <canvas id="canp" width="500" height="300" onClick="jumpy()"></canvas> <br> <input type="button" value="reset+start" onClick="loop(0)"> <input type="button" value="stop/restart" onClick="stopstart()">

実際に動かせるものはものは次回に公開します。

<<前(設計)　次(実装)>>