js实现2048游戏-html代码-BFW代码库

js实现2048游戏

代码语言：html

所属分类：游戏

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>

    <style>
        html {
    height: 100%;
}
body {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    font-size: 16px;
}
* {
    margin: 0;
    padding: 0;
}
#button {
    position: absolute;
    border-bottom: none;
    background: skyblue;
}
#button button {
    height: 100%;
    width: 33.333%;
    display: inline-block;
}
#button button:last-child {
    margin-right: 0;
}
#div {
    position: absolute;
    border: 1px solid gray;
    cursor: move;
}
canvas {
    position: relative;
    left: 0;
    top: 0;
    margin-left: 2px;
    margin-top: 2px;
    z-index: -2;
}
#div img {
    position: absolute;
    display: inline-block;
    width: 100%;;
    height: 100%;
    left: 0;
    top:0;
    margin-left: 2px;
    margin-top: 2px;
    z-index: -3;
}
.off {
    background: #d5d5d5;
}
    </style>
</head>
<body>
   <div id="button" style="display: none"><button value="回退" data-num="3">回退：3次</button><button value="重新开始">重新开始</button><button value="开始游戏">开始游戏</button></div>
<div id="div" data-game="false">
    <canvas>请升级浏览器</canvas>
    <img id="img"/>
</div>
    <script type="text/javascript">
     var canvas = document.querySelector('canvas');
var button = document.getElementById('button');
var draw = canvas.getContext('2d')?(button.style.display='block',draw=canvas.getContext('2d')):'';
var div = document.getElementById('div');
for (var i = 0; i < button.children.length - 1; i++) {
    button.children[i].disabled = true;
}
var arr = [];
var arr1 = [];
var num = 4;
var music = new Audio('./music/c2.mp3');
var color = {
    0: '#5cb85c',
    2: '#FFCCCC',
    4: '#99CFFF',
    8: '#0099CC',
    16: '#0066CC',
    32: '#FFCC99',
    64: '#FF9999',
    128: '#CCFF66',
    256: '#FFFF00',
    512: '#CCFF9.........完整代码请登录后点击上方下载按钮下载查看