备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

连连看html游戏全代码js、jquery操作

2023-02-22 187
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 连连看html游戏全代码js、jquery操作

我会把html文件、css文件提供下载地址，文件夹路径也展示给大家。但是图片就不给大家了，毕竟博主辛辛苦苦做出来的游戏。 但是我其实是很愿意给那些为了自己锻炼而需要参考我的代码的同志们。所以，大家有需要的话

点击下载：https://download.csdn.net/download/qq_43592352/12368553

运行图片

image.png

目录路径

image.png

连连看水果方块版.html

<html>
<head>
    <title>水果连连看</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body style="background:rgba(161, 92, 2, 0.651)">
    <div id=container>
        <div id=left-tab>
                <div id=tab_time class=tabStyle><p><span></span></p></div>
                <button id=re_button>重新开始</button>
        </div>
        <div id=right-con>
                <div id=gameBox>
                </div>
        </div>
    </div>
</body>
<script  type="text/javascript">
    var boxDomArray=new Array();
    var boxDomNum=196;
    var hasSelected=0;
    var selectedIndex=-1;
    var fruitPic=new Array('','css/img/1.png','css/img/2.png','css/img/3.png','css/img/4.png','css/img/5.png','css/img/6.png','css/img/7.png','css/img/8.png',
                'css/img/9.png','css/img/10.png','css/img/11.png','css/img/12.png','css/img/13.png');
/**********************自定义便捷函数*******************************/
function getRandom(min,max){//获取在区间[min.max]内的int数
        var s;
        s=parseInt(Math.random()*max+1);
        while(s<min)
        {
        s=parseInt(Math.random()*max+1);
        }
        return s;
    }
var initDataFlag=new Array();
for(var i=0;i<boxDomNum;i++)
    initDataFlag[i]=-1;
function isNum(num){
    var flag=0;
    for(var i=0;i<boxDomNum;i++)
        if(num==initDataFlag[i]) flag=1;
    return flag;
}
/**************************系统设置*****************************************/
    /***封装游戏容器居中*****/
    function onResizeContainer(){
        var screenHeight=parseInt($(window).height()); //浏览器时下窗口可视区域高度
        var screenWidth=parseInt($(window).width()); //浏览器时下窗口可视区域高度
        var containerHeigth=parseInt($("#container").height());//container容器高度
        var containerWidth=parseInt($("#container").width());//container容器宽度
        $("#container").css({
        'marginLeft':(screenWidth-containerWidth)/2+'px',
        'marginTop':(screenHeight-containerHeigth)/2+'px',
        })
    }
    onResizeContainer();
    //时间
    var minute=0,second=0;
    function timedCount()
    {
        if(second==60) {second=0;minute++;}
        second++;
        $("span")[0].innerHTML="时间 "+(minute>9?minute:"0"+minute)+":"+(second>9?second:"0"+second);
        setTimeout("timedCount()",1000); 
    }
    timedCount();
/******************************游戏开始****************************/
    //初始化196个方格容器、html的文本
    function initialHtml(i){
        var div=$('<div class=box index='+i+' exist=1></div>');
        $("#gameBox").append(div);
    }
    for(var i=0;i<196;i++) initialHtml(i);
    //初始化游戏图片、数据以及一些后台数据
    function initialData(){
        for(var i=0;i<boxDomNum;i++)//把196个格子存为jq对象数组，方便访问，注意boxDomArray是全局变量
            boxDomArray[i]=$(".box").eq(i);
        for(var i=0;i<98;i++){
            var nowData=getRandom(1,13);
            var color=['','yellow','green','grey','wheat','sandybrown','red','pink','purple','teal','violet'];
            var data_l=getRandom(0,196)-1,data_r=getRandom(0,196)-1;
            while(isNum(data_l)) data_l=getRandom(0,196)-1;
            while(isNum(data_r)||data_l==data_r) data_r=getRandom(0,196)-1;
            initDataFlag[i*2]=data_l;initDataFlag[i*2+1]=data_r;
            boxDomArray[data_l].attr('value',nowData);boxDomArray[data_r].attr('value',nowData);
            boxDomArray[data_l].css('background','url('+fruitPic[nowData]+')');
            boxDomArray[data_r].css('background','url('+fruitPic[nowData]+')');
        }
    }
    initialData();
    $(".box").on("click",function(e){
        if(hasSelected==0){
            if($(e.target).attr("exist")!=0){
                $(e.target).css('border','1px solid black');
                selectedIndex=$(e.target).attr('index');
                hasSelected=1;
            }
        }
        else if(hasSelected==1){
            //判定操作
            if($(e.target).attr("index")!=selectedIndex){
            var nowIndex=$(e.target).attr('index');
            boxDomArray[selectedIndex].css('border','none');
            if(check_1(selectedIndex,nowIndex))
            {
                boxDomArray[selectedIndex].attr("exist",0);
                boxDomArray[nowIndex].attr("exist",0);
                boxDomArray[selectedIndex].css("background",'none');
                boxDomArray[nowIndex].css("background",'none');
            }
            else if(check_2(selectedIndex,nowIndex))
            {
                boxDomArray[selectedIndex].attr("exist",0);
                boxDomArray[nowIndex].attr("exist",0);
                boxDomArray[selectedIndex].css("background",'none');
                boxDomArray[nowIndex].css("background",'none');
            }
            else if(check_3(selectedIndex,nowIndex))
            {
                boxDomArray[selectedIndex].attr("exist",0);
                boxDomArray[nowIndex].attr("exist",0);
                boxDomArray[selectedIndex].css("background",'none');
                boxDomArray[nowIndex].css("background",'none');
            }
            //初始化状态
            hasSelected=0;
            selectedIndex=-1;
            }
        }
    })
    $("#re_button").on('click',function(){
        hasSelected=0;
        selectedIndex=-1;
        for(var i=0;i<boxDomNum;i++)
            initDataFlag[i]=-1;
        initialData();
    })
    function check(index1,index2){//检测直线连通、无拐点
        console.log("check!");
        var x1=parseInt(index1/14);
        var y1=parseInt(index1%14);
        var x2=parseInt(index2/14);
        var y2=parseInt(index2%14);
        index1=parseInt(index1);index2=parseInt(index2);
        if(x1==x2)
        {
            if(Math.abs(y1-y2)!=1)
            {
                for(var i=1;i<=Math.abs(y1-y2)-1;i++)
                {
                    if(y1>y2) index1=index2;
                    if(boxDomArray[index1+i].attr("exist")==1) return 0;
                }
            }
            return 1;
        }
        else if(y1==y2)
        {
            if(Math.abs(x1-x2)!=1)
            {
                for(var i=1;i<=Math.abs(x1-x2)-1;i++)
                {
                    if(x1>x2) index1=index2; 
                    if(boxDomArray[index1+i*14].attr("exist")==1) return 0;
                }
            }
            return 1;
        }
        return 0;
    }
    function check_1(index1,index2){//检测连通类型1
        console.log("CHECK_1!");
        if(boxDomArray[index1].attr("value")!=boxDomArray[index2].attr("value")) return 0;
        if(check(index1,index2)) return 1;
        return 0;
    }
    function check_2(index1,index2){//检测连通类型2
        console.log("CHECK_2!");
        var x1=parseInt(index1/14);
        var y1=parseInt(index1%14);
        var x2=parseInt(index2/14);
        var y2=parseInt(index2%14);
        index1=parseInt(index1);index2=parseInt(index2);
        //两个交点，坐标分别为:(x1,y2)、(x2,y1)
        var index3=x1*14+y2;
        var index4=x2*14+y1;
        if(boxDomArray[index1].attr("value")!=boxDomArray[index2].attr("value")) return 0;//颜色相同才可以消除
        if(boxDomArray[index3].attr("exist")!=1)
            if(check(index3,index1)&&check(index3,index2)) return 1;
        if(boxDomArray[index4].attr("exist")!=1)
            if(check(index4,index1)&&check(index4,index2)) return 1;
        return 0;
    }
    function check_3(index1,index2){//检测连通类型3
        console.log("check3");
        var x1=parseInt(index1/14);
        var y1=parseInt(index1%14);
        var x2=parseInt(index2/14);
        var y2=parseInt(index2%14);
        index1=parseInt(index1);
        index2=parseInt(index2);
        if(boxDomArray[index1].attr("value")!=boxDomArray[index2].attr("value")) return 0;//颜色相同才可以消除
        for(var i=0;i<14;i++)//对行遍历
        {
            if(i==y1) continue;
            var index3=x1*14+i;
            if(boxDomArray[index3].attr("exist")==1||check(index1,index3)==0) continue;
            else{
                var x3=parseInt(index3/14);
                var y3=parseInt(index3%14);
                var index4=x3*14+y2;
                var index5=x2*14+y3;
                if(boxDomArray[index4].attr("exist")!=1)
                    if(check(index4,index3)&&check(index4,index2)) return 1;
                if(boxDomArray[index5].attr("exist")!=1)
                    if(check(index5,index3)&&check(index5,index2)) return 1;
            }
        }
        for(var i=0;i<14;i++)//对列遍历
        {
            if(i==x1) continue;
            var index3=i*14+y1;
            if(boxDomArray[index3].attr("exist")==1||check(index1,index3)==0) continue;
            else{
                var x3=parseInt(index3/14);
                var y3=parseInt(index3%14);
                var index4=x3*14+y2;
                var index5=x2*14+y3;
                if(boxDomArray[index4].attr("exist")!=1)
                    if(check(index4,index3)&&check(index4,index2)) return 1;
                if(boxDomArray[index5].attr("exist")!=1)
                    if(check(index5,index3)&&check(index5,index2)) return 1;
            }
        }
        return 0;
    }
</script>
</html>

连连看算法

博主这里采用了相关的算法，这里进行解释。

首先，我们知道，在连连看游戏中，两个相同图片有三种方式相连：

1，直线相连，即有0个拐点相连

2，有1个拐点相连

3，有2个拐点相连

假设现在有点index1(x1，y1)，index2(x2，y2)。

image.png

image.png

image.png

进行下一个游戏的开发！

指尖大冒险、跳一跳

是男人就下一百层

注意事项

【1】 原创博客，转载本篇请与我联系，尊重版权。

【2】 关于阅读本篇博客的所有问题、代码源码、图片素材、编程技巧、编程经历都可联系我，与我交流讨论。

【3】 本人部分时间承接各种毕业设计、网站编写、微信小程序编写、数据库作业编写。需要请加QQ：1460787433，详聊。

文章标签：
JavaScript
前端开发
算法
数据库
小程序
关键词：
JavaScript HTML
HTML js
JavaScript操作
HTML代码
jQuery js
征途黯然。
目录
相关文章
穆雄雄.
|
1月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
穆雄雄.
12 1
yma16
|
1天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印（html绘制表格js加水印）
原生html—摆脱ps、excel 在线绘制财务表格加水印（html绘制表格js加水印）
yma16
6 1
1941623231718325
|
4天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术，包括使用`getElement*`方法和CSS选择器获取元素，借助`createElement`与`appendChild`动态创建及插入元素，修改元素内容、属性和样式，以及删除元素。通过掌握这些技术，开发者能实现页面动态交互，但应注意避免过度操作DOM以优化性能和用户体验。
1941623231718325
13 1
恰小面包
|
9天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
恰小面包
23 10
恰小面包
|
9天前
|
前端开发
HTML代码示例
HTML代码示例
恰小面包
13 1
恰小面包
|
9天前
|
搜索推荐
当使用HTML代码时，一些常见的问题
当使用HTML代码时，一些常见的问题
恰小面包
10 0
疯狂的猿
|
10天前
错误或拦截页面的html代码
错误或拦截页面的html代码
疯狂的猿
14 0
错误或拦截页面的html代码
东方睿赢
|
11天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作：解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息，会随每个请求发送回服务器，适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据，关闭浏览器后清除，适合临时存储如登录状态。LocalStorage则持久保存数据，即使关闭浏览器也不会清除，适用于存储长期设置。三种方式各有侧重，应按需求选择。
东方睿赢
15 0
龙大吉
|
11天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作：解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石，它阻止脚本跨不同协议、域名或端口访问资源，防止恶意行为。例如，HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求，但需服务器配合设置，通过`document.domain`属性可配置，但仍受限于服务器配置。
龙大吉
14 4
程序三两行
|
18天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
程序三两行
15 0