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

代码语言：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})
            }
        }
    } else {
        for (i = 0; i < arr.length; i++) {
            for (z = 0; z < arr.length; z++) {
                arr[i][z].x = z * w;
                arr[i][z].y = i * w
            }
        }
    }
}

function back() {
    arr1 = JSON.parse(JSON.stringify(arr))
}

function view(load, h, on) {
    draw.clearRect(0, 0, canvas.width, canvas.height);
    var w = canvas.width / arr.length;
    if (load) {
        for (var i = 0; i < arr.length; i++) {
            for (var z = 0; z < arr.length; z++) {
                draw.fillStyle = '#5cb85c';
                draw.fillRect(arr[i][z].x, arr[i][z].y, w - 4, w - 4)
            }
        }
        var url = canvas.toDataURL();
        var img = document.querySelector('#img');
        img.src = url;
        draw.clearRect(0, 0, canvas.width - 4, canvas.height - 4);
        draw.fillRect(0, 0, canvas.width - 4, canvas.height - 4);
        draw.fillStyle = 'black';
        draw.font = (canvas.width / 25) + 'px Arial';
        draw.fillText('游戏内拖动鼠标进行操作', canvas.width / 2, canvas.height /3);
        draw.font = (canvas.width / 15) + 'px Arial';
        draw.fillText('点击按钮开始游戏', canvas.width / 2, canvas.height / 2);
        draw.restore()
    } else {
        for (i = 0; i < arr.length; i++) {
            for (z = 0; z < arr.length; z++) {
                if (arr[i][z].value > 0) {
                    if (on) {
                        draw.fillStyle = color[arr[i][z].value];
                        draw.fillRect(arr[i][z].x + (h * arr[i][z].min), arr[i][z].y + (h * arr[i][z].max), w - 4, w - 4);
                        draw.fillStyle = 'black';
                        draw.fillText(arr[i][z].value, arr[i][z].x + w / 2 + (h * arr[i][z].min), arr[i][z].y + w / 2 + (h * arr[i][z].max));
                    } else {
                        arr[i][z].add = true;
                        draw.fillStyle = color[arr[i][z].value];
                        draw.fillRect(arr[i][z].x, arr[i][z].y, w - 4, w - 4);
                        draw.fillStyle = 'black';
                        draw.fillText(arr[i][z].value, arr[i][z].x + w / 2, arr[i][z].y + w / 2);
                    }

                }
            }
        }
    }
}

function random() {
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        for (var z = 0; z < arr.length; z++) {
            if (arr[i][z].value === 0) {
                array.push([i, z])
            }
        }
    }
    var x = parseInt(Math.random() * array.length);
    if (Math.random() > 0.49) {
        arr[array[x][0]][array[x][1]].value = 2
    } else {
        arr[array[x][0]][array[x][1]].value = 4
    }
}

function index(off) {
    var n, m;
    switch (off) {
        case 'down':
            for (var i = arr.length - 1; i >= 0; i--) {
                for (var z = arr.length - 1; z >= 0; z--) {
                    if (arr[z][i].value === 0) {
                        n = z;
                        for (var k = z - 1; k >= 0; k--) {
                            if (arr[k][i].value > 0) {
                                m = n;
                                arr[k][i].max = n - k;
                                n--;
                            }
                        }
                        break
                    }
                }
            }
            break;
        case 'right':
            for (i = 0; i < arr.length; i++) {
                for (z = arr.length - 1; z >= 0; z--) {
                    if (arr[i][z].value === 0) {
                        n = z;
                        for (k = z - 1; k >= 0; k--) {
                            if (arr[i][k].value > 0.........完整代码请登录后点击上方下载按钮下载查看