世界碰撞：使用樣式查詢的鑰匙幀碰撞檢測

最初由Manuel Schaller的代碼epen的僅CSS乒乓球遊戲引發了對現代CSS碰撞檢測的探索。作者受到演示與街機機的相似之處的啟發，使用了（虛構的）附魔代幣來增強遊戲，並通過範圍輸入增加了生活計數器和玩家控制。此升級槓桿風格查詢，自定義屬性和動畫時間表，展示了自Alex Walker的2013年“ Hack River” Pong實施以來CSS互動的演變。

CSS碰撞檢測：十年的進步

作者使用樣式查詢與Alex Walker的2013年技術進行了對比當前的方法，強調了CSS功能的重大進步。現代實施雖然仍在處理局限性，但感覺不像是“黑客”，而更像是對語言功能的自然應用。樣式查詢，動畫自定義屬性和動畫時間表的組合表明了CSS的功能和表現力。在線條件和自定義功能之類的未來功能可以進一步簡化此類實現。

碰撞檢測的樣式查詢

更新的乒乓球遊戲使用樣式查詢來檢測玩家槳和球之間的碰撞。球遵循預定的路徑。唯一的用戶互動是槳是否攔截了球。由於潛在的結果有限，因此可以使用這種“快速時間事件”遊戲樣式。作者指出，雖然對於復雜遊戲而言並不理想，但它代表了CSS互動性的重要一步。

挑戰在於樣式查詢的局限性。容器樣式查詢僅支持名稱值對，缺乏直接的“大於”或“小於”的數值值比較。使用使用min()函數的解決方法來確定球的位置是否落在槳葉範圍內。該領域的背景顏色（綠色命中率，紅色，失踪），並且根據這些碰撞檢查控制了生命動畫的狀態。

身體 {
   -  Int-Ball-Bosition-X：圓形（down，var（-ball-position-x））;
   - 最低的 - 位置y和top-of-of-paddle：min（var（-ball-position-y）var（ - 球高），var（ -  ping-position））;
   - 最低的姿勢 - 底部 - 底部：min（var（ - 球位置y），var（ -  ping-position）var（ -  paddle-height））;
}

@Container樣式（ -  int-ball-balt-position-x：var（ - 球左邊界））{
  .螢幕 {
     -  lives-decrement：運行；

    。場地 {
      背景：紅色；
    }
  }
}

@container style(--min-ball-position-y-and-top-of-paddle: var(--ping-position)) and style(--min-ball-position-y-and-bottom-of-paddle: var(--ball-position-y)) and style(--int-ball-position-x: var(--ball-left-boundary)) {
  .螢幕 {
     -  lives-decrement：暫停；

    。場地 {
      背景：綠色；
    }
  }
}

處理碰撞和遊戲

生命計數器是使用由碰撞檢測控制的暫停/未大量的密鑰幀動畫實現的。當球錯過槳時，動畫會延伸，減少了壽命。達到零的生命會觸發一個“遊戲”屏幕。這證明了通過動畫和样式查詢對非動畫屬性的間接控制。

身體 {
  動畫：Ball 8S無限線性，在80ms向前的步驟（4）var（ - 生命決定）；
   -  lives-decrement：暫停；        
}

.lives ::之後{
   內容：var（ - 生活）；
}

@KeyFrames Live {
  0％{
    -lives：“ 3”;
  }
  25％{
     -  lives：“ 2”；
  }
  75％{
     -  lives：“ 1”；
  }
  100％{
     -  lives：“ 0”;
  }
}

@Container樣式（ -  int-ball-balt-position-x：var（ - 球左邊界））{
  .螢幕 {
     -  lives-decrement：運行；

    。場地 {
      背景：紅色；
    }
  }
}

@container style(--min-ball-position-y-and-top-of-paddle: var(--ping-position)) and style(--min-ball-position-y-and-bottom-of-paddle: var(--ball-position-y)) and style(--int-ball-position-x: 8) {
  .螢幕 {
     -  lives-decrement：暫停；

    。場地 {
      背景：綠色；
    }
  }
}

@Container樣式（ - 生活：'0'）{
  。場地 {
     顯示：無；
  }

  。遊戲結束 {
     顯示：Flex;
  }
}

作者討論了碰撞檢測中的意外矛盾，這可能是由於計時器漂移或種族條件所致。將動畫持續時間設置為八個的倍數似乎解決了問題，但是根本的原因仍然是猜測的主題。

結論

本文以CSS在遊戲開發中的力量和局限性進行了反思。儘管實施的乒乓球遊戲表現出令人印象深刻的功能，但它也強調了進一步的完善和可能採用更複雜情景的替代方法。作者嬉戲地暗示，將CSS推到極限可能會帶來意想不到的後果。該項目是建立在曼努埃爾·舍勒（Manuel Schaller）的代碼epen上的，並由作者的孩子們進行了測試。

以上是世界碰撞：使用樣式查詢的鑰匙幀碰撞檢測的詳細內容。更多資訊請關注PHP中文網其他相關文章！