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可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
详解vue项目构建与实战
Jun 27 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
vue实现文件上传功能
Aug 13 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
vue实现自定义多选按钮
Jul 16 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导出oracle库的php代码
2009/04/20 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
详细解读Python中的__init__()方法
2015/05/02 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
Django如何配置mysql数据库
2018/05/04 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
python 中xpath爬虫实例详解
2019/08/26 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
Python pickle模块实现对象序列化
2019/11/22 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
python FTP编程基础入门
2021/02/27 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
德国足球商店:OUTFITTER
2019/05/06 全球购物
安全承诺书范文
2014/03/26 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
欠款起诉书范文
2015/05/19 职场文书
公开致歉信
2019/06/24 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang