html5 | 前端小游戏 | 2048 益智游戏

游戏截图

游戏说明

2048网页版游戏,移动方向键，让相同数字组合争取获得最高分数。

项目结构

iindex.html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="2048.css"/></head><body><div id="div1" align="center"><input type="button" id="butt" value="新游戏"/><p>分数:<span id="score"></span></p></div><div class="game"><div class="gride-cell" id="gride0"></div><div class="gride-cell" id="gride1"></div><div class="gride-cell" id="gride2"></div><div class="gride-cell" id="gride3" x="1" y="3"></div><div class="gride-cell" id="gride4" x="1" y="4"></div><div class="gride-cell" id="gride5" x="2" y="1"></div><div class="gride-cell" id="gride6" x="2" y="2"></div><div class="gride-cell" id="gride7" x="2" y="3"></div><div class="gride-cell" id="gride8" x="2" y="4"></div><div class="gride-cell" id="gride9" x="3" y="1"></div><div class="gride-cell" id="gride10" x="3" y="2"></div><div class="gride-cell" id="gride11" x="3" y="3"></div><div class="gride-cell" id="gride12" x="3" y="4"></div><div class="gride-cell" id="gride13" x="4" y="1"></div><div class="gride-cell" id="gride14" x="4" y="2"></div><div class="gride-cell" id="gride15" x="4" y="3"></div></div><script src="jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="2048.js" type="text/javascript" charset="utf-8"></script></body>
</html>

2048.css代码

p{font-size: 30px;
}
input{width: 100px;padding: 10px 10px;background-color: #8f7a66;color: white;border-radius: 10px;outline: none;
}
#div1{position: absolute;color: #8f7a66;width: 400px;
}
.game{width: 460px;height: 460px;padding: 20px;background-color: #bbada0;border-radius: 15px;position: absolute;left:400px ;
}
.gride-cell{width: 100px;height: 100px;border-radius: 6px;background-color: #ccc0b3;position: relative;float: left;margin: 7.5px;text-align: center;line-height:100px ;font-size: 35px;
}

2048.js代码

//是否结束
var finish=false;
//分数
var score;
//数组
var arry;
var keys=["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15"];
var colors = ["#ccc0b3","PINK","AntiqueWhite","#92dbef","#0FF0FF","#FF0","#CDF0AB","#FEDCBA","#F0F","#905fbb","#00F","#00FF00","Purple"];
//初始化
function initialize(){score=0;arry=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];arry[sjwz()]=sjs();arry[sjwz()]=sjs();// score=79832;// arry=[0,2,256,512,//       0,0,128,1024,//     2,16,64,2048,//     8,16,32,4096];draw();
}
//绘制数组到格子上
function draw(){for(var i=0;i<16;i++){$("#gride"+keys[i]).text((arry[i]==0) ?"" :arry[i]);var index=(arry[i]==0)? 0 :(arry[i].toString(2).length-1);$("#gride"+keys[i]).css("background-color",colors[index]);}$("#score").text(score);
}
//向下
function down(){var yuan=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];for(j=0;j<16;j++){yuan[j]=arry[j];}for(var i=0;i<4;i++){var r=[arry[i+12],arry[i+8],arry[i+4],arry[i]];var s= sort(r);//把排序好的数组值赋值给总数组arry[i+12]=s[0];arry[i+8]=s[1];arry[i+4]=s[2];arry[i]=s[3];}if(yuan.toString()!=arry.toString()){arry[sjwz()]=sjs();}draw();finish = over();js();
}
//向上
function up(){var yuan=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];for(j=0;j<16;j++){yuan[j]=arry[j];}for(var i=0;i<4;i++){var r=[arry[i],arry[i+4],arry[i+8],arry[i+12]];var s= sort(r);//把排序好的数组值赋值给总数组arry[i]=s[0];arry[i+4]=s[1];arry[i+8]=s[2];arry[i+12]=s[3];}if(yuan.toString()!=arry.toString()){arry[sjwz()]=sjs();}draw();finish = over();js();
}
//向右
function right(){var yuan=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];for(j=0;j<16;j++){yuan[j]=arry[j];}for(var i=0;i<4;i++){var r=[arry[(i*4)+3],arry[(i*4)+2],arry[(i*4)+1],arry[(i*4)]];var s= sort(r);//把排序好的数组值赋值给总数组arry[(i*4)+3]=s[0];arry[(i*4)+2]=s[1];arry[(i*4)+1]=s[2];arry[(i*4)]=s[3];}if(yuan.toString()!=arry.toString()){arry[sjwz()]=sjs();}draw();finish = over();js();
}
//向左
function left(){var yuan=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];for(j=0;j<16;j++){yuan[j]=arry[j];}for(var i=0;i<4;i++){var r=[arry[(i*4)],arry[(i*4)+1],arry[(i*4)+2],arry[(i*4)+3]];var s= sort(r);//把排序好的数组值赋值给总数组arry[(i*4)]=s[0];arry[(i*4)+1]=s[1];arry[(i*4)+2]=s[2];arry[(i*4)+3]=s[3];}if(yuan.toString()!=arry.toString()){arry[sjwz()]=sjs();}draw();finish = over();js();
}
//对数组合并及排序
function sort(r){if( r[0]!=0 || r[1]!=0 || r[2]!=0 || r[3]!=0){for(var i=0;i<4;i++){for(var j=0;j<3;j++){   if(r[j]==0){r[j]=r[j+1];r[j+1]=0;}}}}for(var i=0;i<3;i++){if(r[i]==r[i+1]){var j=i;r[j]+=r[j+1];score+=r[j];while(++j<3){r[j]=r[j+1];}r[3]=0;}}return r;
}
//生成2或者4
function sjs(){if(Math.random()>0.8){return 4;}else{return 2;}
}
//随机生成位置
function sjwz(){var random=Math.floor(Math.random()*16);while(arry[random]!=0){random=Math.floor(Math.random()*16);}return random;
}
//判断是否结束
function over(){if(arry.indexOf(0)==-1){if(overx()==true && overy()==true){return true;}else{return false;}}else{return false;}
}
//结束
function js(){if(finish==true){var flag=confirm("游戏结束\n您的分数为"+score+"\n是否重新开始");if(flag==true){initialize();}}
}
//判断横向
function overx(){var p=true;for(var i=0;i<4;i++){var a=[arry[(i*4)],arry[(i*4)+1],arry[(i*4)+2],arry[(i*4)+3]];if(a[0]==a[1] || a[1]==a[2] || a[2]==a[3]){p=false;}}return p;
}
//判断纵向
function overy(){var p=true;for(var i=0;i<4;i++){var a=[arry[i],arry[i+4],arry[i+8],arry[i+12]];if(a[0]==a[1] || a[1]==a[2] || a[2]==a[3]){p=false;}}return p;
}$(function(){//新游戏按键$("#butt").click(initialize);//绑定键值$("body").keydown(function(e){if(e.keyCode==83||e.keyCode==40){down();}else if(e.keyCode==87||e.keyCode==38){up();}else if(e.keyCode==65||e.keyCode==37){left();}else if(e.keyCode==68||e.keyCode==39){right();}})
})

项目完整代码下载

2048html5前端小游戏.zip-游戏开发文档类资源-CSDN下载基于html、css、js实现无后台更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/weixin_40986713/47373593

html5 | 前端小游戏 | 2048 益智游戏相关推荐

前端小游戏2048（一步步详解附带源代码，源码上传到csdn,可以免费下载）
2048小游戏 2048是前端开发必经的一个小游戏,2048小游戏包含了HTML,CSS和JavaScript. 简介 <2048>,是一款益智小游戏,这款游戏是由年仅19岁的意大利程序员 ...
《游戏开发》html5 益智小游戏-小熊吃星星
游戏截图项目结构一共3个文件分别为 index.html script.js style.css index.html文件源码展示 <!DOCTYPE html> <htm ...
html+css+javascript实现小游戏2048（详解，附源代码）
html+css+javascript实现小游戏2048(详解,附源代码) 1.上下左右的移动原理相同,这里只详细说明向上移动的方法 2.这里的上下左右由wasd四个键控制 3-小方块空的意思就是没数 ...
如何用HTML和css实现拼图,打造自己的html5拼图小游戏
得益于liuyubobobo老师的canvas课程和思路指点,做了一版简单的 html5拼图小游戏,下面就简单介绍一下实现的原理... 利用canvas裁剪拼图所需的小块图片//核心代码如下: var ...
金榜提名前端小游戏教程（含冒泡，canvas烟花特效,适配pc,手机）内含源码
一年一次的高考是人生的第一个重要转折点,如果能重来一起进入时光机,高考前一天小编随便做了一个测一测命中注定大学的小小游戏.(vue前端小游戏,canvas动画) 效果图源代码 1.html代码 &l ...
一个都不能死HTML5网页小游戏免费下载
一个都不能死HTML5网页小游戏免费下载今天我在网上看见了一个小游戏,我想研究一下源码,在网上找了许久,全是套路,要钱的. 于是我自己花钱,免费分享给你们源码. 点我如果对你们有帮助请给我一个免费 ...
【python教程入门学习】Python实例：小游戏2048
本节教程通过 2048 的小游戏快速.完整地呈现了使用 Python 语言编程的过程,将之前介绍的内容有机地结合在了一起 .2048是一款流行于手机.平板等终端设备上的益智小游戏,最早于 2014 年 ...
Cocos Creator小游戏-2048（PC、安卓、H5）益智类项目展示+完整项目源码
游戏录像 Cocos Creator小游戏-2048 游戏玩法在棋盘上,每次会增加一个小动物,你可以选择四个方向滑动,然后小动物会按方向移动,遇到相同的小动物就会合并,看谁合并的最多. 功能 1.初 ...
Html5在线小游戏在线玩压扁小鸟（flyBird）游戏源码
这个源码无需后台上传服务器,直接在线即可使用. 该游戏源码是基于HTML5和JavaScript开发的,运行在浏览器中,使得用户能够方便地进行游戏,而且不需要进行任何安装和下载操作.想要玩游戏的用户只 ...

html5 | 前端小游戏 | 2048 益智游戏

html5 | 前端小游戏 | 2048 益智游戏相关推荐

最新文章

热门文章