学习阶段，还是写点小东西练练手学的有意思一点，今天用栅格布局做了一个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. springboot：基础学习一 linux下后台启动springboot项目

    我们知道启动springboot的项目有三种方式: 运行主方法启动 使用命令 mvn spring-boot:run”在命令行启动该应用 运行“mvn package”进行打包时,会打包成一个可以直接 ...

  2. Markdown 常用语法总结

    注意:Markdown使用#.+.*等符号来标记,符号后面必须跟上至少跟上 1个空格才有效! Markdown的常用语法 标题 Markdown标题支持两种形式. 1.用#标记 在标题开头加上1~6个 ...

  3. 文献阅读 | Benefits and limitations of genome-wide association studies

    参考:今日阅读:GWAS的优劣势 - Omics Liu  Omics 待续~

  4. 【剑指Offer】30、连续子数组的最大和

      题目描述:   HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是 ...

  5. 为 Elasticsearch 添加中文分词，对比分词器效果

    转自:http://keenwon.com/1404.html 为 Elasticsearch 添加中文分词,对比分词器效果 Posted in 后端 By KeenWon On 2014年12月12 ...

  6. css画圆

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  7. Pyhton高级-Socket

    1,UDP实现收发数据 import socket def send_msg(udp_socket): """获取键盘数据,并将其发送给对方""&qu ...

  8. JavaSE 学习笔记之面向对象（三）

    面向对象 特点: 1:将复杂的事情简单化. 2:面向对象将以前的过程中的执行者,变成了指挥者. 3:面向对象这种思想是符合现在人们思考习惯的一种思想.   过程和对象在我们的程序中是如何体现的呢?过程 ...

  9. C#--进程-线程

    线程 线程也被称为轻量级进程lightweight process ,LWP,线程是CPU独立调度和分派的基本单位,同一个进程中的多个线程将共享该进程中的全部系统资源,多线程共享堆heap资源,c#程 ...

  10. ubuntu-kill命令-杀死进程

    显示进程pid ps -A 杀进程的命令 kill -s 9 xxx(进程pid)