time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > Javascript和HTML5利用canvas实现猜牌游戏示例代码

Javascript和HTML5利用canvas实现猜牌游戏示例代码

时间:2012-12-19 22:04 点击:882次 字体:[ ]




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

Javascript和HTML5利用canvas实现猜牌游戏示例代码_www.fengfly.com

 

  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5.     <title></title> 
  6.     <script type="text/javascript"> 
  7.         var data = new Array(27); 
  8.         var canvas; 
  9.         var context; 
  10.         var time = 0
  11.         var random = new Array(5);//自定义二维乱序表 
  12.         random[0] = [5, 2, 8, 7, 1, 3, 4, 6, 0]; 
  13.         random[1] = [2, 5, 8, 0, 4, 6, 3, 7, 1]; 
  14.         random[2] = [6, 7, 2, 8, 0, 1, 5, 3, 4]; 
  15.         random[3] = [2, 1, 6, 3, 5, 4, 7, 0, 8]; 
  16.         random[4] = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 
  17.  
  18.         function start() { 
  19.             var guess = new Array(); 
  20.             var count = 0
  21.             while (count < 27) {//生成随机的27张牌 
  22.                 var temp = parseInt(Math.random() * 54) + 1; 
  23.                 for (var i = 0; i < count + 1; i++) { 
  24.                     if (temp == guess[i]) {//如果重复就不要 
  25.                         temp = 100
  26.                         break; 
  27.                     } 
  28.                 } 
  29.                 if (temp != 100) { 
  30.                     guess[count] = temp; 
  31.                     data[count] = new Image(); 
  32.                     data[count].src = "images/" + temp + ".gif"; 
  33.                     count++; 
  34.                 } 
  35.             } 
  36.         } 
  37.         function draw() { 
  38.             canvas = document.getElementById("canvas"); 
  39.             context = canvas.getContext("2d"); 
  40.             var temp1 = parseInt(Math.random() * 5); 
  41.             var temp2 = parseInt(Math.random() * 5); 
  42.             var temp3 = parseInt(Math.random() * 5); 
  43.             for (var i = 0; i < 9; i++) {//乱序排序方法 
  44.                 context.drawImage(data[random[temp1][i] * 3 + 0], 20, i * 30 + 40); 
  45.                 context.drawImage(data[random[temp2][i] * 3 + 1], 20 + 100, i * 30 + 40); 
  46.                 context.drawImage(data[random[temp3][i] * 3 + 2], 20 + 200, i * 30 + 40); 
  47.             } 
  48.         } 
  49.         function play(index) { 
  50.             if (time >= 3) 
  51.                 alert("请点击再来一次"); 
  52.             for (var i = 0; i < (3 - time) * 3; i++) { 
  53.                 var temp = data[i]; 
  54.                 data[i] = data[i * 3 + index - 1]; 
  55.                 data[i * 3 + index - 1] = temp; 
  56.             } 
  57.             time++; 
  58.             if (time >= 3) { 
  59.                 context.drawImage(data[0], 400, 50); 
  60.                 return; 
  61.             } 
  62.             draw(); 
  63.         } 
  64.         start(); 
  65.     </script> 
  66.     <style type="text/css"> 
  67.         input { 
  68.             margin-right: 60px; 
  69.         } 
  70.     </style> 
  71. </head> 
  72. <body onload="draw()"> 
  73.     <p> 
  74.         让我猜猜你心中的牌<br /> 
  75.         首先从列表中选择一张你心目中的牌,并且记住它,然后选择它所在的列,点击三次我将会猜出你心目中的牌。<br /> 
  76.         来试试吧,我懂你的!<br /> 
  77.         如果遇到牌无法显示,或者显示不全,请刷新.如果你的浏览器不支持HTML5,请更换浏览器,例如chrome,火狐等 
  78.     </p> 
  79.     <canvas width="700" height="400" id="canvas">你的浏览器不支持HTML5,请更换浏览器,例如chrome,火狐等</canvas> 
  80.     <br /> 
  81.     <input type="button" value="第一列" onclick="play(1)" /> 
  82.     <input type="button" value="第二列" onclick="play(2)" /> 
  83.     <input type="button" value="第三列" onclick="play(3)" /> 
  84.     <input type="button" value="再来一次" onclick="location.reload()" /> 
  85. </body> 
  86. </html> 

 



本文地址 : http://www.fengfly.com/plus/view-210994-1.html
标签: JavaScript HTML5 示例代码 canvas 猜牌游戏
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: