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

CSS碰撞檢測：十年的進(jìn)步

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

碰撞檢測的樣式查詢

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

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

身體 {
   -  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（ - 球左邊界））{
  .螢?zāi)?{
     -  lives-decrement：運(yùn)行；

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

@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)) {
  .螢?zāi)?{
     -  lives-decrement：暫停；

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

處理碰撞和遊戲

生命計(jì)數(shù)器是使用由碰撞檢測控制的暫停/未大量的密鑰幀動(dòng)畫實(shí)現(xiàn)的。當(dāng)球錯(cuò)過槳時(shí)，動(dòng)畫會(huì)延伸，減少了壽命。達(dá)到零的生命會(huì)觸發(fā)一個(gè)“遊戲”屏幕。這證明了通過動(dòng)畫和樣式查詢對非動(dòng)畫屬性的間接控制。

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

.lives ::之後{
   內(nèi)容：var（ - 生活）；
}

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

@Container樣式（ -  int-ball-balt-position-x：var（ - 球左邊界））{
  .螢?zāi)?{
     -  lives-decrement：運(yùn)行；

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

@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) {
  .螢?zāi)?{
     -  lives-decrement：暫停；

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

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

  。遊戲結(jié)束 {
     顯示：Flex;
  }
}

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

結(jié)論

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

以上是世界碰撞：使用樣式查詢的鑰匙幀碰撞檢測的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！