ブログでミニRPGを動かす

Processingのコードをブログ上で実行するテスト。

ship of EYLN -ゲーム作りの冒険- で公開している、360行でイチから作るRPGのコードを解像度半分にして貼り付けてみました。

はてなブログでProcessingのコードを貼り付ける方法についてははてなブログで Processing.js を実行する方法 - 知に至る病とTips : Processingで書いた作品をはてなブログに貼る方法 ― CDN / Dropboxの利用 - [séns]を参考にさせていただきました（ありがとうございます）。

見たままモードのHTMLの方だとうまくいかず、上記リンクの通り、Markdownモードだとうまくいきました。

ようするにこんな感じで書けばOK。

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing.min.js"></script>
<div>
    <script type="text/processing">

void setup() {
  size(400, 300);
  noStroke();
  background(255);
}

void draw() {
  fill(255, 8);
  rect(0, 0, width, height);
  fill(255, 128, 64);
  ellipse(mouseX, mouseY, 50, 50);
}

    </script>
    <canvas></canvas>
</div>

あと、動かしてないときも重いと忍びないので、下記のようにマウスカーソルがゲーム描画エリア外のときは描画ループを止めるようにしてあります。

void mouseOut() { noLoop(); }
void mouseOver() { loop(); }

ところで、↑のプログラムコードは、はてなブログのMarkdownモードで↓のように書けばProcessingのシンタックスでハイライトされるんですね。なるほど。

 ```processing

 各種コード

 ```