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

#概要

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

#動作の確認方法

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

#写真

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/758540b5-9f70-802e-4561-fe4b7478085d.jpeg)


#サンプルコード

```
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);
    },
  
  }
})




```

#成果物

https://embed.plnkr.co/plunk/gZWWkrGFV44JjerA

以上。