対戦ゲームを作る。 その7

概要

対戦ゲームを作る。
vueで、書き換えて、みた。

動作の確認方法

２つ開いて、最初にクリックした方が白。
交互にクリックします。

写真

サンプルコード

var app = new Vue({
  el: '#app',
  data: {
    flg: 1,
    ban: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 2, 1, 1, 1, 1, 1, 1, 2, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    field:  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 2, 1, 1, 1, 1, 1, 1, 2, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    ws: null,
    id0: "",
    state: 0,
    iro: 2,
    msg: '白: 自分<br>黒: 相手',
        d: [],
        s: true,

  },
  created: function() {
    this.id0 = this.getUniq();
        this.ws = new WebSocket("wss://ohiapp0.herokuapp.com/pub");
        const vm = this;
        this.ws.onopen = function() {
            alert("open");
        };
    this.ws.onmessage = function(e) {
          var json0 = JSON.parse(e.data);
        //alert(json0);
        if (json0.id == vm.id0)
            return;
        vm.s = false;
        //alert(json0.iro);
        if (json0.iro == 2)
        {
            vm.iro = 0;
            vm.msg = '白: 相手<br>黒: 自分';
        }   
        else
        {
            vm.iro = 2;
            vm.msg = '白: 自分<br>黒: 相手';
        }
        //alert(json0.ban);
        vm.ban = json0.ban;
        //alert(json0.te);
        var res = vm.oku(json0.te, json0.iro);
        if (res == -1)
        {
            var end = -1;
            for (var i = 0; i < 64; i++)
            {
                vm.field[i] = vm.ban[i];
                if (vm.ban[i] == 1)
                    end = 0;
            }
            if (end == -1)
                alert("game over");
        }
        else
        {
            alert("石が置けません。");
        }
            vm.s = true;
    };
    this.ws.onerror = function(e) {
        alert("> ERROR: " + e.data);
    };
    },
  methods: {
    getUniq() {
        var strong = 3;
        return new Date().getTime().toString(16) + Math.floor(strong * Math.random()).toString(16)
    },
    bClass(n) {
            //this.msg = n;
      let classNames = 'coma1';
      if (this.field[n - 1] == 0) 
      {
        classNames = 'coma0';
      }
      if (this.field[n - 1] == 2) 
      {
        classNames = 'coma2';
      }
      return classNames;
    },
    check(put, d) {
        var x = put % 8;
        var y = Math.floor(put / 8);
        var res = 0;
        if (x == 0 && (d == -9 || d == -1 || d ==   7))
            res = 1;
        if (x == 7 && (d == -7 || d ==  1 || d ==   9))
            res = 1;
        if (y == 0 && (d == -9 || d == -8 || d == -7))
            res = 1;
        if (y == 7 && (d == 7 || d ==   8 || d ==   9))
            res = 1;
        return res;
    },
    oku(put, iro) {
        var res = 0;
        var turn = 0;
        if (iro == 0)
            turn = 2;
        var dir = new Array(-9, -8, -7, -1, 1, 7, 8, 9);
        var tugi;
        var i;
        var count;
        if (this.ban[put] == 1)
        {
            for (i = 0; i < 8; i++)
            {
                count = 0;
                tugi = put;
                do
                {
                    if (this.check(tugi, dir[i]) == 1)
                        break;
                    count++;
                    tugi += dir[i];
                }   while (this.ban[tugi] == turn);
                if ((count > 1) && (this.ban[tugi] == iro))
                {
                    res = -1;
                    tugi = put;
                    do
                    {
                        this.ban[tugi] = iro;
                        tugi += dir[i];
                    }   while (this.ban[tugi] == turn);
                }
            }
        }
        return res;
    },
    test(n) {
            this.s = false;
        var put;
        var res;
        if (this.flg > 0)
        {
            put = n;
            this.send(this.id0, this.state, this.iro, this.ban, put);
            res = this.oku(put, this.iro);
            if (res == -1)
            {
                var end = -1;
                for (var i = 0; i < 64; i++)
                {
                    this.field[i] = this.ban[i];
                    if (this.ban[i] == 1)
                        end = 0;
                }
                if (end == -1)
                    alert("game over");
            }
                else
            {
                alert("石が置けません。");
          }
                this.s = true;
        }
      },
    send(id, state, iro, ban, te) {
        var m = "{";
        m += '"id":"' + id + '",';
        m += '"state":' + state + ",";
        m += '"iro":' + iro + ",";
        m += '"ban": [' + ban + "],";
        m += '"te":' + te;
        m += "}";
        alert("> SEND: " + m );
        this.ws.send(m);
    },

  }
})

成果物

以上。