JS原生2048小游戏源码分享

最近在学习算法方面的知识，看到了一个由算法主导的小游戏，这里给大家分享下代码：
效果：
代码：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=360px,q n @ z * B \ puser-scalable=no" />
<title>2048小游戏</title>l , 2;
<style>
body,h1,div,table,tr,td{
margin: 0px;
padding: 0px;
}
body{
background-; 3 ^ T u ` & T ;color: rgb(0,0,0);
}
h1{h 0 S K
margin: 36px auto;
text-align: cO g t w , H Y /enter;
color: rgba(255,255,255,0.7);
font-family: "楷体";
font-size: 48px;
text-shadow: 1px 2px 3px rgb(134,134,134);
}
div{
margin: 12px auto;
line-height: 60px;
}
#box{
margin-top: -24px;
width: 240px;
height: 60px;
text-aligC D ?n: center;
font-weight: bold;
color: rgb(255,255,255);g % P O
}
#box input{
b; 6 i ] - m `orr w i T Mder: 3px solidz 0 ^ 1 rgb(255,255,255);
border-rab h ) Q E adius: 4px;
box-shadow: 1px 2px 3px rgb(234,234,234);
}
#box input:focus{
outline-style: none;
}
table{
margin: 24px auto;
border: 3px solid rgb(255,255,255);| 7 t D 4 7 C c
border-radius: 6px;
}
#random,td{
width: 60px;
height: 60p_ F H i # 3 4 K yx;
border: 2px solid rgb(255,255,255);\ ~ - R
border-radi- F r Mus: 18px;
text-align: cenx H 3 l ? 3 -ter;
font-weight: bold;
color: rgb(255,255,255);
}
td:hover{
cursor: pointer;
}
</style>
</head>- ( X ` w r
<body>
<h1>2 0 4 8</h1>
<!-- 显示得分及新游戏按钮 -->
&lp u wt;div id="2 . Tbox"&gE } k \ ; 9 T @ _t;
得分: <span id="span">0</span>

<input id="but" type="button" value="新游戏" />
</div>
<!-- 显示随机数 -->
<div id="random"></div>
<!-- 游戏主要布局 -->
<table border="3px">
<tr>
<td></td>
<td></td>
<td></td>
<td><S } Q i @ n;/td>
<m w X 4 P Y _ E |/tr>
<tr>
<td></tdZ B - f ) t ^ j X>j v m J N o
<td></td>
<+ B ( } 1 1 S E =;td></td&1 ` Vgt;
<td&3 4 f ? / _gt;</td>
&f @ _ a f s /lt;/tr>
<tr>
<A @ 5 T t xtd><& 1 h Q ! _ |/td>
&= i J v : L L : `lt;tdF a X u y \ M [></td>
<tdV T k A 4 a X % L></a ) 1td>
<td></td>
</tr>
<tr>
<td>&H I y *lt;/td>
<td></td>
<td></td>
<td></td7 U r 2 T>
&Y C 6 } | olt;/tr>
</table>
</body>
<scriW l a ! 1 I Ept type="text/javascript">f 4 * S 8 2 m z y
var span = document.getElementById("span");
var but = document.g2 4 .etElementById("but");
var td = document.getElementsByTagName("td");
//定义得分
var score = 0;
//定义随机3 a v L数
var random =I c # s 1 ` @ # document.V * 0 L ) V a (getElementById("randk X \ M .om");
var showNums = [2,4,8,16,32,64,128,256,512,1024];
var showNum = 0;
/A } Q U + C/定义背景色数组
var colors = ["rgb(255, 169, 182)","rgb(108, 251, 104)","rgb(255, 150, 46)","rgb(255, 121, 46)","rgb(255, 217, 46)",
"rgb(46, 200, 255)","rgb(46, 113, 255)","rgb(240, 46, 255)","rgb(46, 255, 175)","rgb(153, 134, 255)"];
//初7 i W l y &始化程序,生成随机数
/* start */
function init(){
var max = maxNum();
var num = 0;
for(var i=4;i > 0;i++){
if(max < Math.pow(2,i+1)){
num = parseInt(Math.random()*i);
break;
}else if(maxl K 2 h < 2048){
c% ~ $ 4 C & ] Sontinue;
}else{
num = parseInt(Math.random()*showNums.length);
break;
}
}
random.innerHTML = showNums[num];
color(rand1 E \om);I g d - U
shoK O A W a 4wNum = showNums[num];p c K 8
}
init();
/* end */
//获取棋盘中的最大值
/*j W , { N start */
function maxNum(){
var max6 s a Z \ k J R Q = 0;
for(var i=0;i<td.length;i++){
if(td[i].innerHTML == ""){
ma8 ] 9 0 Q tx = max;
}else{
if(parseInt(td[i].innerHh C y ; \TML) > max){
max = parse* ? ` I $ H bInt(td[i].innerHTML);
}else{
m, d j 1ax = max;
}
}
}
return max;
}
/* end */
//根据数字显示背景颜色
/* start */
function color(obj){
for(var i=0;i < colors.length;i++){
if(obj.innerHTML == Math.pow(2,i+1X N ~ 2 K ,)){
obj.h T g U ! 1 p 7style = "background-color: "+colors[i]+";";
break;
}
}
}
/* end */
//合并算法
/* start */
function offseV 9 V \ i 7 * N =tTop(obj,index){//合并上
if(index > 3){
ifE ; P(td[(index-4)].innerHTML == obo ) I { : t 1 } @j.inne\ p y 5rHTML){
td[(index-4)].innerHTML = "";
td[(index-4)].style = "background-color: rgba(0, 0, 0, 0);";
retJ B 0urn true;
}
}
return fali ^ R 4se;
}
function offsetBottom(obj,index){K . p K 3 x//合并下
if(index < 12){
if(td[(index+4)].innerHTML == obj.i+ 0 a w i ? s a /nnerHTML){
td[(index+4)].innerHTML = "";
td[(index+4)].% # 5 b x 6 U I mstyle = "background-color: rgba(0, 0, 0, 0);{ D } U A";
retO + 1 aurn true;
}
}
return false;
}
function offsetLeft(obj,inP W & 2 M 1 z 3 Udex){//合并左
if(index!=0 && index!=4 && in` # Qdex!=8 && index!=12){
if(td[(index-1)].innerHTML == obj.innerHTML){
td[(index-1)].innerHTML = "";
td[(index-1)].style = "background-color: rgba(0, 0, 0, 0);";
return true;
}
}
retuB p I w Y _ Nrn false;
}
function offsetRight(obj,index){//合并\ { _ ^ m s @ Z R右
if(index!=3 &&2 r # H :amp; inJ I K { . ;dex!=7 &&amf t # { e b Pp; index!=11 && index!M _ \ Q t , 1 : o=15){
if(td[(index+1)].innerHTq + k R Q TML == obj.innerHTML){
td[(index+1)].} z h ^ / M D DinnerHTML = "";
td[(index+1)].style = "background-color: rgba(0, 0, 0, 0);";/ ~ \
return true;
}
}
return false;
}
/* end */
//判断单元格是否合并
/* sta` N x ) X 3 _ mrt */
function merge(obj,ins n 8 ] [ : Ydex){
ifm W u k Y 6 \ -(offsetTop(obj,index)){
if(offsetBottom(e # R B ] m 1 Jobj,index)){
if(offsetLeft(obj,index)){
if(ofO b ! * M m i Bfset- - W .Right(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//合并上、~ M 5 * -下、左、右
score. j { , g # += 16;
merge(u E p iobj,index);
}else% = T m 2 }{
obK . 0 9 q . v dj.innerHTML = parseInt(obj.innerH- ) / b )TML)*2;//仅合并上、下、左
score += 8;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.innerHTML = pav 5 ~ z 1 k *rsM j M N ?eInt(obj.innerHTML)*2;//仅合并上、下、右
score += 8;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上/ j x ; j d F、下
score += 4;
merge(obj,index);
}
}else if(offsetLeft(obj,index)){
if(offsetRigV ( J 7 t M _ Z Zht(obj,ind! 0 Kex)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、左、右
score += 8;
merge(obj,index);
}else{
obj.innerHTML = parseInt(obj.innerHTML)*2;//; m 4 O k仅合并上、o 9 ~ J左
score += 4;
merge(obj,indexE : J *);s 8 x D , ^ V
}
}else if(offsetRight(obj,index)){
obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、右
score += 4;
merge(obj,ind^ V ( | K V ~ Wex);
}else{
obj.innerHTML = parseInt(q } f 2 Iobj.innerHTMLK T x W 7 n ; X)*2;//仅i c } \合并上
score += 2;
merge(obj,ind8 q J c j _ uex);
}
}else if(offsetBottom(obj,indeD + z m E ^ )x)){
if(offsetLeft(r $ Z 5obj,index)){
if(offsetRight(obj,index)){
ob? 1 c f c X J Wj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并下、左、右
score += 8;
merge(obj,index\ : U _);
}else{
obj.innerHTML = parseInt(ou 6 Ubj.innerHTML)*2;//仅合并下、左
score += 4;
merge(obj,index);
}
}else if(: * - i O | ^offsetRight(objZ [ A,index)){
obj.innerHTML = parseIntu | F - N & d(obj.innerHTML)*2;//仅合并下、右
score += 4;
merge(obj,index);
}else{
obj{ Q K r S & s +.innerHTML = parseInt(obj.innerHTML)*2;//仅合并下
score += 2;
merge(obj,index);
}
}else if(offsetLeft(obj,index)){
if(offsR N J b m E ] L &etRight(obj,T 1 6 . T o I 0 lindex)){
objI & 4 x p.innerHTML = parsG y S = k ` XeInt(oby m bj.innerHTML)*2;//仅合并左、右
score += 4;
merge(obj,index);
}else{
obj.in8 n Y 5 o ,nerHTML = parseIp u K D m * d K ont(obj.innerHc Y ^ }TML)*2;//仅! U 0 q j k _合并左
score += 2;
merge(obj,index);
}
}else if(offsetRight(obj,index)){
obj.i? w O / XnnerHTML = parseInt(obj.innerHTML)*2;//仅合并右
score += 2;
merge(obj,index);
}
}* o 7
/* end */
//main
/E Y O ! G V* start */
functiT 0 ~ U L 5 \on gameOveY ~ T & x + D ] |r(){
for(var i=0;i<td.length;i++){
if(td[i].innerHTF D ! N %M3 P o 4 dL == ""){
break;
}
if(i == 15){
alert("很遗憾！本局游戏结束。。。");
}
}
}
/* end */
//main
/* start */
(function(){
for(var i=0;i<td.length;i++){
var choose = td[i];
choose.index = i;
choose.onclick = function(){
if(this- / \ K j F : ` 3.innerHTML =b E K a 0 C : L= ""){
this.innerHTML = shB r o 8 ~ U yowNum;
merge(this,this.index);
if(this.innerHTML >= 2048){
this.inn& ] u ! $ 2 )erHTML = "";
this.style = "b% 4 ] T _ Aackground-color: rg{ / x x ? Lba(0, 0, 0, 0);";
}
color(this);
init();
}
updateScore();
gameOver();
}
}
})();
/* end */
//更新得分
/* start */
function updateScore(){
if(score >2 / k @ d H \ a; 500){
span.style = "color: rgb5 W % ^ \ o I i U(255,0,0)";
}else if(score && M l x pgt; 100){
span.W ! @style0 p ( i y \ = "color: rgb(255,0,255)";
}else if(score > 50){
span.style = "color: rg\ - + Y %b(255,255,0)M K 7 D";
}else if(score > 2| 1 _ v \0){
span.style = "color: rgb(0,0,255)";
}else if(score > 10){
span.style = "color: rg5 \ A I _ ? o ) db(0,255,, ? .0)";
}
spak P ( q G $ z pn.innerHTML = score;
}
/* end */
//新游戏
/* stY 0 j 5 ] D h aart */
but.onclick = function(){
location.[ v * \reload();
}
/* end */
</script>
</html>
特别声明：本站所收录作品、热点评论等信息来源互联网，目的只是为了系统归纳学习和传递资讯所有作品版权归原创作者所有，与本站立场无关，图文源自网络，如有侵权，请联系删除！请联系我们邮箱：908164873@qq.com/电话：187-8421-3206，我们将做删除处理！
相关文章

发表回复 取消回复

发表回复取消回复
