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

    1.获取dom结构 <div className="Component_projress" ref="projressBar" js中: let proj ...

  2. python tips:最内嵌套作用域规则，闭包与装饰器

    在作用域与名字空间提到,python是静态作用域,变量定义的位置决定了变量作用的范围.变量沿着local,global,builtins的路径搜索,直觉上就是从里到外搜索变量,这称为最内嵌套作用域规则 ...

  3. PAT_A1123#Is It a Complete AVL Tree

    Source: PAT A1123 Is It a Complete AVL Tree (30 分) Description: An AVL tree is a self-balancing bina ...

  4. html 报告页面样式

    修改了下HTML页面样式 页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  5. unittest的case和报告生成方法

    #coding=utf-8from appium import webdriverimport unittestimport HTMLTestRunnerclass CaseTest(unittest ...

  6. 【剑指Offer】13、调整数组顺序使奇数位于偶数前面

      题目描述:   输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变.   解题思 ...

  7. 值得收藏--GitHub Top 20 开源项目

    参考链接:https://github.com/Aufree/trip-to-iOS/blob/master/Top-100.md 项目名称                            项目 ...

  8. [luogu1971 NOI2011] 兔兔与蛋蛋游戏 (二分图博弈)

    传送门 Solution 补一篇二分图博弈 这个博客写的很详细qwq: https://www.cnblogs.com/maijing/p/4703094.html Code //By Menteur ...

  9. [下载]Oracle LOB字段编辑工具

    OraLobEditor 是Oracle LOB (CLOB, BLOB) 字段编辑工具. 查看.编辑LOB (CLOB, BLOB)字段(plain text, RTF, image, hex, h ...

  10. Extensions for Spatial Data

    http://dev.mysql.com/worklog/task/?spm=5176.100239.blogcont4270.8.j3asa7&id=6609 前文: 这两天因为项目原因看了 ...