学习阶段，还是写点小东西练练手学的有意思一点，今天用栅格布局做了一个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. SQL 分组

  2. phpstorm 使用

    常用快捷 ctrl + / 单行注释 Alt+1 隐藏左侧任务栏 设置 1:control+shift+A功能可以搜索对应功能,把mouse:Change font size(Zoom) ...的按钮 ...

  3. MySQL基础命令小结

    数据库授权登录[root@localhost ~]# mysql -uroot -p123456mysql> grant select,lock tables on auth.* to 'adm ...

  4. Day 17 time,datetime,random,os,sys,json,pickle

    time模块 1.作用:打印时间,需要时间的地方,暂停程序的功能 时间戳形式 time.time() # 1560129555.4663873(python中从1970年开始计算过去了多少秒) 格式化 ...

  5. PAT_A1129#Recommendation System

    Source: PAT A1129 Recommendation System (25 分) Description: Recommendation system predicts the prefe ...

  6. 51nod1117 聪明的木匠【贪心+优先队列】

    一位老木匠需要将一根长的木棒切成N段.每段的长度分别为L1,L2,......,LN(1 <= L1,L2,-,LN <= 1000,且均为整数)个长度单位.我们认为切割时仅在整数点处切且 ...

  7. luogu P4238 多项式求逆 (模板题、FFT)

    手动博客搬家: 本文发表于20181125 13:21:46, 原地址https://blog.csdn.net/suncongbo/article/details/84485718 题目链接: ht ...

  8. 转载 - 算法实践——舞蹈链（Dancing Links）算法求解数独

    出处:http://www.cnblogs.com/grenet/p/3163550.html 在“跳跃的舞者,舞蹈链(Dancing Links)算法——求解精确覆盖问题”一文中介绍了舞蹈链(Dan ...

  9. Java EE: XML Schemas for Java EE Deployment Descriptors（Java Web的web.xml头web-app标签上的XML模式）

    继上几篇文章 http://www.cnblogs.com/EasonJim/p/6221952.html http://www.cnblogs.com/EasonJim/p/6959120.html ...

  10. IndexError:string index out of range

    IndexError:string index out of range 出现在下标越界的情况,如 item[1],可能为空的时候下标就会越界