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 相关文章推荐
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
Vue常用的全选/反选的示例代码
Feb 19 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
php 归并排序 数组交集
2011/05/10 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
详解Python中for循环的使用
2015/04/14 Python
详解Python迭代和迭代器
2016/03/28 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
Django卸载之后重新安装的方法
2017/03/15 Python
Python数据操作方法封装类实例
2017/06/23 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
django跳转页面传参的实现
2020/09/17 Python
Python 创建守护进程的示例
2020/09/29 Python
python switch 实现多分支选择功能
2020/12/21 Python
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
自荐信结尾
2013/10/27 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
党性分析材料格式
2014/12/19 职场文书