Created
October 20, 2010 13:03
-
-
Save shogo-hta/636371 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
mstafajomaa3-web
commented
Jul 30, 2026
<title>EA-FC Ultimate Champions</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
user-select: none;
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment