首页 > 代码库 > js写的2048
js写的2048
闲着无聊，用js写个简单的2048玩儿...引用了jquery，需要改下地址
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>2048</title> <script src="jquery-1.8.2.js"></script> <style> .square { position: absolute;} </style> </head><body> <div>当前分数：<span id="source"></span></div> <div id="contain" style=" border: 1px solid; position: relative;"></div> </body> <script type="text/javascript"> // 边框长度，总分数，是否有变化，是否还有可移动的方块 var len = 100, source = 0, changeFlag = false, hasChange = false; $(function(){ $("#contain").css({ "margin" : "50px", "width" : len * 4 + "px", "height" : len * 4 + "px" }); var html = "<div style=‘position: relative; width: " + len * 4 + "px; height: " + len * 4 + "px;‘></div>"; for (var i = 0; i < 16; i++) { $("<div x=‘" + (i % 4) + "‘ y=‘" + parseInt(i / 4) + "‘ style=‘top: " + (parseInt(i / 4) * len) + "px; left: " + (i % 4 * len) + "px; width: " + len + "px; height: " + len + "px; padding: " + (len / 10) + "px;‘ id=‘sq" + i + "‘ class=‘square‘><div class=‘num n‘ style=‘width: " + (len - 10 * 2) + "px; height: " + (len - 10 * 2) + "px; line-height: " + (len - 10 * 2) + "px; text-align: center;border: 1px solid #aaaaaa;‘></div></div>").data("x", parseInt(i / 4)).appendTo($("#contain")); } random(); random(); $(document).bind("keydown", function(event){ // 只有在方向键上下左右才执行方块移动 if (event.keyCode > 36 && event.keyCode < 41) { // 重置有方块移动标识 changeFlag = false; for (var i = 0; i < 4; i++) { // 记录方块列表的位置及分数 var list = count(get(event.keyCode, i)); // 移动方块列表到最终位置及修改显示分数 move(list, event.keyCode); } if (!hasChange) { alert("最终得分：" + source); $(document).unbind("keydown"); return; } // 如果方块有移动，生成一个新的随机方块 if (changeFlag) random(); // 修改分数 $("#source").html(source); } }); }); /** 随机生成方块 */ function random(){ // 随机获取可生成的方块索引，以".num"做标识 var index = parseInt(Math.random()*($("#contain").find(".num").length)); $(".num:eq(" + index + ")").parent().data("num", 2) $(".num:eq(" + index + ")").hide().html(2).fadeIn(400).removeClass("num"); } /** 按照按键方向与列号返回方块列表 */ function get(keyCode, num) { var list = $("#contain").find(".square[" + ((keyCode == 37 || keyCode == 39) ? ‘y‘ : ‘x‘) + "=‘" + num + "‘]"); return (keyCode == 39 || keyCode == 40) ? list.toArray().reverse() : list; } /** 计算每个方块最终的分数及位置 */ function count(list) { // 将基数方块设置为第一个 var baseIndex = 0; list[baseIndex] = $(list[baseIndex]); list[baseIndex].data("index", 0); for (var i = 1; i < list.length; i++) { list[i] = $("#" + $(list[i]).attr("id")); list[i].data("index", i); if (list[baseIndex].data("num")) { // 如果基数方块不为空时 // 列表中下一个方块不为空时 if (list[i].data("num")) { // 基数方块与下一个方块数字相同时，记录合并方块 if (list[i].data("num") == list[baseIndex].data("num")) { list[baseIndex].data("num", list[baseIndex].data("num") * 2); source += list[baseIndex].data("num"); // 将下一个方块的索引标识为-1，以便删除用 list[i].data("index", -1); list[i].data("num", ""); // 操作后将基数方块移动至下一位 baseIndex ++; // 修改有变更方块的标识 changeFlag = true; }else { // 操作后将基数方块移动至下一位 baseIndex ++; // 当列表中方块的索引大于基数方块时 if (i > baseIndex) { // 重置基数方块的索引，将基数方块的分数修改为列表中下一个方块的分数 // 将下一个方块的索引置为-1 list[baseIndex].data("index", baseIndex); list[baseIndex].data("num", list[i].data("num")); list[i].data("index", -1); // 修改有变更方块的标识 changeFlag = true; } } } }else { // 基数方块为空时 // 如果列表中下一个方块不为空 if (list[i].data("num")) { // 修改基数方块的分数为列表中下一个方块的分数，将下一个方块的索引置为-1 list[baseIndex].data("num", list[i].data("num")); list[baseIndex].data("index", baseIndex); list[i].data("index", -1); // 修改有变更方块的标识 changeFlag = true; } } } return list; } /** 将标识好的方块移动到指定位置并改变分数 */ function move(list, keyCode) { for (var i = 0; i < list.length; i++) { list[i] = $("#" + $(list[i]).attr("id")); // 如果方块的索引为-1，清空方块的数值及显示文字 if (list[i].data("index") == -1) { $("#" + list[i].attr("id")).data("num", null); $("#" + list[i].attr("id")).find(".n").html(‘‘); }else { // 索引不为-1时，将显示数字修改为方块的数值，并移除 .num（可随机生成标识）样式 $("#" + list[i].attr("id")).find(".n").html(list[i].data("num")).removeClass("num"); } } // 将有数值的方块，移除.num（可随机生成标识）样式，反之添加标识 $("#contain").find(".n").each(function(i, n){ if ($(n).html() == ‘‘) { $(n).addClass("num"); }else { $(n).removeClass("num"); } }); // 重置还有可移动方块的标识 hasChange = false; // 判断当前是否还有可移动方块 // 如果没有.num标识时，需要做逻辑判断 if ($("#contain").find(".num").length == 0) { var allList = $("#contain").find(".n").toArray(); // 依次判断方块与其右边和下边（相邻的方块）是否可合并 for (var i = 0; i < allList.length; i++) { if ((i + 1) % 4 != 0) { if ($(allList[i]).parent().data("num") == $(allList[i + 1]).parent().data("num")) { hasChange = true; return; } } if (i + 4 < 16) { if ($(allList[i]).parent().data("num") == $(allList[i + 4]).parent().data("num")) { hasChange = true; return; } } } }else { hasChange = true; } } </script> </html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。