Go to Qiita Advent Calendar 2024 Top
LoginSignup
13
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Riot.jsAdvent Calendar 2016

Day 25
@alg(alg)

Riot.jsでゲームを作る

Posted at

この記事は Riot.js Advent Calendar 2016 の最終日の記事です。ギリギリの更新ですみません；

ゲームにも使えるRiot.js

Riot.js、いいですよね。
実用的なアプリで利用されている印象ですが、ゲーム開発にも便利に使えそうだと感じたので、試しに使ってみました。

とりあえず3Dっぽい迷路をうろうろするゲームを作ってみましたが、1フレーム単位でシビアなタイミングが要求されるゲームでなければ非常に実用的だと思います。

デモは↓こちら。
Plunkerでのデモ
壁にぶつかったときのOUCHは譲れないポイント

簡単な解説

  • 迷路データ(0:通路、1:壁、など)を配列に格納
  • 移動用のボタンを用意し、押下時に現在地データ(座標と方角)を書き換え
  • 現在地データと迷路データをもとに、迷路画像などの表示を切り替え
  • Plunker便利(Riot.js関係ない)

ソース

やっつけ感漂うソースですみません。特にsetToViewファンクションのベタベタ感が……。

index.html
<html>
  <body>
    <mz-main></mz-main>
    <script type="riot/tag" src="mz-main.html"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/riot/3.0.2/riot+compiler.min.js
"></script>
    <script>
riot.mount('mz-main',{
  current: {
    x:2,
    y:2,
    direction:'E'
  },
  maze: [
//  0:passageway
//  1:wall
//  9:goal
           /*N*/
      [1,1,1,1,1,1,1,1,1],
      [1,1,1,1,1,1,1,1,1],
      [1,1,0,0,0,0,0,1,1],
      [1,1,1,0,1,0,1,1,1],
/*W*/ [1,1,1,1,1,0,1,1,1], /*E*/
      [1,1,1,0,0,0,0,1,1],
      [1,1,1,1,1,1,9,1,1],
      [1,1,1,1,1,1,1,1,1],
      [1,1,1,1,1,1,1,1,1]
           /*S*/
  ],
  view: [
    [0,0,0],
    [0,0,0],
    [0,0,0]
  ],
  message: ""
});
    </script>
  </body>
</html>
mz-main.html
<mz-main>
  <img style="position:absolute;top:4px;left:4px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwAgMAAABDOwEBAAAACVBMVEUAAAD/////AP/gXFgRAAAAA3RSTlP//wDXyg1BAAAAJUlEQVRo3u3BAQ0AAADCoPdPbQ43oAAAAAAAAAAAAAAAAAAAvg05MAABhS0NogAAAABJRU5ErkJggg==">
  <!--20--><img if="{ opts.view[0][2] == 1 }" style="position:absolute;top:4px;left:4px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwAgMAAABDOwEBAAAACVBMVEUAAAD/AP////+5HGLvAAAAA3RSTlP/AP9p7B++AAAAm0lEQVRo3u3YsQ2DQAAEQfQZhVAS/VjOXMCX4MRVugAIQJuhuXyCS3fZwxYYhmEYhmEYhmEYhuEH4d9h8zo+bHwL/hT8Lvg1C94KXgseBS+z4K3gteBR8NXT53greIVhGIZhGIZhGIZhGD7BKTjMgFNkSXknhaUZcIppKeOlgDgDTtE05doboTgl6j0MhmEYhmEYhmEYhmH4QfgPHchQ+/8y2XcAAAAASUVORK5CYII=">
  <!--22--><img if="{ opts.view[2][2] == 1 }" style="position:absolute;top:4px;left:4px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwAgMAAABDOwEBAAAACVBMVEUAAAD/AP////+5HGLvAAAAA3RSTlP/AP9p7B++AAAAlklEQVRo3u3YsQ3CMAAAQYsdsSKqKJNYjMOUDJAUkb6D+/4W+PEMDRiGYRiGYRiGYRiG4X/E83PqPn6tceo2Pgp+BzwfAW8F7wWvgOcIeCt4L3gFPEfAW8E7DMMwDMMwDMMwDMPwRWk4pNWRJkvbO2kspaWVZlrbeGkgpnWZpmnbtWkUp0V9EQzDMAzDMAzDMAzD8A/hLxZbbLXR08o2AAAAAElFTkSuQmCC">
  <!--21--><img if="{ opts.view[1][2] == 1 }" style="position:absolute;top:4px;left:4px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwAgMAAABDOwEBAAAACVBMVEUAAAD/AP////+5HGLvAAAAA3RSTlP/AP9p7B++AAAAWklEQVRo3u3YQQ0AIAwAsQWP+EEPKjEAYcl+S+9fAxezUMAwDMMwDMMwDMMwDLfG+1EKr7g2YBiGYRiGYRiGYRiGYRiGYfiPS4s6HwzDMAzDMAzDMAzDcCN8ABfVAM1V0PxpAAAAAElFTkSuQmCC">
  <!--10--><img if="{ opts.view[0][1] == 1 }" style="position:absolute;top:4px;left:4px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwAgMAAABDOwEBAAAACVBMVEUAAAD/AP////+5HGLvAAAAA3RSTlP/AP9p7B++AAAA7ElEQVRo3u3aoQ0DQQxE0ZWZC3FJ108UlgJcQkiqDDspd8j7ScA3f2CoZ9YBbonFYrFYLBaLt/HnvJ7j8+JN8IvgJ8GPJrgIToKD4NUEF8FJcBA8Df2Li+AkOAgehr7gIjgJDoJnoa+4CE6Cg+BR6BsugpPgIHgS+o6L4CQ4CB6EFovFYrFYLBaLxWKxWCwWi8VisfhvMHqOo7c8KgQaYFSCoPoFFT8NMCq7UM2GCr4GGJWaqE5FRW4DjMprVJujwr4BRiMFNI9Aw4wGGI1R0AwGDXAaYDQ6QnOnjaEVmngd4MRisVgsFovF2/cFpGO+FroQDfoAAAAASUVORK5CYII=">
  <!--12--><img if="{ opts.view[2][1] == 1 }" style="position:absolute;top:4px;left:4px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwAgMAAABDOwEBAAAACVBMVEUAAAD/AP////+5HGLvAAAAA3RSTlP/AP9p7B++AAAA7UlEQVRo3u3aPUqEMRhG0eAe/QhWwZUEl+Mq/RkZbCcHBOG+/SnS5j7jGW6Ew+FwOBwOh/8OX+/3exy/7HG/h/Gr4DfA1xPgKXgJ3oCvAXgKXoI34GsAnoKX4A3488nneApegjfgrycf4yl4Cd6Av598iqfgJXgDvj35EE/BS/AG/PPkcDgcDofD4XA4HA6Hw+FwOBwOh/8Vps9x+5anIEApgiKI5RcKP5ScKHZZZqPAR2mRoqblVAq5lJApXls2p2BPUwEaKdg8goYZNAmhMYrNYGiAQ9MfGh3Z3ImGVjTx+nXhcDgcDofD4eP7ADDdswa+58hZAAAAAElFTkSuQmCC">
  <!--11--><img if="{ opts.view[1][1] == 1 }" style="position:absolute;top:4px;left:4px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwAgMAAABDOwEBAAAACVBMVEUAAAD/AP////+5HGLvAAAAA3RSTlP/AP9p7B++AAAAWUlEQVRo3u3aMREAIAwAsR4e8YMeVGKAobSM+T0OPmajgGEYhmEYhj/gneyKV6QaMAzDMAzDMAzDMAzDMAzDMAzDMAzDMAzDMAzDcAW3Fq/3YBiGYRiG4XIHzWHmM1h1cIAAAAAASUVORK5CYII=">
  <!--00--><img if="{ opts.view[0][0] == 1 }" style="position:absolute;top:4px;left:4px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwAgMAAABDOwEBAAAACVBMVEUAAAD/////AP/gXFgRAAAAA3RSTlP//wDXyg1BAAAA7UlEQVRo3u3bsRECAQwDQZFQxJfo0qiSHtiImXO+weXy7vP77RH8FvwSvBP8CH4LfgmG6En0JHoSPYmeRE+iJ9GT6En0JHoSPYmeRE+iJ9GT6En0JHoSPYmeRE+iJ9GT6En0JHoSPYmeRE+iJ9GT6HA4HA6Hw+FwOBwOh8PhcDgcDofD4XA4HA6Hw+FwOBwO/wGmcRnN2mhQd4BpREjzRRpOHmAai9JMlQayB5hGwTRHpiH0AabxN83OafB+gGnkT+8F9NhwgOmZg95I6IHlANPTDr0L0aPSAabnLHoLo4e0A0xPePT+R4+HkPz5AqMk9H6B56i0AAAAAElFTkSuQmCC">
  <!--02--><img if="{ opts.view[2][0] == 1 }" style="position:absolute;top:4px;left:4px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwAgMAAABDOwEBAAAACVBMVEUAAAD/AP////+5HGLvAAAAA3RSTlP/AP9p7B++AAAA8ElEQVRo3u3boRGAABADwWsSBkkplE4PrGPyfsX5fMf3OwN8Cb4FP0lykpwkJ8lJcpKcJCfJSXKSnCQnyUlykpwkJ8lJcpKcJCfJSXKSnCQnyUlykpwkJ8lJcpKcJCfJSXKSnCQnyUny8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8I8wjcts1kaDOpry0YjQ5os0nKTJJo1FbaZKA1ma5tIo2ObINISmCTaNv212ToN3mtrTyN/eC+ixgV4q6JnD3kjogYVeZ+hpx96F6FGJXqToOcvewughjV7h6AnP3v/o8fB8AUGcKJHXD01AAAAAAElFTkSuQmCC">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <div>
    ({ opts.current.x },{ opts.current.y })
    { opts.current.direction }
    { opts.message }
  </div>
  <table>
    <thead></thead>
    <tbody>
      <tr>
        <td></td>
        <td><button onclick={ moveToFront }>↑</button></td>
        <td></td>
      </tr>
      <tr>
        <td><button onclick={ turnToLeft }>←</button></td>
        <td><button onclick={ turnToBack }>↓</button></td>
        <td><button onclick={ turnToRight }>→</button></td>
      </tr>
    </tbody>
  </table>
  <script>
    this.on('mount', function(){
      console.log(this);
      this.setToView();
      this.update();
    });
    this.moveToFront = function(e) {
      var d = opts.current.direction;
      var x = opts.current.x;
      var y = opts.current.y;
      if (d == 'N') y--;
      if (d == 'S') y++;
      if (d == 'E') x++;
      if (d == 'W') x--;
      if (opts.maze[y][x] != null && opts.maze[y][x] != 1) {
        opts.current.x = x;
        opts.current.y = y;
        if (opts.maze[y][x] == 9) {
          opts.message = "*GOAL*";
        } else {
          opts.message = "";
        }
        this.setToView();
      } else {
        opts.message = "*OUCH*";
      }
    }
    this.turnToLeft = function(e) {
      var d = opts.current.direction;
      if (d == 'N') opts.current.direction = 'W';
      if (d == 'S') opts.current.direction = 'E';
      if (d == 'E') opts.current.direction = 'N';
      if (d == 'W') opts.current.direction = 'S';
      opts.message = "";
      this.setToView();
    }
    this.turnToRight = function(e) {
      var d = opts.current.direction;
      if (d == 'N') opts.current.direction = 'E';
      if (d == 'S') opts.current.direction = 'W';
      if (d == 'E') opts.current.direction = 'S';
      if (d == 'W') opts.current.direction = 'N';
      opts.message = "";
      this.setToView();
    }
    this.turnToBack = function(e) {
      var d = opts.current.direction;
      if (d == 'N') opts.current.direction = 'S';
      if (d == 'S') opts.current.direction = 'N';
      if (d == 'E') opts.current.direction = 'W';
      if (d == 'W') opts.current.direction = 'E';
      opts.message = "";
      this.setToView();
    }
    this.setToView = function() {
      opts.view[1][0] = opts.maze[opts.current.y][opts.current.x];
      var d = opts.current.direction;
      if (d == 'N') {
        opts.view[0][2] = opts.maze[opts.current.y-2][opts.current.x-1];
        opts.view[1][2] = opts.maze[opts.current.y-2][opts.current.x];
        opts.view[2][2] = opts.maze[opts.current.y-2][opts.current.x+1];
        opts.view[0][1] = opts.maze[opts.current.y-1][opts.current.x-1];
        opts.view[1][1] = opts.maze[opts.current.y-1][opts.current.x];
        opts.view[2][1] = opts.maze[opts.current.y-1][opts.current.x+1];
        opts.view[0][0] = opts.maze[opts.current.y][opts.current.x-1];
        opts.view[2][0] = opts.maze[opts.current.y][opts.current.x+1];
      }
      if (d == 'S') {
        opts.view[0][2] = opts.maze[opts.current.y+2][opts.current.x+1];
        opts.view[1][2] = opts.maze[opts.current.y+2][opts.current.x];
        opts.view[2][2] = opts.maze[opts.current.y+2][opts.current.x-1];
        opts.view[0][1] = opts.maze[opts.current.y+1][opts.current.x+1];
        opts.view[1][1] = opts.maze[opts.current.y+1][opts.current.x];
        opts.view[2][1] = opts.maze[opts.current.y+1][opts.current.x-1];
        opts.view[0][0] = opts.maze[opts.current.y][opts.current.x+1];
        opts.view[2][0] = opts.maze[opts.current.y][opts.current.x-1];
      }
      if (d == 'E') {
        opts.view[0][2] = opts.maze[opts.current.y-1][opts.current.x+2];
        opts.view[1][2] = opts.maze[opts.current.y][opts.current.x+2];
        opts.view[2][2] = opts.maze[opts.current.y+1][opts.current.x+2];
        opts.view[0][1] = opts.maze[opts.current.y-1][opts.current.x+1];
        opts.view[1][1] = opts.maze[opts.current.y][opts.current.x+1];
        opts.view[2][1] = opts.maze[opts.current.y+1][opts.current.x+1];
        opts.view[0][0] = opts.maze[opts.current.y-1][opts.current.x];
        opts.view[2][0] = opts.maze[opts.current.y+1][opts.current.x];
      }
      if (d == 'W') {
        opts.view[0][2] = opts.maze[opts.current.y+1][opts.current.x-2];
        opts.view[1][2] = opts.maze[opts.current.y][opts.current.x-2];
        opts.view[2][2] = opts.maze[opts.current.y-1][opts.current.x-2];
        opts.view[0][1] = opts.maze[opts.current.y+1][opts.current.x-1];
        opts.view[1][1] = opts.maze[opts.current.y][opts.current.x-1];
        opts.view[2][1] = opts.maze[opts.current.y-1][opts.current.x-1];
        opts.view[0][0] = opts.maze[opts.current.y+1][opts.current.x];
        opts.view[2][0] = opts.maze[opts.current.y-1][opts.current.x];
      }
    }
  </script>
</mz-main>
13
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
13
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?