这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
让我猜猜你心中的牌,先随机生成 27 张牌,不能重复列出三列牌,然后记住其中一张,然后点击牌所在的列,多次就可以猜出你想的牌。 如果是 9 张只要猜 2 次,如果是 27 张就是猜 3 次。
让我猜猜你心中的牌,先随机生成 27 张牌,不能重复列出三列牌,然后记住其中一张,然后点击牌所在的列,多次就可以猜出你想的牌,具体实现如下,感兴趣的朋友可以参考下哈
实现方法(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]; 更多请查看:www.shengshiyouxi.com
- < !DOCTYPE html>
- < 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 (count < 27) { //生成随机的27张牌
- var temp = parseInt(Math.random() * 54) + 1;
- for (var i = 0; i < count + 1; i++) {
- if (temp == guess) { //如果重复就不要
- 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; i < 9; i++) { //乱序排序方法
- context.drawImage(data[random[temp1] * 3 + 0], 20, i * 30 + 40);
- context.drawImage(data[random[temp2] * 3 + 1], 20 + 100, i * 30 + 40);
- context.drawImage(data[random[temp3] * 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;
- data = 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>
- <p>
- 让我猜猜你心中的牌
- <br />
- 首先从列表中选择一张你心目中的牌,并且记住它,然后选择它所在的列,点击三次我将会猜出你心目中的牌。
- <br />
- 来试试吧,我懂你的!
- <br />
- 如果遇到牌无法显示,或者显示不全,请刷新.如果你的浏览器不支持HTML5,请更换浏览器,例如chrome,火狐等
- </p>
- <canvas width="700" height="400" id="canvas">
- 你的浏览器不支持HTML5,请更换浏览器,例如chrome,火狐等
- </canvas>
- <br />
- <input type="button" value="第一列" />
- <input type="button" value="第二列" />
- <input type="button" value="第三列" />
- <input type="button" value="再来一次" />
- < /body>
- < /html>
来源: http://www.phperz.com/article/17/0413/279696.html