问我为啥开发这个？答：闲的蛋疼！
各位看官看到如下代码可能发现有些不需要的方法，或者注释了某些CSS样式，而不是自己删掉，这是因为哥们开发了多个2048版本，有些方法就作为对应版本的接口了，没删掉。
本游戏支持pc端鼠标拖动和移动端触屏滑动（大小适配暂未做）
看代码：
html代码
<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>2048-bobo版</title><head></head><body><div id="wrap"><div class="title"> <div class="title_left"><img src="./images/logo.jpg" /></div> <div class="refresh"><img src="./images/refrush.png" /></div> <div class="title_right"> <p class="title_right_top">目前分数:<span id="currentScore"></span></p> <p class="title_right_bottom">逼格:<span id="level">待定</span></p> </div></div><div class="div_wrap" id="div_wrap"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class="bottom">@author:波波</div></div></body></html>
css代码：
body{background:#fff0f2;} .div_wrap,.title { background:#bdab9d; /*background:#57407c;*/ width:500px; height:500px; margin:0 auto; border-radius:10px; } .div_wrap div { float:left; height:107px; width:107px; line-height:2; background:#ccc0b2; /*background: #3d2963;*/ margin:14.4px 0 0 14.4px; text-align:center; font-size:50px; vertical-align:middle; color:#fff; font-weight:bolder; border-radius:10px; } div.num2 { background:#eee4da; } div.num4 { background:#f3ae79; } div.num8 { background:#f59563; } div.num16 { background:#f8795e; } div.num32 { background:#edce71; } div.num64 { background:#f65d3b; } div.num128 { background:#edce71; } div.num256 { background:#edcc61; } div.num512 { background:#ecc850; } div.num1024 { background:#edc53f; } div.num2048 { background:#eee4da; } .title { width:500px; margin-bottom:10px; height:80px; } div.title_left,div.refresh { float:left; width:78px; background:#fff; height:80px; color:#000; border-radius:10px; } div.refresh { background:#bdab9d; } div.refresh img { margin:0 0 0 100%; cursor:pointer; } div.title_left img { border-radius:10px; } div.title_right { float:right; height:80px; margin:0 20px 0 0; } div.title_right .title_right_top,div.title_right .title_right_bottom { color:#fff; margin:5px; font-size:25px; line-height:1; font-weight:bolder; text-align:right; } div.title_right .title_right_bottom { color:#fff; margin:5px; font-size:20px; line-height:1; } #currentScore,#level { font-size:30px; font-weight:bolder; display:inline-block; width:50px; text-align:left; } #level { font-size: 20px; } .bottom { text-align:center; font-size:12px; line-height:2; }js代码：
<script src="jquery.js" type="text/javascript"></script><script type="text/Javascript"> /*@author:yichengbo* *此游戏持续改进开发*/ $(function () { $("#wrap").height($(document).height()); function game2048() { this.data = [ [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0] ]; this.startX = 0; this.startY = 0; this.endX = 0; this.level = [];//逼格 this.endY = 0; this.score = 0; //得分 this.slide = false; //是否是可滑动的，默认是不可以滑动的，产生一个随机数 this.init(); } game2048.PRototype = { numImage: function (num) { return "<img src='./images/" + num + ".gif'/>"; }, /*0的位置随机生成一个随机的2或4*/ randomNum: function () { var rand = Math.ceil(Math.random() * 4); //产生0-4的随机整数 if (rand != 4) {//返回随机数为2和4的整数,2的概率是4概率的3倍 rand = 2; } //此处还有一种方法是生成一个0-15的随机数，从左到右，从上到下对数组元素位置编号 var x = Math.floor(Math.random() * 4); var y = Math.floor(Math.random() * 4); if (this.data[x][y] == 0) { this.data[x][y] = rand; } else { this.randomNum(); } }, /*返回移动方向*/ moveDirection: function (x, y) { var direction = ""; if (x == 0 && y == 0) return; if (Math.abs(x) > Math.abs(y)) {//左右滑动 if (x > 0) direction = "right"; else direction = "left"; } else {//上下滑动 if (y > 0)//浏览器的y坐标轴向下是正的，向上是负的 direction = "down"; else direction = "up"; } return direction; }, /*根据移动方向做处理*/ move: function (direction) { switch (direction) { case "up": this.moveUp(); break; case "right": this.moveRight(); break; case "down": this.moveDown(); break; case "left": this.moveLeft(); break; } }, /*重绘界面*/ repraint: function () { var num = 0; //表示第几个方块 for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { num = i * 4 + j; if (this.data[i][j] != 0) { $(".div_wrap div").eq(num).removeClass(); $(".div_wrap div").eq(num).addClass("num" + this.data[i][j]).html(this.data[i][j]); //$(".div_wrap div").eq(num).addClass("num" + this.data[i][j]).html(this.numImage(this.data[i][j])); } else { $(".div_wrap div").eq(num).removeClass().html(""); } } } $("#currentScore").html(this.score); }, moveUp: function () { //i代表行号，j代表列号 for (var j = 0; j < 4; j++) { for (var m = 0; m < 3; m++) {//最差的情况是[2,0,0,0]移动到最右侧需要3次，所有在列上做一个3次循环 for (var i = 0; i < 3; i++) { //把非0数字依次往上排 if (this.data[i][j] == 0 && this.data[i + 1][j] != 0) { this.data[i][j] = this.data[i + 1][j]; this.data[i + 1][j] = 0; this.slide = true; //有移动说明是可以滑动的 } } } } for (var j = 0; j < 4; j++) { for (var i = 0; i < 3; i++) { if (this.data[i][j] != 0 && (this.data[i][j] == this.data[i + 1][j])) { this.data[i][j] = 2 * this.da
新闻热点
疑难解答
