我爱模板网 > 特效插件 > 其他特效 >  2048 html5+js小游戏正文

2048 html5+js小游戏

特效介绍
2048

基于html5+JavaScript的2048小游戏。2048游戏共有16个格子,初始数字由2或者4构成,玩法如下:
    1、鼠标或手指(手机模式下)按下滑向一个方向,也支持(↑↓←→) 键盘上下左右按键,所有格子会向那个方向运动。
    2、相同数字的两个格子,相撞时数字会相加。
    3、每次滑动时,空白处会随机刷新出一个数字的格子。
    4、当界面不可运动时(当界面全部被数字填满时),游戏结束;当界面中最大数字是2048时,游戏胜利。
使用方法
1、下载解压,引入css和js
<link rel="stylesheet" href="./data/style.css">
<script src="./data/bind_polyfill.js"></script>
2、在html中加入下面的代码:
<div class="container">
    <div class="heading">
        <h1 class="title">2048</h1>
        <div class="scores-container">
            <div class="score-container">104<div class="score-addition">+24</div></div>
            <div class="best-container">1420</div>
        </div>
    </div>
    <div class="above-game">
        <a class="restart-button">New Game</a>
    </div>
    <div class="game-container">
        <div class="game-message">
            <p>
            </p>
            <div class="lower">
                <a class="keep-playing-button">Keep going</a>
                <a class="retry-button">Try again</a>
                <div class="score-sharing"></div>
            </div>
        </div>
        <div class="grid-container">
            <div class="grid-row">
                <div class="grid-cell">
                </div>
                <div class="grid-cell">
                </div>
                <div class="grid-cell">
                </div>
                <div class="grid-cell">
                </div>
            </div>
            <div class="grid-row">
                <div class="grid-cell">
                </div>
                <div class="grid-cell">
                </div>
                <div class="grid-cell">
                </div>
                <div class="grid-cell">
                </div>
            </div>
            <div class="grid-row">
                <div class="grid-cell">
                </div>
                <div class="grid-cell">
                </div>
                <div class="grid-cell">
                </div>
                <div class="grid-cell">
                </div>
            </div>
            <div class="grid-row">
                <div class="grid-cell">
                </div>
                <div class="grid-cell">
                </div>
                <div class="grid-cell">
                </div>
                <div class="grid-cell">
                </div>
            </div>
        </div>
        <div class="tile-container"><div class="tile tile-2 tile-position-1-1"><div class="tile-inner">2</div></div><div class="tile tile-8 tile-position-1-2"><div class="tile-inner">6</div></div><div class="tile tile-8 tile-position-1-2"><div class="tile-inner">6</div></div><div class="tile tile-16 tile-position-1-2 tile-merged"><div class="tile-inner">8</div></div><div class="tile tile-16 tile-position-1-3"><div class="tile-inner">8</div></div><div class="tile tile-2 tile-position-1-4"><div class="tile-inner">2</div></div><div class="tile tile-4 tile-position-2-1"><div class="tile-inner">4</div></div><div class="tile tile-4 tile-position-2-1"><div class="tile-inner">4</div></div><div class="tile tile-8 tile-position-2-1 tile-merged"><div class="tile-inner">6</div></div><div class="tile tile-2 tile-position-3-1"><div class="tile-inner">2</div></div><div class="tile tile-2 tile-position-3-3 tile-new"><div class="tile-inner">2</div></div></div>
    </div>
</div>


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
下载 提取码/密码:wq8e(点击复制密码) 预览
上一篇:jQuery Word Export可将网页内容导出到Word文档 下一篇:谷歌跨域插件:Allow CORS: Access-Control-Allow-Origin
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢