카테고리 없음
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>