Skip to content

前田ブロックで作れるゲームいろいろ

先日のLAキャンプで活用した前田ブロックによるゲーム開発ですが、こんなゲームが作れるよ!という紹介です。

まずは超基本、「くまさんのリンゴ狩り」

ビジュアル言語だとソースコードがそのまんま画像というのがいいですね。
電子ブロックみたいです。

こんな感じのゲームはすぐ作れます。
90秒くらい。

で、もうちょっと本格的なゲームが作りたい!
という場合は「シューティングゲーム」をごらん下さい

基本ブロック「だけ」でシューティングゲームを実現しています。
こんなことできちゃうんですねー。

しかし前田ブロックには禁断のブロック「じっこう」があります。
これを使うと、なんでもできてしまうので、例えば横スクロールするジャンプゲームとか・・・

なんじゃこりゃ。特に「壁」のクラスが強引すぎますね。
でもできちゃってるのは事実です。

念のため、XMLを貼っておきます。前田ブロックのXMLタブに貼り付けると再現されます。画面をタップするとエンちゃん(クマ)がジャンプするよ

<xml>
  <block type="puppet" x="-99" y="426">
    <title name="TEXT">壁</title>
    <title name="OP">icon</title>
    <statement name="DO">
      <block type="option">
        <title name="OP">startPin</title>
        <title name="VALUE">[[0,250],[16,250],[32,250],[48,250],[64,250],[80,250],[96,250],[112,250],[128,250],[144,250],[160,250],[176,250],[192,250],[208,250],[224,250],[240,250],[256,250],[272,250],[288,250],[302,250]]</title>
        <next>
          <block type="behavior">
            <title name="OP">standAlone</title>
            <next>
              <block type="option">
                <title name="OP">frame</title>
                <title name="VALUE">36</title>
              </block>
            </next>
          </block>
        </next>
      </block>
    </statement>
  </block>
  <block type="puppet" x="26" y="-16">
    <title name="TEXT">くま</title>
    <title name="OP">kuma</title>
    <statement name="DO">
      <block type="behavior">
        <title name="OP">tapChaseX</title>
        <next>
          <block type="behavior">
            <title name="OP">standAlone</title>
            <next>
              <block type="option">
                <title name="OP">frame</title>
                <title name="VALUE">5</title>
                <next>
                  <block type="listener">
                    <title name="OP">init</title>
                    <statement name="DO">
                      <block type="run">
                        <title name="TEXT">this.a=0</title>
                      </block>
                    </statement>
                    <next>
                      <block type="listener">
                        <title name="OP">enterframe</title>
                        <statement name="DO">
                          <block type="controls_if" inline="false">
                            <value name="IF0">
                              <block type="Puppet_boolean">
                                <title name="COND">this.y&lt;(250-32)</title>
                              </block>
                            </value>
                            <statement name="DO0">
                              <block type="run">
                                <title name="TEXT">this.a+=0.5;this.y+=this.a;</title>
                              </block>
                            </statement>
                          </block>
                        </statement>
                        <next>
                          <block type="listener">
                            <title name="OP">sceneTouchend</title>
                            <statement name="DO">
                              <block type="controls_if" inline="false">
                                <value name="IF0">
                                  <block type="Puppet_boolean">
                                    <title name="COND">this.y&gt;(250-32)</title>
                                  </block>
                                </value>
                                <statement name="DO0">
                                  <block type="run">
                                    <title name="TEXT">this.a=-10;this.y-=5;</title>
                                  </block>
                                </statement>
                              </block>
                            </statement>
                            <next>
                              <block type="collision">
                                <title name="CLASSNAME">壁</title>
                                <title name="HITANDDIE">false</title>
                                <title name="SCORE">0</title>
                                <next>
                                  <block type="listener">
                                    <title name="OP">hit</title>
                                    <statement name="DO">
                                      <block type="run">
                                        <title name="TEXT">this.y=250-31</title>
                                      </block>
                                    </statement>
                                  </block>
                                </next>
                              </block>
                            </next>
                          </block>
                        </next>
                      </block>
                    </next>
                  </block>
                </next>
              </block>
            </next>
          </block>
        </next>
      </block>
    </statement>
  </block>
  <block type="puppet" x="483" y="261">
    <title name="TEXT">りんご</title>
    <title name="OP">icon</title>
    <statement name="DO">
      <block type="option">
        <title name="OP">frame</title>
        <title name="VALUE">15</title>
        <next>
          <block type="behavior">
            <title name="OP">randomAppearRight</title>
            <next>
              <block type="collision">
                <title name="CLASSNAME">くま</title>
                <title name="HITANDDIE">true</title>
                <title name="SCORE">0</title>
              </block>
            </next>
          </block>
        </next>
      </block>
    </statement>
  </block>
</xml>

さて、まあこれはちょっと強引な例だけれども、たとえば操作性ってゲームにとっては命綱って言っていいほど重要じゃないですか。
そこで操作性をコントロールするにはどうすればいいのか、まあ前田ブロックは「じっこう」ブロックのせいでビジュアル言語をすっ飛ばしてかなり卑怯なことができるんですけど、例えばクルマゲームみたいに、ハンドルを切る操作を実現したいとしますよね。

そのときはこう書くことが出来ます

こりゃヒドいwwww
ほとんどJavaScriptのソースコードそのまんま。
でもこんなものを書けちゃうのが前田ブロックのいいところ(ポジティブ)
ただしこれ、今のSafariだとバグって動かないです。そのうちなおると思います(昔Chromeで同じバグがあった)

で、一度こうやってプロトタイプを作ってみたら、ビヘイビアとして再定義することでもっと簡単にできます。

	tapRC:{
		init:function(){this.a=0;this.dir=-Math.PI/2;}, //コンストラクタで実行される
		enterframe:function(){ //enterframeイベントで実行される
			this.x += Math.cos(this.dir)*this.speed*0.1;;
			this.y += Math.sin(this.dir)*this.speed*0.1;
			if(theatre.touchX>180) this.dir+=0.1;
			if(theatre.touchX<140) this.dir-=0.1;
			this.rotation = this.dir*180/Math.PI+90;
		}
	},

前田ブロックのビヘイビアは実は前田ブロック自身とも対応しているので、よく見ると中身はほとんど同じ。
で、このビヘイビアを追加すると、次図のようにすっきり書くことが出来ます。

わーいわーい。

こんな感じで前田ブロックで「こんなゲームは実現できるかな?できないとしたらどんなビヘイビアが必要なのかな」と考えながらコードを書くのもまた楽しいのです。

最新の前田ブロック(日本語版)はhttp://junk.wise9.jp/maedaj/ にあります。
前田ブロックごと改造したい場合はhttp://junk.wise9.jp/maedaj/maedaBlock.zipからダウンロードできます。

Enjoy!

このエントリーをはてなブックマークに追加
はてなブックマーク - 前田ブロックで作れるゲームいろいろ
Post to Google Buzz
Share on GREE

Related posts:

  1. Googleが開発したキーボード不要のビジュアル言語Blockly
  2. わずか166行の「アングリードロイド」で学ぶ、3Dゲームプログラミング

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*