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