reversi_jquery.html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

var passYou = false;
var passCom = false;
var myturn = 0;
var yourColor = 0;
var comColor = 1;

$(function(){
   var b =  yellowbase('base',8,50);
   yourColor = 0;//Number($("input[name='c']:checked").val());
   comColor = (yourColor + 1) % 2;
   //初期設定
   b.addForce(3,3,1);
   b.addForce(4,4,1);
   b.addForce(3,4,0);
   b.addForce(4,3,0);
   b.draw();
   
   //自分のオセロ
   $("#base").on('myOthello', function(e,base,posX,posY,myColor,enemy){
     setMyOthello(base,
                  posX,
                  posY,
                  myColor,
                  enemy);
   });
   
   //敵オセロ
   $("#base").on('enemyOthello', function(e,setAonce,base,myColor){
     setTimeout(setAOnce,1000,b,comColor);
   });

   //得点    
   $("#base").on('Score', function(e,base){
     setScore(base);
   });

   //スタート
   $("#start").on('click', function(){
     $("#base").off('fire');
     b.othellos.splice(0,b.othellos.length);

     b.addForce(3,3,1);
     b.addForce(4,4,1);
     b.addForce(3,4,0);
     b.addForce(4,3,0);
     b.draw();

     yourColor = Number($("input[name='c']:checked").val());
     comColor = (yourColor + 1) % 2;
     
     passYou = false;
     passCom = false;
     myturn = 0;

     if (myturn!=yourColor){
       $("#base").trigger('enemyOthello',[setAOnce,b,comColor]);
     }
   });

   //クリックのイベントハンドラを登録
   $("#base").on('click', function(e){
      var rect = $("#base").offset();
      var x = ~~((e.pageX - rect.left) / b.iwidth);
      var y = ~~((e.pageY - rect.top)  / b.iwidth);
      var c = yourColor;
      $("#base").trigger('myOthello',[b,x,y,c,comColor]);
   });

   //タッチのイベントハンドラを登録
   $("#base").on('touchstart', function(e){
      var rect = e.target.getBoundingClientRect();
      var touch = e.originalEvent.touches[0];
     
      var x = ~~((touch.clientX - rect.left) / b.iwidth);
      var y = ~~((touch.clientY - rect.top) / b.iwidth);
      var c = yourColor;
      $("#base").trigger('myOthello',[b,x,y,c,comColor]);
   });
});

function setScore(b){
  //得点
  var black=b.score(yourColor);
  var white=b.score(comColor); 

  //終了判定
  var e = b.addTrialAll(0) + b.addTrialAll(1);
  
  if (e==0){
    //end
      var res;
      if (black > white){
        res = "win!";
      } else if(black==white) {
        res = "draw";
      } else {
        res = "lose";
      }
      $("#score").val(res + " Score: " + black + ":" + white);
  } else {
      $("#score").val( "Score: " + black + ":" + white);
      b.asistAll(myturn % 2);
  }
}

function setMyOthello(b,x,y,c,comColor){
      if (c!=(myturn % 2)){
        return;
      }
      $('#tdebug').val( "");
      var d = b.add(x,y,c);
      if(d==0){
        $('#tdebug').val( "You can't put it!");
        return;
      }
      b.draw();
      
      myturn ++;
      $("#base").trigger('Score',[b]);
      $('#base').trigger('enemyOthello',[setAOnce,b,comColor]);
}

function setAOnce(_base,_color){
  myturn++;
  var e = _base.addAll2One(_color % 2);
  if (e==0){
    $('#tdebug').val('pass:' + _color % 2);
    passCom =  true;
  } else {
    passCom =  false;
  }
  e = _base.addTrialAll((_color + 1) % 2);
  if (e==0){
    passYou = true;
  } else {
    passYou = false;
  }
  $("#base").trigger('Score',[_base]);
}

/////////////////////////////////////
//オセロのマス目
//base class
/////////////////////////////////////
var yellowbase = function(_baseName, _rpt, _iwidth){
  var temp=new yellowbase.prototype.create();
  // 引数を渡してinit関数を呼び出す
  return yellowbase.prototype.init.apply(temp, arguments);
}

yellowbase.prototype = {
  //property
  baseName:"",
  rpt:0,
  iwidth:0,
  canvas:null,
  context:null,
  othellos : null,
  //function
  create:function(){
    return this;
  },
  init:function( _baseName ,_rpt,_iwidth){
    this.baseName= _baseName;
    this.rpt=_rpt;
    this.iwidth=_iwidth;
    this.canvas=document.getElementById(this.baseName);
    this.context=this.canvas.getContext('2d');
    this.othellos = [];
    return this;
  },
  addAll2One : function(c){
    var ts = {};
    for(var x=0; x < this.rpt ; x++){
      for(var y=0; y < this.rpt ; y++){
        var e = this.addTrial(x,y,c);
        if (e > 0){
          ts[x * this.rpt + y]=e;
        }
      }
    }

    var ret = -1;
    var m = -1;
    for (var k in ts){
      if (m < ts[k]){
        ret = k;
        m = ts[k];
      }
    }
  
    if (ret==-1){
      return 0;
    }

    var xx = ~~(ret / this.rpt);
    var yy = ret % this.rpt;
    ret = this.add(xx,yy,c);
    this.draw();
    return ret;
  },
  asistAll : function (c){
    var ret = 0;
    for(var x=0; x < this.rpt ; x++){
      for(var y=0; y < this.rpt ; y++){
        var e = this.addTrial(x,y,c);
        if (e > 0){
          var a = othello(x,y,c,this);
          a.drawSmall();
        }
      }
    }
    return ret;
  },
  addTrialAll : function (c){
    var ret = 0;
    for(var x=0; x < this.rpt ; x++){
      for(var y=0; y < this.rpt ; y++){
        var e = this.addTrial(x,y,c);
        ret = ret + e;
      }
    }
    return ret;
  },
  score : function(_sbt){
    var ret = 0;
    for(var i=0; i < this.othellos.length ; i++){
      var cell =  this.othellos[i];
      if ( cell != null ){
        if ( cell.sbt == _sbt ){ ret++; }
      }    
    }
    return ret;
  },
  addForce:function(_x,_y,_c){
    if (this.getOthelloC(_x, _y)==-1){
      var ox= othello(_x,_y,_c,this);
      this.setOthello(ox);
      $("#" + this.baseName).on('fire', function(){ox.draw();});
    }
    return;
  },
  addTrial:function(_x,_y,_c){
    var ret = 0;
    if (this.getOthelloC(_x, _y)==-1){
      var ox= othello(_x,_y,_c,this);
      ret = this.doOthello(ox,true);
    }
    return ret;
  },
  add:function(_x,_y,_c){
    var ret = 0;
    if (this.getOthelloC(_x, _y)==-1){
      var ox= othello(_x,_y,_c,this);
      ret = this.doOthello(ox,false);
      if (ret!=0){
        this.setOthello(ox);
        $("#" + this.baseName).on('fire', function(){ox.draw();});
      }
    }
    return ret;
  },
  setOthello:function(_othello){
    this.othellos.push(_othello);
    return;
  },
  getOthello:function(_x,_y){
    for (var i=0;i<this.othellos.length;i++){
      var e = this.othellos[i];
      if (e.posX == _x && e.posY==_y){
        return e;
      }
    }
    return null;
  },
  getOthelloC:function(_x,_y){
    if (this.getOthello(_x,_y)==null){
      return -1;
    }
    return this.getOthello(_x,_y).sbt; 
  },
  doOthello:function(_othello,_trial){
    var ret = 0;
    ret += this.doOthelloDetail(_othello,0,_trial);
    ret += this.doOthelloDetail(_othello,1,_trial);
    ret += this.doOthelloDetail(_othello,2,_trial);
    ret += this.doOthelloDetail(_othello,3,_trial);
    ret += this.doOthelloDetail(_othello,4,_trial);
    ret += this.doOthelloDetail(_othello,5,_trial);
    ret += this.doOthelloDetail(_othello,6,_trial);
    ret += this.doOthelloDetail(_othello,7,_trial);
    
    return ret;
  },
  doOthelloBit:function(_x,_y,_dim,_num){
    switch(_num){
      case 0:
        _x[_dim]++;
        break;
      case 1:
        _x[_dim]--;
        break;
      case 2:
        _y[_dim]++;
        break;
      case 3:
        _y[_dim]--;
        break;
      case 4:
        _x[_dim]++;
        _y[_dim]++;
        break;
      case 5:
        _x[_dim]--;
        _y[_dim]--;
        break;
      case 6:
        _x[_dim]++;
        _y[_dim]--;     
        break;
      case 7:
        _x[_dim]--;
        _y[_dim]++;     
        break;
    }
    return;
  },
  doOthelloDetail:function(_othello,_num,_trial){
    var ret = 0;
    
    //
    var x = [];
    var y = [];

    x[0] = _othello.posX;
    y[0] = _othello.posY;

    //隣接しているセルが自分と同じもしくはundefの場合は何もしない
    //隣接
    
    this.doOthelloBit(x,y,0,_num);
    if (this.getOthelloC(x[0], y[0])==-1){
      return ret;
    }

    if ( this.getOthelloC(x[0], y[0])==_othello.sbt){
      return ret;
    }

    //隣接から検索
    var cx = null;
    var cy = null;
    x[1] = x[0];
    y[1] = y[0];
    while(0 <= x[1] && x[1] < this.rpt && 0 <= y[1] && y[1] < this.rpt){
      if (this.getOthelloC(x[1],y[1])==-1){
        break;
      }
      if (this.getOthelloC(x[1],y[1])==_othello.sbt){
        cx = x[1];
        cy = y[1];
        break;
      }
      //
      this.doOthelloBit(x,y,1,_num);
    }

    if (cx!=null || cy!=null){
      x[1] = _othello.posX;
      y[1] = _othello.posY;
      this.doOthelloBit(x,y,1,_num);
      x[2] =  x[1];
      y[2] =  y[1];
      while( (cx - x[2])*(x[2] - x[1]) >=0 && (cy - y[2])*(y[2] - y[1]) >=0 ){
        ret++;
        if (_trial==false){
          //実際に裏返しする
          this.getOthello(x[2],y[2]).sbt =_othello.sbt;
        }
        this.doOthelloBit(x,y,2,_num);
      }
    }
    
    return ret;
  },
  // オセロの描画を行う
  draw:function(){
    for (var x=0; x < this.rpt ; x++)
    {
       for (var y=0; y < this.rpt ; y++)
       {
            this.context.fillStyle = "green";
            this.context.fillRect(x * this.iwidth, y * this.iwidth ,this.iwidth,this.iwidth); 
            this.context.strokeStyle = "rgb(0, 0, 0)";
            this.context.strokeRect(x * this.iwidth, y * this.iwidth ,this.iwidth,this.iwidth); 
       }
    }
    $("#" + this.baseName).trigger('fire');
  }
}

yellowbase.prototype.create.prototype=yellowbase.prototype;

/////////////////////////////////////
//オセロ一個
/////////////////////////////////////
var othello = function(_x, _y, _sbt,_base){
  var temp = new othello.prototype.create();
  return othello.prototype.init.apply(temp, arguments);
}

othello.prototype = {
  //property
  posX: -1,
  posY: -1,
  sbt: -1,
  parent : null,
  create : function(){
   return this;
  },
  init : function(_x, _y, _sbt,_base){
    this.posX  = _x;
    this.posY  = _y;
    this.sbt = _sbt;
    this.parent = _base;
    return this;
  },
  clear : function(){
    this.posX = -1;
    this.posY = -1;
    this.sbt = -1;
  },
  draw : function(){
     //drawing othello
     var xx = this.parent.iwidth / 2;
     
     this.parent.context.beginPath();
     var fillColor= (this.sbt==0 ? 'rgb(0,0,0)' : 'rgb(255,255,255)');
     this.parent.context.strokeStyle = fillColor;
     this.parent.context.fillStyle = fillColor;
     this.parent.context.arc(this.posX * this.parent.iwidth + xx, this.posY * this.parent.iwidth + xx, xx - 2, 0 , Math.PI * 2, false);
     this.parent.context.fill();
  },
  drawSmall : function(){
     var xx = this.parent.iwidth / 2;     
     this.parent.context.beginPath();
     var strokeColor= (this.sbt==0 ? 'rgb(0,0,0)' : 'rgb(255,255,255)');
     this.parent.context.strokeStyle = strokeColor;
     this.parent.context.arc(this.posX * this.parent.iwidth + xx, this.posY * this.parent.iwidth + xx, xx / 2 , 0 , Math.PI * 2, false);
     this.parent.context.stroke();
  }
}

othello.prototype.create.prototype=othello.prototype;

</script>

<input type="radio" name="c" id="c" value="0" checked>黒</input>
<input type="radio" name="c" id="c" value="1">白</input>
<input type='text' id='score' readonly='readonly' />
<button id="start">start</button>
<br />
<canvas id="base"  style="background-color:yellow;" width="402" height="401"></canvas>
<br />
<input type='text' id='tdebug' readonly='readonly' />
<br />
<!-- textarea id='area' cols='8' rows='8' style="width:300px;height:300px;"></textarea -->