JavaScript-day-44

最新推荐文章于 2024-07-08 18:51:22 发布

落华见樱

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量703

点赞数

文章标签：前端 vscode 编辑器

本文链接：https://blog.csdn.net/qq_47726356/article/details/121525221

版权

2021.11.24 晴

运用JavaScript实现扫雷游戏

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
    tile 默认 ba.png
    showed 已点击 #C3CEE5
    boom  雷 Minesmall.png
    tag 小红旗 hq.png
    current 移入 baq.png
-->
    <link rel="stylesheet" href="sl.css">
    <script src="./jq/jq3.4.1.js"></script>
    <script src="sl.js"></script>
    <script>
        window.onload = init;
        function init() {
            // 行列
            var r_cArr = [10, 15, 20];
            // 雷的个数
            var mineArr = [10, 30, 80];
            // 重新加载
            var isstopmp3a=0;
            document.getElementById('refresh').onclick = function () {
                window.location.reload();
            }
            document.getElementById('start').onclick = function () {
                //背景音乐
                var mp3a=new Audio("./mp3/a.mp3");
                $(mp3a).bind('ended',function(){
                    mp3a.play();
                  if(isstopmp3a==1){
                      mp3a.pause();
                    return;
                  }
                })
                mp3a.play();
                // alert('开始游戏');
                // 0 判断游戏是否已经开始
                var content = document.getElementById('content');
                content.innerHTML = '';
                // 1 获取选择的难度
                var value = document.getElementById('set_num').value;
                // console.log(value);
                // 2 获取雷的个数还有行和列
                var mineNum = mineArr[value];
                var r_c = r_cArr[value];


                //自定义
                var getRow = document.getElementById('getRow');
                var getColumn = document.getElementById('getColumn');
                var getMine = document.getElementById('getMine');
                var row1 = parseInt(getColumn.value);
                var column1 = parseInt(getColumn.value);
                var mine1 = parseInt(getMine.value);
                if (row1 > 6 && column1 > 6 && mine1<row1*column1/2) {
                    mineClearance(row1, column1, mine1)
                    return;
                }
                // 执行
                mineClearance(r_c, r_c, mineNum);
            }
        }
    </script>
</head>

<body>
    <select name="" id="set_num">
        <option value="0">初级</option>
        <option value="1">中级</option>
        <option value="2">高级</option>
    </select>
    <button id="start">确定</button>
    <span id='refresh'>重新加载游戏</span>
    <div class="self_defining">行数:<input type="text" id="getRow"></div>
    <div class="self_defining">列数:<input type="text" id="getColumn"></div>
    <div class="self_defining">雷的数量:<input type="text" id="getMine"></div>
    <div id="content">
        <!-- <div class="tile">默认</div>
        <div class="tile">默认</div>
        <div class="tile">默认</div>
        <div class="tile">默认</div>
        <div class="showed">2</div>
        <div class="boom">雷</div>
        <div class="tile tag">小红旗</div>
        <div class="tile current">鼠标移入</div> -->
    </div>
</body>

</html>

CSS

*{
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 15px;
    font-family: '楷体';
}
#content{
    margin: 0 auto;
}
/* 重新加载游戏 */
#refresh{
    display: inline-block;
    height: 30px;
    width: 100px;
    line-height: 30px;
    border: 1px solid gray;
    border-radius: 5px;
    background-color: hotpink;
    color: white;
    cursor: pointer;
}
/* 默认 */
.tile,.showed,.boom{
    width: 49px;
    height: 49px;
    border: 1px solid ;
    float: left;
    cursor: pointer;
    
}
.tile{
    background: url(./img/ba.png);
}
/* 已点击 */
.showed{
    background-color: #C3CEE5;
    line-height: 49px;
}
/* 雷 */
.boom{
    background: #C3CEE5 url(./img/Minesmall.png);
}
.current{
    background:  url(./img/baq.png);
}
/* 小红旗 */

.tag{
    /* 添加多个背景图片,前面的优先 */
    background: url(./img/hq.png),url(./img/ba.png);
}

JavaScript

function mineClearance(row, column, mine_num) {
    // 属性配置
    var settings = {
        // 行
        row: row,
        // 列
        column: column,
        // 雷
        mine_num: mine_num,
        // 盒子ID
        obj: 'content',
        // 生成的每一个小div
        tiles: [],
        // 表示是否是第一次点击
        flag: true,
        // 保存某个元素的周边八个元素
        arr: []
    };
    // 创建画板
    buildTiles();
    // 绑定事件
    event();

    /**
     * 创建画板的函数
     */
    function buildTiles() {
        // 获取画板对象
        var obj = document.getElementById(settings.obj);
        // 每个小div大小是51*51 
        // 所以 画板大小为 51*column  , 51*row
        obj.style.width = 51 * settings.column + 'px';
        obj.style.height = 51 * settings.row + "px";
        // 生成小div
        // 对div添加索引,0开始,一次递增,方便获取周边八个div
        var indexOfdiv = 0;
        for (let i = 0; i < settings.row; i++) {
            for (let j = 0; j < settings.column; j++) {
                // 创建div
                var tile = document.createElement('div');
                // 设置默认 class
                tile.className = 'tile';
                // 添加索引
                tile.index = indexOfdiv++;
                // 添加自定义属性,当mine值为0时,说明不是雷
                tile.setAttribute('mine', 0);
                // 保存到数组中
                settings.tiles.push(tile);
                // 添加到画板中
                obj.appendChild(tile);
            }
        }
    }
    /**
    * 绑定事件的函数
    */
    function event() {
        // 创建画板对象
        var obj = document.getElementById(settings.obj);

        // 对画板绑定事件,通过事件源找到每一个小div
        // 移入
        obj.onmousemove = function (e) {
            // 判断事件源是否是可以点击的小div
            // console.log(e.target.className, e.target.className == 'tile');
            if (e.target.className == 'tile') {
                e.target.className = 'tile current';
                //移入音乐
                var mp3move=new Audio("./mp3/move.mp3");
                mp3move.play();
            }
        }
        // 移出
        obj.onmouseout = function (e) {
            // 判断事件源是否是可以点击的小div
            if (e.target.classList.contains('current')) {
                e.target.className = e.target.className.replace('current', '').trim();
            }
        }
        // 右键标记小红旗
        obj.oncontextmenu = function (e) {
            // 判断事件源是否是可以点击的小div
            if (!e.target.classList.contains('sh

最低0.47元/天解锁文章

落华见樱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-day-44

2021.11.24 晴运用JavaScript实现扫雷游戏HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid.
复制链接

扫一扫