失眠网 > 网页版2048小游戏

网页版2048小游戏

时间：2019-02-04 00:28:56

相关推荐

网页版2048小游戏

使用jquery3.3.1 进行的一次开发，各文件源码如下:

2048.css

.div_2048{background-color: #FFFAF0;width:1000px;height:700px;padding-left: 20px;padding-top: 20px;}.div1{background-color: #CDC5BF;width:500px;height:500px;border-radius: 20px;padding-left: 20px;padding-top: 20px;position:relative;float:left;}.div_num{background-color: #CFCFCF;width: 100px;height: 100px;border-radius: 20px;margin:10px;position:relative;float:left;}.number-cell{width: 100px;height:100px;border-radius: 20px;font-family: Arial;font-weight:bold;font-size:40px;line-height:100px;text-align: center;position: absolute;}.div_header{background-color: #FFFAF0;width:500px;height:100px;border-radius: 10px;padding-left: 20px;padding-top: 20px;position:relative;float:left;}.div_ico{background-color:#FFFAF0;width: 180px;height: 90px;font-family: Arial;font-weight:bold;font-size:80px;text-align: center;position:relative;float:left;}.div_score{margin-left: 10px;margin-top: 15px;background-color: #FFFAF0;border-radius: 10px;width: 150px;height: 40px;font-family: Arial;font-weight:bold;font-size:25px;text-align: left;position:relative;float:left;}.div_button{margin-left: 30px;margin-top: 5px;background-color: #FFFAF0;width: 200px;height: 35px;font-family: Arial;font-weight:bold;font-size:25px;border-radius: 10px;border-color: #FFFAF0;text-align: center;position:relative;float:left;cursor:pointer;}.div_rank{width: 250px;height: 620px;background-color: #E3E3E3;margin:30px;border-radius: 10px;float:left;position:relative;}.rank_num{font-family: Arial;font-weight:bold;font-size:25px;line-height: 25px;text-align:left;}.div_inform{background-color: #5f9ea0;width: 400px;height: 150px;border-radius: 10px;padding-top: 40px;text-align:center;font-family: Arial;font-weight:bold;font-size:50px;position: absolute;visibility: hidden;}

game.js

//jquery准备函数$(document).ready(function(){init();init_rank();});//创建一个二维数组，用来存储所有的数字var number_cell=new Array();var score=0;var best=0;var w=0;//排行榜分数var rank_num=new Array(10);//初始化排名function init_rank(){for(var i=0;i<10;i++){rank_num[i]=0;$("#num_"+(i+1)).html(' No.'+(i+1)+': '+rank_num[i]);}}//更新排行榜function update_rank(num){if(rank_num[9]<num)rank_num[9]=num;elsereturn;for(var i=9;i>0;i--){if(rank_num[i]>rank_num[i-1]){var t=rank_num[i];rank_num[i]=rank_num[i-1];rank_num[i-1]=t;}}for(var i=0;i<10;i++){$("#num_"+(i+1)).html(' No.'+(i+1)+': '+rank_num[i]);}}//初始化数字格function init(){w=0;score=0;for(var i=0;i<4;i++){number_cell[i]=new Array(4);for(var j=0;j<4;j++){number_cell[i][j]=0;}}suiji();suiji();update_number_cell();hide_inform();}//更新数字格function update_number_cell(){$(".number-cell").remove();for(var i=0;i<4;i++){for(var j=0;j<4;j++){$(".div1" ).append("<div class='number-cell' id='number-cell-"+i+"-"+j+"'></div>");//通过数字格的id来设置其显示的内容；$("#number-cell-"+i+"-"+j).css("top",30+i*120);$("#number-cell-"+i+"-"+j).css("left",30+j*120);if(number_cell[i][j]!=0){$("#number-cell-"+i+"-"+j).css("color",getColor(number_cell[i][j]));$("#number-cell-"+i+"-"+j).css("background-color","#F5F5DC");$("#number-cell-"+i+"-"+j).html(number_cell[i][j]);}}}if(score>best)best=score;$("#name1").html("Score: "+score);$("#name2").html("Best: "+best);}//产生随机数function suiji(){//产生随机格子数的坐标do{var ran_x=Math.floor(Math.random()*4);var ran_y=Math.floor(Math.random()*4);}while(number_cell[ran_x][ran_y]!=0)number_cell[ran_x][ran_y]=Math.random()<0.5?2:4;}//获得字体颜色function getColor(number){switch(number){case 2:return "#8B658B";break;case 4:return "#FF8247";break;case 8:return "#FF7F24";break;case 16:return "#FF0000";break;case 32:return "#B03060";break;case 64:return "#9400D3";break;case 128:return "#6959CD";break;case 256:return "#B23AEE";break;case 512:return "#8B008B";break;case 1024:return "#8B7E66";break;case 2048:return "#8B0000";break;}}//响应键盘事件$(document).keydown(function(even){switch(even.keyCode){case 37:{if(canMoveLeft()){move_left();suiji();update_number_cell();}break;}case 38:{if(canMoveUp()){move_up();suiji();update_number_cell();}break;}case 39:{if(canMoveRight()){move_right();suiji();update_number_cell();}break;}case 40:{if(canMoveDown()) {move_down();suiji();update_number_cell();}break;}}inform();}); //判定是否能左移function canMoveLeft(){for(var i=0;i<4;i++){for(var j=1;j<4;j++){if(number_cell[i][j]!=0){if(number_cell[i][j-1]==0||number_cell[i][j]==number_cell[i][j-1]){return true;}}}}return false;}//判定是否能右移function canMoveRight(){for(var i=0;i<4;i++){for(var j=2;j>=0;j--){if(number_cell[i][j]!=0){if(number_cell[i][j+1]==0||number_cell[i][j]==number_cell[i][j+1]){return true;}}}}return false;}//判定是否能上移function canMoveUp(){for(var j=0;j<4;j++){for(var i=1;i<4;i++){if(number_cell[i][j]!=0){if(number_cell[i-1][j]==0||number_cell[i][j]==number_cell[i-1][j]){return true;}}}}return false;}//判定是否能下移function canMoveDown(){for(var j=0;j<4;j++){for(var i=2;i>=0;i--){if(number_cell[i][j]!=0){if(number_cell[i+1][j]==0||number_cell[i][j]==number_cell[i+1][j]){return true;}}}}}//下移function move_left(){for(var i=0;i<4;i++){var f=0;for(var j=0;j<4;j++){if(number_cell[i][j]!=0){//判断前面第几个是空格for(var k=f;k<j;k++){if(number_cell[i][k]==0){number_cell[i][k]=number_cell[i][j];number_cell[i][j]=0;number_animate(i,j,i,k);}else if(number_cell[i][k]==number_cell[i][j]){var temp=0;for(var t=k+1;t<j;t++){temp+=number_cell[i][t];}if(temp==0){number_cell[i][k]+=number_cell[i][j];score+=number_cell[i][k];number_cell[i][j]=0;number_animate(i,j,i,k);f=k+1;}}}}}}}//右移function move_right(){for(var i=0;i<4;i++){var f=3;for(var j=3;j>=0;j--){if(number_cell[i][j]!=0){//判断后面第几个是空格for(var k=f;k>j;k--){if(number_cell[i][k]==0){number_cell[i][k]=number_cell[i][j];number_cell[i][j]=0;number_animate(i,j,i,k);}else if(number_cell[i][k]==number_cell[i][j]){var temp=0;for(var t=k-1;t>j;t--){temp+=number_cell[i][t];}if(temp==0){number_cell[i][k]+=number_cell[i][j];score+=number_cell[i][k];number_cell[i][j]=0;number_animate(i,j,i,k);f=k-1;}}}}}}}//上移function move_up(){for(var j=0;j<4;j++){var f=0;for(var i=0;i<4;i++){if(number_cell[i][j]!=0){//判断上面第几个是空格for(var k=f;k<i;k++){if(number_cell[k][j]==0){number_cell[k][j]=number_cell[i][j];number_cell[i][j]=0;number_animate(i,j,k,j);}else if(number_cell[k][j]==number_cell[i][j]){var temp=0;for(var t=k+1;t<i;t++){temp+=number_cell[t][j];}if(temp==0){number_cell[k][j]+=number_cell[i][j];score+=number_cell[k][j];number_cell[i][j]=0;number_animate(i,j,k,j);f=k+1;}}}}}}}//下移function move_down(){for(var j=0;j<4;j++){var f=3;for(var i=3;i>=0;i--){if(number_cell[i][j]!=0){//判断下面第几个是空格for(var k=f;k>i;k--){if(number_cell[k][j]==0){number_cell[k][j]=number_cell[i][j];number_cell[i][j]=0;number_animate(i,j,k,j);}else if(number_cell[k][j]==number_cell[i][j]){var temp=0;for(var t=k-1;t>i;t--){temp+=number_cell[t][j];}if(temp==0){number_cell[k][j]+=number_cell[i][j];score+=number_cell[k][j];number_cell[i][j]=0;number_animate(i,j,k,j);f=k-1;}}}}}}}//动画function number_animate(formX,formY,toX,toY){//获得原始单元格对象var num_cell=$("#number-cell-"+formX+"-"+formY);//开始动画num_cell.animate({left:30+toY*120,top:30+toX*120},"",function(){update_number_cell()});}//判定是否结束游戏function fail(){if(canMoveLeft()||canMoveRight()||canMoveUp()||canMoveDown())return false;elsereturn true;}//判定游戏胜利function win(){for(var i=0;i<4;i++){for(var j=0;j<4;j++){if(number_cell[i][j]==2048){return true;}}}return false;}//显示通知function inform(){if(fail()&&score!=0){update_rank(score);$(".div_inform").css("top",300);$(".div_inform").css("left",650);$(".div_inform").css("visibility","visible");$(".div_inform").html("Game Over!"+"<br/>"+score);score=0;}if(w==1){hide_inform();}if(win()&&w==0){$(".div_inform").css("top",300);$(".div_inform").css("left",650);$(".div_inform").css("visibility","visible");$(".div_inform").html("Victory!");w=1;}}//隐藏通知function hide_inform(){$(".div_inform").css("visibility","hidden");}