余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

手把手教你使用JavaScript打造一款扫雷游戏(建行为个人客户量身打造的一款全流程线上)

xiyangw 2022-11-26 15:54 12 浏览 0 评论

大家好,我是皮皮。

扫雷大家都玩过,今天我们就是用JavaScript来打造扫雷游戏。废话不多说,直接看下效果;

上图是失败后的结果。

一、思路分析

我们新建一个首页,在首页放置一个点击开始游戏的按钮,动态生成100个小格,即100div;然后通过点击div进行扫雷操作,然后扫雷成功或者失败显示对应的结果;

二、静态页面搭建

2.1 结构层

<body>
    <div class="wrapper">
        <div class="btn" id="btn"></div>  <!-- 开始游戏按钮-->
        <div class="box" id="box"></div>  <!-- 存放小雷的div-->
        <div class="flagBox" id="flagBox"> <!-- 游戏结束才显示的当前雷数的div-->
            当前剩余雷数:
            <span id="score">10</span>
        </div>
        <div class="alertBox" id="alertBox">  <!-- Game over弹出的框(窗口)-->
            <div class="alertImg" id="alertImg">
                <div class="close" id="close"></div>
            </div>
        </div>
    </div>
</body>

2.2 样式层

清楚默认边距

*{
    margin:0;
    padding:0;
}

页面最大div

.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;
}

储存雷的大div

.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; /* 先设置为none,开始游戏后显示block */ 
}

每一个方块的小div(一共100个)

.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;
}

当前所剩雷数

.flagBox{
    position:absolute;
    top:50px;
    left:50%;
    width:200px;
    height:50px;
    margin-left:-100px;
    color:#333;
    font-size:20px;
    font-weight: bolder;
    display:none; /* 先设置为none,开始游戏后显示block */ 
}

Game Over

.alertBox{
    display:none; /* 先设置为none,开始结束显示block */ 
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background-color: rgba(0,0,0,0.2);
}

游戏结束弹出窗口右上角的X

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

}

三、js页面交互

3.1 获取元素及变量初始化

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;

3.2 10个雷的初始化设置

function init() {
    minesNum = 10;
    mineOver = 10;
    score.innerHTML = mineOver;
    
    for (var i = 0; i < 10; i++) { // 双层循环 10 * 10 个div
        for (var j = 0; j < 10; j++) {
            var con = document.createElement('div');
            con.classList.add('block'); // 给创建出来的div添加类名 block 
            con.setAttribute('id', i + '-' + j);
            box.appendChild(con);
            mineMap.push({ mine: 0 });
        }
    }
    block = document.getElementsByClassName('block');
    while (minesNum) { // 创建一个10次的循环,即设置10个雷
        var mineIndex = Math.floor(Math.random() * 100);
        if (mineMap[mineIndex].mine === 0) {
            mineMap[mineIndex].mine = 1;
            block[mineIndex].classList.add('isLei'); // 10个雷有小div的block类属性,还有自己的属性,isLei
            minesNum--;
        }
    }
}

3.3 游戏开始事件封装

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) { // 小div鼠标按下事件封装
        var event = e.target;
        if (e.which == 1) { //Netscape/Firefox/Opera中不支持 window.event.keyCode,需要用event.which代替
            leftClick(event);
        } else if (e.which == 3) {
            rightClick(event);
        }
    }
    closeBtn.onclick = function () { // 游戏结束,弹出game over窗口的关闭按钮事件封装
        alertBox.style.display = 'none';
        flagBox.style.display = 'none';
        box.style.display = 'none';
        box.innerHTML = '';
        startGameBool = true;
    }
}

3.4 核心事件函数封装

leftClick 没有雷 --> 显示数字(代表以当前小格为中心周围8个格的雷数)扩散(当前周围八个格没有雷) 有雷 --> game Over

function leftClick(dom) {
    if(dom.classList.contains('flag')){
        return;
    }
    var isLei = document.getElementsByClassName('isLei'); // 获得前面的10个雷的div
    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);
                        }
                    }
                }
            }
        }
    }
}

rightClick 没有标记并且没有数字 --> 进行标记;

有标记 --> 取消标记 --> 标记是否正确,10个都正确标记,提示成功;

如果已经出现,则点击无效果;

function rightClick(dom){
    if(dom.classList.contains('num')){ // 如果已经出现,则点击无效果
        return;
    }
    dom.classList.toggle('flag'); // 在元素中切换类名,切换为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){ // 扫完雷,标志雷数量为0
        alertBox.style.display = 'block';
        alertImg.style.backgroundImage = 'url("img/success.png")'; // 游戏胜利
    }
}

3.5 游戏开始

bindEvent()

四、总结

本文我们通过JavaScript打造了简单的扫雷游戏,首先是设计下简单的界面样式,然后通过扫雷的逻辑动态构建雷块的位置,通过点击小方块进行扫雷,感兴趣的小伙伴可以去试一下。

小伙伴们,快快用实践一下吧!如果在学习过程中,有遇到任何问题,欢迎加我好友,我拉你进Python学习交流群共同探讨学习。

相关推荐

Vue的框架(了解)

前端MVC设计模式MVC设计模式,其实就是将前端实现某个业务的所有代码划分为三部分Model:模型,指数据模型,这个数据一般来自于服务器View:视图,指页面标签内容Controller:控制...

Vue.js实战 第五章练习一

练习要求:在原有表格基础上,新增一项是否选中该商品的功能,总价变为只计算选中商品的总价,同时提供一个全选的按钮。实现思路:按照vue数据和dom元素双向绑定的特性,定义allCheckStatus变量...

Vue基础到进阶教程之class和style绑定

关于class和style我们并不陌生,这个在学习css的时候就是家常便饭了,操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用v-bind处理它们,...

深入Vue 必学高阶组件 HOC「进阶篇」

作者:ssh转发连接:https://mp.weixin.qq.com/s/seKoLSIMtTd1sU4uDrgZCA前言高阶组件这个概念在React中一度非常流行,但是在Vue的社区里讨论...

周末大礼包,23道高质量中级前端面试题。金九银十,建议收藏

这套面试题考察的内容比较常见,涉及到JavaScript、ES6、CSS、Vue、简单算法,浏览器相关知识等。题目列表1.JavaScript的数据类型有哪些2.什么是同源策略3.跨域的方法...

vue3.0-摒弃Object.defineProperty,基于 Proxy 的观察者机制

写在前面:11月16日早上,Vue.js的作者尤大大在VueToronto的主题演讲中预演了Vue.js3.0的一些新特性,其中一个很重要的改变就是Vue3将使用ES6的Proxy作...

程序员都必掌握的前端教程之VUE基础教程(七)

阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到。本篇文章成哥继续带大家来学习前端VUE教程,今天主要讲解VUE的表单处理等知识点。下面我们就一起来学习该块内容吧!01简介在日常开发中,我...

web前端开之网站搭建框架之vue详解

网站搭建框架之vueVue是web前端快速搭建网站的框架之一。它与jQuery有所不同,是以数据驱动web界面(以操作数据改变页面,而jQuery是以操作节点来改变页面),同时,vue还实现了数据的双...

vue3.0尝鲜-基于 Proxy 的观察者机制探索

Vue.js的作者尤大大在VueToronto的主题演讲中预演了Vue.js3.0的一些新特性,其中一个很重要的改变就是Vue3将使用ES6的Proxy作为其观察者机制,取代之前使用...

TypeScript 设计模式之观察者模式

一、模式介绍1.背景介绍在软件系统中经常碰到这类需求:当一个对象的状态发生改变,某些与它相关的对象也要随之做出相应的变化。这是建立一种「对象与对象之间的依赖关系」,一个对象发生改变时将「自动通知其他...

vue面试3

1.单页面应用与多页面应用的去别2.简述一下Sass、Less,且说明区别?他们是动态的样式语言,是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。变量符不一样,les...

VUE v-bind 数据绑定

动态的绑定一个或多个attribute,也可以是组件的prop。缩写::或者.(当使用.prop修饰符)期望:any(带参数)|Object(不带参数)参数:attrOrP...

vue初学习之自定义选择框实现

v-model简单介绍在使用vue的过程中会经常用到input和textarea这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签...

Vue实现拖拽穿梭框功能四种方式

一、使用原生js实现拖拽打开视频讲解更加详细Vue实现拖拽穿梭框功能的四种方式_哔哩哔哩_bilibili<html><head><meta...

Vue3.x setup 语法糖实现props双向绑定

1.背景为了封装一下Element-Plus的分页插件,需要实现父子组件之间的传值。2.父组件<scriptsetuplang="ts">letqueryPa...

取消回复欢迎 发表评论: