Elimination games. – Elimination fun

An HTML – based, Javascript – based elimination game. The CreateJS framework is used.

-> view online demo

screenshot:

Example 1:



Example “hint ()” :



Example [col&row]:\

{
col:20.//set 20 columns
row:16.//set 16 rows
}
Copy the code

usage:

<div class="game-container">
    <canvas id="js-game" width="300" height="250" class="gamecanvas"></canvas>
</div>
<script src="Res/zepto. Min. 1.1.6. Js." "></script>
<script src="Res/easeljs - 0.8.2. Min. Js." "></script>
<script src="Res/tweenjs - 0.6.2. Min. Js." "></script>
<script src="res/hammer.min.js"></script>
<script src="xiaoxiaole.js"></script>
<script>
    var xxl = new XiaoXiaoLe("js-game"."img", {col:6.//6 columns
            row:5.//5 rows
        },
        function (score) {  //score changed calback
            $("#js-score-num").text(score)
        }, 
        function (score) {   //game end calback
            alert("gameover!! ,You get " + score + " points");
        }, 
        function (time) {$("#js-time-down").text(time)
        }
    );

    xxl.start();

    // hint 
    xxl.hint();
</script>
Copy the code

index.html:

<! DOCTYPEhtml>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>XiaoXiaoLe</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="Width = device - width, user - scalable = no, minimum - scale = 1.0, the maximum - scale = 1.0">

    <link rel="stylesheet" href="res/index.css" />
    
</head>
<body>

    <div class="main">

        <div class="score">
            <button id="js-start">start</button>
            <button id="js-hint">hint</button>
            <button id="js-chint">close hint</button>
            <div class="score-num">score:<span id="js-score-num">0</span></div>
            <div class="score-time">time left:<span id="js-time-down">00:00</span></div>
        </div>
        <div class="game-container">
            <canvas id="js-game" width="300" height="250" class="gamecanvas"></canvas>
        </div>
        
    </div>

    <script src="Res/zepto. Min. 1.1.6. Js." "></script>
    <script src="Res/easeljs - 0.8.2. Min. Js." "></script>
    <script src="Res/tweenjs - 0.6.2. Min. Js." "></script>
    <script src="res/hammer.min.js"></script>
    <script src="xiaoxiaole.js"></script>
    <script type="text/javascript">

        var xxl = new XiaoXiaoLe("js-game"."img", {col:6.//6 columns
            row:5.//5 rows
        },function (score) {  //score changed calback
            $("#js-score-num").text(score)
        }, function (score) {   //game end calback
            alert("gameover!! ,You get " + score + " points");
        }, function (time) {$("#js-time-down").text(time)
        });

        $("#js-start").click(function () { xxl.start(); $(})"#js-hint").click(function () { xxl.hint(); $(})"#js-chint").click(function () {
            xxl.closeHint();
        })

    </script>

</body>
</html>
Copy the code