javascript 扫雷

自制JS扫雷游戏

最新推荐文章于 2023-10-29 10:58:40 发布

转载最新推荐文章于 2023-10-29 10:58:40 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zouhaijian/archive/2009/08/07/1541568.html

文章标签：

#javascript #xhtml #ViewUI

作者分享了一款使用JavaScript编写的扫雷游戏代码。该扫雷游戏允许玩家自定义地图大小和地雷数量，并实现了基本的游戏逻辑，包括点击展开区域、标记地雷等功能。

糊里糊涂的做了个javascript版的扫雷，只是按照我个人的思路去做，应该很多实现的思路都很欠佳。不过总的来说这次也有不少的收获。懂得了很多细节的实现。

代码如下：

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-compatible" content="IE=EmulateIE7">
<style type="text/css">
body{
    color:white;
    text-algin:center;
    background:#141414;
}
#containter{
    margin:40px auto 0;
    width:152px;
    background:#141414;
}
#restart{
    float:left;
    cursor:pointer;
    margin-right:20px;
    width:80px;
    height:20px;
    font:12px "宋体";
    text-align:center;
    line-height:20px;
    vertical-align:middle;
    background:#a22024;
}
input{
    margin-right:20px;
    width:20px;
    border:1px solid #82a500;
}
.box{
    display:inline;
    overflow:hidden;
    float:left;
    margin:1px;
    width:24px;
    height:24px;
    cursor:pointer;
    font:18px/24px Arial;
    text-align:center;
    background:#82a500;
}
.clear{
    clear:both;
}
</style>
</head>
<body>
    <a id="restart" onclick="javascirpt:game.init();">重新开始</a>
    <label>行3-30</label><input id="rawCount" type="text" /><label>列3-30</label><input id="colCount" type="text" /><label>雷</label><input id="mineCount" type="text" />
    <div id="containter"></div>
</body>
</html>
<script type="text/javascript">
function ClearMine()
{
    // 私有属性
    var def_Raw = 8;
    var def_Col = 8;
    var def_Count = 10;

    var m_raw;
    var m_col;
    var m_count;
    var m_total;
    var openCount = 0;

    // 初始化
    this.init = function()
    {
        m_raw = document.getElementById("rawCount").value || def_Raw;
        m_col = document.getElementById("colCount").value || def_Col;
        m_count = document.getElementById("mineCount").value || def_Count;
        m_total = m_raw * m_col;

        if (m_raw < 3 || m_raw > 30 || m_col < 3 || m_col > 30 || m_count < 1 || m_count > m_total)
        {

            alert("输入有误");
            return;
        }

        // 重新清0
        openCount = 0;
        try{
            m_position = new Array(m_total);
        } catch (e)
        {
            alert("输入有误");
            return;
        }

        // 布局
        this.setLayout();
        this.setMine();

        var cont = document.getElementById("containter");
        var boxWidth = cont.getElementsByTagName("a")[0].offsetWidth;
        cont.style.width = (boxWidth + 2) * m_col + "px"; // 2 = margin-left + margin-right
    }

    // 设置页面
    this.setLayout = function()
    {
        var layout = "";
        for (i = 0; i < m_total; i++)
        {
            layout += "<a class='box' onclick='javascript:game.process(game.getLocation(this));' oncontextmenu='javascript:game.rightClick(game.getLocation(this));return false;'></a>";
        }
        layout += "<div class='clear'></div>";

        document.getElementById("containter").innerHTML = layout;
    }

    // 设置雷局
    this.setMine = function()
    {
        for (i = 0; i < m_count; i++)
        {
            var location = parseInt(Math.random() * m_total);
            while (m_position[location] == -1)
            {
                location = parseInt(Math.random() * m_total);
            }
            m_position[location] = -1;


        }

        for (i = 0; i < m_total; i++)
        {
            m_position[i] = this.getAmount(i);
        }
    }

    // 点击处理
    this.process = function(n)
    {
        if (m_position[n] > 0)
        {
            this.setIcon(n);
            if (m_total - m_count <= ++openCount)
                this.win();
        }
        else if (m_position[n] == 0)
        {
            var x = n % m_col;
            var y = parseInt(n / m_col);
            this.extendOut(x, y);
        }
        if (m_position[n] == -1)
        {
            for (i = 0; i < m_total; i++)
            {
                if (m_position[i] == -1)
                {
                    this.setIcon(i);
                }
                else
                {
                    m_position[i] = -2;
                }
            }
        }
    }

    // 右击
    this.rightClick = function(n)
    {
        if (this.getElement(n).innerHTML == "")
            this.getElement(n).innerHTML = "▲";
        else if (this.getElement(n).innerHTML == "▲")
            this.getElement(n).innerHTML = "?";
        else if (this.getElement(n).innerHTML == "?")
            this.getElement(n).innerHTML = "";
    }

    // 设置雷格图标
    this.setIcon = function(n)
    {
        this.getElement(n).innerHTML = (m_position[n] == -1) ? "●" : m_position[n];
        m_position[n] = -2;

        this.getElement(n).style.background = "#aeaeae";
    }

    // 周边雷的个数
    this.getAmount = function(n)
    {
        var x = n % m_col;
        var y = parseInt(n / m_col);

        if (m_position[x + y * m_col] == -1)
            return -1;

        var amount = 0;
        for (var i = (y - 1) > 0 ? (y - 1) : 0; i < ((y + 2) > m_raw ? m_raw : (y + 2)); i++)
            for (var j = (x - 1) > 0 ? (x - 1) : 0; j < ((x + 2) > m_col ? m_col : (x + 2)); j++)
            {
                if (m_position[j + i * m_col] == -1)
                    amount++;
            }

        return amount;
    }

    // 点击的位置(第n个雷)
    this.getLocation = function(obj)
    {
        var el = document.getElementById("containter").getElementsByTagName("a");
        for (i = 0; i < el.length; i++)
        {
            if (el[i] == obj)
            {
                return i;
            }
        }
    }

    // 获取元素
    this.getElement = function(n)
    {
        return document.getElementById("containter").getElementsByTagName("a")[n];
    }

    // 位置合法性
    this.isLegle = function(x, y)
    {
        if (x < 0 || x >= m_col ||
            y < 0 || y >= m_raw)
        {
            return false;
        }

        return true;
    }

    // 展开
    this.extendOut = function(x, y)
    {
        var n = y * m_col + x;
        if (this.isLegle(x, y))
        {
            if (m_position[n] == 0)
            {
                this.setIcon(n);

                if (this.isLegle(x - 1, y) && (m_position[y * m_col + x - 1] != -2))
                    this.extendOut(x - 1, y);
                if (this.isLegle(x - 1, y - 1) && (m_position[(y - 1) * m_col + x - 1] != -2))
                    this.extendOut(x - 1, y - 1);
                if (this.isLegle(x - 1, y + 1) && (m_position[(y + 1) * m_col + x - 1] != -2))
                    this.extendOut(x - 1, y + 1);
                if (this.isLegle(x, y - 1) && (m_position[(y - 1) * m_col + x] != -2))
                    this.extendOut(x, y - 1);
                if (this.isLegle(x, y + 1) && (m_position[(y + 1) * m_col + x] != -2))
                    this.extendOut(x, y + 1);
                if (this.isLegle(x + 1, y + 1) && (m_position[(y + 1) * m_col + x + 1] != -2))
                    this.extendOut(x + 1, y + 1);
                if (this.isLegle(x + 1, y) && (m_position[y * m_col + x + 1] != -2))
                    this.extendOut(x + 1, y);
                if (this.isLegle(x + 1, y - 1) && (m_position[(y - 1) * m_col + x + 1] != -2))
                    this.extendOut(x + 1, y - 1);

                openCount++;
            }
            else if (m_position[n] != -1)
            {
                this.setIcon(n);

                openCount++;
            }

            if (m_total - m_count <= openCount)
                this.win();
        }

        return;
    }

    // 显示赢了
    this.win = function()
    {
        for (i = 0; i < m_total; i++)
        {
            if (m_position[i] == -1)
                this.getElement(i).innerHTML = "▲";
        }
        alert("你赢了");
    }
}

var game = new ClearMine();
game.init();
</script

欢迎有人指教。