网页版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");
}

效果图:

资源地址:

https://download.csdn.net/download/qq_37746978/14925964

下载后解压，执行 index.html 即可

网页版2048小游戏相关推荐

2048网页版html项目报告,jQuery编写网页版2048小游戏
大致介绍看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了,但是自己实现起 ...
java编辑2048小游戏_Java 制作命令行版 2048小游戏
Java 命令行版 2048小游戏(2020年8月14日) 制作背景大二即将开学,从头开始学习了一个多月的java,对二维数组的操作稍微熟悉了一些.于是想做一个简单的2048来试一试. 众所周知,2 ...
网页版打地鼠小游戏源代码，网页版打灰太狼小游戏源码
网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码完整代码下载地址:网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码核心代码 <!DOCTYPE html> <html> ...
来学习开发一个网页版马里奥小游戏吧
大家好,我是TJ 一个励志推荐10000款开源项目与工具的程序员说起全球最有吸金能力的IP,大家会想到什么呢?是漫威?是哈利波特?还是王者荣耀(笑)? 其实很多印象都是主观的,根据Wikimili从 ...
对对碰（网页版单机小游戏）
简易的对对碰的实现(基于js的事件处理机制) 原理:要想制作这个游戏很简单,先画一张表格,在其中添加照片,通过鼠标点击事件调用在js里编写的让图片隐藏功能的函数即可达到预期效果. 具体代码如下: &l ...
C语言版2048小游戏创作思路及代码
自己学习c语言也有一段时间,但还是对c语言没有感觉,所有想通过写博客来提高自己对c语言的理解. 在写2048的时候,参考了不少优秀的代码,也有一些自己的理解,希望能给大家一些参考. 先要有界面,顺带把 ...
C++ 控制台版 2048小游戏
先说说2048游戏的规则: 开始的时候空格中会出现两个数字(只能为2或者4),用户可以选择上下左右键进行移动,数字们整体沿着方向移动,中间不存在空格,如果相邻的两个数字相等,那么合并至沿着方向的后一个 ...
2048c语言的思路,C语言版2048小游戏创作思路及代码
#include "stdafx.h" #include "stdlib.h" #include "conio.h" //writeKey( ...
html css js实现快递单打印_JS与HTML、CSS实现2048小游戏（六）
在前面的五篇文章中,小编带大家完成了网页版2048小游戏的基本游戏逻辑.但是在游戏结束的gameover()方法中咱们只是简单的通过alert来弹出一些信息,这样的话只能出现下图的效果.这样的游戏,不 ...

网页版2048小游戏

网页版2048小游戏

2048.css

game.js

效果图:

资源地址:

网页版2048小游戏相关推荐

最新文章

热门文章