简单制作弹球打砖块网页小游戏

本文介绍了一款简单的弹球打砖块网页游戏的制作过程。游戏开始后,小球会根据碰撞规则在容器内运动,碰撞到边框会改变运动方向。通过碰撞检测函数判断小球与滑块、砖块的交互,实现游戏逻辑。提供完整代码链接供读者参考。
摘要由CSDN通过智能技术生成

游戏开始页面如图:

点击开始游戏后小球开始运动,当小球碰到左、右容器边框时,小球向x轴的反方向移动,当小球碰到容器上边框时小球向y轴的反方向移动

 代码如下:

//水平边界判断,当小球的left值小于容器左边界或者大于容器右边界时,将水平方向速度取反
  if(nextleft<=0||nextleft>=box.offsetWidth-ball.offsetWidth-10){
  speedX=-speedX;
  }
  //垂直边界判断,当小球的top值小于容器上边界时,将垂直方向速度取反
  if(nexttop<=0){
  speedY=-speedY;
  }

 除了判断上述小球的方向运动,还需要判断小球与滑块和砖块碰撞检测,于是可以把小球和滑块或小球和砖块当做参数传到创建的碰撞函数中。如果返回值为真,则设小球朝y轴的反方向运动,直到小球碰到容器下边框后游戏结束

碰撞函数代码如下:

//碰撞检测函数
 function knock(node1,node2){
  var l1 = node1.off
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值