游戲開始頁(yè)面如圖：

點(diǎn)擊開始游戲后小球開始運(yùn)動(dòng)，當(dāng)小球碰到左、右容器邊框時(shí)，小球向x軸的反方向移動(dòng)，當(dāng)小球碰到容器上邊框時(shí)小球向y軸的反方向移動(dòng)

?代碼如下：

//水平邊界判斷，當(dāng)小球的left值小于容器左邊界或者大于容器右邊界時(shí)，將水平方向速度取反if(nextleft<=0||nextleft>=box.offsetWidth-ball.offsetWidth-10){speedX=-speedX;}//垂直邊界判斷，當(dāng)小球的top值小于容器上邊界時(shí)，將垂直方向速度取反if(nexttop<=0){speedY=-speedY;}

?除了判斷上述小球的方向運(yùn)動(dòng)，還需要判斷小球與滑塊和磚塊碰撞檢測(cè)，于是可以把小球和滑塊或小球和磚塊當(dāng)做參數(shù)傳到創(chuàng)建的碰撞函數(shù)中。如果返回值為真，則設(shè)小球朝y軸的反方向運(yùn)動(dòng)，直到小球碰到容器下邊框后游戲結(jié)束

碰撞函數(shù)代碼如下：

//碰撞檢測(cè)函數(shù)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;}}

完整代碼：https://download.csdn.net/download/m0_59767127/19877001

總結(jié)

以上是生活随笔為你收集整理的简单制作弹球打砖块网页小游戏的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。