javascript 和HTML5 利用canvas构建猜牌游戏（让我猜猜你心中的牌）【图文说明】...

让我猜猜你心中的牌，先随机生成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[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];

展示地址：http://5gshidai.sinaapp.com/lab/board.html

如果需要图片请到我的百度网盘下载

http://pan.baidu.com/share/link?shareid=148635&uk=1932493422

<!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[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];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[i]) {//如果重复就不要temp = 100;break;}}if (temp != 100) {guess[count] = temp;data[count] = new Image();data[count].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[random[temp1][i] * 3 + 0], 20, i * 30 + 40);context.drawImage(data[random[temp2][i] * 3 + 1], 20 + 100, i * 30 + 40);context.drawImage(data[random[temp3][i] * 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[i];data[i] = data[i * 3 + index - 1];data[i * 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 οnlοad="draw()"><p>让我猜猜你心中的牌<br />首先从列表中选择一张你心目中的牌，并且记住它，然后选择它所在的列，点击三次我将会猜出你心目中的牌。<br />来试试吧，我懂你的！<br />
        如果遇到牌无法显示，或者显示不全，请刷新.如果你的浏览器不支持HTML5，请更换浏览器，例如chrome，火狐等</p><canvas width="700" height="400" id="canvas">你的浏览器不支持HTML5，请更换浏览器，例如chrome，火狐等</canvas><br /><input type="button" value="第一列" οnclick="play(1)" /><input type="button" value="第二列" οnclick="play(2)" /><input type="button" value="第三列" οnclick="play(3)" /><input type="button" value="再来一次" οnclick="location.reload()" />
</body>
</html>

javascript 和HTML5 利用canvas构建猜牌游戏（让我猜猜你心中的牌）【图文说明】...相关推荐

在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
html5 自动扣图,html5利用canvas实现颜色容差抠图功能
利用canvas的getImageData,我们可以获取到一张图片每一个像素的信息,而通过对每一个像素信息的对比,我们就可以找到需要消去的像素点.比如下面这一张图片,如果我们想要扣去白色部分(粉色是b ...
HTML5利用Canvas绘制图形(Canvas基本知识、绘制矩形、使用路径和图形组合)
绘制图形有很多方法,可以借助Flash实现,也可以使用SVG和VML来绘图.本次将要学习一种新的灰土方法--使用Canvas元素,它是基于HTML5原生的绘图功能.使用Canvas元素,可以绘制图形, ...
HTML5 利用canvas API 展示阴影效果
HTML5的Canvas自带API可以显示阴影效果,主要还是在画布(canvas)的上下文对象(context)上做文章 <!DOCTYPE html> <head> < ...
php图片素描化,html5利用canvas实现图片转素描效果
本章给大家介绍html5如何利用canvas实现图片转素描效果.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 素描滤镜原理: 最基础的算法就是: 1.去色:(去色公式:gray = ...
如何用手机HTML制作哆啦a梦,HTML5利用canvas绘制哆啦A梦头部-电脑自学网
html5的canvas是很强大的,下面本篇文章使用html5 canvas 实现一个简单的哆啦A梦头部.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 效果如下: 代码如下: 您的 ...
HTML5利用Canvas绘制图形(绘制渐变、模式、变换)
绘制渐变渐变是一种很普遍的视觉形象,能带来视觉上的舒适感.在Canvas中,绘图API提供了两个原生的渐变方法,包括线性渐变和径向渐变.渐变,在颜色集上使用逐步抽样的算法,可以应用的描边样式和填充样 ...
基于HTML5canvars的小游戏,HTML5之canvas简单射箭小游戏
最近折腾一个自己个人主页,无奈履历太渣,能放在首页的东西不多,于是想给自己的个人主页上添加一个小游戏.遂参考了各种教程,使用HTML5的canvas元素做了一个相当原始的东西出来,效果如图~ QQ截图 ...
html5在图片中加链接,JavaScript、html5、canvas实现图片上画超链接
本文主要为大家详细介绍了JavaScript html5 canvas实现图片上画超链接,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 1. html 2. javascrip ...

javascript 和HTML5 利用canvas构建猜牌游戏（让我猜猜你心中的牌）【图文说明】...

javascript 和HTML5 利用canvas构建猜牌游戏（让我猜猜你心中的牌）【图文说明】...相关推荐

最新文章

热门文章

javascript 和HTML5 利用canvas构建 猜牌游戏（让我猜猜你心中的牌）【图文说明】...

javascript 和HTML5 利用canvas构建 猜牌游戏（让我猜猜你心中的牌）【图文说明】...相关推荐

最新文章

热门文章

javascript 和HTML5 利用canvas构建猜牌游戏（让我猜猜你心中的牌）【图文说明】...

javascript 和HTML5 利用canvas构建猜牌游戏（让我猜猜你心中的牌）【图文说明】...相关推荐