息抜きに作った(phina.js)
気分転換もかねてphina.jsで色とりどりのブロックがわいてくるやつを作った。
ノベルゲー途中経過
とりあえず普通のテキストファイルを読み込んで表示できるようにしました。
追加したのは主にこの部分です。
//textファイル読み込み $.ajax({ type: 'GET', url: 'sample.txt', success: function(text){ //改行コードで分割 string = text.split(/\r\n|\r\n/); } });
JQueryのAjaxを使っています。
なのでChromeだとエラーが出てしまいます(Edgeなら動く)
dataType: 'json'を追加すればJSON形式で読み込めるはずです。
Chromeで動かないのはまずいのでなんとかしたいのですが、めんどくさいので後でやることにします。
最後にソースコードの全文を載せておきます。
続きを読むノベルゲーム
ブラウザで出来るノベルゲームということで、とりあえずさわりだけ作ってみました。
今後のやる気次第です。飽きっぽいので。
下にスクロールしないとテキストエリアにたどり着けないので注意。
まだまだ未完成です。
これからやることは、
- テキストデータをJSON形式で読み込んで表示する
- セーブ・ロード機能
- 挿絵、写真などの挿入機能
- BGMの挿入
- エフェクト（正直やりたくない）
などなど、たくさんありますが、やる気があればやってきます。
今日できたことは、
- クリックで文章を進める
- 文章がなかったら「文章がないです」と返す
たったこれだけです。
細かく言うとテキスト表示の関数をつくったとかありますが、機能としてはこれだけです。
8月27日
phina.jsでGridクラスを使ってマス目毎に四角を書くプログラムを作ろうとしたけどできなかった。
runstant.com
なぜか途中からズレが生じる。
Gridクラスで書けないことはないだろうから、また今度挑戦する。
phina.jsでキャラクターの移動に合わせて向きを変える
phina.jsで左右の向きにアニメーションを合わせる方法は見つかったのですが、上下（上り、下り）は無かったのでそれを作っていこうと思います。
まずは失敗例
update: function(app){ var key = app.keyboard; if(key.getKey('w')){ this.player.y -= 2; this.anime.gotoAndPlay('walk1');//上に移動 } if(key.getKey('s')){ this.player.y += 2; this.anime.gotoAndPlay('walk2');//下に移動 } if(key.getKey('a')){ this.player.x -= 2; } if(key.getKey('d')){ this.player.x += 2; } }
↓がスプライトシートです
spritesheet: { 'hiyoko_ss': { 'frame': { 'width': 32, 'height': 32, 'cols': 8, 'rows': 3, }, 'animations' : { 'walk1':{ 'frames': [11, 13], 'next': 'walk1', 'frequency': 12, }, 'walk2':{ 'frames': [8, 10], 'next': 'walk2', 'frequency': 12, } } } }
これだとキーを押している間ずっとアニメーションが初めから再生されてしまい、動いているように見えません。
「getKey()」関数はキーを押している時に実行されます。長押ししていると絶えず「gotoAndPlay()」関数が実行されるので、アニメーションが先頭フレームから始まります。
これが1フレームごとに起こるので、アニメーションが進まなくなります。
なので「getKeyDown()」関数を使います。
「getKeyDown()」はキーを押した時に1回だけ動くので、押している間ずっと最初から再生するということがなくなります。
さきほどのコードを書き換えるとこうなります。
update: function(app){ var key = app.keyboard; if(key.getKey('w')){//上に移動 this.player.y -= 2; //ここにあったthis.anime.gotoAndPlay('walk1')は削除 } if(key.getKey('s')){//下に移動 this.player.y += 2; //ここにあったthis.anime.gotoAndPlay('walk2')は削除 } if(key.getKey('a')){//左に移動 this.player.x -= 2; } if(key.getKey('d')){//右に移動 this.player.x += 2; } if(key.getKeyDown('w')){ this.anime.gotoAndPlay('walk1');//上移動 } if(key.getKeyDown('s')){ this.anime.gotoAndPlay('walk2');//下移動 } }
これで上下移動する際にキャラクターの向きを合わせられるようになりました。
最後に全体のソースコードを載せておきます。
phina.jsでマップ移動できるひよこ
タイトルままです。ゲームに使えそうなやつを作りました。
runstantを初めて使ったので、試しにそれを乗っけてみます。
うまい具合に表示されているようなのでこれからはrunstantをつかって作っていこうと思います。
追記：
使用したひよこの画像は「やさぐれひよこ」という素材です。
「やさぐれひよこ素材」置き場
今回使用したひよこのスプライトシート以外にもゲームの素材があります。
ライブラリもphina.jsというゲームライブラリを使ってます。
こちらにテンプレートがあります。
phinajs.com
シダのフラクタルを描く
コメント後で書きます
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>シダを描く</title> </head> <body> <canvas id="canvas" width="640" height="480"></canvas> <script> function drawLoopArc() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); var width = canvas.width; var height = canvas.height; var scaleX = 60; var scaleY = 45; var x1 = 1.0; var y1 = 0.0; var x2 = 0.0; var y2 = 0.0; var size = 2; var pi = Math.PI * 2; function drawArc(){ //ctx.beginPath(); //ctx.arc(x1 * width, height - (height * y1), size, 0, pi, true); console.log("x1:", x1 * width, "y1:", y1 * height); ctx.fillRect(320 + (x1 * scaleX), height - (scaleY * y1), size, size); } function rand(){ var r; r = Math.floor(Math.random() * 100); return r; } function processing() { if(rand() % 100 < 1){ x2 = 0.0; y2 = 0.16 * y1; x1 = x2; y1 = y2; drawArc(); }else if(rand() % 100 <= 7){ x2 = -0.15 * x1 + 0.28 * y1; y2 = 0.26 * x1 + 0.24 * y1 + 0.44; x1 = x2; y1 = y2; drawArc(); }else if(rand() % 100 <= 14){ x2 = 0.2 * x1 - 0.26 * y1; y2 = 0.23 * x1 + 0.22 * y1 + 1.6; x1 = x2; y1 = y2; drawArc(); }else{ x2 = 0.85 * x1 + 0.04 * y1; y2 = -0.04 * x1 + 0.85 * y1 + 1.6; x1 = x2; y1 = y2; drawArc(); } } for(var i = 0;i < 10000;i++){ processing(); } } drawLoopArc(); </script> </body> </html>
