Skip to content

Instantly share code, notes, and snippets.

@os0x os0x/game.html
Created Oct 20, 2010

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.