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

消除游戏-消消乐

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


-> view online demo


screenshot:

Example 1:

一个基于HTML,Javascript的消除游戏_第1张图片

Example “hint()”:

一个基于HTML,Javascript的消除游戏_第2张图片

Example [col&row]:

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

一个基于HTML,Javascript的消除游戏_第3张图片

usage:

index.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>XiaoXiaoLetitle>
    <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">startbutton>
            <button id="js-hint">hintbutton>
            <button id="js-chint">close hintbutton>
            <div class="score-num">score:<span id="js-score-num">0span>div>
            <div class="score-time">time left:<span id="js-time-down">00:00span>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>

你可能感兴趣的:(HTML好玩的简单项目,好玩,游戏,游戏)