オセロを作ってみようかな
2008.7.2取りあえず今日からオセロゲームを作り始めました。
canvasの使用可能性のチェック
オセロのコマを表示
オセロの枠を表示
オセロの初期画面を表示
2008.7.3onmouseの指定が分からない・・・
分かったことは
(function() {})()
と書くと式になる。
「CDATAセクションは、<![CDATA[という文字列で始まり、]]>という文字列で終わる。CDATAセクションの内部には、XMLで利用可能な文字をすべて記述することができる。」ということ。
2008.7.4イベントハンドラを使用できました。
オセロのコマを追加（クリックするとコマが追加されます。）
2008.7.15枠内にコマを表示するように変更。
スタイルシートで背景色を緑し、クリックされた範囲で枠を判断する機能を追加
枠内にコマを表示するように変更
2008.7.16すでにコマを配置した場所には、コマをおけない機能を追加。
コマの配置テーブルを作成し、配置状況を管理するようにした。
オセロのコマを同じ場所におけないように変更
2008.7.17八方向にコマがない場合、コマをおけない機能を追加。
八方向をチェックするロジックを追加
オセロのコマを八方向にコマがないとおけないように変更
2008.7.18左方向のcheck機能を追加。
左方向に変更できるコマがないかをチェックする機能を追加
左方向に変更できるコマがないかをチェックする機能追加バージョン
2008.7.19上下左右方向のcheck機能を追加。
上下左右にコマを置くとオセロのようにコマが反転する機能を付けたつもりのバージョン
2008.7.28上下左右方向のcheck機能を追加（バグ修正版）。
上下左右にコマを置くとオセロのようにコマが反転する機能を付けたつもりのバグ修正版バージョン
2008.7.30斜め後ろからのcheck機能を追加。
斜め後ろにコマを置くとオセロのようにコマが反転する機能を付けたつもりのバージョン
2008.7.31八方向のcheck機能を追加。
八方向にコマを置くとオセロのようにコマが反転する機能を付けたつもりのバージョン
2008.10.24 FireFoxに対応。
ＦｉｒｅＦｏｘでも動作するように修正しました。
2009.1.23 イベント処理を改良しました(FireFoxに対応)。
イベント処理を改良しました(FireFoxに対応)。
ソースコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>オセロの初期画面を表示（八方向をチェック）</title>
<style type="text/css">
canvas{
background:green; position:absolute; top:80px; left:80px;
}
</style>
<!--[if IE]>
<script type="text/javascript" src="excanvas_0002/excanvas.js">
</script>
<![endif]-->
<script type="text/javascript">
var x; // x coordinate
var y; // y coordinate
var fx; // x coordinate
var fy; // y coordinate
var isMSIE = /*@cc_on!@*/false;
// var ps=new Array(0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,2,2,2,2,2,2,2);
var ps=new Array(2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,0,2,2,2,2,2,2,0,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2);
function funcMouseMove(event) {
fx = event.clientX;
fy = event.clientY;
//alert(x+"test"+y);
}
function zahyou(point){
switch(point){
case 0:x=25;y=25;break;
case 1:x=75;y=25;break;
case 2:x=125;y=25;break;
case 3:x=175;y=25;break;
case 4:x=225;y=25;break;
case 5:x=275;y=25;break;
case 6:x=325;y=25;break;
case 7:x=375;y=25;break;
case 8:x=25;y=75;break;
case 9:x=75;y=75;break;
case 10:x=125;y=75;break;
case 11:x=175;y=75;break;
case 12:x=225;y=75;break;
case 13:x=275;y=75;break;
case 14:x=325;y=75;break;
case 15:x=375;y=75;break;
case 16:x=25;y=125;break;
case 17:x=75;y=125;break;
case 18:x=125;y=125;break;
case 19:x=175;y=125;break;
case 20:x=225;y=125;break;
case 21:x=275;y=125;break;
case 22:x=325;y=125;break;
case 23:x=375;y=125;break;
case 24:x=25;y=175;break;
case 25:x=75;y=175;break;
case 26:x=125;y=175;break;
case 27:x=175;y=175;break;
case 28:x=225;y=175;break;
case 29:x=275;y=175;break;
case 30:x=325;y=175;break;
case 31:x=375;y=175;break;
case 32:x=25;y=225;break;
case 33:x=75;y=225;break;
case 34:x=125;y=225;break;
case 35:x=175;y=225;break;
case 36:x=225;y=225;break;
case 37:x=275;y=225;break;
case 38:x=325;y=225;break;
case 39:x=375;y=225;break;
case 40:x=25;y=275;break;
case 41:x=75;y=275;break;
case 42:x=125;y=275;break;
case 43:x=175;y=275;break;
case 44:x=225;y=275;break;
case 45:x=275;y=275;break;
case 46:x=325;y=275;break;
case 47:x=375;y=275;break;
case 48:x=25;y=325;break;
case 49:x=75;y=325;break;
case 50:x=125;y=325;break;
case 51:x=175;y=325;break;
case 52:x=225;y=325;break;
case 53:x=275;y=325;break;
case 54:x=325;y=325;break;
case 55:x=375;y=325;break;
case 56:x=25;y=375;break;
case 57:x=75;y=375;break;
case 58:x=125;y=375;break;
case 59:x=175;y=375;break;
case 60:x=225;y=375;break;
case 61:x=275;y=375;break;
case 62:x=325;y=375;break;
case 63:x=375;y=375;break;
}
}
function drawS(){
var canvas = document.getElementById('tu'); //使用する領域を設定
if(canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
x = 225; // x coordinate
y = 175; // y coordinate
var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI*2; // End point on circle
var clockwise = true; // clockwise or anticlockwise
ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
ctx.fillStyle = "black";
ctx.fill();
//alert(ps[28]);
ctx.beginPath();
x = 225; // x coordinate
y = 225; // y coordinate
ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
ctx.fillStyle = "white";
ctx.fill();
//alert(ps[36]);
ctx.beginPath();
x = 175; // x coordinate
y = 175; // y coordinate
ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
ctx.fillStyle = "white";
ctx.fill();
//alert(ps[27]);
ctx.beginPath();
x = 175; // x coordinate
y = 225; // y coordinate
ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
ctx.fillStyle = "black";
ctx.fill();
//alert(ps[35]);
ctx.beginPath();
for (i=0;i<9;i++){
ctx.moveTo((0+i*50),0);
ctx.lineTo((0+i*50),400);
ctx.moveTo(0,(0+i*50));
ctx.lineTo(400,(0+i*50));
}
ctx.closePath();
ctx.stroke();
//画面の最大化
moveTo(0,0);
resizeTo(screen.width,screen.height);
if(!isMSIE){
document.addEventListener('mousedown', funcMouseMove, false);
}
canvas.onmousemove = function() {
if(isMSIE){
document.getElementById('x').innerHTML="x="+event.x;
document.getElementById('y').innerHTML="y="+event.y;
}else{
document.getElementById('x').innerHTML="x="+(fx-80);
document.getElementById('y').innerHTML="y="+(fy-80);
}
document.getElementById('w').innerHTML="top="+document.getElementById("tu").offsetTop+"left="+document.getElementById("tu").offsetLeft;
}
var tcnt=0;
//alert(ps[63]);
canvas.onmousedown = function() {
ctx.moveTo(0,0);
ctx.beginPath();
if(isMSIE){
document.getElementById('c').innerHTML="c"+event.x+"+"+event.y+"+"+tcnt;
x = event.x-80; // x coordinate
y = event.y-80; // y coordinate
} else {
x = fx-80; // x coordinate
y = fy-80;
} // y coordinate
var setsw=64;
//１列目の制御
if ((x>=0 && x <50) && (y>=0 && y<50)) {setsw=0;x=25;y=25;}
if ((x>=0 && x <50) && (y>=50 && y<100)) {setsw=8;x=25;y=75;}
if ((x>=0 && x <50) && (y>=100&& y<150)) {setsw=16;x=25;y=125;}
if ((x>=0 && x <50) && (y>=150&& y<200)) {setsw=24;x=25;y=175;}
if ((x>=0 && x <50) && (y>=200&& y<250)) {setsw=32;x=25;y=225;}
if ((x>=0 && x <50) && (y>=250&& y<300)) {setsw=40;x=25;y=275;}
if ((x>=0 && x <50) && (y>=300&& y<350)) {setsw=48;x=25;y=325;}
if ((x>=0 && x <50) && (y>=350&& y<400)) {setsw=56;x=25;y=375;}
//２列目の制御
if ((x>=50 && x <100) && (y>=0 && y<50)) {setsw=1;x=75;y=25;}
if ((x>=50 && x <100) && (y>=50 && y<100)) {setsw=9;x=75;y=75;}
if ((x>=50 && x <100) && (y>=100&& y<150)) {setsw=17;x=75;y=125;}
if ((x>=50 && x <100) && (y>=150&& y<200)) {setsw=25;x=75;y=175;}
if ((x>=50 && x <100) && (y>=200&& y<250)) {setsw=33;x=75;y=225;}
if ((x>=50 && x <100) && (y>=250&& y<300)) {setsw=41;x=75;y=275;}
if ((x>=50 && x <100) && (y>=300&& y<350)) {setsw=49;x=75;y=325;}
if ((x>=50 && x <100) && (y>=350&& y<400)) {setsw=57;x=75;y=375;}
//３列目の制御
if ((x>=100 && x <150) && (y>=0 && y<50)) {setsw=2;x=125;y=25;}
if ((x>=100 && x <150) && (y>=50 && y<100)) {setsw=10;x=125;y=75;}
if ((x>=100 && x <150) && (y>=100&& y<150)) {setsw=18;x=125;y=125;}
if ((x>=100 && x <150) && (y>=150&& y<200)) {setsw=26;x=125;y=175;}
if ((x>=100 && x <150) && (y>=200&& y<250)) {setsw=34;x=125;y=225;}
if ((x>=100 && x <150) && (y>=250&& y<300)) {setsw=42;x=125;y=275;}
if ((x>=100 && x <150) && (y>=300&& y<350)) {setsw=50;x=125;y=325;}
if ((x>=100 && x <150) && (y>=350&& y<400)) {setsw=58;x=125;y=375;}
//４列目の制御
if ((x>=150 && x <200) && (y>=0 && y<50)) {setsw=3;x=175;y=25;}
if ((x>=150 && x <200) && (y>=50 && y<100)) {setsw=11;x=175;y=75;}
if ((x>=150 && x <200) && (y>=100&& y<150)) {setsw=19;x=175;y=125;}
if ((x>=150 && x <200) && (y>=150&& y<200)) {setsw=27;x=175;y=175;}
if ((x>=150 && x <200) && (y>=200&& y<250)) {setsw=35;x=175;y=225;}
if ((x>=150 && x <200) && (y>=250&& y<300)) {setsw=43;x=175;y=275;}
if ((x>=150 && x <200) && (y>=300&& y<350)) {setsw=51;x=175;y=325;}
if ((x>=150 && x <200) && (y>=350&& y<400)) {setsw=59;x=175;y=375;}
//５列目の制御
if ((x>=200 && x <250) && (y>=0 && y<50)) {setsw=4;x=225;y=25;}
if ((x>=200 && x <250) && (y>=50 && y<100)) {setsw=12;x=225;y=75;}
if ((x>=200 && x <250) && (y>=100&& y<150)) {setsw=20;x=225;y=125;}
if ((x>=200 && x <250) && (y>=150&& y<200)) {setsw=28;x=225;y=175;}
if ((x>=200 && x <250) && (y>=200&& y<250)) {setsw=36;x=225;y=225;}
if ((x>=200 && x <250) && (y>=250&& y<300)) {setsw=44;x=225;y=275;}
if ((x>=200 && x <250) && (y>=300&& y<350)) {setsw=52;x=225;y=325;}
if ((x>=200 && x <250) && (y>=350&& y<400)) {setsw=60;x=225;y=375;}
//６列目の制御
if ((x>=250 && x <300) && (y>=0 && y<50)) {setsw=5;x=275;y=25;}
if ((x>=250 && x <300) && (y>=50 && y<100)) {setsw=13;x=275;y=75;}
if ((x>=250 && x <300) && (y>=100&& y<150)) {setsw=21;x=275;y=125;}
if ((x>=250 && x <300) && (y>=150&& y<200)) {setsw=29;x=275;y=175;}
if ((x>=250 && x <300) && (y>=200&& y<250)) {setsw=37;x=275;y=225;}
if ((x>=250 && x <300) && (y>=250&& y<300)) {setsw=45;x=275;y=275;}
if ((x>=250 && x <300) && (y>=300&& y<350)) {setsw=53;x=275;y=325;}
if ((x>=250 && x <300) && (y>=350&& y<400)) {setsw=61;x=275;y=375;}
//７列目の制御
if ((x>=300 && x <350) && (y>=0 && y<50)) {setsw=6;x=325;y=25;}
if ((x>=300 && x <350) && (y>=50 && y<100)) {setsw=14;x=325;y=75;}
if ((x>=300 && x <350) && (y>=100&& y<150)) {setsw=22;x=325;y=125;}
if ((x>=300 && x <350) && (y>=150&& y<200)) {setsw=30;x=325;y=175;}
if ((x>=300 && x <350) && (y>=200&& y<250)) {setsw=38;x=325;y=225;}
if ((x>=300 && x <350) && (y>=250&& y<300)) {setsw=46;x=325;y=275;}
if ((x>=300 && x <350) && (y>=300&& y<350)) {setsw=54;x=325;y=325;}
if ((x>=300 && x <350) && (y>=350&& y<400)) {setsw=62;x=325;y=375;}
//８列目の制御
if ((x>=350 && x <400) && (y>=0 && y<50)) {setsw=7;x=375;y=25;}
if ((x>=350 && x <400) && (y>=50 && y<100)) {setsw=15;x=375;y=75;}
if ((x>=350 && x <400) && (y>=100&& y<150)) {setsw=23;x=375;y=125;}
if ((x>=350 && x <400) && (y>=150&& y<200)) {setsw=31;x=375;y=175;}
if ((x>=350 && x <400) && (y>=200&& y<250)) {setsw=39;x=375;y=225;}
if ((x>=350 && x <400) && (y>=250&& y<300)) {setsw=47;x=375;y=275;}
if ((x>=350 && x <400) && (y>=300&& y<350)) {setsw=55;x=375;y=325;}
if ((x>=350 && x <400) && (y>=350&& y<400)) {setsw=63;x=375;y=375;}
//alert(setsw);
var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI*2; // End point on circle
var clockwise = true; // clockwise or anticlockwise
if(ps[setsw]==2){ //コマが置かれいないか？
var bx=x;
var by=y;
var kano=0;
var bw;
if(tcnt%2==0){
bw=1;
}else{
bw=0;
}
if(setsw>7){
if(ps[setsw - 8]==bw){
var endp;
if(setsw==8 || setsw==16 || setsw==24 || setsw==32 || setsw==40 || setsw==48 || setsw==56) endp=-8;
if(setsw==9 || setsw==17 || setsw==25 || setsw==33 || setsw==41 || setsw==49 || setsw==57) endp=-7;
if(setsw==10 || setsw==18 || setsw==26 || setsw==34 || setsw==42 || setsw==50 || setsw==58) endp=-6;
if(setsw==11 || setsw==19 || setsw==27 || setsw==35 || setsw==43 || setsw==51 || setsw==59) endp=-5;
if(setsw==12 || setsw==20 || setsw==28 || setsw==36 || setsw==44 || setsw==52 || setsw==60) endp=-4;
if(setsw==13 || setsw==21 || setsw==29 || setsw==37 || setsw==45 || setsw==53 || setsw==61) endp=-3;
if(setsw==14 || setsw==22 || setsw==30 || setsw==38 || setsw==46 || setsw==54 || setsw==62) endp=-2;
if(setsw==15 || setsw==23 || setsw==31 || setsw==39 || setsw==47 || setsw==55 || setsw==63) endp=-1;
var brp=-1;
//alert(setsw+" - "+endp);
for(b=16;b<(setsw - endp);b+=8){
if(ps[setsw - b]==2){brp=-1;break;}
if(ps[setsw - b]==Math.abs(bw-1)){brp=b;break;}
}
if(brp==-1){}
else{
for(j=8;j<=brp;j+=8){
zahyou(setsw-j);
ps[setsw-j]=tcnt%2;
ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
if(tcnt%2==0){ctx.fillStyle = "black";ctx.closePath();ctx.fill();}else{ctx.fillStyle = "white";ctx.closePath();ctx.fill();}
}
kano++; //上
}
}
}
if(setsw<56){
if(ps[setsw + 8]==bw){
var endp;
if(setsw==8 || setsw==16 || setsw==24 || setsw==32 || setsw==40 || setsw==48 || setsw==0) endp=64;
if(setsw==9 || setsw==17 || setsw==25 || setsw==33 || setsw==41 || setsw==49 || setsw==1) endp=65;
if(setsw==10 || setsw==18 || setsw==26 || setsw==34 || setsw==42 || setsw==50 || setsw==2) endp=66;
if(setsw==11 || setsw==19 || setsw==27 || setsw==35 || setsw==43 || setsw==51 || setsw==3) endp=67;
if(setsw==12 || setsw==20 || setsw==28 || setsw==36 || setsw==44 || setsw==52 || setsw==4) endp=68;
if(setsw==13 || setsw==21 || setsw==29 || setsw==37 || setsw==45 || setsw==53 || setsw==5) endp=69;
if(setsw==14 || setsw==22 || setsw==30 || setsw==38 || setsw==46 || setsw==54 || setsw==6) endp=70;
if(setsw==15 || setsw==23 || setsw==31 || setsw==39 || setsw==47 || setsw==55 || setsw==7) endp=71;
var brp=-1;
//alert(setsw+" - "+endp);
for(b=16;b<(endp - setsw);b+=8){
if(ps[setsw + b]==2){brp=-1;break;}
if(ps[setsw + b]==Math.abs(bw-1)){brp=b;break;}
}
if(brp==-1){}
else{
for(j=8;j<=brp;j+=8){
zahyou(setsw+j);
ps[setsw+j]=tcnt%2;
ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
if(tcnt%2==0){ctx.fillStyle = "black";ctx.closePath();ctx.fill();}else{ctx.fillStyle = "white";ctx.closePath();ctx.fill();}
}
kano++; //上
}
}
}
//if(setsw<56) if(ps[setsw + 8]==bw)kano++;//下
if(setsw!=63&&setsw!=55&&setsw!=47&&setsw!=39&&setsw!=31&&setsw!=23&&setsw!=15&&setsw!=7){
if( ps[setsw + 1]==bw){
var endp;
if(setsw>=0 && setsw<7) endp=8;
if(setsw>=8 && setsw<15) endp=16;
if(setsw>=16 && setsw<23) endp=24;
if(setsw>=24 && setsw<31) endp=32;
if(setsw>=32 && setsw<39) endp=40;
if(setsw>=40 && setsw<47) endp=48;
if(setsw>=48 && setsw<55) endp=56;
if(setsw>=56 && setsw<63) endp=64;
var brp=-1;
for(b=2;b<(endp - setsw);b++){
if(ps[setsw + b]==2){brp=-1;break;}
if(ps[setsw + b]==Math.abs(bw-1)){brp=b;break;}
}
if(brp==-1){}
else{
for(j=1;j<=brp;j++){
zahyou(setsw+j);
ps[setsw+j]=tcnt%2;
ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
if(tcnt%2==0){ctx.fillStyle = "black";ctx.closePath();ctx.fill();}else{ctx.fillStyle = "white";ctx.closePath();ctx.fill();}
}
kano++; //後ろ
}
}
if(setsw>7){
//if( ps[setsw - 7]==bw)kano++;//斜上後ろ
if( ps[setsw - 7]==bw){
var endp;
if(setsw==16) endp=2;
if(setsw==24 || setsw==17) endp=3;
if(setsw==32 || setsw==25 || setsw==18) endp=4;
if(setsw==40 || setsw==33 || setsw==26 || setsw==19) endp=5;
if(setsw==48 || setsw==41 || setsw==34 || setsw==27 || setsw==20) endp=6;
if(setsw==56 || setsw==49 || setsw==42 || setsw==35 || setsw==28 || setsw==21) endp=7;
if(setsw==57 || setsw==50 || setsw==43 || setsw==36 || setsw==29) endp=15;
if(setsw==58 || setsw==51 || setsw==44 || setsw==37) endp=23;
if(setsw==59 || setsw==52 || setsw==45) endp=31;
if(setsw==60 || setsw==53) endp=39;
if(setsw==61) endp=47;
var brp=-1;
for(b=14;b<=(setsw-endp);b+=7){
if(ps[setsw - b]==2){brp=-1;break;}
if(ps[setsw - b]==Math.abs(bw-1)){brp=b;break;}
}
if(brp==-1){}
else{
for(j=7;j<=brp;j+=7){
zahyou(setsw-j);
ps[setsw-j]=tcnt%2;
ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
if(tcnt%2==0){ctx.fillStyle = "black";ctx.closePath();ctx.fill();}else{ctx.fillStyle = "white";ctx.closePath();ctx.fill();}
}
kano++; //前
}
}
}
//修正
if(setsw<56){
//if( ps[setsw + 9]==bw)kano++;//斜下後ろ
if( ps[setsw + 9]==bw){
var endp;
if(setsw==5) endp=23;
if(setsw==4 || setsw==13) endp=31;
if(setsw==3 || setsw==12 || setsw==21) endp=39;
if(setsw==2 || setsw==11 || setsw==20 || setsw==29) endp=47;
if(setsw==1 || setsw==10 || setsw==19 || setsw==28 || setsw==37) endp=55;
if(setsw==0 || setsw==9 || setsw==18 || setsw==27 || setsw==36 || setsw==45) endp=63;
if(setsw==8 || setsw==17 || setsw==26 || setsw==35 || setsw==44) endp=62;
if(setsw==16 || setsw==25 || setsw==34 || setsw==43) endp=61;
if(setsw==24 || setsw==33 || setsw==42) endp=60;
if(setsw==32 || setsw==41) endp=59;
if(setsw==40) endp=58;
var brp=-1;
for(b=18;b<=(endp-setsw);b+=9){
if(ps[setsw + b]==2){brp=-1;break;}
if(ps[setsw + b]==Math.abs(bw-1)){brp=b;break;}
}
if(brp==-1){}
else{
for(j=9;j<=brp;j+=9){
zahyou(setsw+j);
ps[setsw+j]=tcnt%2;
ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
if(tcnt%2==0){ctx.fillStyle = "black";ctx.closePath();ctx.fill();}else{ctx.fillStyle = "white";ctx.closePath();ctx.fill();}
}
kano++; //前
}
}
}
//修正
}
if(setsw!=0&&setsw!=8&&setsw!=16&&setsw!=24&&setsw!=32&&setsw!=40&&setsw!=48&&setsw!=56){
if(ps[setsw - 1]==bw){
var endp;
if(setsw>0 && setsw<=7) endp=0;
if(setsw>8 && setsw<=15) endp=8;
if(setsw>16 && setsw<=23) endp=16;
if(setsw>24 && setsw<=31) endp=24;
if(setsw>32 && setsw<=39) endp=32;
if(setsw>40 && setsw<=47) endp=40;
if(setsw>48 && setsw<=55) endp=48;
if(setsw>56 && setsw<=63) endp=56;
var brp=-1;
for(b=2;b<=(setsw - endp);b++){
if(ps[setsw - b]==2){brp=-1;break;}
if(ps[setsw - b]==Math.abs(bw-1)){brp=b;break;}
}
if(brp==-1){}
else{
for(j=1;j<=brp;j++){
zahyou(setsw-j);
ps[setsw-j]=tcnt%2;
ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
if(tcnt%2==0){ctx.fillStyle = "black";ctx.closePath();ctx.fill();}else{ctx.fillStyle = "white";ctx.closePath();ctx.fill();}
}
kano++; //前
}
}
/*if(setsw>7){
if( ps[setsw - 9]==bw)kano++;//斜上前
}*/
if(setsw>7){
if( ps[setsw - 9]==bw){
var endp;
if(setsw==23) endp=5;
if(setsw==31 || setsw==22) endp=4;
if(setsw==39 || setsw==30 || setsw==21) endp=3;
if(setsw==47 || setsw==38 || setsw==29 || setsw==20) endp=2;
if(setsw==55 || setsw==46 || setsw==37 || setsw==28 || setsw==19) endp=1;
if(setsw==63 || setsw==54 || setsw==45 || setsw==36 || setsw==29 || setsw==18) endp=0;
if(setsw==62 || setsw==53 || setsw==44 || setsw==35 || setsw==26) endp=8;
if(setsw==61 || setsw==52 || setsw==43 || setsw==34) endp=16;
if(setsw==60 || setsw==51 || setsw==42) endp=24;
if(setsw==59 || setsw==50) endp=32;
if(setsw==58) endp=40;
var brp=-1;
for(b=18;b<=(setsw-endp);b+=9){
if(ps[setsw - b]==2){brp=-1;break;}
if(ps[setsw - b]==Math.abs(bw-1)){brp=b;break;}
}
if(brp==-1){}
else{
for(j=9;j<=brp;j+=9){
zahyou(setsw-j);
ps[setsw-j]=tcnt%2;
ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
if(tcnt%2==0){ctx.fillStyle = "black";ctx.closePath();ctx.fill();}else{ctx.fillStyle = "white";ctx.closePath();ctx.fill();}
}
kano++; //前
}
}
}
//修正
//修正
if(setsw<56){
if( ps[setsw + 7]==bw){
var endp;
if(setsw==2) endp=16;
if(setsw==3 || setsw==10) endp=24;
if(setsw==4 || setsw==11 || setsw==18) endp=32;
if(setsw==5 || setsw==12 || setsw==19 || setsw==26) endp=40;
if(setsw==6 || setsw==13 || setsw==20 || setsw==27 || setsw==34) endp=48;
if(setsw==7 || setsw==14 || setsw==21 || setsw==28 || setsw==35 || setsw==42) endp=56;
if(setsw==15 || setsw==22 || setsw==29 || setsw==36 || setsw==43) endp=57;
if(setsw==23 || setsw==30 || setsw==37 || setsw==44) endp=58;
if(setsw==31 || setsw==38 || setsw==45) endp=59;
if(setsw==39 || setsw==46) endp=60;
if(setsw==47) endp=61;
var brp=-1;
for(b=14;b<=(endp-setsw);b+=7){
if(ps[setsw + b]==2){brp=-1;break;}
if(ps[setsw + b]==Math.abs(bw-1)){brp=b;break;}
}
if(brp==-1){}
else{
for(j=7;j<=brp;j+=7){
zahyou(setsw+j);
ps[setsw+j]=tcnt%2;
ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
if(tcnt%2==0){ctx.fillStyle = "black";ctx.closePath();ctx.fill();}else{ctx.fillStyle = "white";ctx.closePath();ctx.fill();}
}
kano++; //前
}
}
}
//修正
}
if(kano!=0) {
x=bx;
y=by;
ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
if(tcnt%2==0)
{ps[setsw]=0;ctx.fillStyle = "black";ctx.closePath();ctx.fill();tcnt++;}
else
{ps[setsw]=1;ctx.fillStyle = "white";ctx.closePath();ctx.fill();tcnt++;}
}
}
document.getElementById('x1').innerHTML=ps[0]+""+ps[1]+ps[2]+ps[3]+ps[4]+ps[5]+ps[6]+ps[7];
document.getElementById('x2').innerHTML=ps[8]+""+ps[9]+ps[10]+ps[11]+ps[12]+ps[13]+ps[14]+ps[15];
document.getElementById('x3').innerHTML=ps[16]+""+ps[17]+ps[18]+ps[19]+ps[20]+ps[21]+ps[22]+ps[23];
document.getElementById('x4').innerHTML=ps[24]+""+ps[25]+ps[26]+ps[27]+ps[28]+ps[29]+ps[30]+ps[31];
document.getElementById('x5').innerHTML=ps[32]+""+ps[33]+ps[34]+ps[35]+ps[36]+ps[37]+ps[38]+ps[39];
document.getElementById('x6').innerHTML=ps[40]+""+ps[41]+ps[42]+ps[43]+ps[44]+ps[45]+ps[46]+ps[47];
document.getElementById('x7').innerHTML=ps[48]+""+ps[49]+ps[50]+ps[51]+ps[52]+ps[53]+ps[54]+ps[55];
document.getElementById('x8').innerHTML=ps[56]+""+ps[57]+ps[58]+ps[59]+ps[60]+ps[61]+ps[62]+ps[63];
}
} else {
alert('canvasタグに未対応です。\nこのデモを見るためには\nSafariまたはFirefox 1.5以上のブラウザが必要です。');
}
}
</script>
</head>
<body onload="drawS()">
オセロのコマを枠線内に追加表示<div><span id="x">x</span><span id="y">y</span><span id="c">b</span><span id="w">b</span></div><br />
<div>
<canvas id="tu" width="400" height="400"></canvas>
</div>
<p>
<span id="x1">x1</span><br />
<span id="x2">x2</span><br />
<span id="x3">x3</span><br />
<span id="x4">x4</span><br />
<span id="x5">x5</span><br />
<span id="x6">x6</span><br />
<span id="x7">x7</span><br />
<span id="x8">x8</span><br />
</p>
</body>
</html>
