Demo:
http://hvonline.net/caro.html<head>
<title>HVONLINE.NET Game Caro</title>
</head>
<style>
.cell {
width:30px;
height:30px;
text-align:center;
}
#msg {
color:red;
font-size:24pt;
}
#state {
width:500px;
height:100px;
color:green;
overflow:auto;
border:black solid 1px;
}
</style>
<input type=radio name=style value=1 onclick="changeStyle(this.value);" checked>Style 1: ♀ ♂
<input type=radio name=style value=2 onclick="changeStyle(this.value);">Style 2: x o
<input type=radio name=style value=3 onclick="changeStyle(this.value);">Style 3: <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif"> <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif">
<script>
function initArray() {
var i, j;
var c = new Array();
for (i = 0; i < SIZE[0]; i++) {
c[i] = new Array();
for (j = 0; j < SIZE[1]; j++)
c[i][j] = 0;
}
return c;
}
function loadCell() {
var c = new Array();
for (i = 0; i < SIZE[0]; i++) {
c[i] = new Array();
}
var i, cells = document.getElementsByTagName("td");
for (i = 0; i < cells.length; i++) {
var cell = cells[i];
var _pos, _r, _c;
var r = getAttributes(cell);
_pos = new String(r["cell"]);
_r = eval(_pos.split(",")[0]);
_c = eval(_pos.split(",")[1]);
c[_r][_c] = cell;
}
return c;
}
var SIZE = [15, 20]; // so o chieu ngang, chieu doc
var CELL = initArray(); // mang luu diem
var TABLE;
var X = true; // luot danh
var END = false;
var HCOLOR = 'pink';
var VIEW_LOG = false;
var signal = new Array();
//signal[X] = "<img src='file:///D:/Program%20Files/Yahoo!/Messenger/Media/Smileys/1.gif'>";
//signal[!X] = "<img src='file:///D:/Program%20Files/Yahoo!/Messenger/Media/Smileys/4.gif'>";
signal[X] = "♀";
signal[!X] = "♂";
var POINT = new Array();
POINT[X] = 1;
POINT[!X] = 2;
var PERSON = new Array();
PERSON[X] = "X";
PERSON[!X] = "Y";
function changeStyle(v) {
var X = true;
v = eval(v);
switch (v) {
case 1:
signal[X] = "♀";
signal[!X] = "♂";
break;
case 2:
signal[X] = "x";
signal[!X] = "o";
break;
case 3:
signal[X] = '<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif">';
signal[!X] = '<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif">';
break;
default:
break;
}
repaint();
}
function repaint() {
var i, j;
var c, r, p;
for (i = 0; i < SIZE[0]; i++) {
for (j = 0; j < SIZE[1]; j++) {
c = TABLE[i][j];
r = getAttributes(c);
p = eval(r["point"]);
if (p == POINT[X]) {
c.innerHTML = signal[X];
} else if (p == POINT[!X]) {
c.innerHTML = signal[!X];
}
}
}
}
// ve ban co
function drawBoard() {
var i, j;
sBoard = "<table border='1px'>";
for (i = 0; i < SIZE[0]; i++) {
sBoard += "<tr>";
for (j = 0; j < SIZE[1]; j++) {
sBoard += "<td class=cell cell='" + i + "," + j + "' point=0> </td>";
}
sBoard += "</tr>";
}
sBoard += "</table>";
document.write(sBoard);
TABLE = loadCell();
}
// gan su kien click va xu ly
function addCellEvent() {
var cells = document.getElementsByTagName("td");
var i;
for (i = 0; i < cells.length; i++) {
cells[i].onclick = function() {
if (END) {
warn("GAME OVER");
return;
}
var r;
r = getAttributes(this);
if (r["point"] != 0) { // o da duoc danh dau
warn("Marked");
return;
}
X = !X;
setPoint(this, POINT[X]);
this.innerHTML = signal[X];
warn(PERSON[X] + " went, " + PERSON[!X] + " is thinking :-w");
var _pos, _r, _c;
_pos = new String(r["cell"]);
_r = eval(_pos.split(",")[0]);
_c = eval(_pos.split(",")[1]);
CELL[_r][_c] = POINT[X];
log(_r + "," + _c + " = " + CELL[_r][_c]);
var w = checkWin(_r, _c);
if (w) warn(PERSON[X] + " won. <a href='javascript:location.href=location.href'>Replay</a>");
}
}
}
// kiem tra sau khi danh o r,c da co ai thang chua
function checkWin(r, c) {
var i, j;
var t, v = CELL[r][c], nv, pv;
var rhead, rtail;
var chead, ctail;
// cung hang
t = 1;
chead = c;
rhead = r;
rtail = r;
ctail = c;
for (j = c + 1; j < SIZE[1]; j++) {
nv = CELL[r][j];
if (nv == v) {
t += 1;
ctail = j;
}
else
break;
}
for (j = c - 1; j >= 0; j--) {
pv = CELL[r][j];
if (pv == v) {
t += 1;
chead = j;
}
else
break;
}
if (t >= 5) {
// highlight
for (j = chead; j <= ctail; j++) {
TABLE[r][j].style.backgroundColor = HCOLOR;
}
END = true;
return true;
}
// cung cot
t = 1;
chead = c;
rhead = r;
rtail = r;
ctail = c;
for (i = r + 1; i < SIZE[0]; i++) {
nv = CELL[i][c];
if (nv == v) {
t += 1;
rtail = i;
}
else
break;
}
for (i = r - 1; i >= 0; i--) {
pv = CELL[i][c];
if (pv == v) {
t += 1;
rhead = i;
}
else
break;
}
if (t >= 5) {
// highlight
for (i = rhead; i <= rtail; i++) {
TABLE[i][c].style.backgroundColor = HCOLOR;
}
END = true;
return true;
}
// cheo /
chead = c;
ctail = c;
rhead = r;
rtail = r;
t = 1;
i = r - 1;
for (j = c + 1; j < SIZE[1]; j++) {
if (i < 0) break;
pv = CELL[i--][j];
if (pv == v) {
t += 1;
ctail = j;
rtail = i+1;
}
else
break;
}
i = r + 1;
for (j = c - 1; j >= 0; j--) {
if (i >= SIZE[0]) break;
pv = CELL[i++][j];
if (pv == v) {
t += 1;
chead = j;
rhead = i-1;
}
else
break;
}
if (t >= 5) {
END = true;
for (j = chead; j <= ctail; j++) {
TABLE[rhead--][j].style.backgroundColor = HCOLOR;
}
return true;
}
// cheo \
chead = c;
ctail = c;
rhead = r;
rtail = r;
t = 1;
i = r + 1;
for (j = c + 1; j < SIZE[1]; j++) {
if (i >= SIZE[0]) break;
pv = CELL[i++][j];
if (pv == v) {
t += 1;
ctail = j;
rtail = i-1;
}
else
break;
}
i = r - 1;
for (j = c - 1; j >= 0; j--) {
if (i < 0) break;
pv = CELL[i--][j];
if (pv == v) {
t += 1;
chead = j;
rhead = i+1;
}
else
break;
}
if (t >= 5) {
END = true;
for (j = chead; j <= ctail; j++) {
TABLE[rhead++][j].style.backgroundColor = HCOLOR;
}
return true;
}
}
// thay doi diem cho o (khi duoc danh dau)
function setPoint(cell, value) {
cell.attributes.getNamedItem("point").value = value;
}
// lay toan bo cac attribute cua o, tra ve mang dang dictionary
function getAttributes(cell) {
var r = new Array();
var as = cell.attributes;
for (i = 0; i < as.length; i++) {
r[as[i].name] = as[i].value;
}
return r;
}
// luu cac buoc danh dau
function log(s) {
var c;
c = document.getElementById("state").innerHTML;
c = (c == "") ? (c) : (c + "<br>");
document.getElementById("state").innerHTML = c + s;
}
// thong bao tuong ung sau su kien click
function warn(s) {
document.getElementById("msg").innerHTML = s;
}
// call above written function, enjoy now
drawBoard();
addCellEvent();
</script>
<div id="msg">Ready!</div>
<div id="state"></div>
<script>
if (!VIEW_LOG) {
document.getElementById("state").style.display = 'none';
}
</script>
Tiêu đề: code game cảo đấy!! -- làm hết hơi 
Tue Dec 21, 2010 6:30 pm
