闲来玩十三水规律|十三水马牌赢了怎么算|

HTML5算出下棋的坐标


这节我们来做一个案例:点击一下棋盘,就在棋盘?#19979;?#19979;一个子。



代码演示


定义两个全局变量,然后给这两个全局变量指向两个图片对象


这两个变量分别指向 白子和黑子这两张图片。


var black=new Image();

var white=new Image();

black.src="img/black.png";

white.src="img/white.png";


这两个写成全局变量就是初始化这两张图片。当我单击这个画板的时候,它就下一个子,所以我们将会使用一个onclick?#24405;?#21333;击棋盘之后调用play方法。因为单击的时候,我们需要得到点击的坐标点,所以还需要一个event对象传进去。


<canvas id="can" width="600" height="600" onclick="play(event);" style="background: url(img/bak.jpg);"></canvas>

所以我们还需要写一个play方法,以便于在单击的时候调用。


HTML5-1.png


我们需要得?#25509;?#25143;点击后的x坐标和y坐标,所以这里我们先弹出来,看看值对不对。


HTML5-2.png


运行看看效果。


HTML5-3.png


这里得到这个坐标有点儿麻?#24120;?#25152;以我们在外面定义两个全局变量,修改代码如下


HTML5-4.png


然后我们弹出can这个对象的left值是多少


HTML5-5.png


我们点击一下棋盘,弹出来的是undefined,没有定义。这个算起来比?#19979;櫸常?#22240;为我们这个浏览器是居中的,因为居中的话,我们需要减去500,离左边是500个像素。我?#37096;?#20197;这样做,得到屏幕的宽度,然后减去600,再除以2就是它的坐标,看看这样计算对不对。得到屏幕的宽度就是screen.width减去600,除以2。因为我这个是居中的,大家的浏览器的大小都不一样。


HTML5-6.png


我们运行试一试,点击左上角,最终弹出了500。这是没问题的了。


左边是500像素,那我们这里定义一下leftOffset这个变量,就赋值于这个值。然后定义变量x和y接收点击的坐标相对于棋盘的值。


然后弹出y的值看?#30784;?/p>


HTML5-7.png


运行,我们点击一下左上角,弹出了32。那这里就是y还需要减去32。这两个表示得到点击canvas的坐标。


HTML5-9.png


知道坐标以后,我们就知道用户下子下载哪一列了。比如说我们点击了这些地方,就需要通过坐标计算这是多少行?多少列?这个地方,我们得推导这个算法。


HTML5-10.png


因为一格是40像素,假如说我们点击了44。算法应该是用44取余40,当这个余数小于我们的40除以2。(44%40<40/2)比如说我们点击的在这个位置。


HTML5-11.png


我们需要加个1:(44%40<40/2+1)


然后,根据推导出来的算法编写代码



HTML5-12.png


刷?#33853;?#35272;器,点击这里,弹出了2


HTML5-13.png


x坐标计算对了,计算y坐标

 

HTML5-14.png


知道坐标了,我们就可以画图。


我们?#28982;?#19968;个黑子:black。它的x坐标与我们的列有关系;它的y坐标与我们的行有关系。



HTML5-15.png


我们多次点击之后,出现了问题,点击之后,落子的位置偏离了。

HTML5-17.png


坐标好像没有算对,大家可以尝试着再算一下坐标。修改成这样的。


HTML5-18.png


运行浏览器来查看一下,仍然没对。再修改


var col=parseInt((e.clientX-20)/40)+1;

  var row=parseInt((e.clientY-20)/40)+1;


在后面加了一个1。再来运行浏览器,点击棋盘,这样效果就对了。

 

下子的时候,我们先下一个白子,白子下完了之后,再下一个黑子。


1) 我们在这里定义一个变量index,赋值为0。


HTML5-19.png


每下一次!我们让index的值增加一个。


2) 或者我们修改这个index,把它定义成一个变量叫做isBlack,赋值为true。如果它为true的话,下黑子;


HTML5-20.png


3) 那么,你点击第一次的时候,做一个判断,就是如果isBlack等于true的话,下一个黑子;否则的话,下一个白子。



HTML5-21.png


运行一下,这样就出现了白子和黑子的效果了。


HTML5-22.png


下完之后,我们还要讲数组做一个更改,我们将来还要算谁赢谁输。


1) 所以下完之后我们要把;比如说2为黑子,白子为1。


HTML5-23.png


运行


HTML5-24.png


这样,下棋我们就搞定了。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
? 2012-2016 www.znlucv.tw
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部

闲来玩十三水规律
彩名堂免费计划客户端手机版官网 白羊pk10冠军计划软件 必中时时彩计划软件 全程打闲九揽式投注法 时时彩一期7码计划 宝赢彩票软件 安卓版 合乐888hi彩稳赚技巧 玩彩票输了怎么赚回来 江苏快三计划软件下载 彩票最稳的投资方法