hallo,everyone,我又来了,第3篇内容主要讲述坦克大战开始菜单的设计和事件绑定。
惯例,先上HTML内容和最终效果
//菜单包裹层
//开始菜单,4个按钮div
开始游戏
游戏说明
选择关卡
定义地图
//游戏说明div
- W:向上
- S:向下
- A:向左
- D:向右
- J:开炮/选择地图种类
- Esc:返回主菜单/取消定义地图
- Enter:完成定义地图
返回
//里面有一个返回按钮div
//选择关卡按钮,里面有4个按钮
关卡一
关卡二
关卡三
关卡四
.start{ width:250px; height:400px; background:#333; border:3px #9F0 outset; position:absolute; top:100px; left:300px; border-radius:10px;z-index:50;}
#shuoming,#chooselevel{left:560px; opacity:0; display:none;}
来看这一段样式,#shuoming和#chooselevel属于次级菜单,他们与一级菜单的区别在于,定位于一次菜单的右面,并且是隐藏的,只有点击事件出现后,次级菜单才会出现。
1 为“开始游戏”按钮绑定事件
//注意这里的这个选择器,更好的方式应该是$('#start .btn').eq(0),刚做的时候学艺不精;
$('#start').find('.btn').eq(0).bind('click',function(){//选中开始游戏按钮,绑定单击事件