javascript 连连看代码出炉

0 && TmpInt0 && TmpInt0 && TmpInt0 && TmpInt";
for(j=0; j";
for(i=0; i";
}
else{
TmpInt--;
Matrix[i][j] = 1 + Math.floor( PicMax * Math.random() );
if(TmpInt";

//添图片(webdings图标)
TmpStr += String.fromCharCode(Matrix[i][j] + OffSet);//different pics
}

TmpStr += "

";
}
TmpStr += "

";
}
TmpStr += "

";
TmpInt = (RowMax-2) * (ColMax-2) / 2;//剩余数量,判断结束用。
//TmpStr += ""//背景音乐

document.getElementById("container").innerHTML = TmpStr;//输出表格
document.getElementById("timeleft").innerHTML = TmpTime;//显示剩余时间
document.getElementById("timebar").style.width = 600;//时间条
document.getElementById("timebar").style.backgroundColor = "green";

st = setInterval("ShowTime()",1000);//开始倒计时
}

//X方向连线。(有起点,无终点)
function LineX(x, y, xt){
for( i=x; i!=xt; (xP2.y){
P3=P1;
P1=P2;
P2=P3;
}
//P1下方1点(y+1)先纵向再横向是否可连接。(因为起点P1不为空,所以检测其下方一点)
if( LineY(P1.x, (P1.y+1), P2.y) && LineX(P1.x, P2.y, P2.x) ) return true;
//P1先向左侧连接,再检测该点再纵向再横向是否可连接P2。
for(j=(P1.x-1); j>=0; j--){
if(Matrix[j][P1.y]) break;
if( LineY(j, (P1.y+1), P2.y) && LineX(j, P2.y, P2.x) ) return true;
}
//P1先向右侧连接,再检测该点再纵向再横向是否可连接P2。
for(j=(P1.x+1); jP2.x){
P3=P1;
P1=P2;
P2=P3;
}
if( LineX((P1.x+1), P1.y, P2.x) && LineY(P2.x, P1.y, P2.y) ) return true;
for(j=(P1.y-1); j>=0; j--){
if(Matrix[P1.x][j]) break;
if( LineX((P1.x+1), j, P2.x) && LineY(P2.x, j, P2.y) ) return true;
}
for(j=(P1.y+1); j4 ){
document.getElementById("timebar").style.backgroundColor = "red";
}
else if( (TimeMax/TmpTime)>2 ){
document.getElementById("timebar").style.backgroundColor = "yellow";
}

if(!TmpTime){//剩余时间为0
clearInterval(st);//清除倒计时
document.getElementById("container").innerHTML = "";//清屏
document.getElementById("timeleft").innerHTML = "";
document.getElementById("timebar").style.backgroundColor = "white";
alert("时间到!");
}
}
//-->

行数 
列数 
图片数 
时间秒 
重置

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 原生JavaScript实现连连看游戏(附源码)

    向大家推荐一款原生JavaScript版连连看游戏,源码下载,首页如下图所示:  首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>

  • 用javascript做一个webgame连连看大家看下

    最后成品代码写的仓促,没有容错,封装也不合理,只实现了核心部分,其他部分,喜欢添加的旧添加吧. 下面就开始我的教程(姑且算是教程吧,草草写点吧,时间太少,大家原谅) 以最高难度游戏级别作的分析. 第一步,大体分析 看看游戏主要包含哪些元素,发现3部分,一些成对的图片块,一个能盛图片块的方盘容器,一个能连接两个图块的线. 第二步,元素分析 图块:图块一共有32种不同的图案,每种图案4张,图块会相应鼠标的点击,图块会消失,图块有高度和宽度. 方盘:能承载128个图块,2维承载,横向16块,纵向8块,

  • C# 实现连连看功能(推荐)

    本文是利用C#实现连连看的小例子,以供学习分享使用. 思路: 初始化布局(横竖十行十列,共100个单元格,每一个格一个按钮,背景图为水果图片,随机生成) . 初始化对应棋盘(用二维数组表示[0表示空白,非0表示界面对象])和页面相对应,同步操作. 判断点击的图片是否可以消掉(转化为二维数组[以水平方向,垂直方向,一个拐角,两个拐角的步骤进行判断]). 如可以消掉,隐藏图片,增加分数. 时间限制,采用倒计时方式. 涉及知识点: 线程:Thread,后台运行时间控制[倒计时方式]. 界面闪烁:当界面

  • JavaScript编写连连看小游戏

    天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果图: 写连连看之前要先考虑哪些呢? 1:如何判断两个元素可以连接呢, 刚刚开始的时候我也纳闷, 可以参考这里:打开: 2:模板引擎怎么选择呢, 我用了底线库的template,因为语法简单. 本来想用Handlebars,但是这个有点大啊, 而且底线库也提供很多常用工具方法( •̀ ω •́ )y:

  • javascript 连连看代码出炉

    0 && TmpInt0 && TmpInt0 && TmpInt0 && TmpInt"; for(j=0; j"; for(i=0; i"; } else{ TmpInt--; Matrix[i][j] = 1 + Math.floor( PicMax * Math.random() ); if(TmpInt"; //添图片(webdings图标) TmpStr += String.fromChar

  • 2022编程语言需求排名出炉:第一不是Python,也不是Java

    目录 1. JavaScript / TypeScript 2. Python 3. Java 4. C# 5. PHP 6. C/C++ 7. Ruby 8. GO 总结 编程语言的流行程度.发展前景.就业市场这些一直都是程序员们非常关注的话题,需求排名是程序员们关注学习的风向标,毕竟是市场经济,学以致用,如果热门编程不了解,都不好意思告诉别人你是程序员.编程语言的种类有超过200+,但还有很多不为人知. 2022年也快接近尾声,今年最受欢迎使用最多的语言有哪些呢? 从 2021 年 10 月

  • JavaScript实现弹出广告功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <span style="white-space:pre"> </span>var i=0;//记录次数 var timer;//定时器id //设置弹出广告 onload=function(){ //间隔四秒展示一次广告 timer = setInterval(showAd,4000); } //展示2秒以后隐藏广告的方法 function showAd(){ i++;//展示的次数加1 //若i等于3清空

  • JavaScript检测弹出窗口是否已经关闭的方法

    本文实例讲述了JavaScript检测弹出窗口是否已经关闭的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: var win = window.open('foo.html','windowName',"width=200,height=200,scrollbars=no"); var timer = setInterval(function() {       if(win.closed) {          clearInterval(timer);     

  • JavaScript制作弹出层效果

    先给大家展示下效果图,效果图如下所示: 1.引用相关easyui.min.js,easyui-lang-zh_CN.js 等js 文件: 2.前台代码 <input type="text" id="txt_Type" style="display:none" /> <div class="macFormItem" id="divSQXLH" runat="server"

  • 使用JavaScript实现弹出层效果的简单实例

    声明 阅读本文需要有一定的HTML.CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 <!DOCTYPE html> <html> <head> <title>Window对象</title> <meta charset="utf-8"> </head> <body> <a hr

  • JavaScript检查弹出窗口是否被阻拦的方法技巧

    出框口很有用,需要弹出窗口.对于开发这样的网站的程序员,他们有个棘手的问题,他们不知道这些弹出窗口是否被浏览器或各种浏览器插件给屏蔽了,没有弹出来.当然,浏览器会通知用户,但这些很少会引起用户的注意.下面是一个简单的方法来测试你的弹出窗口是否被阻拦了. The JavaScript 复制代码 代码如下: var windowName = 'userConsole'; var popUp = window.open('/popup-page.php', windowName, 'width=100

  • JavaScript实现弹出窗口效果

    本文实例为大家分享了JavaScript实现弹出窗口的具体代码,供大家参考,具体内容如下 思路 1.总体使用两个div,一个作为底层展示,一个做为弹出窗口: 2.两个窗口独立进行CSS设计,通过display属性进行设置现实与隐藏,此处建议使用display属性而不是visibility属性,visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间,影响布局: 3.在js内设计两个onclick事件,分别指定函数,分别为开启弹窗和关闭弹窗. 一.设置两个di

  • 分享十八个杀手级JavaScript单行代码

    前言 JavaScript不断发展壮大,因为它是最容易上手的语言之一,因此为市场上的新成为技术怪才打开了大门. 而且,无论你是JavaScript的新手还是更多的专业开发人员,学习新知识总是一件好事. 本文整理了一些非常有用的单行代码,这些单行代码可以帮助你提高工作效率. 什么是单行代码? 单行代码是一种代码实践,其中我们仅用一行代码执行某些功能. 单行代码实例 1.复制到剪贴板 使用 navigator.clipboard.writeText 轻松将任何文本复制到剪贴板. const copy

  • JavaScript实现弹出式可拖动登录框

    本文实例为大家分享了JavaScript实现弹出式可拖动登录框的具体代码,供大家参考,具体内容如下 效果图展示: 总体来说实现起来比较简单,老规矩,先搭建html框架,代码如下: <div class="login-header"><a id="link" href="javascript:;" >点击,弹出登录框</a></div>     <div id="login"

随机推荐