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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0