博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
280行代码:Javascript 写的2048游戏
阅读量:6479 次
发布时间:2019-06-23

本文共 875 字,大约阅读时间需要 2 分钟。

2048 原作者就是用Js写的,一直想尝试。但久久未动手。

昨天教学生学习JS代码。最好还是就做个有趣的游戏好了。2048这么火,是一个不错的选择。

思路:

1. 数组 ,2维数组4x4

2. 移动算法,移动后有数字的对齐,无数字(我用的0。但不显示)补齐。

移动前


移动后(注意程序合并了第一行2个2,并产生了新的2)

移动算法分2步:

第一步骤:移动

第二步骤:合并

移动代码參考:

[html] 
  1. function left(t,i)  
  2. {  
  3.   var j;  
  4.   var len = t[i].length;  
  5.   for (j=0;j<len-1;j++)  
  6.     {  
  7.       if (t[i][j] == 0 && t[i][j+1] != 0)  
  8.       {  
  9.         temp = t[i][j];  
  10.         t[i][j] = t[i][j+1];  
  11.         t[i][j+1] = temp;  
  12.         left(t,i);  
  13.           
  14.       }  
  15.     }  
  16.           
  17. }  


合并代码參考:

[html] 
  1. function lcombine(a,i)  
  2. {  
  3.   var len = a[i].length;  
  4.     
  5.   for(var j=0;j<len-2;j++)  
  6.   {  
  7.     if (a[i][j] == a[i][j+1])  
  8.     {  
  9.       a[i][j] *=2;  
  10.       a[i][j+1] = 0;  
  11.       left(a,i);  
  12.       break;  
  13.     }  
  14.   }  
  15. }  

3.显示

显示部分CSS来源 2048源作者程序。

显示代码:

[html] 
  1. function display_div ()  
  2. {  
  3.   var i,j;  
  4.   var n = "#d";  
  5.   for (i = 0 ;i < 4 ;i++)  
  6.   {  
  7.     for(j=0;j<4;j++)  
  8.     {  
  9.       if (a[i][j] !=0)  
  10.         $(n+(i*4+j)).html("<div class='tile tile-"+a[i][j]+"'><div class='tile-inner'>"+a[i][j]+"</div></div>");  
  11.       else  
  12.         $(n+(i*4+j)).html("");  
  13.         
  14.         
  15.     }  
  16.   }  
  17. }  

这段代码是把数组内容显示到  4x4表格内。

源码及在线演示:

你可能感兴趣的文章
蔡超:入门 Go 语言必须跨越的五个思维误区
查看>>
使用Akka Actor和Java 8构建反应式应用
查看>>
curl常用命令详解
查看>>
saltstack 添加计划任务
查看>>
Puppet module命令参数介绍(六)
查看>>
《UNIX网络编程》中第一个timer_server的例子
查看>>
CISCO 路由器(4)
查看>>
网络服务搭建、配置与管理大全(Linux版)
查看>>
Silverlight 5 Beta新特性[4]文本缩进控制
查看>>
springMVC多数据源使用 跨库跨连接
查看>>
Git服务端和客户端安装笔记
查看>>
Spring Security(14)——权限鉴定基础
查看>>
IntelliJ IDEA快捷键
查看>>
【iOS-cocos2d-X 游戏开发之十三】cocos2dx通过Jni调用Android的Java层代码(下)
查看>>
MongoDB的基础使用
查看>>
进程间通信——命名管道
查看>>
ssh登陆不需要密码
查看>>
ARP
查看>>
java mkdir()和mkdirs()区别
查看>>
桌面支持--excel自动换行
查看>>