问我为啥开发这个？答：闲的蛋疼！
各位看官看到如下代码可能发现有些不需要的方法，或者注释了某些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.data[i][j]; //合并
this.data[i + 1][j] = 0;
this.score += this.data[i][j];
this.slide = true; //有合并的就说明产生的新的0位置
}
}
}
for (var j = 0; j < 4; j++) {
for (var m = 0; m < 2; m++) {//最差的情况是[0,4,0,0]移动到最右侧需要2次，所有在列上做一个2次循环
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;
}
}
}
}
if (this.slide) {
//滑动后,0的位置生成一个随机数
this.randomNum();
}
this.slide = false;
this.repraint();
},
moveDown: 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 = 3; i > 0; 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 = 3; i > 0; i--) {
if (this.data[i][j] != 0 && (this.data[i][j] == this.data[i - 1][j])) {
this.data[i][j] = 2 * this.data[i][j]; //合并
this.data[i - 1][j] = 0;
this.score += this.data[i][j];
this.slide = true; //有合并的就说明产生的新的0位置
}
}
}
for (var j = 0; j < 4; j++) {
for (var m = 0; m < 2; m++) {//最差的情况是[0,4,0,0]移动到最右侧需要2次，所有在列上做一个2次循环
for (var i = 3; i > 0; 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;
}
}
}
}
if (this.slide) {
//滑动后,0的位置生成一个随机数
this.randomNum();
}
this.slide = false;
this.repraint();
},
moveRight: function () {
//i代表行号，j代表列号
for (var j = 0; j < 4; j++) {
for (var m = 0; m < 3; m++) {
for (var i = 3; i > 0; i--) {
if (this.data[j][i] == 0 && this.data[j][i - 1] != 0) {
this.data[j][i] = this.data[j][i - 1];
this.data[j][i - 1] = 0;
this.slide = true; //有移动说明是可以滑动的
}
}
}
}
for (var j = 0; j < 4; j++) {
for (var i = 3; i > 0; i--) {
if (this.data[j][i] != 0 && (this.data[j][i] == this.data[j][i - 1])) {
this.data[j][i] = 2 * this.data[j][i]; //合并
this.data[j][i - 1] = 0;
this.score += this.data[j][i];
this.slide = true; //有合并的就说明产生的新的0位置
}
}
}
for (var j = 0; j < 4; j++) {
for (var m = 0; m < 2; m++) {
for (var i = 3; i > 0; i--) {
if (this.data[j][i] == 0 && this.data[j][i - 1] != 0) {
this.data[j][i] = this.data[j][i - 1];
this.data[j][i - 1] = 0;
}
}
}
}
if (this.slide) {
//滑动后,0的位置生成一个随机数
this.randomNum();
}
this.slide = false;
this.repraint();
},
moveLeft: function () {
//i代表行号，j代表列号
for (var j = 0; j < 4; j++) {
for (var m = 0; m < 3; m++) {
for (var i = 0; i < 3; i++) {
if (this.data[j][i] == 0 && this.data[j][i + 1] != 0) {
this.data[j][i] = this.data[j][i + 1];
this.data[j][i + 1] = 0;
this.slide = true; //有移动说明是可以滑动的
}
}
}
}
for (var j = 0; j < 4; j++) {
for (var i = 0; i < 3; i++) {
if (this.data[j][i] != 0 && (this.data[j][i] == this.data[j][i + 1])) {
this.data[j][i] = 2 * this.data[j][i]; //合并
this.data[j][i + 1] = 0;
this.score += this.data[j][i];
this.slide = true;
}
}
}
for (var j = 0; j < 4; j++) {
for (var m = 0; m < 2; m++) {
for (var i = 0; i < 3; i++) {
if (this.data[j][i] == 0 && this.data[j][i + 1] != 0) {
this.data[j][i] = this.data[j][i + 1];
this.data[j][i + 1] = 0;
}
}
}
}
if (this.slide) {
//滑动后,0的位置生成一个随机数
this.randomNum();
}
this.slide = false;
this.repraint();
},
touchOrMouse: function () {
var _self = this;
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
var isTouch = bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM;
if (isTouch) {
try {
/*document.createEvent("TouchEvent");*/
document.getElementById("wrap").addEventListener("touchstart", function (e) {
e.preventDefault();
this.startX = e.touches[0].pageX;
this.startY = e.touches[0].pageY;
});
document.getElementById("wrap").addEventListener("touchmove", function (e) {
e.preventDefault();
this.endX = e.touches[0].pageX;
this.endY = e.touches[0].pageY;
});
document.getElementById("wrap").addEventListener("touchend", function (e) {
e.preventDefault();
var x = this.endX - this.startX;
var y = this.endY - this.startY;
_self.move(_self.moveDirection(x, y));
});
} catch (e) {
alert("移动版异常");
}
}
else {
try {
document.getElementById("wrap").addEventListener('mousedown', function (e) {
e.preventDefault();
this.startX = Number(e.pageX);
this.startY = Number(e.pageY);
this.endX = this.startX;
this.endY = this.startY;
});
document.getElementById("wrap").addEventListener('mouseup', function (e) {
e.preventDefault();
this.endX = Number(e.pageX);
this.endY = Number(e.pageY);
var x = this.endX - this.startX;
var y = this.endY - this.startY;
_self.move(_self.moveDirection(x, y));
});
}
catch (e) {
alert("pc版异常");
}
}
},
init: function () {
var _self = this;
this.randomNum();
this.randomNum();
//初始化两个随机的位置，然后随机放上2和4
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
if (this.data[i][j] != 0) {
var num = i * 4 + j;
//$(".div_wrap div").eq(num).addClass("num" + this.data[i][j]).html(this.numImage(this.data[i][j]));
$(".div_wrap div").eq(num).addClass("num" + this.data[i][j]).html(this.data[i][j]);
}
}
}
this.touchOrMouse();
$(".refresh img").bind("click", function () {
location.reload();
});
$("#currentScore").html(this.score);
}
};
var newGame = new game2048();
})
</script>
<a id="" href="https://files.cnblogs.com/yichengbo/2048-%E7%AC%AC%E4%B8%89%E7%89%88.zip">游戏下载</a>
