﻿ javascript和HTML5利用canvas構建猜牌游戲實現算法_電腦知識網

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

2022-06-13   來源: JSP教程

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

var random = new Array();//自定義二維亂序表
random[] = [ ];
random[] = [ ];
random[] = [ ];
random[] = [ ];
random[] = [ ];

< !DOCTYPE html>
< html xmlns="
<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 >= )
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>
< body>
<p>

</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