用JavaScript实现的2048.

Posted 2020-11-24 狂澜688

学习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设置样式.