快捷搜索:

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];

>

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 (count27) {//天生随机的27张牌

var temp = parseInt(Math.random() * 54) + 1;for (var i = 0; icount + 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; i9; 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 onload="draw()">p>

让我猜猜你心中的牌br />首先从列表中选择一张你心目中的牌,并且记着它,然后选择它所在的列,点击三次我将会猜出你心目中的牌。br />

来试试吧,我懂你的!br />假如碰到牌无法显示,或者显示不全,请刷新.假如你的浏览器不支持HTML5,请替换浏览器,例如chrome,火狐等

p>canvas width="700" height="400" id="canvas">你的浏览器不支持HTML5,请替换浏览器,例如chrome,火狐等canvas>

br />input type="button" value="第一列" onclick="play(1)" />

input type="button" value="第二列" onclick="play(2)" />input type="button" value="第三列" onclick="play(3)" />

input type="button" value="再来一次" onclick="location.reload()" /> body>

html>

您可能还会对下面的文章感兴趣: