【分享】web版2048【javascript吧】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2048网页版(html+css+js) By:黄岩</title>
<style type="text/css">
#div1{
width:318px;
height:455px;
background-color:#f0f0f0;
margin:auto;
}
.box1{
font-size:24px;
text-align:center;
line-height:72px;
width:72px;
height:72px;
float:left;
background-color:#CDC2B3;
position:relative;
}
#mes{
font-size:14px;
width:270px;
height:50px;
line-height:50px;
left:20px;
top:20px;
position:relative;
}
#score{
font-size:24px;
left:10px;
top:70px;
height:68px;
width:80px;
background-color:#BBAF9A;
position:relative;
float:left;
}
#update{
left:26px;
top:90px;
float:left;
position:relative;
}
#highscore{
font-size:24px;
float:left;
left:36px;
top:70px;
width:120px;
height:68px;
background-color:#BBAF9A;
position:relative;
}
</style>
<script language="">
var score=0;
var highscore=0;//最高分
var isContinue=true;
var bg=null;
var oBox=null;//元素
var oList=null;
var isNeedNew=false;//是否需要新生成数字
function moveBox(goA){//移动方块
isNeedNew=false;//默认不需要重新生成数字
oList=new Array();
var i=0,m,n;
for(m=0;m<4;m++){
for(i=0;i<4;i++)
oList[i]=0;
if(goA==1){//向上
i=0;
for(n=0;n<4;n++){
if(bg[n][m]!=0){
oList[i]=bg[n][m];
i++;
}
}
for(n=0;n<4;n++){
if(bg[n][m]!=oList[n]){
isNeedNew=true;
}
bg[n][m]=0;
}
removeBox();
n=0;
for(i=0;i<4;i++){
if(oList[i]!=0){
bg[n][m]=oList[i];
n++;
}
}
}else if(goA==2){//向左
i=0;
for(n=0;n<4;n++){
if(bg[m][n]!=0){
oList[i]=bg[m][n];
i++
}
}
for(n=0;n<4;n++){
if(bg[m][n]!=oList[n]){
isNeedNew=true;
}
bg[m][n]=0;
}
removeBox();
n=0;
for(i=0;i<4;i++){
if(oList[i]!=0){
bg[m][n]=oList[i];
n++;
}
}
}else if(goA==3){//向下
i=0;
for(n=3;n>=0;n--){
if(bg[n][m]!=0){
oList[i]=bg[n][m];
i++;
}
}
for(n=0;n<4;n++){
if(bg[n][m]!=oList[3-n]){
isNeedNew=true;
}
bg[n][m]=0;
}
removeBox();
n=3;
for(i=0;i<4;i++){
if(oList[i]!=0){
bg[n][m]=oList[i];
n--;
}
}
}else if(goA==4){
i=0;
for(n=3;n>=0;n--){
if(bg[m][n]!=0){
oList[i]=bg[m][n];
i++
}
}
for(n=0;n<4;n++){
if(bg[m][n]!=oList[3-n]){
isNeedNew=true;
}
bg[m][n]=0;
}
removeBox();
n=3;
for(i=0;i<4;i++){
if(oList[i]!=0){
bg[m][n]=oList[i];
n--;
}
}
}
}
if(isNeedNew==true){
newNum();
}
}
function removeBox(){//消除方块
var i;
for(i=0;i<3;i++){
if(oList[i]!=0&&oList[i]==oList[i+1]){
isNeedNew=true;
oList[i]*=2;
score+=oList[i];
oList[i+1]=0;
i++;
}
}
if(score>highscore){
highscore=score;
}
}
function initGame(){//游戏初始化
var m,n;
//初始化数组
bg=new Array();
for(m=0;m<4;m++){
bg[m]=new Array();
for(n=0;n<4;n++){
bg[m][n]=0;
}
}
newNum();
newNum();
//初始化得分
score=0;
//初始化游戏是否可以继续
isContinue=true;
}
function paintGame(){//游戏绘图
var m,n,i,str="";
oBox=document.getElementsByTagName('div');
for(m=0;m<4;m++){
for(n=0;n<4;n++){
i=m*4+n+1;
if(bg[m][n]==0)
oBox[i].innerHTML="";
else
oBox[i].innerHTML=bg[m][n]+"";
switch(bg[m][n]){
case 0:str="#CDC2B3";break;
case 2:str="#EEE5D9";break;
case 4:str="#ECE1C6";break;
case 8:str="#F0B378";break;
case 16:str="#F49760";break;
case 32:str="#E37E5F";break;
case 64:str="#EC5F42";break;
case 128:str="#F1DB69";break;
case 256:str="#F1D14B";break;
case 512:str="#EDC850";break;
case 1024:str="#EDCE68";break;
case 2048:str="#EDD893";break;
default:str="#EDE0B7";
}
oBox[i].style.background=str;
}
}
oBox[18].innerHTML="Score<br/>"+score;
oBox[20].innerHTML="High Score<br/>"+highscore;
}
function newNum(){//随机生成数
var m,n;
do{
m=Math.floor(Math.random()*4);
n=Math.floor(Math.random()*4);
}while(bg[m][n]!=0);
var k;
k=Math.floor(Math.random()*10);
if(k<7&&bg[m][n]==0){
bg[m][n]=2;
}else{
bg[m][n]=4;
}
}
function checkIsContinue(){//检查游戏是否可以继续
var i,j;
for(i=0;i<4;i++){
for(j=0;j<4;j++){
if(bg[i][j]==2048){
isContinue=false;
alert("恭喜您赢了，您的最终得分:"+score+"分");
}
}
}
for(i=0;i<4;i++){
for(j=0;j<4;j++){
if(bg[i][j]==0){
isContinue=true;
return;
}
}
}
isContinue=false;
for(i=0;i<4;i++){
for(j=0;j<4;j++){
if(i+1<4){
if(bg[i][j]==bg[i+1][j]){
isContinue=true;
return;
}
}
if(j+1<4){
if(bg[i][j]==bg[i][j+1]){
isContinue=true;
return;
}
}
}
}
alert("您输了，最终得分:"+score+"分");
}
window.onload=function(){
oBox=document.getElementsByTagName('div');
var oBt=document.getElementById('button1');
var i=0,j=0,k=0;
for(i=1;i<17;i++){
k=(i-1)%4;
oBox[i].style.left=((k+1)*6)+'px';
//if(j!=0)continue;
j=(i-1)/4;
oBox[i].style.top=((j+1)*6-2*k)+'px';
//oBox[i].style.top='6px';
//oBox[i].style.left='6px';
}
initGame();
paintGame();
oBt.onclick=function(){
initGame();
paintGame();
};
document.onkeydown=function(ev){
var oE=ev||event;
if(oE.keyCode==38&&isContinue==true){
moveBox(1);
paintGame();
checkIsContinue();
}
if(oE.keyCode==37&&isContinue==true){
moveBox(2);
paintGame();
checkIsContinue();
}
if(oE.keyCode==40&&isContinue==true){
moveBox(3);
paintGame();
checkIsContinue();
}
if(oE.keyCode==39&&isContinue==true){
moveBox(4);
paintGame();
checkIsContinue();
}
};
};
</script>
</head>
<body>
<div id="div1">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div id="mes">
Join the numbers and get to the 2048 title!
</div>
<div id="score" align="center">
Score<br/>
0
</div>
<div id="update">
<input type="button" id="button1" value="重新开始"/>
</div>
<div id="highscore" align="center">
High Score<br/>
0
</div>
</div>
</body>
</html>

牛啊

原版本就是web的，实现的要比lz好的多。。。。。

代码相当冗长，这游戏最早就是网页版，楼主可以去找找源代码，学习下

包优
var
1

去慕课网可以学学，，，，，

我勒个去...一行注释都不写啊...你看着不累吗

为兼容ie，防止出现乱码，建议将编码改为gbk

威武霸气

楼主用360打开有部分乱码怎么解决

日	一	二	三	四	五	六

【分享】web版2048

扫二维码下载贴吧客户端