master

分支 (1)

管理

管理

master

puzzle
/
puzzle.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>九宫格游戏</title>
    <style>
        .content {
            width: 300px;
            height: 300px;
            margin: 50px auto;
            background-color: #fff;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
            position: relative;
        }
        .content .puzzle-game {
            text-align: center;
            font-size: 18px;
            position: absolute;
            /* float: left; */
            background-image: url('./image/5.png');
            background-size: 600px;
            border: 1px solid #fff;
            box-sizing: border-box;
            user-select:none;
        }
        .action-box {
            padding: 16px 0;
            text-align: center;
        }
        .action-box button{
            width: 80%;
            border: 0;
            border-radius: 4px;
            height: 32px;
            color: #fff;
            background-color: #2d8cf0;
            margin-bottom: 0;
            font-weight: 400;
            outline: none;
            text-align: center;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            background-image: none;
            border: 1px solid transparent;
            white-space: nowrap;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            height: 32px;
            padding: 0 15px;
            font-size: 14px;
            border-radius: 4px;
            transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear;
        }
        .help-word {
            padding: 10px 15px;
        }
    </style>
</head>
<body>
    <div class="content">
    </div>
    <div class="action-box"><button id="game-reset">刷新/开始游戏</button></div>
    <div class="action-box"><button id="game-help">寻路</button></div>
    <div class="help-word"></div>
    <script src="./js/puzzle.js"></script>
    <script>
        let dom = document.querySelector('.content');
        let puzzle = new Puzzle(dom, {
            size: 3
        });
        document.querySelector('#game-reset').addEventListener('click', ()=>{
            puzzle.random();
        })
        document.querySelector('#game-help').addEventListener('click', ()=>{
            puzzle.autoCalcPuzzle();
        })
    </script>
</body>
</html>