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中的toUTCString()方法使用详解
Jun 12 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
一端时间轮换的广告
2006/06/26 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
Python中字符串的处理技巧分享
2016/09/17 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
科室工作的个人自我评价
2013/10/30 职场文书
信息管理员岗位职责
2013/12/01 职场文书
大课间活动实施方案
2014/03/06 职场文书
主持人演讲稿
2014/05/13 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
《观察物体》教学反思
2016/02/17 职场文书
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers
DQL数据查询语句使用示例
2022/12/24 MySQL