web 五子棋有关问题
日期：2014-05-16 浏览次数：20329 次
web 五子棋问题
我在做一个html5的五子棋设计，以下是我代码
-----------------------------------------
<!doctype html>
<html>
<head>
<style>
footer{text-align:center;}
</style>
<title>HTML5 Canvas Application</title>
</head>
<body onLoad="drawRect();">
<canvas id="lesson01" width="800" height="520" onmousedown=onSt(event) style="border:1px solid #c3c3c3;">
你的浏览器不支持HTML5 canvas，请使用其他浏览器 打开.
</canvas>
<div style='height:470px;position:absolute;left:480px;top:40px;width:312px;background:#000;overflow:hidden'>
<image src="sise.JPG"/>
</div>
<footer>
</br>
广州大学 华软软件学院 软件工程系 王嘉明 2012.5
</footer>
<script type="text/javascript">
function drawRect() {
var canvas = document.getElementById("lesson01");
var context = canvas.getContext("2d");
for(var x=30;x<480;x+=30)
{
context.beginPath();
context.moveTo(30,x);
context.lineTo(450,x);
context.strokeStyle="rgb("+00+","+00+","+00+")";
context.stroke();
context.beginPath();
context.moveTo(x,30);
context.lineTo(x,450);
context.strokeStyle="rgb("+00+","+00+","+00+")";
context.stroke();
}
}
var b=true;
var x,y;
var e=window.event || e;
var pic = new Image();
var canvas = document.getElementById("lesson01");
var context = canvas.getContext("2d");
function onSt(e)
{
x=(e.clientX);
y=(e.clientY);
if(x%30==0)
{x=x;}
else if(x%30>15)
{ x=x-(x%30)+30
}
else
{x=x-(x%30)
}
if(y%30==0)
{y=y;}
else if(y%30>15)
{ y=y-(y%30)+30
}
else
{y=y-(y%30)
}
if(b){
pic.src = "b.png";
}
else {
pic.src = "w.png";
}
b=!b;
var truex=x<480&&x>0;
var truey=y<480&&y>0;
if(truex&&truey)
context.drawImage(pic,x-18,y-18);
}
</script>
</body>
------------------------------------------
我的问题是，我怎样应用二维数组，判断已经下了棋子的地方不能再下呢？
------解决方案--------------------
应该建应该棋子类。
有属性 x,y
棋子颜色：白/黑
一个数组保存已经下的棋子arr。
一个位置 x1,y1 ，出现在arr中。表示此位置已有棋子。
我在做一个html5的五子棋设计，以下是我代码
-----------------------------------------
<!doctype html>
<html>
<head>
<style>
footer{text-align:center;}
</style>
<title>HTML5 Canvas Application</title>
</head>
<body onLoad="drawRect();">
<canvas id="lesson01" width="800" height="520" onmousedown=onSt(event) style="border:1px solid #c3c3c3;">
你的浏览器不支持HTML5 canvas，请使用其他浏览器 打开.
</canvas>
<div style='height:470px;position:absolute;left:480px;top:40px;width:312px;background:#000;overflow:hidden'>
<image src="sise.JPG"/>
</div>
<footer>
</br>
广州大学 华软软件学院 软件工程系 王嘉明 2012.5
</footer>
<script type="text/javascript">
function drawRect() {
var canvas = document.getElementById("lesson01");
var context = canvas.getContext("2d");
for(var x=30;x<480;x+=30)
{
context.beginPath();
context.moveTo(30,x);
context.lineTo(450,x);
context.strokeStyle="rgb("+00+","+00+","+00+")";
context.stroke();
context.beginPath();
context.moveTo(x,30);
context.lineTo(x,450);
context.strokeStyle="rgb("+00+","+00+","+00+")";
context.stroke();
}
}
var b=true;
var x,y;
var e=window.event || e;
var pic = new Image();
var canvas = document.getElementById("lesson01");
var context = canvas.getContext("2d");
function onSt(e)
{
x=(e.clientX);
y=(e.clientY);
if(x%30==0)
{x=x;}
else if(x%30>15)
{ x=x-(x%30)+30
}
else
{x=x-(x%30)
}
if(y%30==0)
{y=y;}
else if(y%30>15)
{ y=y-(y%30)+30
}
else
{y=y-(y%30)
}
if(b){
pic.src = "b.png";
}
else {
pic.src = "w.png";
}
b=!b;
var truex=x<480&&x>0;
var truey=y<480&&y>0;
if(truex&&truey)
context.drawImage(pic,x-18,y-18);
}
</script>
</body>
------------------------------------------
我的问题是，我怎样应用二维数组，判断已经下了棋子的地方不能再下呢？
------解决方案--------------------
应该建应该棋子类。
有属性 x,y
棋子颜色：白/黑
一个数组保存已经下的棋子arr。
一个位置 x1,y1 ，出现在arr中。表示此位置已有棋子。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
