学习阶段，还是写点小东西练练手学的有意思一点，今天用栅格布局做了一个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. sessionStorage和localStorage存储的转换不了json

    先说说localStorage与sessionStorage的差别 sessionStorage是存储浏览器的暂时性的数据,当关闭浏览器下次再打开的时候就不能拿到之前存储的缓存了 localStora ...

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

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

  3. 在vue中写一个跟着鼠标跑的div，div里面动态显示数据

    1.div应该放在body里面,这是我放在body中的一个div里面的div <!-- 信息查看层 --> <div class="floatDiv" :styl ...

  4. 【剑指Offer】26、二叉搜索树与双向链表

      题目描述:   输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向.   解题思路:   首先要理解此题目的含义,在双向链表中,每个结 ...

  5. 当svn检出项目检出一半时停止，如何继续检出

    1.当svn检出项目时,发现中断,又不想重新检出可以在已检出的项目目录下右键 2.然后点击 之后直接update你的项目就可以了

  6. webpack 配置 Vue 多页应用 —— 从入门到放弃

    webpack 配置 Vue 多页应用 -- 从入门到放弃 一直以来,前端享有无需配置,一个浏览器足矣的优势,直到一大堆构建工具的出现,其中 webpack 就是其中最复杂的一个,因此出现了一个新兴职 ...

  7. 3.SpringBoot整合Thymeleaf模板

    一.前言 SrpingBoot支持如JSP.Thymeleaf.FreeMarker.Mustache.Velocity等各种模板引擎,同时还为开发者提供了自定义模板扩展的支持. 使用嵌入式Servl ...

  8. luogu P4726 多项式指数函数(模板题FFT、多项式求逆、多项式对数函数）

    手动博客搬家: 本文发表于20181127 08:39:42, 原地址https://blog.csdn.net/suncongbo/article/details/84559818 题目链接: ht ...

  9. SWT中嵌入Swing的JTextFeild却不能编辑

    SWT中嵌入Swing的JTextFeild却不能编辑 学习了:http://www.iteye.com/problems/49487   膜拜一下 org 竟然有这样的坑,需要在中间添加一个JApp ...

  10. java异常 之 异常的层次结构

    一:起因 (1)近期在用java处理分析各种数据,碰到了一些异常,如parse()异常 ParseException,valueOf()NumberFormatException  IllegalAr ...