2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 简单制作弹球打砖块网页小游戏

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

时间:2020-04-17 20:12:07

相关推荐

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

游戏开始页面如图:

点击开始游戏后小球开始运动,当小球碰到左、右容器边框时,小球向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.offsetLeft;var r1 = node1.offsetLeft + node1.offsetWidth;var t1 = node1.offsetTop;var b1 = node1.offsetTop+node1.offsetHeight;var l2 = node2.offsetLeft;var r2 = node2.offsetLeft + node2.offsetWidth;var t2 = node2.offsetTop;var b2 = node2.offsetTop+node2.offsetHeight;if(l2>r1||r2<l1||t2>b1||b2<t1){return false;}else{return true;}}

完整代码:/download/m0_59767127/19877001

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。