用JavaScript实现的2048.

Posted 狂澜688

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用JavaScript实现的2048.相关的知识,希望对你有一定的参考价值。

学习javascript一段时间了.但是还没有怎么实践过,最近就找了个2048简单的小游戏做一下.

页面效果:

      

使用了jquery库简化了js的语法.

  源文件有:

    index.html  游戏页面

    2048.css 样式表

  js文件有

    jquery.js

    supprot.js 游戏基础逻辑

    animation.js 游戏动画逻辑

    game.js 游戏交互逻辑

    main.js 游戏主逻辑

Git地址:https://github.com/kuanglan688/2048

游戏总结: 这个游戏上下左右移动的逻辑都是一样的,只要完成一个方向,其他的方向就很简单了.

  本来以为这种情况会有点复杂:   0 2 0 4 (0代表没有数字) 左移的情况

  但是实现的时候从左到右 依次左移 先吧2 移到最右边 然后后面的4就好办了 一步一步的处理还是挺简单的.

  整个就是用一个二维数组来存储的.也没有复杂的数据结构. 还算是比较简单.

  

 

涉及到的新知识:

  1 href和src的差别.

    css 用link href来添加 ;js文件用 script src来添加;

    css要用rel属性指明stylesheet; js用type指明text/javascript.

    href 表示超文本连接 表示引用和页面关联. 用在a和link上

    src表示引用资源 用在 img script 和frame 上面 

    浏览器解析src时会暂停加载源文件 href不会停止对当前文件的处理.

 

  2 css文件用来修改样式, 首先要选择对哪个修改:

    1标签选择器: 比如header  前面无修饰符 直接header{}

    2类选择器: 对于class = "grid-cell" 选择时在类名前面加 . 比如.grid-cell{}

    3id选择器: 对于id="startbutton" 选择时在id前面加# 比如 #startbutton{}

    这三种选择器可以嵌套叠加使用

      header p{} 表示header里面p的样式

      header #endbutton{} 表示header里面id 为endbutton的样式

 

    #button:hover{} 表示鼠标悬停在button上时的样式

 

  3 js按键事件    $(document).keydown(function(event){

            //按键时的操作 event代表按下的键的信息

            });

 

  4 css样式

    display: block; 显示为块级元素 后跟换行符

    margin;  (同样也适用于padding)

      若指定四个值 依次是上右下左

      若指定三个值 依次是上 右和左 下

      若指定两个值 依次是 上和下 右和左

      若指定一个值 则上下左右都相同

      设为auto 则有浏览器计算外边距

    position: relative; absolute;

  5 通过append添加元素 $("") .append("")

    然后获得添加的元素 使用.css设置样式.

 

以上是关于用JavaScript实现的2048.的主要内容,如果未能解决你的问题,请参考以下文章

用 JavaScript 实现手势库 — 手势动画应用前端组件化

用 JavaScript 实现手势库 — 手势动画应用前端组件化

用 JavaScript 实现手势库 — 封装手势库前端组件化

用 JavaScript 实现手势库 — 封装手势库前端组件化

用 JavaScript 实现手势库 — 手势动画应用前端组件化

用 JavaScript 实现手势库 — 封装手势库前端组件化