ひさびさの投稿！

JavaScript OKWave

ボタンでjsの動きを制御する
https://okwave.jp/qa/q9398412.html

またやっつけでプログラムを書いてみる。
腕がにぶる。
デバッグに時間かかりすぎ。
それにしても bind は楽チン。


<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>これがGame?</title>
  <style>
    td { width: 40px; height: 40px }
    .direction { display: inline-block;  text-align: center;}
    .direction td { width: 30px; height: 30px;}
  </style>
  
<body>
<p class="player">
  Command:
  <input type="button" value="↑">
  <input type="button" value="→">
  <input type="button" value="↓">
  <input type="button" value="←">
  <input type="button" value="Start"><br>
  Direction:
  <table border="1" class="direction"><tr><td><td><td><td><td><td></table>
</p>
  
<table border="1" id="f">
  <tr><td><td><td><td><td><td><td><td><td><td>
  <tr><td><td><td><td><td><td><td><td><td><td>
  <tr><td><td><td><td><td><td><td><td><td><td>
  <tr><td><td><td><td><td><td><td><td><td><td>
  <tr><td><td><td><td><td><td><td><td><td><td>
  <tr><td><td><td><td><td><td><td><td><td><td>
  <tr><td><td><td><td><td><td><td><td><td><td>
  <tr><td><td><td><td><td><td><td><td><td><td>
  <tr><td><td><td><td><td><td><td><td><td><td>
  <tr><td><td><td><td><td><td><td><td><td><td>
</table>

<p class="player">
  Command:
  <input type="button" value="↑">
  <input type="button" value="→">
  <input type="button" value="↓">
  <input type="button" value="←">
  <input type="button" value="Start"><br>
  Direction:
  <table border="1" class="direction"><tr><td><td><td><td><td><td></table>
</p>


<script>
{
  class Buffer {
    constructor (buf) {
      this.td = Array.from (buf.querySelectorAll ('td'));
      this.clear ();
    }
    
    clear () {
      this.ary = [];
      this.disp ();
    }
    
    push (vec) {
      this.ary.push (vec);
      this.disp ();
    }
    
    shift () {
      let rst = this.ary.shift ();
      this.disp ();
      return rst;
    }
    
    disp () {
      this.td.forEach ((e, i) => e.textContent = this.ary[i] || ''); 
    }
  }


  const
    field = document.querySelector('table#f'),
    direction = {
      '↑': {x: 0, y:-1},
      '→': {x: 1, y:0},
      '↓': {x: 0, y:1},
      '←': {x: -1, y:0}
    },
    speed = 1000, //ms
    
    locate = function (x = 0, y = 0, css = '') {
      if (css)
        if (y < 0 || field.rows.length <= y || x < 0 || field.rows[y].cells.length <= x)
          return true;

      field.rows[y].cells[x].style.cssText = css;
    }; 
    
  
   
  class Player {
    constructor (controller, x = 0, y = 0, css = 'background:red') {
      this.ctrl = controller;
      this.x = x;
      this.y = y;
      this.css = css;      
      this.buffer = new Buffer (controller.querySelector ('table.direction'));
      this.setPoistion ();
      this.disabled = this.toDisable ();
      controller.addEventListener ('click', this, false);
    }
    

    handleEvent ({target:{type, value}}) {
      if (! this.disabled) 
        if ('button' === type)
          switch (value) {
          case '↑': case '→': case '↓' : case '←' :
            this.buffer.push (value);
            break;

          case 'Start' :
            this.disabled = this.toDisable (1);
            this.move ();
            break;
          } 
    }
    

    setPoistion (vec) {
      if (vec) {
        let
          {x, y} = direction[vec],
          mx = this.x + x,
          my = this.y + y,
          rst = locate (mx, my, this.css);
        
        if (! rst) {
          locate (this.x, this.y);
          this.x = mx;
          this.y = my;
        }
      }
      else
        locate (this.x, this.y, this.css);
    }
    

    move () {
      let vec = this.buffer.shift ();
      if (vec) {
        this.setPoistion (vec);
        setTimeout (this.move.bind (this), speed);
      }
      else
        this.disabled = this.toDisable ();
    }

    
    toDisable (f = false) {
      f = !!f;
      Array.from (this.ctrl.querySelectorAll ('input[type="button"]'))
           .forEach (e => e.disabled = f);
      return f;
    }

  }
  
  this.Player = Player;
}

//-------------------

let [ctrl_A, ctrl_B] = document.querySelectorAll ('p.player');
let p1 = new Player (ctrl_A);
let p2 = new Player (ctrl_B, 9, 9,'background: blue');

</script>