javascript和HTML5利用canvas构建猜牌游戏实现算法


Posted in Javascript onJuly 17, 2013

让我猜猜你心中的牌,先随机生成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];
更多请查看:www.shengshiyouxi.com
javascript和HTML5利用canvas构建猜牌游戏实现算法 

< !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>
Javascript 相关文章推荐
MSN消息提示类
Sep 05 Javascript
类似框架的js代码
Nov 09 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
Bootstrap表单布局
Jul 19 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 #Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 #Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 #Javascript
js导出格式化的excel 实例方法
Jul 17 #Javascript
js检查页面上有无重复id的实现代码
Jul 17 #Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 #Javascript
jcrop基本参数一览
Jul 16 #Javascript
You might like
ThinkPHP php 框架学习笔记
2009/10/30 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
vue源码解析之事件机制原理
2018/04/21 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
员工安全责任书范本
2014/07/24 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
外出考察学习心得体会
2016/01/18 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis