javascript 和HTML5 利用canvas构建 猜牌游戏（让我猜猜你心中的牌）
<div id="cnblogs_post_body">让我猜猜你心中的牌，先随机生成27张牌，不能重复列出三列牌，然后记住其中一张，然后点击牌所在的列，多次就可以猜出你想的牌。
如果是9张只要猜2次，如果是27张就是猜3次。
实现方法（27张）：
如果点击了第三列，那就是说牌一定在这9张里面，就把第三列的9张牌平均给每列分3张，假设编号为123，456，789
再点击一次，如果点击第二列，那么猜的牌就在456里面，再分到三列，4,5,6
再点击一次，就可以知道牌是哪个了。
实现算法：
我是使用一维数组实现，第一次猜第三列就把第三列的数据和0,1,2,3,4,5,6,7,8替换，
那么所猜的数就在前面9个，第二次猜第二列就把所在列的三个和0,1,2替换，那么就在前面三个了。
输出按照三列输出，
不过有个问题是，这样后面的牌就不会乱了，别人就知道你为什么猜到的了
所以在输出的时候就要乱序输出，只能够上下乱序输出，不能左右乱序
var random = new Array(5);//自定义二维乱序表
random = ;
random = ;
random = ;
random = ;
random = ;
展示地址：http://5gshidai.sinaapp.com/lab/board.html
如果需要图片请到我的百度网盘下载
http://pan.baidu.com/share/link?shareid=148635&uk=1932493422
http://images.cnitblog.com/blog/391736/201212/18173300-1114aea554834a20919a6b646242cb78.png
<div class="cnblogs_code"><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> var data = new Array(27); var canvas; var context; var time = 0; var random = new Array(5);//自定义二维乱序表 random = ]; random[1] = ]; random[2] = ]; random[3] = ]; random[4] = ]; function start() { var guess = new Array(); var count = 0; while (count < 27) {//生成随机的27张牌 var temp = parseInt(Math.random() * 54) + 1; for (var i = 0; i < count + 1; i++) { if (temp == guess) {//如果重复就不要 temp = 100; break; } } if (temp != 100) { guess = temp; data = new Image(); data.src = "images/" + temp + ".gif"; count++; } } } function draw() { canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); var temp1 = parseInt(Math.random() * 5); var temp2 = parseInt(Math.random() * 5); var temp3 = parseInt(Math.random() * 5); for (var i = 0; i < 9; i++) {//乱序排序方法 context.drawImage(data * 3 + 0], 20, i * 30 + 40); context.drawImage(data * 3 + 1], 20 + 100, i * 30 + 40); context.drawImage(data * 3 + 2], 20 + 200, i * 30 + 40); } } function play(index) { if (time >= 3) alert("请点击再来一次"); for (var i = 0; i < (3 - time) * 3; i++) { var temp = data; data = data]; data* 3 + index - 1] = temp; } time++; if (time >= 3) { context.drawImage(data[0], 400, 50); return; } draw(); } start(); </script> <style type="text/css"> input { margin-right: 60px; } </style></head><body > <p> 让我猜猜你心中的牌<br /> 首先从列表中选择一张你心目中的牌，并且记住它，然后选择它所在的列，点击三次我将会猜出你心目中的牌。<br /> 来试试吧，我懂你的！<br /> 如果遇到牌无法显示，或者显示不全，请刷新.如果你的浏览器不支持HTML5，请更换浏览器，例如chrome，火狐等 </p> <canvas width="700" height="400" id="canvas">你的浏览器不支持HTML5，请更换浏览器，例如chrome，火狐等</canvas> <br /> <input type="button" value="第一列"/> <input type="button" value="第二列"/> <input type="button" value="第三列"/> <input type="button" value="再来一次"/></body></html>
页:
[1]