<码农进阶> 仿2048小游戏
来源：互联网 发布：手游大数据 编辑：程序博客网 时间：2024/05/21 09:11
运行前请先下载jquery.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>2048game</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><style type="text/css">*{padding:0;margin:0;}body{font-size:12px;text-align:center;}#game{margin:100px auto;}#gamecenter{float:left;width:400px;height:400px;background:#eee;margin:0 40px 0 400px;}#bg{margin:8px 0 0 8px;}#gamecenter ul{width:400px;height:80px;list-style-type:none;}#gamecenter ul li{width:74px;height:74px;float:left;text-align:center;line-height:74px;background:#fff;border:1px solid #ccc;margin:10px;font-size:16px;font-weight:bold;}#control{float:left;width:300px;height:180px;margin-top:60px;}#control tr{height:58px;}#control tr td{font-size:16px;font-weight:bold;}#control tr td.c{width:58px;height:58px;border:1px solid #ccc;text-align:center;background:#eee;}#btndiv{height:40px;border-bottom:1px solid #f60;}#btndiv ul{list-style-type:none;}#btndiv ul li {width:60px;height:25px;margin:0 10px;border:1px solid #666;line-height:25px;}</style> </head> <body> <div> <h1>2048小游戏</h1> </div> <div id="game"> <div id="gamecenter"> <div id="bg"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <ul> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul> <ul> <li>13</li> <li>14</li> <li>15</li> <li>16</li> </ul> </div> </div> <div id="control"> <div id="btndiv"> <ul> <li id="start">start</li> </ul> </div> <table> <tr> <td></td> <td class="c up">↑</td> <td></td> </tr> <tr> <td class="c lf">←</td> <td></td> <td class="c rt">→</td> </tr> <tr> <td></td> <td class="c dn">↓</td> <td></td> </tr> </table> </div> </div> </body> <script type="text/javascript" src="resource/js/utils/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ var numArray = null; var winFlag = 64; // 获胜标识 var cols = 4; // 列 var rows = 4; // 行 var firstTimeCreateNum = 2; // 对应数字背景色和字体颜色 var colorArray = [ {"num":0 ,"bgcolor":"#fff" , "ftcolor":"#fff" }, {"num":2 ,"bgcolor":"#f7e09f" , "ftcolor":"#666" }, {"num":4 ,"bgcolor":"#f4b5d3" , "ftcolor":"#666" }, {"num":8 ,"bgcolor":"#c9f6bf" , "ftcolor":"#666" }, {"num":16 ,"bgcolor":"#aed6fb" , "ftcolor":"#666" }, {"num":32 ,"bgcolor":"#fbaebe" , "ftcolor":"#666" }, {"num":64 ,"bgcolor":"#e1fbae" , "ftcolor":"#666" }, {"num":128 ,"bgcolor":"#b2aefb" , "ftcolor":"#666" }, {"num":256 ,"bgcolor":"#d362a5" , "ftcolor":"#666" }, {"num":512 ,"bgcolor":"#dcdd6b" , "ftcolor":"#666" }, {"num":1024 ,"bgcolor":"#ee9e63" , "ftcolor":"#666" }, {"num":2048 ,"bgcolor":"#33c524" , "ftcolor":"#666" } ]; $(document).keydown(function(event){ //判断当event.keyCode 为37时（即左方面键），执行函数to_left(); //判断当event.keyCode 为39时（即右方面键），执行函数to_right(); //alert(event.keyCode);if(event.keyCode == 13){ //do somethings; start();}if (event.keyCode == 37){ left();} if (event.keyCode == 38){ up();} if (event.keyCode == 39){ right();} if (event.keyCode == 40){ down();} }); function start(){ numArray = init(cols,rows); numArray = appendRandomToArray(numArray,firstTimeCreateNum,''); paint(numArray);} function up(){numArray = calAndMeger('up',numArray); numArray = appendRandomToArray(numArray,1,2); paint(numArray); isGameOver(numArray);}function down(){numArray = calAndMeger('down'); numArray = appendRandomToArray(numArray,1,2); paint(numArray); isGameOver(numArray);}function left(){numArray = calAndMeger('left'); numArray = appendRandomToArray(numArray,1,2); paint(numArray); isGameOver(numArray);}function right(){numArray = calAndMeger('right'); numArray = appendRandomToArray(numArray,1,2); paint(numArray); isGameOver(numArray);} // 开始按钮 $("#start").click(function(){ numArray = init(cols,rows); numArray = appendRandomToArray(numArray,firstTimeCreateNum,''); paint(numArray); }); // 向上操作 $(".up").click(function(){ numArray = calAndMeger('up',numArray); numArray = appendRandomToArray(numArray,1,2); paint(numArray); isGameOver(numArray); }) // 向左操作 $(".lf").click(function(){ numArray = calAndMeger('left'); numArray = appendRandomToArray(numArray,1,2); paint(numArray); isGameOver(numArray); }) $(".rt").click(function(){ numArray = calAndMeger('right'); numArray = appendRandomToArray(numArray,1,2); paint(numArray); isGameOver(numArray); }) $(".dn").click(function(){ //numArray = reSort('down'); numArray = calAndMeger('down'); numArray = appendRandomToArray(numArray,1,2); paint(numArray); isGameOver(numArray); }) // 计算并合并 function calAndMeger(direction,array) { var tempArray = init(4,4); if(direction=='up') { for(var i=0;i<numArray.length;i++) { var a = numArray[i]; var count = 0; for(var j=0;j<a.length;j++) { var x = numArray[j][i]; if(x==0) { continue; } var t= j+1; var flag = false; while(t<a.length) { if(numArray[t][i]>0 && numArray[t][i]==x) { tempArray[count][i] = x+x; // 将后面那个数字置为0 numArray[t][i]=0; count++; flag = true; break; } t++; } if(!flag) { // 没发现相邻的两个相同的数字 中间为0跳过 tempArray[count][i] = x; count++; } } } } if(direction=='down') { for(var i=0;i<numArray.length;i++) { var a = numArray[i]; var count = a.length-1; for(var j=a.length-1;j>=0;j--) { var x = numArray[j][i]; if(x==0) { continue; } var t = j-1; var flag = false; while(t>=0) { if(numArray[t][i]>0 && numArray[t][i]==x) { tempArray[count][i] = x+x; numArray[t][i]=0; count--; flag = true; break; } t--; } if(!flag) { tempArray[count][i] = x count--; } } } }if(direction=='left'){for(var i=0;i<numArray.length;i++) { var a = numArray[i]; var count = 0; for(var j=0;j<a.length;j++) { var x = a[j]; if(x==0) { continue; } var flag = false; var t = j+1; while(t<a.length) { if(a[t]>0 && a[t]==x) { tempArray[i][count] = x+x; a[t]=0; count++; flag = true; break; } t++; } if(!flag) { tempArray[i][count] = x; count++; } } }}if(direction=='right'){ for(var i=0;i<numArray.length;i++) { var a = numArray[i]; var count = a.length-1; for(var j=a.length-1;j>=0;j--) { var x = a[j]; if(x==0) { continue; } var flag = false; var t = j-1; while(t>=0) { if(a[t]>0 && a[t]==x) { tempArray[i][count] = x+x; a[t]=0; count--; flag = true; break; } t--; } if(!flag) { tempArray[i][count] = x; count--; } } }} return tempArray; } /** // 重新组合 按某个方向 function reSort(direction) { var tempArray = init(4,4); if(direction=='left') { for(var i=0;i<numArray.length;i++) { var a = numArray[i]; var count = 0; for(var j=0;j<a.length;j++) { var x = a[j]; if(x>0) { tempArray[i][count] = x; count++; } } } } if(direction=="up") { for(var i=0;i<numArray.length;i++) { var a = numArray[i]; var count = 0; for(var j=0;j<a.length;j++) { var x = numArray[j][i]; if(x>0) { tempArray[count][i] = x; count++; } } } } if(direction=="right") { for(var i=0;i<numArray.length;i++) { var a = numArray[i]; var count = a.length-1; for(var j=a.length-1;j>=0;j--) { var x = a[j]; if(x>0) { tempArray[i][count] = x; count--; } } } } if(direction=="down") { for(var i=0;i<numArray.length;i++) { var a = numArray[i]; var count = a.length-1; for(var j=a.length-1;j>=0;j--) { var x = numArray[j][i]; if(x>0) { tempArray[count][i] = x; count--; } } } } return tempArray; } **/ // 初始化 数组数据 function init(x ,y) { var a = new Array(); for (i = 0 ;i < x ; i++) { a[i] = new Array(); for (j = 0 ; j < y ; j ++) { a[i][j] = 0; } } return a; } // 向数组中添加数据 // array 表示数组 num表示添加数据个数 num表示添加的数字 不传给随机数字2或4 function appendRandomToArray(array,count,num) { var result = isCanInsert(array); if(result==0) { paint(array); alert("很遗憾，您失败了！您没有多余的格子可以放数字了！"); return false; } for(var i=0;i<count;i++) { var x1 = getRandom(cols); var y1 = getRandom(cols); while(array[x1][y1]!=0) { x1 = getRandom(cols); y1 = getRandom(cols); } if(num=='' || num==null || num=='undefined') { array[x1][y1] = getRandom2or4(); } else { array[x1][y1] = num; } } return array; } // 是否还能插入,不能插入,游戏game over function isCanInsert(array) { var count = 0; for(var i=0;i<array.length;i++) { var a = array[i]; for(var j=0;j<a.length;j++) { if(a[j]==0) { count++; } } } return count; } // 获取0-max之间随机数 不包含0和max function getRandom(max) { return Math.floor(Math.random()* max); } // 获取随机的2或4 function getRandom2or4() { return Math.floor(Math.random()*2+1)*2; } // 游戏是否胜利 function isGameOver(array) { var flag = false; for(var i=0;i<array.length;i++) { var a = array[i]; for(var j=0;j<a.length;j++) { if(a[j]==winFlag) { flag =true; break; } } } if(flag) { alert("恭喜您，您胜利了！"); return false; } } // 渲染画面 function paint(array) { for(var i=0;i<array.length;i++) { var a = array[i]; for(var j=0;j<a.length;j++) { var x =a[j]; for(var m=0;m<colorArray.length;m++) { if(x == colorArray[m].num) { if(x==0) { x=""; } $("#gamecenter ul:eq("+i+") li:eq("+j+")").html(x); $("#gamecenter ul:eq("+i+") li:eq("+j+")").css({"background":colorArray[m].bgcolor}); } } } } } }) </script> </html> 0 0
- <码农进阶> 仿2048小游戏
- C#开发的仿Windows扫雷小游戏
- 2048小游戏
- 2048小游戏
- [小游戏]2048
- 2048小游戏
- 2048小游戏
- 2048小游戏
- 小游戏：2048
- 2048小游戏
- 小游戏2048
- 2048小游戏
- 2048小游戏
- 2048小游戏
- 2048小游戏
- 2048小游戏
- 2048 小游戏
- 2048小游戏
- 把手教你通过Java（RoboVM）创建IOS应用
- 系列3—BabeLua常用技巧
- linux grep 正则表达式
- Android 手势&触摸事件 MotionEvent
- NUMA2
- <码农进阶> 仿2048小游戏
- android框架与Activity生命周期、现场保护
- UVa 10391 & ZOJ 1825 - Compound Words
- mysql中文字符的乱码问题
- mpsclr和Scaler的link代码例子
- android---利用android-async-http开源项目实现网络图片查看器
- 有关无人驾驶汽车的思考
- 签名与认证
- Ubuntu下安装Java及环境配置
