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: '#CCFF99',
    1024: '#CCFF66',
    2048: '#FFCC33'
};
style();
map(num, true);
view(true);

function style() {
    var w = window.innerWidth - 4;
    var w1 = w;
    var h = window.innerHeight;
    if (w > 600) {
        w = 600;
        if (w + 30 >= h) {
            w -= 30
        }
    }
    if (w < 220) {
        w = 220
    }
    div.style.cssText = 'width:' + w + 'px;' + ' height:' + w + 'px;' + ' top:' + ((h - (w + 30)) / 2 + (30 / 2)) + 'px;' + ' left:' + ((w1 / 2) - (w / 2)) + 'px;';
    button.style.cssText = 'width:' + w + 'px;' + ' height:' + 30 + 'px;' + ' top:' + ((h - (w + 30)) / 2 - (30 / 2)) + 'px;' + ' left:' + ((w1 / 2) - (w / 2)) + 'px;';
    canvas.width = w;
    canvas.height = w;
    draw.font = (w / 10) + 'px Arial';
    draw.textAlign = 'center';
    draw.textBaseline = 'middle';
    draw.fillStyle = 'black';
    draw.save();
}

window.onresize = function (ev) {
    style();
    map(num, false);
    view(true);
    view(false, 0, false)
};

function map(num, on) {
    var w = canvas.width / num;
    if (on) {
        for (var i = 0; i < num; i++) {
            arr[i] = [];
            for (var z = 0; z < num; z++) {
                arr[i].push({value: 0, x: z * w, y: i * w, max: 0, min: 0, add: true})
            }
        }
    } el.........完整代码请登录后点击上方下载按钮下载查看