카테고리 없음

Python 23 - 오목게임 10x10 , 19x19 (랜더링 함수, setTimeout)

inderrom 2023. 1. 12. 14:33

오목 10x10


1.  오목 백돌 버튼 이벤트

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table,td{
	margin : 0px;
	padding: 0px;
	border-collapse:collapse;
}
img{
	display:block;
}
</style>
<script type="text/javascript">
function myclick(obj){
	obj.src = "1.png";
	console.log("myclick",obj);
}

</script>
</head>
<body>
<table>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	
	
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	

</table>

</body>
</html>

 

실행결과

 


2. 오목판을 눌렀을 때 흑돌 백돌이 순서대로 나오게 이벤트

 

<script type="text/javascript">
var flag_wb = true;
function myclick(obj){
	if(flag_wb){
		obj.src="1.png";
	}else{
		obj.src="2.png";
	}
	flag_wb = !flag_wb;
}
</script>

1) flag ->  true/false로 이벤트를 줄 수 있다.

 

 


랜더링 함수

 

 

<script type="text/javascript">

var arr2D = [
	[1,2,0,0,0, 0,0,0,0,0],
	[0,1,2,0,0, 0,0,0,0,0],
	[0,0,1,0,0, 0,0,0,0,0],
	[0,0,0,0,0, 0,0,0,0,0],
	[0,0,0,0,0, 0,0,0,0,0],
	
	[0,0,0,0,0, 0,0,0,0,0],
	[0,0,0,0,0, 0,0,0,0,0],
	[0,0,0,0,0, 0,0,0,0,0],
	[0,0,0,0,0, 0,0,0,0,0],
	[0,0,0,0,0, 0,0,0,0,0]
];

function myclick(obj){
	myrender();
}

function myrender(){
	var imgs = document.querySelectorAll("img");
	for(var i =0; i<10; i++){
		for(var j=0; j<10; j++){
			imgs[i*10 + j].src = arr2D[i][j]+".png";
		}
	}
}

</script>

이차원 배열에 오목 위치를 지정하고 버튼을 클릭했을 때

이벤트 발생

 


 

1) img의 alt 속성, flag를 사용하여 배열에 위치에 백돌과 흑돌을 저장하고 클릭했을 때 흑돌과 백돌이 출력될 수 있다. 

 

<script type="text/javascript">

var arr2D = [
	[1,2,0,0,0, 0,0,0,0,0],
	[0,1,2,0,0, 0,0,0,0,0],
	[0,0,1,0,0, 0,0,0,0,0],
	[0,0,0,0,0, 0,0,0,0,0],
	[0,0,0,0,0, 0,0,0,0,0],
	
	[0,0,0,0,0, 0,0,0,0,0],
	[0,0,0,0,0, 0,0,0,0,0],
	[0,0,0,0,0, 0,0,0,0,0],
	[0,0,0,0,0, 0,0,0,0,0],
	[0,0,0,0,0, 0,0,0,0,0]
];
var flag_wb = true;
function myclick(obj){
	var str_ij = obj.alt;
	var arr_ij = str_ij.split(",");
	var i = parseInt(arr_ij[0]);
	var j = parseInt(arr_ij[1]);
	
	if(flag_wb){
		arr2D[i][j] = 1;
	}else{
		arr2D[i][j] = 2;	
	}
	
	myrender();
    flag_wb = !flag_wb; 
}

function myrender(){
	var imgs = document.querySelectorAll("img");
	for(var i =0; i<10; i++){
		for(var j=0; j<10; j++){
			imgs[i*10 + j].src = arr2D[i][j]+".png";
		}
	}
}

function fn_init(){
	var imgs = document.querySelectorAll("img");
	for(var i = 0; i<10; i++){
		for(var j=0; j<10; j++){
			imgs[i*10+j].alt = i+","+j;
		}
	}
}
</script>

 

 

 


 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table,tr,td{
	padding: 0px;
	border-spacing: 0px;
}
img{
	display:block;
}
</style>
<script type="text/javascript">
var flag_wb = true;
var arr2D = [
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0]
];


function myclick(obj){
	var str_ij = obj.alt;
	var arr_ij = str_ij.split(",");
	var i = parseInt(arr_ij[0]);
	var j = parseInt(arr_ij[1]);
	
    // 다시 클릭했을 때 색이 바뀌지 않게 return을 준다.
    if(arr2D[i][j]>0){
		return;
	}
	
	if(flag_wb){
		arr2D[i][j] = 1;
	}else{
		arr2D[i][j] = 2;
	}
	myrender();
	
	flag_wb = !flag_wb;
}

function myrender(){
	var imgs = document.querySelectorAll("img");
	for(var i=0;i<10;i++){
		for(var j=0;j<10;j++){
			imgs[i*10+j].src = arr2D[i][j]+".png";
		}
	}
}

function fn_init(){
	var imgs = document.querySelectorAll("img");
	for(var i=0;i<10;i++){
		for(var j=0;j<10;j++){
			imgs[i*10+j].alt = i+","+j;
		}
	}
}

</script>
</head>
<body onload="fn_init()">
<table>
	<tr>
		<td><img alt="0,0" src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img alt="1,0" src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	
	
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>

</table>

</body>
</html>

흑돌과 백돌의 위치 설정


<script type="text/javascript">
var flag_wb = true;
var arr2D = [
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0]
];


function myclick(obj){
	var str_ij = obj.alt;
	var arr_ij = str_ij.split(",");
	var i = parseInt(arr_ij[0]);
	var j = parseInt(arr_ij[1]);
	if(arr2D[i][j]>0){
		return;
	}
	
	var stone = -1;
	if(flag_wb){
		arr2D[i][j] = 1;
		stone = 1;
	}else{
		arr2D[i][j] = 2;
		stone = 2;
	}
	
	var up = checkUP(i,j,stone);
	var dw = checkDW(i,j,stone);
	var ri = checkRI(i,j,stone);
	var le = checkLE(i,j,stone);
	
	var dr = checkDR(i,j,stone);
	var dl = checkDL(i,j,stone);
	var ur = checkUR(i,j,stone);
	var ul = checkUL(i,j,stone);
	console.log(up,dw,ri,le,	dr,dl,ur,ul);
	
	myrender();
	
	flag_wb = !flag_wb;
}

function checkDL(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i++;
			j--;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkDR(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i++;
			j++;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkUL(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i--;
			j--;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkUR(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i--;
			j++;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkLE(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			j--;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}


function checkRI(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			j++;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkDW(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i++;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkUP(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i--;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}


function myrender(){
	var imgs = document.querySelectorAll("img");
	for(var i=0;i<10;i++){
		for(var j=0;j<10;j++){
			imgs[i*10+j].src = arr2D[i][j]+".png";
		}
	}
}

function fn_init(){
	var imgs = document.querySelectorAll("img");
	for(var i=0;i<10;i++){
		for(var j=0;j<10;j++){
			imgs[i*10+j].alt = i+","+j;
		}
	}
}

</script>

 

 

setTimeout

setTimeout(func|code, [delay], [arg1], [arg2], ...)

 

alert창 띄울 때 딜레이를 준다.

 


최종 

  • 흑돌과 백돌이 번갈아가면서 나오게
  • UL   UP  UR
    LE          RE
    DL  DW  DR 
  • 방향으로  위,아래,양옆,대각선 돌이 5개 쌓이면 이김
  • 알람창이 돌이 5개가 쌓인게 보인 후에 떠야함
  • reset버튼으로 오목판 초기화
  • turn 순서 보이게 하기 ●○ (showTurn 메소드)

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table,tr,td{
	padding: 0px;
	border-spacing: 0px;
}
img{
	display:block;
}
</style>
<script type="text/javascript">
var flag_ing = true;
var flag_wb = true;
var arr2D = [
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0]
];


function myreset(){
	flag_ing = true;
	flag_wb = true;
	for(var i=0;i<10;i++){
		for(var j=0;j<10;j++){
			arr2D[i][j]=0;
		}
	}
	myrender();
	showTurn();
	
}

function myclick(obj){
	if(!flag_ing){
		return;
	}
	
	var str_ij = obj.alt;
	var arr_ij = str_ij.split(",");
	var i = parseInt(arr_ij[0]);
	var j = parseInt(arr_ij[1]);
	if(arr2D[i][j]>0){
		return;
	}
	
	var stone = -1;
	if(flag_wb){
		arr2D[i][j] = 1;
		stone = 1;
	}else{
		arr2D[i][j] = 2;
		stone = 2;
	}
	
	var up = checkUP(i,j,stone);
	var dw = checkDW(i,j,stone);
	var ri = checkRI(i,j,stone);
	var le = checkLE(i,j,stone);
	
	var dr = checkDR(i,j,stone);
	var dl = checkDL(i,j,stone);
	var ur = checkUR(i,j,stone);
	var ul = checkUL(i,j,stone);

	var d1 = ul+dr+1;
	var d2 = le+ri+1;
	var d3 = dl+ur+1;
	var d4 = up+dw+1;

	myrender();
	
	if(d1==5||d2==5||d3==5||d4==5){
		
		if(flag_wb){
			setTimeout("alert('흰돌승리')", 1);
		} else {
			setTimeout("alert('흑돌승리')", 1);
		}
		flag_ing = false;
	}
	
	flag_wb = !flag_wb;
	
	showTurn();
}

function showTurn(){
	var obj_div_turn = document.querySelector("#div_turn")
	if(flag_wb){
		obj_div_turn.innerHTML = "○";
	}else{
		obj_div_turn.innerHTML = "●";
	}
}

function checkDL(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i++;
			j--;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkDR(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i++;
			j++;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkUL(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i--;
			j--;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkUR(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i--;
			j++;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkLE(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			j--;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}


function checkRI(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			j++;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkDW(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i++;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkUP(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i--;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}
	

function myrender(){
	var imgs = document.querySelectorAll("img");
	for(var i=0;i<10;i++){
		for(var j=0;j<10;j++){
			imgs[i*10+j].src = arr2D[i][j]+".png";
		}
	}

}

function fn_init(){
	var imgs = document.querySelectorAll("img");
	for(var i=0;i<10;i++){
		for(var j=0;j<10;j++){
			imgs[i*10+j].alt = i+","+j;
		}
	}
	showTurn();
}

</script>
</head>
<body onload="fn_init()">
<table>
	<tr>
		<td><img alt="0,0" src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img alt="1,0" src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	
	
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	
	


</table>
<input type="button" value="RESET" onclick="myreset()" />
<span id="div_turn">●○</span>
</body>
</html>

 

 


오목 19x19

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table,tr,td{
	padding: 0px;
	border-spacing: 0px;
}
img{
	display:block;
}
</style>
<script type="text/javascript">
var flag_ing = true;
var flag_wb = true;
var arr2D = [
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0],
	[0,0,0,0,0,	0,0,0,0,0,	0,0,0,0,0,	0,0,0,0]

];


function myreset(){
	flag_ing = true;
	flag_wb = true;
	for(var i=0;i<19;i++){
		for(var j=0;j<19;j++){
			arr2D[i][j]=0;
		}
	}
	myrender();
	showTurn();
	
}

function myclick(obj){
	if(!flag_ing){
		return;
	}
	
	var str_ij = obj.alt;
	var arr_ij = str_ij.split(",");
	var i = parseInt(arr_ij[0]);
	var j = parseInt(arr_ij[1]);
	if(arr2D[i][j]>0){
		return;
	}
	
	var stone = -1;
	if(flag_wb){
		arr2D[i][j] = 1;
		stone = 1;
	}else{
		arr2D[i][j] = 2;
		stone = 2;
	}
	
	var up = checkUP(i,j,stone);
	var dw = checkDW(i,j,stone);
	var ri = checkRI(i,j,stone);
	var le = checkLE(i,j,stone);
	
	var dr = checkDR(i,j,stone);
	var dl = checkDL(i,j,stone);
	var ur = checkUR(i,j,stone);
	var ul = checkUL(i,j,stone);

	var d1 = ul+dr+1;
	var d2 = le+ri+1;
	var d3 = dl+ur+1;
	var d4 = up+dw+1;

	myrender();
	
	if(d1==5||d2==5||d3==5||d4==5){
		
		if(flag_wb){
			setTimeout("alert('흰돌승리')", 1);
		} else {
			setTimeout("alert('흑돌승리')", 1);
		}
		flag_ing = false;
	}
	
	flag_wb = !flag_wb;
	showTurn();

}

function showTurn(){
	var obj_div_turn = document.querySelector("#div_turn");
	if(flag_wb){
		obj_div_turn.innerHTML = "○";
	}else{
		obj_div_turn.innerHTML = "●";
	}
}

function checkDL(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i++;
			j--;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkDR(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i++;
			j++;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkUL(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i--;
			j--;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkUR(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i--;
			j++;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkLE(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			j--;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}


function checkRI(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			j++;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkDW(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i++;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}

function checkUP(i,j,stone){
	var cnt = 0;	
	try {
		while(true){
			i--;
			if(arr2D[i][j]==stone){
				cnt++;
			}else{
				return cnt;
			}
		}
	} catch (err) {
		return cnt
	}
}


function myrender(){
	var imgs = document.querySelectorAll("img");
	for(var i=0;i<19;i++){
		for(var j=0;j<19;j++){
			imgs[i*19+j].src = arr2D[i][j]+".png";
		}
	}
	
}

function fn_init(){
	makeTable19();
	var imgs = document.querySelectorAll("img");
	for(var i=0;i<19;i++){
		for(var j=0;j<19;j++){
			imgs[i*19+j].alt = i+","+j;
		}
	}
	showTurn();
	
}

function makeTable19(){
	var tbl = document.querySelector("#tbl");
	
	var txt = "";
	
	for(var i=0;i<19;i++){
		txt += "<tr>"
			for(var j=0;j<19;j++){
				txt += "<td><img src='0.png' onclick='myclick(this)' ></td>";
			}
		txt += "</tr>"		
	}
	
	tbl.innerHTML = txt;

}




</script>
</head>
<body onload="fn_init()">
<table id="tbl">
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img alt="1,0" src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	
	
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	<tr>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
		<td><img src="0.png" onclick="myclick(this)" ></td><td><img src="0.png" onclick="myclick(this)" ></td>
	</tr>
	
</table>
<input type="button" value="RESET" onclick="myreset()" />
<span id="div_turn">●○</span>
</body>
</html>