Games and canvases

Hold keys, drag and click at exact points of a canvas, and wait on the game's own state.

script:
  - goto: /game.html
  - wait: { js: "window.game && game.ready" }   # a JavaScript expression, true when ready
  - hold: ArrowLeft                 # the key stays down, auto-repeating like a real one
    for: 1.5
  - hold: [Shift, w]                # held together: down in order, up in reverse
    for: 2
    repeat: false
  - drag: { css: canvas }           # press, move with the button down, release
    from: [0.5, 0.6]                # fractions of the target's box
    to: [0.5, 0.35]
    for: 1
  - click: { css: canvas }
    at: [0.75, 0.3]                 # this point of the canvas, not near its centre
  - wait: { js: "game.score > 0" }

• hold sends real key-down events and keeps them down; the last ordinary key repeats after 0.5 s, 30 times a second, unless repeat: false. With Shift down, letters are capitals.
• drag moves along an eased path with the button down for for seconds.
• at aims at a point of the target's box, and the check that nothing covers the target looks at that point.
• wait: { js } checks the expression every 50 ms and may use await; an expression that throws is not ready yet.
• The camera shows the whole page while keys are held, and the pointer is hidden while it rests.
• WebGL renders on the GPU in headless Chrome: 56 frames a second at 2560×1600 on the machine these docs were built on.

Out of reach: pointer lock (mouse look), gamepads and the game's own audio.

Source: docs-src/pages/guides/games.md · browser-clip 0.1.0