[HTML5でゲームづくり]フラッピーバード04(評価)

前回までで一通り動くようになりましたが、改善するべき点があるので、どうするべきかを考えていきます。

①スペースキーが正常に動作しない
ブラウザにもよりますが、ボタンを押したとカーソルが離れていないと、スペースキーでそのボタンが押されてしまう。
改善策：他のキーを割り当てる。
　　　　スペースキーが押された時はボタンを押した時の動作をさせないようにする。

②Canvas上の文字が見づらい
改善策：文字の後ろに白い四角を描画する。

③筒とあたってもGameOverしない
現状では筒の左側と円の中心の当たり判定しか行っていない。
改善策：当たり判定の方法を考えなおす。

④地面衝突でのGameOver未実装(2016/7/14追記)
改善策：実装する。(or仕様にする)

これらの改善策は気が向いた時に改善し、新しいページに載せる予定(未定)です。


<<前(実装)

[HTML5でゲームづくり]フラッピーバード03(実装)

前回作ったコードをこのページに埋め込みます。

※reset+start  : リセットしその後はじめからスタート
※stop/restart : 一時停止と再開
※Canvasをクリックするかスペースキーを押すとジャンプします。
　　ただし、スペースキーを使うと正常に動作しないブラウザもあります。



<<前(制作)　次(評価)>>

[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()">

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

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

[HTML5でゲームづくり]フラッピーバード01(設計)

タップして上下から伸びる管の間を通り抜けるゲームですが、今回はどんなデバイスでもと遊べるように、HTML5で作りたいと思います。

HTMLを使ってゲームを作るときは、imgタグを動かすことでゲームを作っていく方法や、canvasを使って作っていく方法などがありますが、今回はcanvasを使う方法で作りたいと思います。

設計は上の図のようにし、Canvasが押された時に速度をプラスします。各配列が管の長さ情報を表し、時間の経過とともに各配列と対応する管が黄緑の向きに移動するようにします。また、赤い丸は鳥にあたる部分ですが、それの上下方向の速度と座標情報を付けておきます。

次(制作)>>

[録画サーバー10]運用経過

録画サーバーを運用し始めてから１ヶ月以上経つのでどのような不具合が出てきたかを書いていきます。

①PX-W3PEのドライバがエラーを出し録画できなくなる。
開始一週間後くらいになりました。再起動で治り、再発はありません。

②RaspberryにつけているWiFiアダプタのGW300Sが２日程度で停止する。
こちらも再起動で治りますが、何度やっても５日以上持ちません。なのでWiFi経由で視聴するときのみRaspberryを起動しています。

③突然録画できなくなる
最近(6月中旬)なりました。ある番組の途中で録画が止まり、続く番組も撮れていませんでした。しかし、時間を開けてから録画してみると録画出来ました。また、ドライバなどがエラーを出した痕跡はありませんでした。同じ番組がレコーダーでは撮れていたので、受信レベルの低下は考えにくいです。

<<前　次>>

[録画サーバー09]遠隔視聴編

このままでは本体からしか視聴できないのでスマホや他のPCからも見れるようにします。ただし、家のLAN内のみです。

ここで発生した問題は２つあり、
ひとつ目はWifiアダプタのGW300Sのせいでブルースクリーンになってしまう問題です。これは一度しか起こっていないので詳しい原因は不明ですが、安定性を重視したいのでなんとかしなければならない問題です。
ふたつ目はWindowsをセキュリティソフト無しで使い続けるという問題です。

これらの問題を解決するため以下の方法を検討してみました。
①仮想マシンにWifiアダプタを繋ぎ、サーバーにする。
これはPentium n3700にVt-dがないので通信速度が遅くなり、実用に耐えうるものではありませんでした。
②Wifi子機を買い、有線接続をする。
子機を買うコストとWindowsのセキュリティーソフトなしの問題がそのままなので不採用。
③RaspberryPiと有線接続する。
今回はこの方法を採用した。

どのようになっているかは下の通りである。
WiFi- -GW300S-Raspberry--(有線LAN)--録画サーバ
録画サーバにあるエンコード済みフォルダをLAN内共有設定して、Raspberryの/var/www/hoge/にsambaでマウントする。また、Raspberryにはルータ機能を入れていないので録画サーバは直接外とつながることはありません。

このようにするとWiFiに接続できるデバイスはRaspberryにブラウザでアクセスするだけで録画したものを見ることができます。


<<前　続き>>

[録画サーバー08]エンコード自動化編

前回エンコードの手段が決まったので、今回はそれを自動で行うようにします。

EDCBで設定すれば録画後自動で開始することは可能なのですが、このマシンは非力なのでエンコードが録画の妨げとなりそうだったので、私は録画をしないであろう午前9:00からエンコードを開始するようにしたいと思いました。そこで自分で下記のような動作をするプログラムを書くことにしました。

①9:00を過ぎてから動作を始める(Sleepと時間取得の繰り返し)
②まだエンコードされていないファイルを探す(指定した録画・エンコードフォルダの全ての階層をチェック)
③録画フォルダ側に新しいフォルダがあればエンコード側にも同名のフォルダを作る
④HandbrakeのCUI版をコマンドで実行しエンコード
⑤番組内容などを記録したファイルをエンコード側フォルダーにコピー

今のところ録画データを削除する機能はつけていません。なぜなら、エンコードに失敗してしまう可能せもあるからです。なので録画可能容量は定期的に確認します。


<<前　続き>>