学习阶段，还是写点小东西练练手学的有意思一点，今天用栅格布局做了一个2048，但是移动动画和合并特效没有做，只简单的实现了一下功能。

记录一下学习的过程。

1.入口函数，初始化界面，我这里是直接是一个栅格对应一个数字，做到后面发现先布局栅格，然后在栅格上面动态生成的做法更好。

2.定义了几个全局变量，控制主要的逻辑以及样式的修改。

3.初始状态

4.渲染

5.监听键盘事件，这里不知道有没有什么好的方法，就直接分开写了上下左右

6.最后定义游戏结束的规则，遍历一下数组，如果出现了2048就修改上面的span 设置为“获胜”就好了。

看着自己的代码乱七八糟但是不知道怎么优化，再说再说..

学习js与css 写个2048的更多相关文章

  1. 告别组件之教你使用原生js和css写移动端轮播图

    在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...

  2. 原生js和css写虚拟键盘

    代码来源忘记是哪个大神的了,抱歉抱歉 放上源码: <!-- 虚拟键盘 --> <!DOCTYPE html> <html> <head> <met ...

  3. gulp-rev同时将js和css文件写在一个rev-manifest.json文件里面的方式探讨

    参考: https://segmentfault.com/q/1010000002876613 https://github.com/sindresorhus/gulp-rev 测试发现,在官网上最主 ...

  4. 学习笔记：js、css、html判断浏览器的各种版本

    js.css.html判断浏览器的各种版本 (转载自:http://www.jb51.net/web/42244.html  版权归原作者所有) 利用正则表达式来判断ie浏览器版本 判断是否IE浏览器 ...

  5. MVC学习随笔----如何在页面中添加JS和CSS文件

    http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...

  6. Yii2的相关学习记录，自定义gii模板和引用vendor中的js、css（四）

    上文中后台模板框架已经搭建起来了,但还是有些不协调,像是有两个User标题,或者我们想自己在gii生成时添加或删除些公用的东西.这就需要我们定义自己的gii模板. 我们以CRUD的模板为例,默认的gi ...

  7. webpack学习（六）打包压缩js和css

    打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令we ...

  8. 简短的几句js实现css压缩和反压缩功能

    写在前面 最近一直在整理css,但因为现在Visual Studio 2013太智能了,它每每在我按ctrl+E+D进行格式化代码的时候,就会将css进行层次格式化(如下图所示),而这个格式让我老大实 ...

  9. 280行代码：Javascript 写的2048游戏

    2048 原作者就是用Js写的,一直想尝试,但久久未动手. 昨天教学生学习JS代码.最好还是就做个有趣的游戏好了.2048这么火,是一个不错的选择. 思路: 1. 数组 ,2维数组4x4 2. 移动算 ...

随机推荐

  1. C# 遍历文本框

    #region 文本框指定位置加入回车符 private void button1_Click(object sender, EventArgs e) { #region // 查询首字母位置 //s ...

  2. python排序sorted与sort比较 (转)

    Python list内置sort()方法用来排序,也可以用python内置的全局sorted()方法来对可迭代的序列排序生成新的序列. sorted(iterable,key=None,revers ...

  3. promise原理及使用方法

    Promise 的含义 所谓Promise ,简单说就是一个容器,里面保存着某个未来才回结束的事件(通常是一个异步操作)的结果.从语法上说,Promise是一个对象,从它可以获取异步操作的消息. re ...

  4. tomcat映射java目录 sever.xml

    <Valve className="org.apache.catalina.authenticator.SingleSignOn" />        --> & ...

  5. null值处理

    一,在实体类的上面加注解 import com.fasterxml.jackson.annotation.JsonInclude @JsonInclude(JsonInclude.Include.NO ...

  6. 国密SSL证书申请免费试用

    沃通提供国密SSL证书免费申请试用服务,一次申请可同时签发SM2/RSA双算法证书,试用周期1个月,用于测试国密SM2 SSL证书的运行效果和SM2/RSA双证书部署效果. 试用产品:SM2/RSA双 ...

  7. http://www.phplo.com/special/2013/0616/467.html

    http://www.phplo.com/special/2013/0616/467.html

  8. Docker理解与使用（转）

    2013年发布至今, Docker 一直广受瞩目,被认为可能会改变软件行业. 但是,许多人并不清楚 Docker 到底是什么,要解决什么问题,好处又在哪里?本文就来详细解释,帮助大家理解它,还带有简单 ...

  9. UOJ #131 BZOJ 4199 luogu P2178【NOI2015】品酒大会 (后缀自动机、树形DP)

    水是水,但是写出了不少问题,因此写一发博客. https://www.luogu.org/problemnew/show/P2178 https://www.lydsy.com/JudgeOnline ...

  10. 洛谷 P1903 BZOJ 2120 清橙 A1274【模板】分块/带修改莫队（数颜色）(周奕超)

    试题来源 2011中国国家集训队命题答辩 题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔 ...