蓝色拼图小游戏的实现

最新推荐文章于 2022-05-31 17:45:00 发布

Hell*

最新推荐文章于 2022-05-31 17:45:00 发布

阅读量252

点赞数

本文链接：https://blog.csdn.net/hell__/article/details/88716356

版权

我是在这里看到这个游戏的：http://www.webhek.com/post/inverter.html 看到这个小游戏就觉得挺有意思的，于是想要去自己实现它。样式没怎么变，原作者是使用的jquery,我用的是JavaScript，代码写得不是很漂亮，能实现功能就好。
直接上代码
HTML部分

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="JavaScript.js" charset="utf-8"></script>
    <title>蓝色拼图</title>
</head>
<body>
    <div class="container">
        <div class="heading">
            <h1 class="title">蓝色拼图</h1>
            <div class="scoresContainer">
                <div class="currLevel">
                    当前级别
                    <b id="currLevel"></b>
                </div>
                <div class="best">
                    历史最高级别
                    <b id="best"></b>
                </div>
            </div>
            <div class="aboveGame">
                <p class="gameInfo"></p>
                <a class="reset btn btn-primary" href="javascript:openLogin()">重置级别</a>
                <a class="newgame btn btn-primary" href="javascript:openLogin2()">重新开始</a>
                <a class="instruct btn btn-primary" href="javascript:openLogin3()">玩法说明</a>
                <a class="tebieshuoming btn btn-primary" href="javascript:openLogin4()">游戏正版链接</a>
            </div>
            <div style="height:30px"></div>
            <div class="board" id="board" style="padding:15px 15px 0px;">
            </div>
            <div class="modal fade in" id="restartLevel" aria-hidden="false" style="display:none">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="cheesyGoodJob">你确定要这样做吗？</h4>
                        </div>
                        <div class="modal-body">
                            <p>你真的想重新开始吗？</p>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-success" id="resetLevelConfirm" type="button" data-dismiss="modal" onclick="resetLevel()">重置级别</button>
                            <button class="btn btn-success" type="button" data-dismiss="modal" onclick="resetLevelnone()">不需要</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade in" id="newGame" aria-hidden="false" style="display:none">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">你确定要这样做？</h4>
                        </div>
                        <div class="modal-body">
                            <p>你真的想重新开始吗？</p>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-success" id="newGameConfirm" type="button" data-dismiss="modal" onclick="newGame()">新游戏</button>
                            <button class="btn btn-success" type="button" data-dismiss="modal" onclick="newGamenone()">不需要</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade in" id="instructions" aria-hidden="false" style="display:none">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">玩法说明</h4>
                        </div>
                        <div class="modal-body">
                            <p>如何才算赢：使拼板全部变成蓝色。<br/>玩法：每个方块一面橙色，一面蓝色。点击一个方块，这个方块的颜色会翻转，并且，与它邻接的方块的颜色也会翻转。</p>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-success" id="instructionsConfirm" type="button" data-dismiss="modal" onclick="instructions()">开始</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade in" id="shuoming" aria-hidden="false" style="display:none">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">版权说明</h4>
                        </div>
                        <div class="modal-body">
                            <p>此游戏只是本人为了练习前端技术而做的，不用做任何商业用途。正版链接请点下方网址<br />我是在这里看到这个游戏的：<a href="http://www.webhek.com/post/inverter.html" target="_blank">http://www.webhek.com/post/inverter.html</a><br />看到这个小游戏就觉得挺有意思的，于是想要去自己实现它。样式没怎么变，原作者是使用的jquery,我用的是JavaScript，代码写得不是很漂亮，能实现功能就好。</p>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-success" id="instructionsConfirm" type="button" data-dismiss="modal" onclick="shuoming()">了解</button>
                        </div>
                    </div>
                </div>
            </div>
            </div>
    </div>
</body>
</html>

CSS部分

 body{
    background-color:#faf8ef;
    font-family:clear sans,helvetica neue,Arial,sans-serif
}
*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.container {
    width:600px;
    margin:auto;
    margin-bottom:0px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
}
.title{
    font-size:80px;
    font-weight:700;
    margin:0;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    margin-top:0px;
}
.scoresContainer{
    float:right;
    text-align:right;
}
p{
    margin-bottom:10px;
    margin-left:0px;
    margin-right:0px;
    margin-top:0px;
}
.btn{
    display:inline-block;
    margin-bottom:0px;
    font-weight:400;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
    background-image:none;
    border:1px solid transparent;
    white-space:normal;
    padding:6px 12px;
    font-size:14px;
    line-height:1.4285;
    border-radius:4px;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
a{
    color:#428bca;
    text-decoration:none;
}
.btn-primary{
    color:#fff;
    background-color:#428bca;
    border-color:#357ebd;
}
.board{
    position:absolute;
    background-color:#4d4d4d;
    border-radius:4px;
}
.card{
    /*background:#E6AB5E;*/
    float:left;
    margin:6px 0 0 6px;
}
.bluecard{
    background:#5C90FF;
}
.fade.in{
    opacity:1;
}
.modal{
    overflow:auto;
    overflow-y:scroll;
    position:fixed;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    z-index:1050;
    outline:0;
}
.modal-dialog{
    position:relative;
    width:auto;
    margin:10px;
}
.modal-content{
    position:relative;
    background-color:#fff;
    border:1px solid #808080;
    border-radius:6px;
    box-shadow:0px 3px 9px rgba(0,0,0,0.5);
    background-clip:padding-box;
    outline:0;
}
.modal-header{
    padding:15px;
    border-bottom:1px solid #e5e5e5;
    min-height:16.42px;
}
.modal-title{
    margin:0;
    line-height:1.4285;
}
.modal-body{
    position:relative;
    padding:20px;
}
.modal-footer{
    margin-top:15px;
    padding:19px 20px 20px;
    text-align:right;
    border-top:1px solid #e5e5e5;
}
.btn-success{
    color:#fff;
    background-color:#5cb85c;
    border-color:#4cae4c;
}
.btn{
    display:inline-block;
    margin-bottom:0px;
    font-weight:400;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
    background-image:none;
    border:1px solid transparent;
    white-space:nowrap;
    padding:6px 12px;
    font-size:14px;
    line-height:1.4285;
    border-radius:4px;
    -ms-user-select:none;
}

JavaScript部分

                                var level = 1;//游戏等级
                                var margin = 6;//每张卡片的距离
                                var size = 0;//每张卡片的尺寸
                                var resetlevel = 0;
                                window.onload = function load() {
                            openLogin3();
                            window.onload = initGame();
                        }
                        function initGame() {
                        //初始化游戏函数
                        if (this.resetlevel == 1) {
                            for (var i = this.level * this.level; i--;) {
                                this.card.push({
                                    color: false,//false是黄色，true是蓝色
                                })
                            }
                            for (var x in card) {
                                for (var x in card) {
                                    if (document.getElementById(x) != null) {
                                        var bo = document.getElementById("board");
                                        bo.removeChild(document.getElementById(x));
                                    }
                                }
                                  }
                            this.level = 1;
                            this.resetlevel = 0;
                        }
                        if (this.level < 4) {
                            this.margin = 12;
                        }
                        else if (this.level < 8) {
                            this.margin = 6;
                        }
                        else if (this.level < 16) {
                            this.margin = 3;
                        }
                        else {
                            this.margin = 1;
                        }
                        this.card = [];
                        this.size = (600 - (this.level + 1) * this.margin) / this.level;
                        for (var i = this.level * this.level; i--;){
                            this.card.push({
                                color: false,//false是黄色，true是蓝色
                            })
                        }
                         //动态生成DIV
                        for (var x in card) {
                            if (document.getElementById(x) != null) {
                                var bo = document.getElementById("board");
                                bo.removeChild(document.getElementById(x));
                            }
                            var box = document.createElement("div");
                            box.style.width = size + 'px';
                            box.style.height = size + 'px';
                            box.style.marginTop = margin + 'px';
                            box.style.marginLeft = margin + 'px';
                            box.style.marginBottom = margin + 'px';
                            box.style.marginRight = margin + 'px';
                            box.style.background = '#E6AB5E';
                            box.style.cssFloat = 'left';
                            box.className += ' ' + 'card';
                            box.id += '' + x;
                            var bo = document.getElementById("board");
                            bo.appendChild(box);
                            for (var j = 1; j < this.level; j++) {
                                if (x == j * this.level) {
                                    box.style.clear = 'both';//清除浮动效果
                                }
                            }
                            var id = x;
                            var e = document.getElementById(id);
                            e.setAttribute("onclick", "check(id)");
                        }
                        document.getElementById("currLevel").innerHTML = this.level;
                        document.getElementById("best").innerHTML = this.localStorage.cardLevel;
                    }
                //点击方块
                function check(x) {
                    //this.card[x].color = !this.card[x].color;
                    var id = document.getElementById(x);
                    if (id.style.background == "rgb(230, 171, 94)") {
                        id.style.background = '#5C90FF';
                    } else {
                        id.style.background = '#E6AB5E';
                    }
                    changeNeighbor(x);
                    gameOver();
                    if (gameOver()) {
                        setTimeout(function () {
                            alert('恭喜通过第' + this.level + '关');
                            this.level++;
                            initGame();
                            //initGame();
                        }, 200)
                    }
                }
                //其他方块
            function changeNeighbor(x) {
                var card = this.card;
                var x = parseInt(x);
                if (x > 0) {//左边
                    if (x % this.level) {//不在最左边
                        //card[x - 1].color = !card[x - 1].color;
                        var left = document.getElementById(x - 1);
                        if (left.style.background == "rgb(230, 171, 94)") {
                            left.style.background = '#5C90FF';
                        } else {
                            left.style.background = '#E6AB5E';
                        }
                    }
                }
                if (x < card.length - 1) {//右边
                    if ((x + 1) % this.level) {//不在最右边
                        //card[x + 1].color = !card[x + 1].color;
                        var right = document.getElementById(x + 1);
                        if (right.style.background == "rgb(230, 171, 94)") {
                            right.style.background = '#5C90FF';
                        } else {
                            right.style.background = '#E6AB5E';
                        }
                    }
                }
                if (x - this.level >= 0) {//上面
                    //card[x - this.level].color = !card[x - this.level].color;
                    var top = document.getElementById(x - this.level);
                    if (top.style.background == "rgb(230, 171, 94)") {
                        top.style.background = '#5C90FF';
                    } else {
                        top.style.background = '#E6AB5E';
                    }
                }
                if (x + this.level < card.length) {//下面
                    //card[x + this.level].color = !card[x + this.level].color;
                    var bottm = document.getElementById(x + this.level);
                    if (bottm.style.background == "rgb(230, 171, 94)") {
                        bottm.style.background = '#5C90FF';
                    } else {
                        bottm.style.background = '#E6AB5E';
                    }
                }
            }
            //检查游戏是否结束
        function gameOver() {
            card.color = true;
            for (var y in card) {
                var y = parseInt(y);
                if (isNaN(y)) {
                    break;
                }
                var lastgame = document.getElementById(y);
                if (lastgame.style.background == "rgb(230, 171, 94)") {
                    card.color = false;
                }
            }
            if (card.color) {
                setLevel(this.level + 1);
                this.stepCount = 0;
                return true
            }
        }
        /**
        * 将等级储存止本地
        */
        function setLevel(level) {
            localStorage.cardLevel = level;
        };
        /**
        * 得到本地的等级
        */
        function getLevel() {
            if (localStorage.cardLevel) return localStorage.cardLevel * 1;
            return 0;
        }
        //重置等级
        function openLogin() {
            document.getElementById("restartLevel").style.display = "block";
        }
        function resetLevel() {
            document.getElementById("restartLevel").style.display = "none";
            this.resetlevel = 1;
            initGame();
            return true;
        }
        function resetLevelnone() {
            document.getElementById("restartLevel").style.display = "none";
        }
        function openLogin2() {
            document.getElementById("newGame").style.display = "block";
        }
        //新游戏
        function newGame() {
            document.getElementById("newGame").style.display = "none";
            initGame();
        }
        function newGamenone() {
            document.getElementById("newGame").style.display = "none";
        }
        function openLogin3() {
            document.getElementById("instructions").style.display = "block";
        }
        //游戏说明
        function instructions() {
            document.getElementById("instructions").style.display = "none";
        }
        function openLogin4() {
            document.getElementById("shuoming").style.display = "block";
        }
        //版权说明
        function shuoming() {
            document.getElementById("shuoming").style.display = "none";
        }

Hell*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
蓝色拼图小游戏的实现

var level = 1;//游戏等级var margin = 6;//每张卡片的距离var size = 0;//每张卡片的尺寸var resetlevel = 0;window.onload = function load() { openLogin3(); window.onload = initGame();}function initGame() { //初始化游戏函数 if (this.resetlevel == 1) {
复制链接

扫一扫