A CSS-only Pong game, initially a CodePen by Manuel Schaller, sparked an exploration into modern CSS collision detection. The author, inspired by the demo's resemblance to an arcade machine, used a (fictional) enchanted token to enhance the game, adding a life counter and player control via a range input. This upgrade leveraged style queries, custom properties, and animation timelines, showcasing the evolution of CSS interactivity since Alex Walker's 2013 "Hack River" Pong implementation.

CSS Collision Detection: A Decade of Progress

The author contrasts the current approach using style queries with Alex Walker's 2013 techniques, highlighting the significant advancements in CSS capabilities. The modern implementation, while still dealing with limitations, feels less like a "hack" and more like a natural application of the language's features. The combination of style queries, animatable custom properties, and animation timelines demonstrates the increased power and expressiveness of CSS. Future features like inline conditionals and custom functions could further simplify such implementations.

Style Queries for Collision Detection

The updated Pong game uses style queries to detect collisions between the player's paddle and the ball. The ball follows a predetermined path; the only user interaction is whether the paddle intercepts the ball. This "quick time event" style of gameplay is possible due to the limited potential outcomes. The author notes that while not ideal for complex games, it represents a significant step forward in CSS interactivity.

The challenge lies in the limitations of style queries. Container style queries only support name-value pairs, lacking direct "greater than" or "less than" comparisons for numerical values. A workaround using the min() function is employed to determine if the ball's position falls within the paddle's range. The field's background color (green for a hit, red for a miss) and the state of the life-decrementing animation are controlled based on these collision checks.

body {
  --int-ball-position-x: round(down, var(--ball-position-x));
  --min-ball-position-y-and-top-of-paddle: min(var(--ball-position-y)   var(--ball-height), var(--ping-position));
  --min-ball-position-y-and-bottom-of-paddle: min(var(--ball-position-y), var(--ping-position)   var(--paddle-height));
}

@container style(--int-ball-position-x: var(--ball-left-boundary)) {
  .screen {
    --lives-decrement: running;

    .field {
      background: red;
    }
  }
}

@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)) {
  .screen {
    --lives-decrement: paused;

    .field {
      background: green;
    }
  }
}

Handling Collisions and Game Over

The life counter is implemented using a paused/unpaused keyframe animation controlled by the collision detection. When the ball misses the paddle, the animation runs, decrementing the life count. Reaching zero lives triggers a "Game Over" screen. This demonstrates the indirect control of non-animatable properties via animations and style queries.

body {
  animation: ball 8s infinite linear, lives 80ms forwards steps(4) var(--lives-decrement);
  --lives-decrement: paused;        
}

.lives::after {
   content: var(--lives);
}

@keyframes lives {
  0% {
    --lives: "3";
  }
  25% {
    --lives: "2";
  }
  75% {
    --lives: "1";
  }
  100% {
    --lives: "0";
  }
}

@container style(--int-ball-position-x: var(--ball-left-boundary)) {
  .screen {
    --lives-decrement: running;

    .field {
      background: red;
    }
  }
}

@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) {
  .screen {
    --lives-decrement: paused;

    .field {
      background: green;
    }
  }
}

@container style(--lives: '0') {
  .field {
     display: none;
  }

  .game-over {
     display: flex;
  }
}

The author discusses unexpected inconsistencies in the collision detection, possibly due to timer drift or race conditions. Setting animation durations to multiples of eight seemed to resolve the issue, but the underlying cause remains a subject of speculation.

Conclusion

The article concludes with a reflection on the power and limitations of CSS for game development. While the implemented Pong game demonstrates impressive capabilities, it also highlights the need for further refinement and potentially alternative approaches for more complex scenarios. The author playfully suggests that pushing CSS to its limits might have unintended consequences. The project was built upon Manuel Schaller's CodePen and playtested by the author's children.

The above is the detailed content of Worlds Collide: Keyframe Collision Detection Using Style Queries. For more information, please follow other related articles on the PHP Chinese website!