Javascript 综合示例网页扫雷游戏

---------------认定了的事情,只要是对的,干到底!

----------------------------------------------------------------------------------------------------------------------------------------------

分别建立 HTML CSS JS 三个文件

加上保存好的图片

----------------------------------------------------------------------------------------------------------------------------------------------

HTML代码

----------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生JS~扫雷</title>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div class="wrapper">
        <div class="btn" id="btn"></div>
        <div class="box" id="box"></div>
        <div class="flagBox" id="flagBox">
            当前剩余雷数：
            <span id="score">10</span>
        </div>
        <div class="alertBox" id="alertBox">
            <div class="alertImg" id="alertImg">
                <div class="close" id="close"></div>
            </div>
        </div>
    </div>
    <script src="demo.js"></script>
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------------------

CSS代码

----------------------------------------------------------------------------------------------------------------------------------------------

*{
    margin:0;
    padding:0;
}
.wrapper {
    width:100%;
    height:1000px;
    position: fixed;
    top:0;
    left:0;
    background-image: url('img/bg.jpg');
    background-size: 100% 100%;
}

.btn{
    height:140px;
    width:170px;
    position:absolute;
    left:50px;
    background-image: url('img/startGame.png');
    background-size: 100% 100%;
    cursor: pointer;
}

.box{
    height:500px;
    width:500px;
    transform: perspective(800px) rotateX(45deg);
    margin:20px auto;
    border-top:1px solid #B25F27;
    border-left:1px solid #B25F27;
    box-shadow:  5px 5px 5px rgba(0,0,0,0.3);

    display:none;
}

.flagBox{
    position:absolute;
    top:50px;
    left:50%;
    width:200px;
    height:50px;
    margin-left:-100px;
    color:#333;
    font-size:20px;
    font-weight: bolder;
    display:none;
}
.alertBox{
    display:none;
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background-color: rgba(0,0,0,0.2);
}

.alertImg{
    width:600px;
    height:400px;
    background-size: 100% 100%;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    border-radius: 20px;
}

.close{
    position:absolute;
    right:0;
    top:0;
    height:40px;
    width:40px;
    background-image: url('img/closeBtn.png');
    background-size: 100% 100%;
    cursor: pointer;

}

.block{
    width:49px;
    height:49px;
    border-right:1px solid #B25F27;
    border-bottom:1px solid #B25F27;
    box-shadow: 0 0 4px #333 inset;
    background-image: url('img/cao.jpg');
    float: left;
}

.show{
    background-image: url('img/dilei.jpg');
    background-size: 100% 100%;
}

.num{
    background:#ECD0A1;
    font-size:18px;
    font-weight:bold;
    line-height: 49px;
    text-align: center;
}
.flag{
    background-image:url('img/hongqi.jpg');
    background-size:100% 100%;
}

----------------------------------------------------------------------------------------------------------------------------------------------

JS代码

----------------------------------------------------------------------------------------------------------------------------------------------

//点击开始游戏 -》 动态生成100个小格--》100div
//leftClick  没有雷  --》显示数字（代表以当前小格为中心周围8个格的雷数） 扩散（当前周围八个格没有雷）
//           有累 --》game Over
//rightClick 没有标记并且没有数字--》进行标记。 有标记 --》取消标记 --》标记是否正确，10个都正确标记，提示成功
//已经出现数字--》无效果

var startBtn = document.getElementById('btn');
var box = document.getElementById('box');
var flagBox = document.getElementById('flagBox');
var alertBox = document.getElementById('alertBox');
var alertImg = document.getElementById('alertImg');
var closeBtn = document.getElementById('close');
var score = document.getElementById('score');
var minesNum;
var mineOver;
var block;
var mineMap = [];
var startGameBool = true;

bindEvent();
function bindEvent() {
    startBtn.onclick = function () {
        if(startGameBool){
            box.style.display = 'block';
            flagBox.style.display = 'block';
            init();
            startGameBool = false;
        }

    }
    box.oncontextmenu = function () {
        return false;
    }
    box.onmousedown = function (e) {
        var event = e.target;
        if (e.which == 1) {
            leftClick(event);
        } else if (e.which == 3) {
            rightClick(event);
        }
    }
    closeBtn.onclick = function () {
        alertBox.style.display = 'none';
        flagBox.style.display = 'none';
        box.style.display = 'none';
        box.innerHTML = '';
        startGameBool = true;
    }
}

function init() {
    minesNum = 10;
    mineOver = 10;
    score.innerHTML = mineOver;

    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            var con = document.createElement('div');
            con.classList.add('block');
            con.setAttribute('id', i + '-' + j);
            box.appendChild(con);
            mineMap.push({ mine: 0 });
        }
    }
    block = document.getElementsByClassName('block');
    while (minesNum) {
        var mineIndex = Math.floor(Math.random() * 100);
        if (mineMap[mineIndex].mine === 0) {
            mineMap[mineIndex].mine = 1;
            block[mineIndex].classList.add('isLei');
            minesNum--;
        }
    }
}

function leftClick(dom) {
    if(dom.classList.contains('flag')){
        return;
    }
    var isLei = document.getElementsByClassName('isLei');
    if (dom && dom.classList.contains('isLei')) {
        for (var i = 0; i < isLei.length; i++) {
            isLei[i].classList.add('show');
        }
        setTimeout(function () {
            alertBox.style.display = 'block';
            alertImg.style.backgroundImage = 'url("img/over.jpg")';
        }, 800)
    } else {
        var n = 0;
        var posArr = dom && dom.getAttribute('id').split('-');
        var posX = posArr && +posArr[0];
        var posY = posArr && +posArr[1];
        dom && dom.classList.add('num');
        for (var i = posX - 1; i <= posX + 1; i++) {
            for (var j = posY - 1; j <= posY + 1; j++) {
                var aroundBox = document.getElementById(i + '-' + j);
                if (aroundBox && aroundBox.classList.contains('isLei')) {
                    n++;
                }
            }
        }
        dom && (dom.innerHTML = n);
        if (n == 0) {
            for (var i = posX - 1; i <= posX + 1; i++) {
                for (var j = posY - 1; j <= posY + 1; j++) {
                    var nearBox = document.getElementById(i + '-' + j);
                    if (nearBox && nearBox.length != 0) {
                        if (!nearBox.classList.contains('check')) {
                            nearBox.classList.add('check');
                            leftClick(nearBox);
                        }
                    }
                }
            }
        }
    }
}

function rightClick(dom){
    if(dom.classList.contains('num')){
        return;
    }
    dom.classList.toggle('flag');
    if(dom.classList.contains('isLei') &&dom.classList.contains('flag')){
        mineOver --;
    }
    if(dom.classList.contains('isLei') && !dom.classList.contains('flag')){
        mineOver ++;
    }

    score.innerHTML = mineOver;
    if(mineOver == 0){
        alertBox.style.display = 'block';
        alertImg.style.backgroundImage = 'url("img/success.png")';
    }
}

----------------------------------------------------------------------------------------------------------------------------------------------

图片文件

----------------------------------------------------------------------------------------------------------------------------------------------

Javascript 综合示例网页扫雷游戏的更多相关文章

原生javascript扫雷游戏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式
C# -- HttpWebRequest 和 HttpWebResponse 的使用 C# -- HttpWebRequest 和 HttpWebResponse 的使用结合使用HttpWebReq ...
前端MVC Vue2学习总结（一）——MVC与vue2概要、模板、数据绑定与综合示例
一.前端MVC概要 1.1.库与框架的区别框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.Vue是框架而jQuery则是库. 1.2.AMD与CM ...
Spring MVC 学习总结（四）——视图与综合示例
一.表单标签库 1.1.简介从Spring2.0起就提供了一组全面的自动数据绑定标签来处理表单元素.生成的标签兼容HTML 4.01与XHTML 1.0.表单标签库中包含了可以用在JSP页面中渲染H ...
用javascript实现2048的小游戏
前段时间,看了一个视频,用javascript实现的2048小游戏,发现不难,都是一些基出的语法和简单逻辑. 整个2048游戏没有很多的数据,所有,实现起来还是很有成就感的. 先上图,简直就和原版游戏 ...
【Android】自己动手做个扫雷游戏
1. 游戏规则扫雷是玩法极其简单的小游戏,点击玩家认为不存在雷的区域,标记出全部地雷所在的区域,即可获得胜利.当点击不包含雷的块的时候,可能它底下存在一个数,也可能是一个空白块.当点击中有数字的块时 ...
[Swift]LeetCode529. 扫雷游戏 | Minesweeper
Let's play the minesweeper game (Wikipedia, online game)! You are given a 2D char matrix representin ...
基于jQuery经典扫雷游戏源码
分享一款基于jQuery经典扫雷游戏源码.这是一款网页版扫雷小游戏特效代码下载.效果图如下: 在线预览源码下载实现的代码. html代码: <center> <h1>j ...
Leetcode 529.扫雷游戏
扫雷游戏让我们一起来玩扫雷游戏! 给定一个代表游戏板的二维字符矩阵. 'M' 代表一个未挖出的地雷,'E' 代表一个未挖出的空方块,'B' 代表没有相邻(上,下,左,右,和所有4个对角线)地雷的已挖 ...

随机推荐

【PAT】B1011 A+B 和 C
注意数据的范围,使用long long就行了 #include<stdio.h> int main(){ int N;scanf("%d",&N); for(i ...
February 28th, 2018 Week 9th Wednesday
Knowledge makes humble, ignorance makes proud. 博学使人谦逊,无知使人骄傲. Humility is not equal with being passi ...
一台电脑安装两个JDK
起因:由于嫌自己电脑东西太乱,在上个学期重新格式化整理了一下.下载的jdk也为当时最新的10版本,上次在买jsp的虚拟主机时候也遇到了这个问题,对方提供的jdk只有7版本的,我是10版本的,所以当时打 ...
【ZJOI2016】线段树
[ZJOI2016]线段树 ZJOI的题神啊. 我们考虑计算每个位置\(p\),它在操作过后变成第\(x\)个数的操作序列数. 我们枚举\(x\).我们先得到了\(L_x,R_x\)表示最左边比\(x ...
Linux CenterOS安装mysql-5.6.12-linux-glibc2.5-x86_64.tar.gz步骤
1.首先配置IP. Cd /etc/sysconfig/network-scripts/ vim ifcfg-ens32 将ONBOOT=no,改为ONBOOT=yes.(开机启动激活网卡) 2.构建 ...
executequery要求已打开且可用的connection，连接的当前状态为已关闭
问题: executequery要求已打开且可用的connection,连接的当前状态为已关闭错误原因: 连接的当前状态为已关闭.或者只创建了Connection对象,没有调用Connection. ...
关于reduce的理解
什么是reduce reduce这个词字面上来讲,大多称作“归约”,但这个词太专业了,以至于第一眼看不出来意思.我更倾向于解释为“塌缩”,这样就形象多了.对一个n维的情况进行reduce,就是将执行操 ...
[MCM] 多目标优化 MOP(multi-objective programming)
生活中许多问题都是由相互冲突和影响的多个目标组成.人们会经常遇到使多个目标在给定区域同时尽可能最佳的优化问题,也就是多目标优化问题.优化问题存在的优化目标超过一个并需要同时处理就成为多目标优化问题. ...
forall 与 for loop 案例
create table a_tab(ver number,id number);create table b_tab(ver number,id number);set timing on DECL ...
jvm的解释执行与编译执行
1.原理字节码无法直接交给硬件执行需要虚拟机翻译成机器码才能执行,“翻译”的策略有两种:解释执行和编译执行又称即使编译(JIT).解释执行是没执行一句字节码的时候把字节码翻译成机器码并执行,优点是启 ...

Javascript 综合示例 网页扫雷游戏

Javascript 综合示例 网页扫雷游戏的更多相关文章

随机推荐

热门专题

Javascript 综合示例网页扫雷游戏

Javascript 综合示例网页扫雷游戏的更多相关文章