扫雷小游戏-纯网页版下载_扫雷游戏下载手机版

扫雷小游戏-纯网页版下载_扫雷游戏下载手机版这两天在恶补前端的相关知识,看到JQuery的动画部分时,突然心血来潮想做一个扫雷的网页版,于是花了差不多一天的时间完成了一个初始版本,权当对这几天学习成果的一个回顾,若某处功能有更好实现方式欢迎留言

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

这两天在恶补前端的相关知识,看到JQuery的动画部分时,突然心血来潮想做一个扫雷的网页版,于是花了差不多一天的时间完成了一个初始版本,权当对这几天学习成果的一个回顾,若某处功能有更好实现方式欢迎留言一起讨论。
==========  原创作品    作者:未闻    出处:博客园  ==========

先看看最后实现的效果:如何内嵌一个页面?

扫雷小游戏-纯网页版下载_扫雷游戏下载手机版

扫雷小游戏-纯网页版下载_扫雷游戏下载手机版扫雷小游戏-纯网页版下载_扫雷游戏下载手机版

 一、知识点介绍

1. Html + CSS + JQuery库

  • 要创建界面UI,所以需要用到各类Html标签还有CSS的布局美化。
  • 要实现各类逻辑功能,所以需要用到JQuery的选择器、事件等知识。

2. 扫雷游戏的玩法

  • 翻开某个格子,如果是雷,那么就会Boom,游戏结束。
  • 如果是空白,则代表以这个格子为中心的九宫格范围内没有雷。
  • 如果是数字,则根据数字代表这个格子为中心的九宫格范围内存在多少颗雷。
  • 正确标记出所有的雷,并翻开多余的格子,则游戏胜利。

二、关键代码说明

1. 创建数据地图,接下来只需要根据数据地图创建对应UI就可以了。

扫雷小游戏-纯网页版下载_扫雷游戏下载手机版
扫雷小游戏-纯网页版下载_扫雷游戏下载手机版

function createMap() {
    //初始化为0
    for (var i = 0; i < num; i++) {
        map[i] = new Array();
        mark[i] = new Array();
        for (var j = 0; j < num; j++) {
            map[i][j] = 0;
            mark[i][j] = 0;
        }
    }

    var count = 0;
    // 生成雷
    while (count < boomNum) {
        var row = Math.floor(Math.random() * (num - 1));
        var col = Math.floor(Math.random() * (num - 1));
        if (isMine(row, col)) {
            // 这个位置已经有雷,重新生成位置
            continue;
        }
        count++;
        map[row][col] = 100;

        // 周围的雷数标记+1
        searchAround(row, col, function (posX, posY) {
            map[posX][posY]++;
        });
        //for (var i = 0; i < at.length; i++) {
        //    var posX = row + at[i][0];
        //    var posY = col + at[i][1];
        //    // 不要超出地图范围
        //    if (posX < 0 || posY < 0 || posX > map.length || posY > map[0].length)
        //        continue;

        //    map[posX][posY]++;
        //}
    }
}

View Code

2. 创建界面UI

扫雷小游戏-纯网页版下载_扫雷游戏下载手机版
扫雷小游戏-纯网页版下载_扫雷游戏下载手机版

function createUI() {
    // 生成界面
    for (var i = 0; i < num; i++) {
        for (var j = 0; j < num; j++) {
            var l = offsetX + i * boxSize;
            var t = offsetY + j * boxSize;
            // 创建容器Box
            var box = $("<div></div>").addClass("box").css({ "left": l + "px", "top": t + "px" }).attr({ "row": i, "col": j });
            // 创建遮罩层
            var cover = $("<div></div>").addClass("cover").width(boxSize - 1).height(boxSize - 1);// 遮罩层,这样就直接看不到底下是不是雷
            // 创建实际内容
            var content = $("<div></div>").addClass("content").width(boxSize - 1).height(boxSize - 1).hide();// 内容,可能是空白,可能是个提示数字,也可能就是个雷

            if (map[i][j] >= 100) {
                // 如果是雷,则把格子数据替换成一张Gif图。
                var boom = $("<img></img>").attr("src", "./imgs/boom.gif").width(40).height(40);
                content.css("margin", "0px").html(boom);
            } else if (map[i][j] > 0) {
                content.text(map[i][j]);
            }

            box.append(cover).append(content);
            $("#panel").append(box);
        }
    };
}

View Code

3. 注册几个核心事件

扫雷小游戏-纯网页版下载_扫雷游戏下载手机版
扫雷小游戏-纯网页版下载_扫雷游戏下载手机版

function registerEvents() {
    $(".box").hover(function () {
        var row = $(this).attr("row");
        var col = $(this).attr("col");
        if (mark[row][col] == 0)
            $(this).children(".cover").css("backgroundColor", "lightgray");
    });
    $(".box").mouseleave(function () {
        var row = $(this).attr("row");
        var col = $(this).attr("col");
        if (mark[row][col] == 0)
            $(this).children(".cover").css("backgroundColor", "black");
    });
    $(".box").dblclick(function () {
        // 挖格子,看运气是不是雷
        sweeper($(this));
    });

    $(".box").click(function () {
        var row = $(this).attr("row");
        var col = $(this).attr("col");
        mark[row][col] = mark[row][col] == 1 ? 0 : 1; // 旗子标记

        var color = mark[row][col] == 1 ? "red" : "black";
        $(this).children(".cover").css("backgroundColor", color);

        valid(); // 验证是否成功通关。
    });
}

View Code

4. 挖格子功能

扫雷小游戏-纯网页版下载_扫雷游戏下载手机版
扫雷小游戏-纯网页版下载_扫雷游戏下载手机版

function isMine(row, col) {
    return map[row][col] >= 100;
}

function sweeper(box) {
    var row = box.attr("row");
    var col = box.attr("col");
    if (isMine(row, col)) {
        $(".cover").fadeOut("slow").siblings(".content").fadeIn("slow");
        box.delay(1).queue(function () {
            $("#msg").text("Boom!!!游戏结束.").show("slow");
        });

        return;
    }

    // 如果遇到空白,则自动挖开以此为中心的九宫格,并且递归搜索。
    autoSweeper(row, col);

    valid();
}

View Code

5. 增加了一个简单的深搜,挖到空白格子则自动挖出以此为中心的九宫格,并且遇到同样空白格子会继续挖。

扫雷小游戏-纯网页版下载_扫雷游戏下载手机版
扫雷小游戏-纯网页版下载_扫雷游戏下载手机版

function autoSweeper(row, col) {
    var cover = $(".box[row=" + row + "][col=" + col + "]").children(".cover");

    if (cover.is(":hidden"))
        return;

    cover.hide("fast").siblings(".content").show("fast", function () {
        if (map[row][col] != 0)
            return;

        // 如果挖到空白格子,则自动挖四周
        searchAround(row, col, autoSweeper);
    });
}

function searchAround(row, col, action) {
    for (var i = 0; i < at.length; i++) {
        var posX = parseInt(row) + at[i][0];
        var posY = parseInt(col) + at[i][1];
        // 不要超出地图范围
        if (posX < 0 || posY < 0 || posX >= map.length || posY >= map[0].length)
            continue;

        action(posX, posY);
    }
}

View Code

6. 简单验证下是否达成通关条件

扫雷小游戏-纯网页版下载_扫雷游戏下载手机版
扫雷小游戏-纯网页版下载_扫雷游戏下载手机版

function valid() {

    var count = boomNum;
    for (var i = 0; i < num; i++) {
        for (var j = 0; j < num; j++) {
            if (mark[i][j] == 1 && map[i][j] >= 100) {
                count--;
            }
        }
    }

    if (count == 0) {
        $(".cover").fadeOut("fast").siblings(".content").fadeIn("fast");
        $(".cover").delay(1).queue(function () {
            $("#msg").text("恭喜你!成功过关.").show("slow");
        });
    }
}

View Code

三、参考资料

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167659.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号