javascript和HTML5利用canvas構建猜牌游戲實現算法

讓我猜猜你心中的牌先隨機生成張牌不能重復列出三列牌然後記住其中一張然後點擊牌所在的列多次就可以猜出你想的牌具體實現如下感興趣的朋友可以參考下哈  

　　讓我猜猜你心中的牌先隨機生成張牌不能重復列出三列牌然後記住其中一張然後點擊牌所在的列多次就可以猜出你想的牌
如果是張只要猜次如果是張就是猜次

實現方法（張）
如果點擊了第三列那就是說牌一定在這張裡面就把第三列的張牌平均給每列分張假設編號為
再點擊一次如果點擊第二列那麼猜的牌就在裡面再分到三列
再點擊一次就可以知道牌是哪個了

實現算法
我是使用一維數組實現第一次猜第三列就把第三列的數據和替換
那麼所猜的數就在前面個第二次猜第二列就把所在列的三個和替換那麼就在前面三個了
輸出按照三列輸出 不過有個問題是這樣後面的牌就不會亂了別人就知道你為什麼猜到的了
所以在輸出的時候就要亂序輸出只能夠上下亂序輸出不能左右亂序
var random = new Array();//自定義二維亂序表
random[] = [ ];
random[] = [ ];
random[] = [ ];
random[] = [ ];
random[] = [ ];
更多請查看wwwshengshiyouxicom
 

復制代碼 代碼如下:

　　
< !DOCTYPE html>
< html xmlns="
< head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title></title>
<script type="text/JAVAscript">
var data = new Array();
var canvas;
var context;
var time = ;
var random = new Array();//自定義二維亂序表
random[] = [ ];
random[] = [ ];
random[] = [ ];
random[] = [ ];
random[] = [ ];
function start() {
var guess = new Array();
var count = ;
while (count < ) {//生成隨機的張牌
var temp = parseInt(Mathrandom() * ) + ;
for (var i = ; i < count + ; i++) {
if (temp == guess) {//如果重復就不要
temp = ;
break;
}
}
if (temp != ) {
guess[count] = temp;
data[count] = new Image();
data[count]src = "images/" + temp + "gif";
count++;
}
}
}
function draw() {
canvas = documentgetElementById("canvas");
context = canvasgetContext("d");
var temp = parseInt(Mathrandom() * );
var temp = parseInt(Mathrandom() * );
var temp = parseInt(Mathrandom() * );
for (var i = ; i < ; i++) {//亂序排序方法
contextdrawImage(data[random[temp] * + ] i * + );
contextdrawImage(data[random[temp]* + ] + i * + );
contextdrawImage(data[random[temp]* + ] + i * + );
}
}
function play(index) {
if (time >= )
alert("請點擊再來一次");
for (var i = ; i < ( time) * ; i++) {
var temp = data;
data= data[i * + index ];
data[i * + index ] = temp;
}
time++;
if (time >= ) {
contextdrawImage(data[] );
return;
}
draw();
}
start();
</script>
<style type="text/css">
input {
marginright: px;
}
</style>
< /head>
< body>
<p>
讓我猜猜你心中的牌<br />
首先從列表中選擇一張你心目中的牌並且記住它然後選擇它所在的列點擊三次我將會猜出你心目中的牌<br />
來試試吧我懂你的！<br />
如果遇到牌無法顯示或者顯示不全請刷新如果你的浏覽器不支持HTML請更換浏覽器例如chrome火狐等
</p>
<canvas width="" height="" id="canvas">你的浏覽器不支持HTML請更換浏覽器例如chrome火狐等</canvas>
<br />
<input type="button" value="第一列" />
<input type="button" value="第二列" />
<input type="button" value="第三列" />
<input type="button" value="再來一次" />
< /body>
< /html>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20112.html