這個小游戲很簡單，一共由3個部分構成。1個平面（球場），1個球體（足球）還有一個立方體（球門）。

上個圖給你們感受一下簡陋的畫風（掘金最高上傳5M圖片，原來圖片都太大了壓縮后很不清晰）

當按下空格鍵時，可以開始游戲。開始游戲后，視角會切換到球門正面，并且球門會開始左右移動。你所做的就是把足球踢進移動的球門中。J鍵是射門鍵，按下J鍵不松開，足球右側會出現一個可以伸縮的黃色條狀物... 這是模仿其他游戲里控制射門的力度，越長就代表力量越大。只按J是中路低平球射門，W J是中路高球射門，A J向左地平射門，A W J左高球射門，右側D鍵同理。這里簡述一下這個游戲是怎么運行的。

力量條控制

首先還是keydown事件監聽按鍵。我們設一個變量strong代表力量大小，初始值為0。然后我們考慮一下，進度條不能無限變大，要設定一個最大值假設為15。 我們先來解決控制進度條伸縮也就是實現讓strong從0到15再從15到0然后循環效果。 加一個long()方法和一個short()方法。當然方法里還有其他操作，先略過

function long(){setTimeout(function(){strong = 1},100)}function short(){setTimeout(function(){strong -= 1},100)}

一開始我想，當按下J鍵首先執行long()方法，然后當strong大于等于15的時候，再執行short方法就OK了。類似這樣

switch(e.keyCode){case 74:if(strong>=15){short()}else{long()}break;}

但是測試的時候發現不行，因為當strong等于15后，執行short()，strong變為14后又會繼續執行long()了，實際上strong是先從0變成15，然后14 15 14 15循環。所以這里我增加了一個lock狀態，初始值為false。

switch(e.keyCode){case 74:if(strong>=15){lock = trueshort()}else{lock ? short() : long()}break;}

當strong大于等于15時，lock變為true, 在short方法里增加當strong為0時，修改lock值為false。

然后我們把strong的變化在頁面上表現出來，把立方體Z軸設為strong/100動態改變立方體的高度就行了。

球門和足球的移動

球門的移動是固定速度的，通過改變球門的X,Y,Z軸的位置使球門移動，當球門Y軸位置大于某個值時，讓它向右移動。當Y軸位置小于某個值時向左移動。足球的移動原理和球門是一樣的，但是我增加了力量對足球速度的影響和足球的轉動。足球轉動很容易，通過改變rotation即可實現。力量對足球的影響我這里也只是做了一小部門，即力量越大足球飛行速度越快，飛行距離越遠。添加一個setInterval方法，在這個方法里聲明一個變量times，這個times是用來決定這個setInterval執行多少次的。

let shootBall = setInterval(function(){time = time 0.5if(time == strong){clearInterval(shootBall)}sphere.rotation.x = 1;sphere.position.x = strong/100;},100)

這里可以看出，力量越大，方法執行的次數也就越多，這樣飛行距離就會變長。力量越大，每次足球移動的距離也會越大，所以速度就會越快。當然，力量對足球的影響不可能像我設計的這么簡單，例如足球從加速到減速的過程就很復雜，我這里就直接忽視了。有興趣的同學可以想一想怎么實現。

射門方式和碰撞檢測

射門的方向和高度是通過組合按鍵控制的，組合按鍵也就是加keyStatus實現的，這個在我前一篇介紹中有就不說了。聲明一個變量shootType，然后不同的射門方式都有自己獨有的shootType,在keyup時間中監聽射門鍵，當松開J鍵時，判斷shootType來控制射門的方式。

碰撞檢測呢是通過球門和足球X,Y,Z軸位置判斷的。在足球飛行的過程中，如果檢測到了碰撞則進球。

附上下載地址https://github.com/leslie233/3D-football

總結

以上是生活随笔為你收集整理的用three.js写一个简单的3D射门游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。