단순 캔버스 오목
86954 단어 canvas
var YFTools = {
$:function(id)
{
return document.getElementById(id);
},
addHandler:function(element,type,handler)
{
if (element.addEventListener)
{
element.addEventListener(type, handler, false);
}
else if(element.attachEvent)
{
element.attachEvent('on'+type, handler)
}
else
{
element['on'+type] = handler;
}
},
removeHandler:function(element, type, handler)
{
if (element.removeEventListener)
{
element.removeEventListener(type, handler, false);
}
else if(element.detachEvent)
{
element.detachEvent('on'+type, handler);
}
else
{
element['on'+type] = null;
}
},
getEvent:function(event)
{
return event || window.event;
},
getTarget:function(event)
{
return event.target || event.srcEvent;
},
getRelatedTarget:function(event)
{
return event.relatedTarget ||
event.stoElement ||
fromElement ||
null;
},
getMouseX:function(event)
{
var event = this.getEvent(event);
var pageX = event.pageX;
if(pageX===undefined)
{
pageX = event.clientX + (document.body.scrollLeft ||
document.documentElement.scrollLeft);
}
return pageX;
},
getMouseY:function(e)
{
var event = this.getEvent(e)
var pageY = event.pageY;
if(pageY===undefined)
{
pageY = event.clientY + (document.body.scrollTop ||
document.documentElement.scrollTop);
}
return pageY;
}
}
var BindAsEventListener = function(object, fun)
{
return function(event)
{
return fun.call(object, (event || window.event));
}
}
function WUZI(id)
{
this.isBlack = true;
this.canvas = YFTools.$(id);
this.context = this.canvas.getContext('2d');
this.arrayChess = [];
this.canPlay = true;
}
WUZI.prototype = {
constructor:WUZI,
init:function(event)
{
for (var i=0;i<=15;i++)
{
this.arrayChess[i] = [];
for (var j=0;j<=15;j++)
{
this.arrayChess[i][j] = 0;
}
}
this.drawBoard();
YFTools.addHandler(this.canvas,'click',BindAsEventListener(this,this.drawChess))
},
//
drawBoard:function()
{
var context = this.context;
this.context.strokeStyle = "#1d1409";
this.context.lineWidth = 1;
for (var i=0;i<15;i++)
{
this.context.beginPath();
this.context.moveTo(24,i*35+24);
this.context.lineTo(15*35-11,i*35+24);
this.context.closePath();
this.context.stroke();
}
for (var j=0;j<15;j++)
{
this.context.beginPath();
this.context.moveTo(j*35+24,24);
this.context.lineTo(j*35+24,15*35-11);
this.context.closePath();
this.context.stroke();
}
},
/* */
drawChess:function(event)
{
if (this.canPlay)
{
var context = this.context;
var pageX = YFTools.getMouseX(event)-this.canvas.offsetLeft;
var pageY = YFTools.getMouseY(event)-this.canvas.offsetTop;
var tempX = Math.floor(pageX/35);
tempX = tempX >= 15 ? 14 : tempX;
var tempY = Math.floor(pageY/35);
tempY = tempY >= 15 ? 14 : tempY;
var x = tempX*35+24;
var y = tempY*35+24;
//console.log(" "+x+" "+y)
if (this.arrayChess[tempX][tempY]==0)
{
this.isBlack ? context.fillStyle = "#000000" :
context.fillStyle = "#ffffff";
context.beginPath();
context.moveTo(x,y);
context.arc(x,y,15,0,2*Math.PI,false);
context.fill();
context.closePath();
if (this.isBlack)
{
this.arrayChess[tempX][tempY]=1;
this.isBlack = false;
}
else
{
this.arrayChess[tempX][tempY]=2;
this.isBlack = true;
}
var tempFlag = this.checkWin(tempX,tempY);
if (tempFlag)
{
this.canPlay = false;
if (this.isBlack)
{
alert(' , ！');
}
else
{
alert(' , ！');
}
}
}
}
},
checkWin:function(x,y)
{
var flag = false,
color = this.arrayChess[x][y],
count = 1,
i = 1;
//console.log("X:"+(x)+" Y:"+(y))
//
while(color == this.arrayChess[x+i][y+0])
{
count++;
i++;
};
i = 1;
while(color == this.arrayChess[x-i][y-0])
{
count++;
i++;
};
if (count >= 5)
{
flag = true;
}
//
count = 1;
i = 1;
while (color == this.arrayChess[x+0][y+i])
{
count++;
i++;
}
i = 1;
while (color == this.arrayChess[x-0][y-i])
{
count++;
i++;
}
if (count >= 5)
{
flag = true;
}
//
count = 1;
i = 1;
while (color == this.arrayChess[x+i][y+i])
{
count++;
i++;
}
i = 1;
while (color == this.arrayChess[x-i][y-i])
{
count++;
i++;
}
if (count >= 5)
{
flag = true;
}
//
count = 1;
i = 1;
while (color == this.arrayChess[x+i][y-i])
{
count++;
i++;
}
i = 1;
while (color == this.arrayChess[x-i][y+i])
{
count++;
i++;
}
if (count >= 5)
{
flag = true;
}
return flag;
}
}
window.onload = function()
{
var w = new WUZI('mycanvas');
w.init();
} 위 코드를 head에 추가하여 html5 형식으로 DOCTYPE 선언
ie8 다음 브라우저의 경우 인터넷에서 두 파일을 찾을 수 있습니다.
html5.js와 excanvas.compiled.js
<!--[if lt IE 9]><script type="text/javascript" src="html5.js"></script><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->다음은 전체 코드입니다.
<!DOCTYPE html>
<head>
<!--[if lt IE 9]><script type="text/javascript" src="html5.js"></script><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->
<meta charset="gb2312" />
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
body,td,th {
font-size: 12px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align:center;
}
canvas{display:block;background:url(images/bg.jpg);margin:20px auto;width:537px;cursor:pointer;}
</style>
<script>
var YFTools = {
$:function(id)
{
return document.getElementById(id);
},
addHandler:function(element,type,handler)
{
if (element.addEventListener)
{
element.addEventListener(type, handler, false);
}
else if(element.attachEvent)
{
element.attachEvent('on'+type, handler)
}
else
{
element['on'+type] = handler;
}
},
removeHandler:function(element, type, handler)
{
if (element.removeEventListener)
{
element.removeEventListener(type, handler, false);
}
else if(element.detachEvent)
{
element.detachEvent('on'+type, handler);
}
else
{
element['on'+type] = null;
}
},
getEvent:function(event)
{
return event || window.event;
},
getTarget:function(event)
{
return event.target || event.srcEvent;
},
getRelatedTarget:function(event)
{
return event.relatedTarget ||
event.stoElement ||
fromElement ||
null;
},
getMouseX:function(event)
{
var event = this.getEvent(event);
var pageX = event.pageX;
if(pageX===undefined)
{
pageX = event.clientX + (document.body.scrollLeft ||
document.documentElement.scrollLeft);
}
return pageX;
},
getMouseY:function(e)
{
var event = this.getEvent(e)
var pageY = event.pageY;
if(pageY===undefined)
{
pageY = event.clientY + (document.body.scrollTop ||
document.documentElement.scrollTop);
}
return pageY;
}
}
var BindAsEventListener = function(object, fun)
{
return function(event)
{
return fun.call(object, (event || window.event));
}
}
function WUZI(id)
{
this.isBlack = true;
this.canvas = YFTools.$(id);
this.context = this.canvas.getContext('2d');
this.arrayChess = [];
this.canPlay = true;
}
WUZI.prototype = {
constructor:WUZI,
init:function(event)
{
for (var i=0;i<=15;i++)
{
this.arrayChess[i] = [];
for (var j=0;j<=15;j++)
{
this.arrayChess[i][j] = 0;
}
}
this.drawBoard();
YFTools.addHandler(this.canvas,'click',BindAsEventListener(this,this.drawChess))
},
//
drawBoard:function()
{
var context = this.context;
this.context.strokeStyle = "#1d1409";
this.context.lineWidth = 1;
for (var i=0;i<15;i++)
{
this.context.beginPath();
this.context.moveTo(24,i*35+24);
this.context.lineTo(15*35-11,i*35+24);
this.context.closePath();
this.context.stroke();
}
for (var j=0;j<15;j++)
{
this.context.beginPath();
this.context.moveTo(j*35+24,24);
this.context.lineTo(j*35+24,15*35-11);
this.context.closePath();
this.context.stroke();
}
},
/* */
drawChess:function(event)
{
if (this.canPlay)
{
var context = this.context;
var pageX = YFTools.getMouseX(event)-this.canvas.offsetLeft;
var pageY = YFTools.getMouseY(event)-this.canvas.offsetTop;
var tempX = Math.floor(pageX/35);
tempX = tempX >= 15 ? 14 : tempX;
var tempY = Math.floor(pageY/35);
tempY = tempY >= 15 ? 14 : tempY;
var x = tempX*35+24;
var y = tempY*35+24;
//console.log(" "+x+" "+y)
if (this.arrayChess[tempX][tempY]==0)
{
this.isBlack ? context.fillStyle = "#000000" :
context.fillStyle = "#ffffff";
context.beginPath();
context.moveTo(x,y);
context.arc(x,y,15,0,2*Math.PI,false);
context.fill();
context.closePath();
if (this.isBlack)
{
this.arrayChess[tempX][tempY]=1;
this.isBlack = false;
}
else
{
this.arrayChess[tempX][tempY]=2;
this.isBlack = true;
}
var tempFlag = this.checkWin(tempX,tempY);
if (tempFlag)
{
this.canPlay = false;
if (this.isBlack)
{
alert(' , ！');
}
else
{
alert(' , ！');
}
}
}
}
},
checkWin:function(x,y)
{
var flag = false,
color = this.arrayChess[x][y],
count = 1,
i = 1;
//console.log("X:"+(x)+" Y:"+(y))
//
while(color == this.arrayChess[x+i][y+0])
{
count++;
i++;
};
i = 1;
while(color == this.arrayChess[x-i][y-0])
{
count++;
i++;
};
if (count >= 5)
{
flag = true;
}
//
count = 1;
i = 1;
while (color == this.arrayChess[x+0][y+i])
{
count++;
i++;
}
i = 1;
while (color == this.arrayChess[x-0][y-i])
{
count++;
i++;
}
if (count >= 5)
{
flag = true;
}
//
count = 1;
i = 1;
while (color == this.arrayChess[x+i][y+i])
{
count++;
i++;
}
i = 1;
while (color == this.arrayChess[x-i][y-i])
{
count++;
i++;
}
if (count >= 5)
{
flag = true;
}
//
count = 1;
i = 1;
while (color == this.arrayChess[x+i][y-i])
{
count++;
i++;
}
i = 1;
while (color == this.arrayChess[x-i][y+i])
{
count++;
i++;
}
if (count >= 5)
{
flag = true;
}
return flag;
}
}
window.onload = function()
{
var w = new WUZI('mycanvas');
w.init();
}
</script>
</head>
<body>
<canvas id="mycanvas" width="537" height="537"></canvas>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Jetpack Compose를 사용한 커스텀 컴포저블첫 번째 기사 시리즈에서는 Jetpack Compose에서 맞춤 보기를 만드는 방법에 대해 이야기하고 싶습니다. Labeled Ranged Slider의 예에서는 완전히 맞춤설정된 컴포저블을 만드는 데 필요한 단계를...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
