這個小遊戲很簡單，一共由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 = true
short()
}
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.5
if(time == strong){
clearInterval(shootBall)
}
sphere.rotation.x += 1;
sphere.position.x += strong/100;
},100)
複製程式碼這裡可以看出，力量越大，方法執行的次數也就越多，這樣飛行距離就會變長。力量越大，每次足球移動的距離也會越大，所以速度就會越快。當然，力量對足球的影響不可能像我設計的這麼簡單，例如足球從加速到減速的過程就很複雜，我這裡就直接忽視了。有興趣的同學可以想一想怎麼實現。
射門方式和碰撞檢測
射門的方向和高度是通過組合按鍵控制的，組合按鍵也就是加keyStatus實現的，這個在我前一篇介紹中有就不說了。宣告一個變數shootType，然後不同的射門方式都有自己獨有的shootType,在keyup時間中監聽射門鍵，當鬆開J鍵時，判斷shootType來控制射門的方式。
碰撞檢測呢是通過球門和足球X,Y,Z軸位置判斷的。在足球飛行的過程中，如果檢測到了碰撞則進球。
附上下載地址github.com/leslie233/3…