广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jQuery实现扫雷小游戏
  • 696

0
分享到

jQuery实现扫雷小游戏

2024-04-02 19:04:59 696人浏览 独家记忆
摘要

本文实例为大家分享了Jquery实现扫雷小游戏的具体代码，供大家参考，具体内容如下 扫雷小游戏实现思路： 设计为9*9简单面板，每次随机生成10颗雷，然后计算每颗雷周围八个位置上每个

本文实例为大家分享了Jquery实现扫雷小游戏的具体代码，供大家参考，具体内容如下

扫雷小游戏实现思路：

设计为9*9简单面板，每次随机生成10颗雷，然后计算每颗雷周围八个位置上每个位置应该标记的数字（该数字表示此位置周围八个位置上存在雷的数量），基本原理大致如此。交互问题以简单的方式实现即可。

<html>
<head>
<meta Http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<style>
    td{
        border:1px solid #ccc;
        width:70px;
        height:70px;
    }
</style>
</head>
<body>
<table style="border:1px solid #2e6377;background-color:#789dc3;text-align:center;margin-top:60px;margin-left:60px;" border="1px">
    <tr>
        <td weizhi="1-9"></td>
        <td weizhi="2-9"></td>
        <td weizhi="3-9"></td>
        <td weizhi="4-9"></td>
        <td weizhi="5-9"></td>
        <td weizhi="6-9"></td>
        <td weizhi="7-9"></td>
        <td weizhi="8-9"></td>
        <td weizhi="9-9"></td>
    </tr>
    <tr>
        <td weizhi="1-8"></td>
        <td weizhi="2-8"></td>
        <td weizhi="3-8"></td>
        <td weizhi="4-8"></td>
        <td weizhi="5-8"></td>
        <td weizhi="6-8"></td>
        <td weizhi="7-8"></td>
        <td weizhi="8-8"></td>
        <td weizhi="9-8"></td>
    </tr>
    <tr>
        <td weizhi="1-7"></td>
        <td weizhi="2-7"></td>
        <td weizhi="3-7"></td>
        <td weizhi="4-7"></td>
        <td weizhi="5-7"></td>
        <td weizhi="6-7"></td>
        <td weizhi="7-7"></td>
        <td weizhi="8-7"></td>
        <td weizhi="9-7"></td>
    </tr>
    <tr>
        <td weizhi="1-6"></td>
        <td weizhi="2-6"></td>
        <td weizhi="3-6"></td>
        <td weizhi="4-6"></td>
        <td weizhi="5-6"></td>
        <td weizhi="6-6"></td>
        <td weizhi="7-6"></td>
        <td weizhi="8-6"></td>
        <td weizhi="9-6"></td>
    </tr>
    <tr>
        <td weizhi="1-5"></td>
        <td weizhi="2-5"></td>
        <td weizhi="3-5"></td>
        <td weizhi="4-5"></td>
        <td weizhi="5-5"></td>
        <td weizhi="6-5"></td>
        <td weizhi="7-5"></td>
        <td weizhi="8-5"></td>
        <td weizhi="9-5"></td>
    </tr>
    <tr>
        <td weizhi="1-4"></td>
        <td weizhi="2-4"></td>
        <td weizhi="3-4"></td>
        <td weizhi="4-4"></td>
        <td weizhi="5-4"></td>
        <td weizhi="6-4"></td>
        <td weizhi="7-4"></td>
        <td weizhi="8-4"></td>
        <td weizhi="9-4"></td>
    </tr>
    <tr>
        <td weizhi="1-3"></td>
        <td weizhi="2-3"></td>
        <td weizhi="3-3"></td>
        <td weizhi="4-3"></td>
        <td weizhi="5-3"></td>
        <td weizhi="6-3"></td>
        <td weizhi="7-3"></td>
        <td weizhi="8-3"></td>
        <td weizhi="9-3"></td>
    </tr>
    <tr>
        <td weizhi="1-2"></td>
        <td weizhi="2-2"></td>
        <td weizhi="3-2"></td>
        <td weizhi="4-2"></td>
        <td weizhi="5-2"></td>
        <td weizhi="6-2"></td>
        <td weizhi="7-2"></td>
        <td weizhi="8-2"></td>
        <td weizhi="9-2"></td>
    </tr>
    <tr>
        <td weizhi="1-1"></td>
        <td weizhi="2-1"></td>
        <td weizhi="3-1"></td>
        <td weizhi="4-1"></td>
        <td weizhi="5-1"></td>
        <td weizhi="6-1"></td>
        <td weizhi="7-1"></td>
        <td weizhi="8-1"></td>
        <td weizhi="9-1"></td>
    </tr>
</table>
<div style="width:500px;height:200px;margin-left:60px;margin-top:20px;text-align:center;color:red;display:none;" id="tips"><h1>哦，NO！，你挖中了炸弹！</h1></div>
<!--JS部分-->
<script>
$(document).ready(function(){
    var radom_weizhi=new Array();
    var leiqu_weizhi=radom_lei();
    var eight_arr=new Array();
    $.each(leiqu_weizhi,function(k,v){
        //$('td[weizhi="'+v+'"]').CSS({'background-color':'red'});
        $('td[weizhi="'+v+'"]').html('<b>炸弹</b>');
        $('td[weizhi="'+v+'"]').attr('type','TNT');
        //隐藏
        $('td[weizhi="'+v+'"] b').css('display','none');
        //该雷区周围的八个位置标记数字
        //---获取每个雷区周围的八个位置
        var xy_arr=v.split('-');
        var x=xy_arr[0],y=xy_arr[1];
        //获取每个雷区周围的八个位置
        eight_arr.push(getEightPosition(v,leiqu_weizhi));
    })
    //console.log(eight_arr);
    //编号区域
    //---写入一个一维数组,并去除重复值
    var zhouwei_arr=new Array();
    $.each(eight_arr,function(k,v){
        $.each(v,function(kk,vv){
            if($.inArray(vv,zhouwei_arr)==-1){
                zhouwei_arr.push(vv);
            }
        })
    })
    //console.log(zhouwei_arr);
    $.each(zhouwei_arr,function(k,v){
        //编号去用绿色表示
        //$('td[weizhi="'+v+'"]').css('background-color','#9ce6d9');
        $('td[weizhi="'+v+'"]').attr('type','NUMBER');
    })
    //编号区域标记数字
    signLeiNumber(zhouwei_arr,leiqu_weizhi);
    //空白区域
    $("td").each(function(){
        if($.inArray($(this).attr('weizhi'),zhouwei_arr)==-1){
            if($.inArray($(this).attr('weizhi'),leiqu_weizhi)==-1){
                //空位置
                //$(this).css('background-color','white');
                $(this).attr('type','BLANK');
            }
        }
    })
    //遮罩棋盘
    $('td').css('background-color','#6ad0ef');
})
//事件
$(document).ready(function(){
    $('td').click(function(){
        console.log($(this).attr('type'));
        if($(this).attr('type')=='BLANK'){
            //空白区域
            $('td[type="BLANK"').css('background-color','white');
        }
        if($(this).attr('type')=='NUMBER'){
            $(this).css('background-color','#9ce6d9');
            $(this).find('b').css('display','block');
        }
        if($(this).attr('type')=='TNT'){
            $(this).css('background-color','red');
            $(this).find('b').css('display','block');
            $('td[type="TNT"]').each(function(){
                $(this).find('b').css('display','block');
                $(this).css('background-color','red');
            })
            $('td[type="NUMBER"]').each(function(){
                $(this).css('background-color','#9ce6d9');
                $(this).find('b').css('display','block');
            })
            $('#tips').css('display','block');
        }
        
    })
})
//编号区域标记数字
function signLeiNumber(zhouwei_arr,leiqu_weizhi){
    $.each(zhouwei_arr,function(k,v){
        zhouWeiLeiNumber(v,leiqu_weizhi);
    })
}
//获取每个编号区块的八个周边位置的雷的数量,并做出标记
function zhouWeiLeiNumber(v,leiqu_weizhi)
{
    var xy_arr=v.split('-'),eight_position_arr=new Array();
    var x=xy_arr[0],y=xy_arr[1];
    //---左上角
    var x1=x-1,y1=parseInt(y)+1;
    eight_position_arr=getPosition(x1,y1,eight_position_arr);
    //---正上方
    var x2=x,y2=parseInt(y)+1;
    eight_position_arr=getPosition(x2,y2,eight_position_arr);
    //---右上角
    var x3=parseInt(x)+1,y3=parseInt(y)+1;
    eight_position_arr=getPosition(x3,y3,eight_position_arr);
    //---右边一个
    var x4=parseInt(x)+1,y4=y;
    eight_position_arr=getPosition(x4,y4,eight_position_arr);
    //---右下角
    var x5=parseInt(x)+1,y5=y-1;
    eight_position_arr=getPosition(x5,y5,eight_position_arr);
    //---正下方
    var x6=x,y6=y-1;
    eight_position_arr=getPosition(x6,y6,eight_position_arr);
    //---左下角
    var x7=x-1,y7=y-1;
    eight_position_arr=getPosition(x7,y7,eight_position_arr);
    //---左边一个
    var x8=x-1,y8=y;
    eight_position_arr=getPosition(x8,y8,eight_position_arr);
    var num_lei=0;
    $.each(eight_position_arr,function(kk,vv){
        if($.inArray(vv,leiqu_weizhi)>-1){
            num_lei++;
        }
    })
    $('td[weizhi="'+v+'"]').html('<b>'+num_lei+'</b>');
    //隐藏
    $('td[weizhi="'+v+'"] b').css('display','none');
}
//不在边界之外
function getPosition(x,y,arr)
{
    if((x>=1 && x<=9) && (y>=1 && y<=9)){
        arr.push(x+'-'+y);
    }
    return arr;
}
//获取每个雷区周围的八个位置
function getEightPosition(v,leiqu_weizhi){
    var xy_arr=v.split('-'),eight_position_arr=new Array();
    var x=xy_arr[0],y=xy_arr[1];
    //从该雷区的左上角位置开始找
    //---左上角
    var x1=x-1,y1=parseInt(y)+1;
    eight_position_arr=checkPosition(x1,y1,eight_position_arr,leiqu_weizhi);
    //---正上方
    var x2=x,y2=parseInt(y)+1;
    eight_position_arr=checkPosition(x2,y2,eight_position_arr,leiqu_weizhi);
    //---右上角
    var x3=parseInt(x)+1,y3=parseInt(y)+1;
    eight_position_arr=checkPosition(x3,y3,eight_position_arr,leiqu_weizhi);
    //---右边一个
    var x4=parseInt(x)+1,y4=y;
    eight_position_arr=checkPosition(x4,y4,eight_position_arr,leiqu_weizhi);
    //---右下角
    var x5=parseInt(x)+1,y5=y-1;
    eight_position_arr=checkPosition(x5,y5,eight_position_arr,leiqu_weizhi);
    //---正下方
    var x6=x,y6=y-1;
    eight_position_arr=checkPosition(x6,y6,eight_position_arr,leiqu_weizhi);
    //---左下角
    var x7=x-1,y7=y-1;
    eight_position_arr=checkPosition(x7,y7,eight_position_arr,leiqu_weizhi);
    //---左边一个
    var x8=x-1,y8=y;
    eight_position_arr=checkPosition(x8,y8,eight_position_arr,leiqu_weizhi);
    
    return eight_position_arr;
}

//不在边界之外且不在任何雷区的位置上
function checkPosition(x,y,arr,leiqu_weizhi)
{
    if((x>=1 && x<=9) && (y>=1 && y<=9)){
        if($.inArray((x+'-'+y).toString(),leiqu_weizhi)==-1){
            //不在任何雷区的位置上
            arr.push(x+'-'+y);
        }
    }
    return arr;
}
//随机生成10个雷
function radom_lei(){
    var leiqu_x=new Array(),leiqu_y=new Array(),leiqu_weizhi=new Array();
    for(var a=1;a<=10;a++){
        var radom_num_x=(10*Math.random()).toString().substring(0,1);
        if(radom_num_x==0){
            if(leiqu_x.length==0){
                radom_num_x=1;
            }else{
                radom_num_x=leiqu_x.length;
            }
        }
        leiqu_x.push(radom_num_x);
        //console.log(leiqu_x);
        var radom_num_y=(10*Math.random()).toString().substring(0,1);
        if(radom_num_y==0){
            if(leiqu_y.length==0){
                radom_num_y=1;
            }else{
                radom_num_y=leiqu_y.length;
            }
        }
        leiqu_y.push(radom_num_y);
        //console.log(leiqu_y);
        //写入位置数据
        leiqu_weizhi.push(radom_num_x+'-'+radom_num_y);
        //console.log(leiqu_weizhi);
    }
    return leiqu_weizhi;
}
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jQuery实现扫雷小游戏

本文链接: https://www.lsjlt.com/news/148308.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • jQuery实现扫雷小游戏
    本文实例为大家分享了jQuery实现扫雷小游戏的具体代码，供大家参考，具体内容如下 扫雷小游戏实现思路： 设计为9*9简单面板，每次随机生成10颗雷，然后计算每颗雷周围八个位置上每个...
    99+
    2022-11-13
  • JavaScript实现扫雷小游戏
    本文实例为大家分享了JavaScript实现扫雷小游戏的具体代码，供大家参考，具体内容如下 先说大体思路，下面放代码 思路： 1产生指定数量的地雷2计算方块周围的地雷3点击地雷结束4...
    99+
    2022-11-13
  • jquery插件实现扫雷游戏(1)
    本文实例为大家分享了jquery插件实现扫雷游戏第一篇的具体代码，供大家参考，具体内容如下 做一个扫雷 第一部分，完成绘制和点击动作 效果如下 代码部分 * { margin...
    99+
    2022-11-12
  • jquery插件实现扫雷游戏(2)
    本文实例为大家分享了jquery插件实现扫雷游戏的第2篇，供大家参考，具体内容如下 完善了必要的 效果如下 代码部分 * { margin: 0px; padding: 0...
    99+
    2022-11-12
  • jquery插件实现扫雷游戏(3)
    本文实例为大家分享了jquery插件实现扫雷游戏的第3篇，供大家参考，具体内容如下 完成，效果感觉还不错，就是脸黑第一下容易挂 效果如下 代码部分 * { margin: 0...
    99+
    2022-11-12
  • Vue2+JS实现扫雷小游戏
    目录实现步骤1、场景布局实现2、初始化事件3、游戏动作（action）游戏收尾总结实现步骤 1、场景布局实现 布局就是经典的方格布局，对于场景的美观度可以自行找几个配色网站作为参考。...
    99+
    2022-11-13
  • C#实现扫雷游戏
    目录一、实验目的：二、实验要求：三、实验内容：四、实验源代码：五、实验结果：六、总结本文实例为大家分享了C#实现扫雷游戏的具体代码，供大家参考，具体内容如下 一、实验目的： 1、掌握...
    99+
    2022-11-13
  • Easyx实现扫雷游戏
    本文实例为大家分享了Easyx实现扫雷游戏的具体代码，供大家参考，具体内容如下 代码： #include<stdio.h> #include<stdlib.h&g...
    99+
    2022-11-12
  • java实现简单的扫雷小游戏
    使用java制作一款简单的扫雷游戏，供大家参考，具体内容如下 import java.util.*; public class nephelokokkygia { ...
    99+
    2022-11-12
  • 用C语言实现扫雷小游戏
    本文实例为大家分享了C语言实现扫雷小游戏的具体代码，供大家参考，具体内容如下 1. 规则 随便点一个格子，会有一块，上面的数字就代表数字周围八个格子会有几个雷，是1他周围就只有1个雷...
    99+
    2022-11-12
  • C++实现扫雷小游戏(控制台)
    本文实例为大家分享了C++实现扫雷小游戏的具体代码，供大家参考，具体内容如下 1.问题描述 用c++写一个扫雷小游戏，扫雷大家都玩过吧，先任意点一个方格，没有爆炸时，会出现一个数字，...
    99+
    2022-11-13
  • 微信小程序实现扫雷游戏
    本文实例为大家分享了微信小程序实现扫雷游戏的具体代码，供大家参考，具体内容如下 实验小提醒，打开微信小程序模板时，一定要看清楚，要选js模板，不要选ts模板，因为ts中对数据类型检查...
    99+
    2022-11-13
  • C语言扫雷排雷小游戏实现全程
    目录test.cgame.hgame.c详解游戏代码的实现1初化扫雷区2打印扫雷区3 设置雷4 排雷4.1展开一片的功能4.2雷标记功能的实现游戏过程test.c 在这个文件中，我们...
    99+
    2022-11-13
  • Android 实现扫雷小游戏实例代码
    Android 实现扫雷小游戏实例            &nbs...
    99+
    2022-06-06
    小游戏 Android
  • 基于C语言实现扫雷小游戏
    本文实例为大家分享了C语言实现扫雷小游戏的具体代码，供大家参考，具体内容如下 game.h 设置头文件 #include<stdio.h> #include<s...
    99+
    2022-11-12
  • C语言轻松实现扫雷小游戏
    前言 扫雷是一款经典的小游戏，那么如何用c语言来实现呢？下面我将带你搞定扫雷小游戏。 注：本此游戏所用到的文件与上篇三子棋类似，最后附有代码展示。 1.游戏设计逻辑 1.布置雷&md...
    99+
    2022-11-13
    C语言 扫雷
  • c++实现扫雷小游戏代码分享
    分成两个源文件和一个头文件 注意：这串代码并不完整，不能够实现当所查坐标周围雷的数量为0时，直接展开周围坐标； 头文件：game.h #include <stdio.h>...
    99+
    2022-11-13
  • 使用C语言实现扫雷小游戏
    本文实例为大家分享了C语言实现扫雷小游戏的具体代码，供大家参考，具体内容如下 游戏规则 在一个9*9的地图上一共有十个雷,翻开所有不是雷的位置 游戏即为胜利, 如果踩到雷,游戏结束 ...
    99+
    2022-11-12
  • C语言实现扫雷小游戏详解
    本文实例为大家分享了C语言实现扫雷小游戏的具体代码，供大家参考，具体内容如下 一.实现功能 首先显示一个小菜单，选择是否玩游戏。当用户选择退出时，程序运行结束，当用户选择玩游戏时，将...
    99+
    2022-11-12
  • C语言简易实现扫雷小游戏
    本文实例为大家分享了C语言实现扫雷小游戏的具体代码，供大家参考，具体内容如下 经典扫雷游戏规则: 当玩家点击游戏区域,该处周围的八个位置有几个雷(如果是角落则是周边三个位置雷的个数,...
    99+
    2022-11-12
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作