一个基于HTML，Javascript的消除游戏

最新推荐文章于 2024-01-06 11:48:10 发布

原创最新推荐文章于 2024-01-06 11:48:10 发布 · 9.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#游戏

游戏同时被 3 个专栏收录

33 篇文章

订阅专栏

好玩

32 篇文章

订阅专栏

前端练习demo

22 篇文章

订阅专栏

消除游戏-消消乐

一个基于HTML，Javascript的消除游戏。使用了createjs框架。

-> view online demo

screenshot:

Example 1:

Example “hint()”:

Example [col&row]:

{
col:20,  //set 20 columns
row:16,  //set 16 rows
}

在这里插入图片描述

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>

index.html:

<!DOCTYPE html>
<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, 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>