<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>2048-bobo版</title> <style type="text/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;     	     } </style>     <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'/>" }, randomNum: function () { var rand = Math.ceil(Math.random() * 4); if (rand != 4) { rand = 2 }; 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) 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]); } else { $(".div_wrap div").eq(num).removeClass().html("") } } }; $("#currentScore").html(this.score) }, moveUp: function () { for (var j = 0; j < 4; j++) { for (var m = 0; m < 3; m++) { for (var i = 0; i < 3; i++) { 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; } } }; for (var j = 0; j < 4; j++) { for (var m = 0; m < 2; m++) { for (var i = 0; i < 3; i++) { 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) { this.randomNum() }; this.slide = false; this.repraint() }, moveDown: function () { for (var j = 0; j < 4; j++) { for (var m = 0; m < 3; m++) { for (var i = 3; i > 0; i--) { 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; } } }; for (var j = 0; j < 4; j++) { for (var m = 0; m < 2; m++) { for (var i = 3; i > 0; i--) { 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) { this.randomNum() }; this.slide = false; this.repraint() }, moveRight: function () { 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; } } }; 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) { this.randomNum() }; this.slide = false; this.repraint() }, moveLeft: function () { 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) { 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.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(); 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.data[i][j]) } } }; this.touchOrMouse(); $(".refresh img").bind("click", function () { location.reload() }); $("#currentScore").html(this.score) } }; var newGame = new game2048() }) </script> </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>