html做坦克大战的效果,HTML+CSS+JQ试做经典坦克大战(三)

这篇博客讲述了如何利用HTML、CSS和jQuery设计坦克大战游戏的开始菜单并实现各个按钮的事件绑定,包括开始游戏、游戏说明、选择关卡等操作。详细介绍了绑定事件的代码实现,以及startwar()函数中涉及的坦克移动、开炮和位置调整等关键功能。
摘要由CSDN通过智能技术生成

hallo,everyone,我又来了,第3篇内容主要讲述坦克大战开始菜单的设计和事件绑定。

惯例,先上HTML内容和最终效果

AAffA0nNPuCLAAAAAElFTkSuQmCC

//菜单包裹层
//开始菜单,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(){//选中开始游戏按钮,绑定单击事件

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值