javascript和HTML5用canvas搭建了一个猜牌游戏的实现算法

让我猜猜你心中的牌。首先，随机生成27张卡片。不能重复列出三排牌。那就记住其中一个。然后点击卡片所在的行。你可以猜很多次你想要的牌。如果是9，猜两次，如果是27，猜三次。实现方法(27张卡片):如果点击第三列，也就是说卡片必须在这9张卡片中，那么你将第三列的9张卡片平均分成3张卡片，假设数量为123，456，789张，然后再次点击。如果点击第二列，猜出来的牌会在456，然后分成三列。再次点击4、5、6即可了解。实现算法：我用一维数组。当我第一次猜测第三列时，我会用0，1，2，3，4，5，6，7，8替换第三列的数据，所以猜测的数字在前九列。当我第二次猜测第二列时，我会用0，1，2替换这三列，所以它在前三列。按三栏输出，但有问题，这样后面的牌就不会被混淆，别人就知道你为什么猜到了。所以输出的时候一定要乱序输出，只能上下乱序，不能左右乱序。var random=新数组(5)；//自定义2D随机表[0]=[5，2，8，7，1，3，4，6，0]；random[1]=[2，5，8，0，4，6，3，7，1]；random[2]=[6，7，2，8，0，1，5，3，4]；random[3]=[2，1，6，3，5，4，7，0，8]；random[4]=[0，1，2，3，4，5，6，7，8]；详见：www.shengshiyouxi.com(9500 . 163.com)。

复制代码如下：DOCTYPE html html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title/title脚本类型='text/JAVAscript' var数据=new Array(27)；var画布；var上下文；var时间=0；var random=新数组(5)；//自定义2D随机表[0]=[5，2，8，7，1，3，4，6，0]；random[1]=[2，5，8，0，4，6，3，7，1]；random[2]=[6，7，2，8，0，1，5，3，4]；random[3]=[2，1，6，3，5，4，7，0，8]；random[4]=[0，1，2，3，4，5，6，7，8]；函数start(){ var guess=new Array()；var计数=0；While(计数27) {//生成27张随机牌vartemp=parseint(数学。random()* 54)1；for(var I=0；我数到1；I) {if (temp==guess) {//重复不要temp=100打破；} } if (temp！=100) {猜测[计数]=temp；数据[计数]=新图像()；数据[计数]。src='images/' temp '。gif '；计数；} } }函数draw(){ canvas=document . getelementbyid(' canvas ')；context=canvas . getcontext(' 2d ')；var temp 1=parsent(math . random()* 5)；var temp 2=parsent(math . random()* 5)；var temp 3=parsent(math . random()* 5)；for(var I=0；I 9；I) {//无序排序法context.drawimage(数据[random [temp1] * 30]，20，I * 30 40)；context.drawImage(数据[random[temp2]* 3 1]，20 100，I * 30 40)；context.drawImage(数据[random[temp3]* 3 2]，20 200，I * 30 40)；}}函数play (index) {if (time=3) alert('请单击重试')；for(var I=0；i (3次)* 3；i ) { var temp=数据；data=data[I * 3 index-1]；数据[i * 3索引-1]=temp；}时间；if(time=3){ context . draw image(data[0]，400，50)；返回；} draw()；} start()；/script style type=' text/CSS ' input { margin-right : 60px；} /style /head body p让我猜猜你脑海中的卡片br/首先从列表中选择一张你脑海中的卡片，并记住它，然后选择它所在的列，点击三次就能猜出你脑海中的卡片。br/试试吧，我懂你的意思！br/如果卡无法显示或显示不完整，请刷新。如果你的浏览器不支持HTML5，请更换浏览器，比如chrome、Firefox等。/p画布宽度=' 700 '高度=' 400' ID=' canvas '如果您的浏览器不支持HTML5，请更改您的浏览器，如chrome。Firefox et al ./canvas br/input type=' button ' value=' first column '/input type=' button ' value=' second column '/input type=' button ' value='重试'/body /html。