os0x/game.html

## game.html

<!DOCTYPE html>
<html>
<head>
<title>game</title>
<style>
#C{
position:relative;
}
.cell{
position:absolute;
background:#fff;
border:1px solid #999;
}
#O{
background:black;
color:white;
text-align:right;
position:fixed;
top:0px;
right:0px;
font-size:xx-large;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
</head>
<body>
<div id="C"></div>
<div id="O">0</div>
<script>
/*
 * リアルタイムWebハッカソン(http://atnd.org/events/8626)で書いたコードのクライアント側のコードです
 */
var c = document.getElementById('C');
var o = document.getElementById('O');
// マス目の数
var count = 5;
// マスの大きさ
var size = 50;
// 自機数
var own_limit = 5;
// ポイント
var mypoint = 0;
var cells = [];
var my_cells = [];
// 自機色
var color = 'blue';
// デフォルトカラー
var def_color = 'white';

var to_json = JSON.stringify;

// Socketに接続
var socket = new io.Socket('172.16.128.121',{port:3000});
socket.connect();
socket.on('message', function(data) {
  //console.log(data);
  data = JSON.parse(data);
  var x = data.x;
  var y = data.y;
  var id = data.id;
  if (data.color){
    // 相手が埋めたとき、1ポイント
    cells[y][x].flip(data.color, 1);
  } else {
    // 相手が空いたとき
    cells[y][x].flip(def_color, 0);
  }
  // ラインが揃ってるかチェック
  check_line();
});

function Cell(x, y){
  var that = this;
  this.x = x;
  this.y = y;
  var node = this.node = document.createElement('div');
  node.className = 'cell';
  node.addEventListener('click',function(){
    // すでにチェック済みのセルなら終了
    for(var i = 0, len = my_cells.length;i < len;i++){
      if (my_cells[i] === that) return;
    }
    // セルを反転、自機は2ポイント
    that.flip(color, 2);
    // 自機を配信
    socket.send(to_json({x:x,y:y,color:color}));
    my_cells.push(that);
    if(own_limit < my_cells.length){
      // 自機の上限を超えていたら古いものを削除
      var d = my_cells.shift();
      d.flip(def_color);
      socket.send(to_json({x:d.x,y:d.y}));
    }
    check_line();
  },false);
  node.style.left = x * size + 'px';
  node.style.top = y * size + 'px';
  node.style.width = node.style.height = size+'px';
  c.appendChild(node);
}
Cell.prototype.flip = function(color, flipPoint){
  this.node.style.backgroundColor = color;
  this.fliped = flipPoint;
};
Cell.prototype.toString = function(){
  return this.fliped || '';
};
Cell.prototype.valueOf = function(){
  return this.fliped || 0;
};
function check_line(){
  var ds;
  for (var i = 0, ok;i < count;i++){
    // toStringを定義しているので、joinしたときにflipedの値が連結される
    var v = cells[i].join('');
    var c = vcells[i].join('');
    if (c.length === count || v.length === count){
      if (c.length === count){
        ok = c;
        ds = vcells[i];
      } else {
        ok = v;
        ds = cells[i];
      }
      if(ok){
        // 一列揃った場合はセルをデフォルトに戻し、自機配列からそのセルを削除する
        for(var k = 0;k < ds.length;k++){
          var d = ds[k];
          d.flip(def_color, 0);
          var m = my_cells.length;
          while(m--){
            var co = my_cells[m];
            if (co === d){
              my_cells.splice(m, 1);
            }
          }
        }
      }
      break;
    }
  }
  if (ok){
    // okにはポイントが入っているので、分割して各値を加算する
    for (var i= 0, a=ok.split(''),l=a.length;i < l;i++){
      mypoint += +a[i];
    }
    o.innerHTML = mypoint;
  }
}
var vcells = [];
(function(){
for (var y = 0;y < count;y++){
  var col = [];
  for(var x = 0;x < count;x++){
    col.push(new Cell(x, y));
  }
  cells.push(col);
}
for (var x = 0;x < count;x++){
  var col = [];
  for(var y = 0;y < count;y++){
    col.push(cells[y][x]);
  }
  vcells.push(col);
}
})();
</script>
</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<title>game</title>
	<style>
	#C{
	position:relative;
	}
	.cell{
	position:absolute;
	background:#fff;
	border:1px solid #999;
	}
	#O{
	background:black;
	color:white;
	text-align:right;
	position:fixed;
	top:0px;
	right:0px;
	font-size:xx-large;
	}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script src="http://cdn.socket.io/stable/socket.io.js"></script>
	</head>
	<body>
	<div id="C"></div>
	<div id="O">0</div>
	<script>
	/*
	* リアルタイムWebハッカソン(http://atnd.org/events/8626)で書いたコードのクライアント側のコードです
	*/
	var c = document.getElementById('C');
	var o = document.getElementById('O');
	// マス目の数
	var count = 5;
	// マスの大きさ
	var size = 50;
	// 自機数
	var own_limit = 5;
	// ポイント
	var mypoint = 0;
	var cells = [];
	var my_cells = [];
	// 自機色
	var color = 'blue';
	// デフォルトカラー
	var def_color = 'white';

	var to_json = JSON.stringify;

	// Socketに接続
	var socket = new io.Socket('172.16.128.121',{port:3000});
	socket.connect();
	socket.on('message', function(data) {
	//console.log(data);
	data = JSON.parse(data);
	var x = data.x;
	var y = data.y;
	var id = data.id;
	if (data.color){
	// 相手が埋めたとき、1ポイント
	cells[y][x].flip(data.color, 1);
	} else {
	// 相手が空いたとき
	cells[y][x].flip(def_color, 0);
	}
	// ラインが揃ってるかチェック
	check_line();
	});

	function Cell(x, y){
	var that = this;
	this.x = x;
	this.y = y;
	var node = this.node = document.createElement('div');
	node.className = 'cell';
	node.addEventListener('click',function(){
	// すでにチェック済みのセルなら終了
	for(var i = 0, len = my_cells.length;i < len;i++){
	if (my_cells[i] === that) return;
	}
	// セルを反転、自機は2ポイント
	that.flip(color, 2);
	// 自機を配信
	socket.send(to_json({x:x,y:y,color:color}));
	my_cells.push(that);
	if(own_limit < my_cells.length){
	// 自機の上限を超えていたら古いものを削除
	var d = my_cells.shift();
	d.flip(def_color);
	socket.send(to_json({x:d.x,y:d.y}));
	}
	check_line();
	},false);
	node.style.left = x * size + 'px';
	node.style.top = y * size + 'px';
	node.style.width = node.style.height = size+'px';
	c.appendChild(node);
	}
	Cell.prototype.flip = function(color, flipPoint){
	this.node.style.backgroundColor = color;
	this.fliped = flipPoint;
	};
	Cell.prototype.toString = function(){
	return this.fliped \|\| '';
	};
	Cell.prototype.valueOf = function(){
	return this.fliped \|\| 0;
	};
	function check_line(){
	var ds;
	for (var i = 0, ok;i < count;i++){
	// toStringを定義しているので、joinしたときにflipedの値が連結される
	var v = cells[i].join('');
	var c = vcells[i].join('');
	if (c.length === count \|\| v.length === count){
	if (c.length === count){
	ok = c;
	ds = vcells[i];
	} else {
	ok = v;
	ds = cells[i];
	}
	if(ok){
	// 一列揃った場合はセルをデフォルトに戻し、自機配列からそのセルを削除する
	for(var k = 0;k < ds.length;k++){
	var d = ds[k];
	d.flip(def_color, 0);
	var m = my_cells.length;
	while(m--){
	var co = my_cells[m];
	if (co === d){
	my_cells.splice(m, 1);
	}
	}
	}
	}
	break;
	}
	}
	if (ok){
	// okにはポイントが入っているので、分割して各値を加算する
	for (var i= 0, a=ok.split(''),l=a.length;i < l;i++){
	mypoint += +a[i];
	}
	o.innerHTML = mypoint;
	}
	}
	var vcells = [];
	(function(){
	for (var y = 0;y < count;y++){
	var col = [];
	for(var x = 0;x < count;x++){
	col.push(new Cell(x, y));
	}
	cells.push(col);
	}
	for (var x = 0;x < count;x++){
	var col = [];
	for(var y = 0;y < count;y++){
	col.push(cells[y][x]);
	}
	vcells.push(col);
	}
	})();
	</script>
	</body>
	</html>