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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
javascript编程起步(第二课)
Jan 10 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
js实现金山打字通小游戏
Jul 24 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
php表单转换textarea换行符的方法
2010/09/10 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
python实现多线程的两种方式
2016/05/22 Python
使用python为mysql实现restful接口
2018/01/05 Python
python之文件读取一行一行的方法
2018/07/12 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
工程测量与监理专业应届生求职信
2013/11/27 职场文书
水电站项目建议书
2014/05/12 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
法务专员岗位职责
2015/02/14 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python