หลังจากงมอยู่พักใหญ่ก็เข้าใจระบบ event กับ object ของ asciisvg แล้ว เลยลองเขียนเกม OX เล่น ๆ ดูทดสอบหน่อย ว่าเข้าใจจริง
agraph
width=400; height=400; xmin=-1; xmax=4; ymin=-1; ymax=4;
initPicture(-1,4);
svgpicture.setAttribute("id","OXgame");
stroke="green";
strokewidth = "5"
line((1,0),(1,3));
line((2,0),(2,3));
line((0,1),(3,1));
line((0,2),(3,2));
fontsize = "30";
endTurn = 0;
fontweight = "bold";
text((1.5,-0.5),"X Turn","","oxStatus");
xturn=1;
bxturn=1;
oxTable=[[0,0,0],[0,0,0],[0,0,0]];
stroke = "orange";
rect((1,1),(2,2),"oxHiLi");
printO = function(ix,iy){
stroke = "red";
strokewidth = "5";
circle((ix+0.5,iy+0.5),0.3,"Oox1"+ix+iy);
}
printX = function(ix,iy){
stroke = "blue";
strokewidth = "5";
line((ix+0.1,iy+0.1),(ix+0.9,iy+0.9),"Xox1"+ix+iy);
line((ix+0.1,iy+0.9),(ix+0.9,iy+0.1),"Xox2"+ix+iy);
}
checkOXEnd = function(){
for(endix=0;endix<=2;endix++)
for(endiy=0;endiy<=2;endiy++)
if(oxTable[endix][endiy]==0)
return 0;
return 1;
}
checkOXWin = function(whoCheck,WhoColor){
iTable=0;
for(i=0;i<=2;i++)
{
if ((oxTable[i][0]==whoCheck)&&(oxTable[i][1]==whoCheck)&&(oxTable[i][2]==whoCheck)){
stroke=WhoColor;
strokewidth = "5";
line((i+0.5,0),(i+0.5,3),"winOXLine");
return 1;
}
if ((oxTable[0][i]==whoCheck)&&(oxTable[1][i]==whoCheck)&&(oxTable[2][i]==whoCheck)){
stroke=WhoColor;
strokewidth = "5";
line((0,i+0.5),(3,i+0.5),"winOXLine");
return 1;
}
}
if ((oxTable[0][0]==whoCheck)&&(oxTable[1][1]==whoCheck)&&(oxTable[2][2]==whoCheck)){
stroke=WhoColor;
strokewidth = "5";
line((0,0),(3,3),"winOXLine");
return 1;
}
if ((oxTable[2][0]==whoCheck)&&(oxTable[1][1]==whoCheck)&&(oxTable[0][2]==whoCheck)){
stroke=WhoColor;
strokewidth = "5";
line((0,3),(3,0),"winOXLine");
return 1;
}
}
svgpicture.setAttribute("onclick","dynamic.updateOX(evt)");
dynamic.updateOX = function(evt) {
switchTo("OXgame");
clickX = getX(evt);
clickY = getY(evt);
indexX = Math.floor(clickX);
indexY = Math.floor(clickY);
if (endTurn==0){
if (indexX>=0 && indexX<=2 && indexY>=0 && indexY<=2){
if(oxTable[indexX][indexY]==0){
if(xturn==1)
{
xturn=0;
oxTable[indexX][indexY]=2;
printX(indexX,indexY);
fontsize = "30";
fontweight = "bold";
text((1.5,-0.5),"O Turn","","oxStatus");
if(checkOXWin(2,"blue")==1)
{
fontsize = "30";
fontweight = "bold";
text((1.5,3.5),"X win","","oxTitle");
endTurn=1;
}
else if(checkOXEnd()==1)
{
fontsize = "30";
fontweight = "bold";
text((1.5,3.5),"Draw","","oxTitle");
endTurn=1;
}
}
else
{
xturn=1;
oxTable[indexX][indexY]=1;
printO(indexX,indexY);
fontsize = "30";
fontweight = "bold";
text((1.5,-0.5),"X Turn","","oxStatus");
if(checkOXWin(1,"red")==1)
{
fontsize = "30";
fontweight = "bold";
text((1.5,3.5),"O win","","oxTitle");
endTurn=1;
}
else if(checkOXEnd()==1)
{
fontsize = "30";
fontweight = "bold";
text((1.5,3.5),"Draw","","oxTitle");
endTurn=1;
}
}
}
}
}
else
{
oxTable=[[0,0,0],[0,0,0],[0,0,0]];
endTurn=0;
stroke=0;
if(bxturn==1){
xturn=0;
bxturn=0;
fontsize = "30";
fontweight = "bold";
text((1.5,-0.5),"O Turn","","oxStatus");
}
else
{
xturn=1;
bxturn=1;
fontsize = "30";
fontweight = "bold";
text((1.5,-0.5),"X Turn","","oxStatus");
}
line((0,3),(3,0),"winOXLine");
for(ix=0;ix<=2;ix++){
for(iy=0;iy<=2;iy++){
stroke = "white";
line((ix+0.1,iy+0.1),(ix+0.9,iy+0.9),"Xox1"+ix+iy);
line((ix+0.1,iy+0.9),(ix+0.9,iy+0.1),"Xox2"+ix+iy);
circle((ix+0.5,iy+0.5),0.3,"Oox1"+ix+iy);
}
}
}
}
svgpicture.setAttribute("onmousemove","dynamic.moveOX(evt)");
dynamic.moveOX = function(evt){
switchTo("OXgame");
clickX = getX(evt);
clickY = getY(evt);
indexX = Math.floor(clickX);
indexY = Math.floor(clickY);
stroke = "orange";
strokewidth = "3";
rect((indexX,indexY),(indexX+1,indexY+1),"oxHiLi");
}
endagraph
