LoginSignup
8
2

More than 5 years have passed since last update.

@hashito(はしと)

Riot.jsで蛇のゲーム

Last updated at Posted at 2018-03-11

背景

個人的にSVGに興味が出てきた+ゲームを作りたかったので作ってみた。

完成したものは下記
http://hasito.com/snake/

仕様

  • 2Dゲーム
  • 蛇が餌を食べると長くなる
  • 壁/体にあたったら死ぬ
  • 少しづつ動きが早くなる
  • キーボードで操作
    こんな感じ…

開発

枠を組む

SVGで下記のように書くと格子状にブロックを配置できる様子

    <svg width="30" height="60">
      <g transform={('translate(0,0)')}>
        <rect x="0" y="0" width="15" height="15" title=""  fill="#000000"></rect>
        <rect x="0" y="15" width="15" height="15" title=""  fill="#000000"></rect>
        <rect x="0" y="30" width="15" height="15" title=""  fill="#000000"></rect>
        <rect x="0" y="45" width="15" height="15" title=""  fill="#000000"></rect>
      </g>
      <g transform={('translate(15,0)')}>
        <rect x="0" y="0" width="15" height="15" title=""  fill="#000000"></rect>
        <rect x="0" y="15" width="15" height="15" title=""  fill="#000000"></rect>
        <rect x="0" y="30" width="15" height="15" title=""  fill="#000000"></rect>
        <rect x="0" y="45" width="15" height="15" title=""  fill="#000000"></rect>
      </g>
    </svg>

これをriot.jsで記載

    <svg riot-width={ w*15 } riot-height={ h*15 } >
      <g each={d,i in view} transform={('translate('+(i*15)+',0)')}>
        <rect each={d2,i2 in d} x="0" riot-y={i2*15} data-point='{(JSON.stringify({x:i,y:i2}))}' width="15" height="15" title=""  fill="#{('000000'+d2.toString(16)).slice(-6)}"></rect>
      </g>
    </svg>

注意点

  • viewには多次元配列が入っている予定
  • fillは16進指定。6桁必要なので0で頭をうめています。
  • xやらwidthは頭にriot-をつける必要あり

全体の流れ

全体の処理の流れとしては下記な感じを想定して作りました。
1. 初期化処理
2. メイン処理
3. 蛇の死
4. 初期化処理(2回目)
5. メイン処理(2回目)
…こんな感じ

初期化処理

    /* タイマーセット関数(一定ごとに時を進める用)
    */
    var tm_set=()=>{
      if(self.tme)clearInterval(self.tme);
      self.tme=setInterval(()=>{
        self.tm-=1;
        tm_set2(self.tm);
      },1000);//とりあえず1秒単位で更新固定
    };
    /* タイマーセット関数(メイン処理用)
    */
    var tm_set2=(v)=>{
      if(self.tme2)clearInterval(self.tme2);
      self.tme2=setInterval(()=>{
        _main_();
      },v);
    };
    /* 初期化処理
    */
    var _init_=()=>{
// 変数の初期化
      self.st=1;//ゲームステータス
      self.w=40;//横の長さ
      self.h=40;//縦の長さ
      self.view=new Array(self.h);//表示用変数初期化
      for(i=0;i<self.h;i++){
        self.view[i] = new Array(self.w);
        self.view[i].fill(0);
      }
      self.map=new Array(self.h);//マップ変数の初期化(今は餌しか置かれない…)
      for(i=0;i<self.h;i++){
        self.map[i] = new Array(self.w);
        self.map[i].fill(0);
      }
      self.snake={//蛇の初期化
        hed:{x:Math.floor(self.w/2),y:Math.floor(self.h/2)},//頭の位置
        body:[],//体
        point:0,//ポイント
        move:{x:1,y:0}//移動属性(キーダウンイベントで変化)
      }
      self.tm=300;//時間更新間隔(初期値)
//キーダウンイベント
      document.onkeydown = function (e){
        var k = e.keyCode;
        var s = self.snake;
        console.log(k)
        if(k==37)s.move={x: 0,y:-1};//左
        if(k==38)s.move={x:-1,y: 0};//上
        if(k==39)s.move={x: 0,y: 1};//右
        if(k==40)s.move={x: 1,y: 0};//下
        if(k==32)self.st=2;//game開始
      };
//タイマー設定
      tm_set();
      console.log("_init_");
    }

移動処理


    /* run処理
    */
    var _run_=()=>{
      var s = self.snake;
      // --move--　移動処理
      // body
      s.body.unshift(JSON.parse(JSON.stringify(s.hed)));
      s.body.pop();
      // hed
      s.hed.x += s.move.x;
      s.hed.y += s.move.y;
      // --dead--　死亡判定
      var b1 = (s.hed.x<self.w);
      var b2 = (s.hed.y<self.h);
      var b3 = (s.hed.x>=0);
      var b4 = (s.hed.y>=0);
      var b5 = (s.body.filter((v)=>{return (s.hed.x==v.x)&&(s.hed.y==v.y);}).length==0);
      if(!(b1&&b2&&b3&&b4&&b5)){
        return false;
      }
      // --eat--　お食事判定
      if(self.map[s.hed.y][s.hed.x]=="food"){
        if(s.body.length==0){
          s.body.push(JSON.parse(JSON.stringify(s.hed)));
        }else{
          s.body.push(JSON.parse(JSON.stringify(s.body[s.body.length-1])));
        }
        s.point+=1/self.tm;
      }
      self.map[s.hed.y][s.hed.x]=0;
      // --food--　餌をRANDOMに置く処理
      var foody=Math.floor(Math.random()*self.h);
      var foodx=Math.floor(Math.random()*self.w);
      var fb1=(s.body.filter((v)=>{return (foodx==v.x)==(foody==v.y);}).length==0);
      var fb2=(!((s.hed.x==foodx)&&(s.hed.y==foody)));
      if(fb1&&fb1){
        self.map[foody][foodx]="food";
      }
      // --view--　表示を更新する処理
      for(i=0;i<self.h;i++){self.view[i].fill(0);}
      self.view[s.hed.y][s.hed.x]=0x0000ff;
      s.body.forEach((v)=>{
        self.view[v.y][v.x]=0x5555ff;
      });
      self.map.forEach((y,yi)=>{
        y.forEach((x,xi)=>{
          if(x=="food"){
            self.view[yi][xi]=0xff00ff;
          }
        });        
      })

      return true;
    }

メイン処理

ほぼ、切り替えしかしてないけど…

    /* main
    */
    var _main_=()=>{
      if(self.st==2){//st：0>初期 1>停止 2>ゲーム中
        if(!_run_()){
          _init_();
        }
        self.update();
      }
    };

全体コード

index.html

<html>
  <head>
    <title>Hello Riot.</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <sample></sample>
    <script type="riot/tag" src="sample.tag"></script>
   <!-- <script src="https://cdn.jsdelivr.net/npm/riot@3.9/riot+compiler.min.js"></script>  -->
   <script src="riot/riot+compiler.min.js"></script>
    <script>riot.mount('sample')</script>
  </body>
</html>

sample.tag

<sample>
    <h1>蛇のやつ</h1>
    <h3>スペースキーで開始してください</h3>
    <svg riot-width={ w*15 } riot-height={ h*15 } >
      <g each={d,i in view} transform={('translate('+(i*15)+',0)')}>
        <rect each={d2,i2 in d} x="0" riot-y={i2*15} data-point='{(JSON.stringify({x:i,y:i2}))}' width="15" height="15" title=""  fill="#{('000000'+d2.toString(16)).slice(-6)}"></rect>
      </g>
    </svg>
    <h3>ポイント{snake.point}点</h3>
    <h3>体の長さ{snake.body.length}ブロック</h3>
    <h3>頭の位置{snake.hed.x}:{snake.hed.y}</h3>
  <script>
    var self=this;
    self.st=0;
    self.tme=false;
    self.tme2=false;
    /* タイマーセット関数(一定ごとに時を進める用)
    */
    var tm_set=()=>{
      if(self.tme)clearInterval(self.tme);
      self.tme=setInterval(()=>{
        self.tm-=1;
        tm_set2(self.tm);
      },1000);
    };
    /* タイマーセット関数(メイン処理用)
    */
    var tm_set2=(v)=>{
      if(self.tme2)clearInterval(self.tme2);
      self.tme2=setInterval(()=>{
        _main_();
      },v);
    };
    /* main
    */
    var _main_=()=>{
      if(self.st==2){
        if(!_run_()){
          _init_();
        }
        self.update();
      }
    };
    /* run処理
    */
    var _run_=()=>{
      var s = self.snake;
      // --move--
      // body
      s.body.unshift(JSON.parse(JSON.stringify(s.hed)));
      s.body.pop();
      // hed
      s.hed.x += s.move.x;
      s.hed.y += s.move.y;
      // --dead--
      var b1 = (s.hed.x<self.w);
      var b2 = (s.hed.y<self.h);
      var b3 = (s.hed.x>=0);
      var b4 = (s.hed.y>=0);
      var b5 = (s.body.filter((v)=>{return (s.hed.x==v.x)&&(s.hed.y==v.y);}).length==0);
      if(!(b1&&b2&&b3&&b4&&b5)){
        return false;
      }
      // --eat--
      if(self.map[s.hed.y][s.hed.x]=="food"){
        if(s.body.length==0){
          s.body.push(JSON.parse(JSON.stringify(s.hed)));
        }else{
          s.body.push(JSON.parse(JSON.stringify(s.body[s.body.length-1])));
        }
        s.point+=1/self.tm;
      }
      self.map[s.hed.y][s.hed.x]=0;
      // --food--
      var foody=Math.floor(Math.random()*self.h);
      var foodx=Math.floor(Math.random()*self.w);
      var fb1=(s.body.filter((v)=>{return (foodx==v.x)==(foody==v.y);}).length==0);
      var fb2=(!((s.hed.x==foodx)&&(s.hed.y==foody)));
      if(fb1&&fb1){
        self.map[foody][foodx]="food";
      }
      // --view--
      for(i=0;i<self.h;i++){self.view[i].fill(0);}
      self.view[s.hed.y][s.hed.x]=0x0000ff;
      s.body.forEach((v)=>{
        self.view[v.y][v.x]=0x5555ff;
      });
      self.map.forEach((y,yi)=>{
        y.forEach((x,xi)=>{
          if(x=="food"){
            self.view[yi][xi]=0xff00ff;
          }
        });        
      })

      return true;
    }
    /* 初期化処理
    */
    var _init_=()=>{
      self.st=1;
      self.w=40;
      self.h=40;
      self.view=new Array(self.h);
      for(i=0;i<self.h;i++){
        self.view[i] = new Array(self.w);
        self.view[i].fill(0);
      }
      self.map=new Array(self.h);
      for(i=0;i<self.h;i++){
        self.map[i] = new Array(self.w);
        self.map[i].fill(0);
      }
      self.snake={
        hed:{x:Math.floor(self.w/2),y:Math.floor(self.h/2)},
        body:[],
        point:0,
        move:{x:1,y:0}
      }
      self.tm=300;
      document.onkeydown = function (e){
        var k = e.keyCode;
        var s = self.snake;
        console.log(k)
        if(k==37)s.move={x: 0,y:-1};//左
        if(k==38)s.move={x:-1,y: 0};//上
        if(k==39)s.move={x: 0,y: 1};//右
        if(k==40)s.move={x: 1,y: 0};//下
        if(k==32)self.st=2;//game開始
      };
      tm_set();
      console.log("_init_");
    }
    /* マウント前イベント
    */
    self.on("before-mount",(v)=>{
      _init_();
    });
  </script>
</sample>

残課題

  • 死んだら死んだとか出てほしいけど出ない
  • ポイントが後半に食った餌ほど線形に高い雑仕様
  • 死んだら得たポイント見られない
  • 毎更新に餌がおかれるため、後半めっちゃ出る
8
2
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
8
2