首页 > 代码库 > 2048
2048
问我为啥开发这个？答：闲的蛋疼！
各位看官看到如下代码可能发现有些不需要的方法，或者注释了某些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="http://www.mamicode.com/jquery.js" type="text/javascript"></script><script type="text/javascript"> /*@author:yichengbo* *此游戏持续改进开发*/ $(function () { $("#wrap").height($(document).height()); function game2048() { this.data =http://www.mamicode.com/ [ [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=http://www.mamicode.com/‘./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="http://files.cnblogs.com/yichengbo/2048-%E7%AC%AC%E4%B8%89%E7%89%88.zip">游戏下载</a>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。