javascript和HTML5利用canvas构建猜牌游戏
admin
2023-06-11 19:41:41
0

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

javascript和HTML5利用canvas构建猜牌游戏

                          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 = "p_w_picpaths/" + 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();                   input {             margin-right: 60px;         }            

         让我猜猜你心中的牌         首先从列表中选择一张你心目中的牌,并且记住它,然后选择它所在的列,点击三次我将会猜出你心目中的牌。         来试试吧,我懂你的!         如果遇到牌无法显示,或者显示不全,请刷新.如果你的浏览器不支持HTML5,请更换浏览器,例如chrome,火狐等     

     你的浏览器不支持HTML5,请更换浏览器,例如chrome,火狐等                           

相关内容

热门资讯

华为公布半导体领域重大突破 5月25日,2026国际电路与系统研讨会在上海举行,华为公司董事、半导体业务部总裁何庭波在题为《半导...
全焦段4K实况照片+8000m... 一、前言:全能无短板!荣耀600 Pro闪亮登场 现如今的中高端手机市场,可以说是卷得五花八门。大家...
强烈信号,家长们现在要连夜排队... 北京家长凌晨3点排队,只为孩子能上个中职学校。5月10日这天,是北京昌平职业技术学校自主招生面试日:...
自主选课+实战赋能,北京地铁公... 5月25日,据北京地铁公司消息,为精准破解员工岗位实训短板、满足个性化成长需求,近期北京地铁公司优化...
荣耀600 Pro测评:“销量... 荣耀的数字系列是一款典型的“销量大于网上声量”的产品。 在过去这些年,荣耀的数字系列一直都是3000...
美团、腾讯参投!机器人公司天机... 图片来源:广东天机智能系统有限官网 5月25日,天机机器人公众号发布消息称,广东天机智能系统有限公司...
伊朗外交部:中国在推动停火谈判... 伊朗外交部发言人巴加埃25日在伊朗首都德黑兰召开的记者会上谈及地区局势时表示,中国在推动地区停火与谈...
谷歌对“AI投毒”重拳出击 文 | 字母AI 当你某天一觉醒来,发现自己被困在布满屏幕的房间里,每个屏幕中播放的不是你感兴趣的...
斥资约5亿元!中国前首富钟睒睒... 快科技5月25日消息,当固态电池被视为动力电池的“终极路线”,中国前首富悄悄入局。 近日,农夫山泉创...
浑南智造闪耀“东北超”开幕式 ... 近日,备受瞩目的“东北超”开幕式震撼启幕。来自浑南区的新松机器人自动化股份有限公司携工业机器人SR2...