charles-passille-smartnets/html

## html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>
  <script>
    $(function() {

      var board = [];
      var cols = 3;
      var rows = 3;
      var currentPlayer = "red";
      var playerPlayed = false;
      var size = 50;


      function Cell(posX,posY,id){
        this.posX = posX;
        this.posY = posY;
        this.id   = id;
        this.blue = false;
        this.red  = false;

        this.show = function(){
          //画面の真ん中
          posX = ($('body').width()  / 2) + (posX * size);
          posY = ($('body').height() / 2) + (posY * size);
          posX = posX - (cols * size) / 2;
          posY = posY - (rows * size) / 2;
          //div作って
          var cellDiv = '<div class="cell" data-grid="'+id+'" style="bottom:'+posY+'px; left:'+posX+'px; width:'+size+'px; height:'+size+'px; font-size:'+(size/2)+'px; line-height:'+size+'px;"></div>';
          $('body').append(cellDiv);
        }

        this.player = function(x){
          if (this.red){ return x = "red"}
          else if (this.blue){ return x = "blue"}
          else { return x = null }
        }

      }

      var grid = 0;
      for (var x = 0; x < cols; x++){
        for (var y = 0; y < rows; y++){
          grid++;
          var cell = new Cell(x,y,grid);
          board.push(cell);
        }
      }


      function MakeBoard(){
        $.each(board, function (i, obj) {
          obj.show();
        });
      }

      function SwitchPlayer(){
        playerPlayed = !playerPlayed;
        if (playerPlayed){
          currentPlayer = "blue";
        }
        else {
          currentPlayer ="red";
        }
      }

      function Win(player){
        var winDiv = "<div class='winner'></div>";
        $('body').prepend(winDiv);
        $('.winner').text(player + " Win!");
        $('.winner').css("font-size", (size * 2) + "px");
      }

      function CheckWin(){

        for (var i = 0; i < 9; i++){
          if(board[i].player() != null){
            console.log(board[i].player());
          }
        }


        if (     board[0].player() == currentPlayer
              && board[1].player() == currentPlayer
              && board[2].player() == currentPlayer){
              Win(currentPlayer);
        }
        else if (board[3].player() == currentPlayer
              && board[4].player() == currentPlayer
              && board[5].player() == currentPlayer){
              Win(currentPlayer);
        }
        else if (board[6].player() == currentPlayer
              && board[7].player() == currentPlayer
              && board[8].player() == currentPlayer){
              Win(currentPlayer);
        }

        else if (board[0].player() == currentPlayer
              && board[3].player() == currentPlayer
              && board[6].player() == currentPlayer){
          Win(currentPlayer);
        }
        else if (board[0].player() == currentPlayer
              && board[4].player() == currentPlayer
              && board[8].player() == currentPlayer){
              Win(currentPlayer);
        }

        else if (board[1].player() == currentPlayer
              && board[4].player() == currentPlayer
              && board[7].player() == currentPlayer){
              Win(currentPlayer);
        }

        else if (board[2].player() == currentPlayer
              && board[4].player() == currentPlayer
              && board[6].player() == currentPlayer){
              Win(currentPlayer);
        }
        else if (board[2].player() == currentPlayer
              && board[5].player() == currentPlayer
              && board[7].player() == currentPlayer){
              Win(currentPlayer);
        }
      }


      MakeBoard();

      $('.cell').on('click', function(){

        if (!$(this).hasClass("red" || "blue")){

          var id = $(this).attr("data-grid");

          $(this).addClass(currentPlayer);
          if(currentPlayer == "red"){
            board[id-1].red = true;
            $(this).text("O");
          }
          else{
            board[id-1].blue = true;
            $(this).text("X");
          }

          console.log(id);
          console.log(board[id-1]);
          CheckWin();
          SwitchPlayer();
        }


      });


    });

  </script>

  <style>
    html,body {
      width:100%;
      height:100%;
      padding:0;
      margin:0;
    }
    .cell {
      position:absolute;
      background:#ddd;
      border:1px;
      border:1px solid #fff;
      text-align: center;
      color: white;
      font-weight:bold;
    }
    .red {
      background:#f44336;
    }
    .blue {
      background:#2196f3;
    }
    .winner {
      display: block;
      z-index: 100;
      position: fixed;
      top: 0;
      bottom :0;
      left :0;
      right :0;
      width: 100%;
      height: 100%;
      color: #FFF;
      text-align: center;
      margin: auto;
      background: rgba(0,0,0,.8);
    }
  </style>
  <body>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	</head>
	<script>
	$(function() {

	var board = [];
	var cols = 3;
	var rows = 3;
	var currentPlayer = "red";
	var playerPlayed = false;
	var size = 50;


	function Cell(posX,posY,id){
	this.posX = posX;
	this.posY = posY;
	this.id = id;
	this.blue = false;
	this.red = false;

	this.show = function(){
	//画面の真ん中
	posX = ($('body').width() / 2) + (posX * size);
	posY = ($('body').height() / 2) + (posY * size);
	posX = posX - (cols * size) / 2;
	posY = posY - (rows * size) / 2;
	//div作って
	var cellDiv = '<div class="cell" data-grid="'+id+'" style="bottom:'+posY+'px; left:'+posX+'px; width:'+size+'px; height:'+size+'px; font-size:'+(size/2)+'px; line-height:'+size+'px;"></div>';
	$('body').append(cellDiv);
	}

	this.player = function(x){
	if (this.red){ return x = "red"}
	else if (this.blue){ return x = "blue"}
	else { return x = null }
	}

	}

	var grid = 0;
	for (var x = 0; x < cols; x++){
	for (var y = 0; y < rows; y++){
	grid++;
	var cell = new Cell(x,y,grid);
	board.push(cell);
	}
	}


	function MakeBoard(){
	$.each(board, function (i, obj) {
	obj.show();
	});
	}

	function SwitchPlayer(){
	playerPlayed = !playerPlayed;
	if (playerPlayed){
	currentPlayer = "blue";
	}
	else {
	currentPlayer ="red";
	}
	}

	function Win(player){
	var winDiv = "<div class='winner'></div>";
	$('body').prepend(winDiv);
	$('.winner').text(player + " Win!");
	$('.winner').css("font-size", (size * 2) + "px");
	}

	function CheckWin(){

	for (var i = 0; i < 9; i++){
	if(board[i].player() != null){
	console.log(board[i].player());
	}
	}


	if ( board[0].player() == currentPlayer
	&& board[1].player() == currentPlayer
	&& board[2].player() == currentPlayer){
	Win(currentPlayer);
	}
	else if (board[3].player() == currentPlayer
	&& board[4].player() == currentPlayer
	&& board[5].player() == currentPlayer){
	Win(currentPlayer);
	}
	else if (board[6].player() == currentPlayer
	&& board[7].player() == currentPlayer
	&& board[8].player() == currentPlayer){
	Win(currentPlayer);
	}

	else if (board[0].player() == currentPlayer
	&& board[3].player() == currentPlayer
	&& board[6].player() == currentPlayer){
	Win(currentPlayer);
	}
	else if (board[0].player() == currentPlayer
	&& board[4].player() == currentPlayer
	&& board[8].player() == currentPlayer){
	Win(currentPlayer);
	}

	else if (board[1].player() == currentPlayer
	&& board[4].player() == currentPlayer
	&& board[7].player() == currentPlayer){
	Win(currentPlayer);
	}

	else if (board[2].player() == currentPlayer
	&& board[4].player() == currentPlayer
	&& board[6].player() == currentPlayer){
	Win(currentPlayer);
	}
	else if (board[2].player() == currentPlayer
	&& board[5].player() == currentPlayer
	&& board[7].player() == currentPlayer){
	Win(currentPlayer);
	}
	}


	MakeBoard();

	$('.cell').on('click', function(){

	if (!$(this).hasClass("red" \|\| "blue")){

	var id = $(this).attr("data-grid");

	$(this).addClass(currentPlayer);
	if(currentPlayer == "red"){
	board[id-1].red = true;
	$(this).text("O");
	}
	else{
	board[id-1].blue = true;
	$(this).text("X");
	}

	console.log(id);
	console.log(board[id-1]);
	CheckWin();
	SwitchPlayer();
	}


	});





	});

	</script>

	<style>
	html,body {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	}
	.cell {
	position:absolute;
	background:#ddd;
	border:1px;
	border:1px solid #fff;
	text-align: center;
	color: white;
	font-weight:bold;
	}
	.red {
	background:#f44336;
	}
	.blue {
	background:#2196f3;
	}
	.winner {
	display: block;
	z-index: 100;
	position: fixed;
	top: 0;
	bottom :0;
	left :0;
	right :0;
	width: 100%;
	height: 100%;
	color: #FFF;
	text-align: center;
	margin: auto;
	background: rgba(0,0,0,.8);
	}
	</style>
	<body>

	</body>
	</html>