VueUse
Use the arrow keys or w a s d keys to control the movement of the ball.

onKeyStroke

Listen for keyboard key being stroked.

Usage 

import { onKeyStroke } from '@vueuse/core'

onKeyStroke('ArrowDown', (e) => {
  e.preventDefault()
})

See this table for all key codes.

Listen To Multiple Keys 

import { onKeyStroke } from '@vueuse/core'

onKeyStroke(['s', 'S', 'ArrowDown'], (e) => {
  e.preventDefault()
})

Custom Event Target 

onKeyStroke('A', (e) => {
  console.log('Key A pressed on document')
}, { target: document })

Custom Keyboard Event 

onKeyStroke('Shift', (e) => {
  console.log('Shift key up')
}, { eventName: 'keyup' })

Or

onKeyUp('Shift', () => console.log('Shift key up'))

Alias

  • onKeyDown - alias for onKeyStroke(key, handler, {eventName: 'keydown'})
  • onKeyPressed - alias for onKeyStroke(key, handler, {eventName: 'keypress'})
  • onKeyUp - alias for onKeyStroke(key, handler, {eventName: 'keyup'})

Type Declarations 

export declare type KeyPredicate = (event: KeyboardEvent) => boolean
export declare type KeyFilter =
  | null
  | undefined
  | string
  | string[]
  | KeyPredicate
export declare type KeyStrokeEventName = "keydown" | "keypress" | "keyup"
export declare type KeyStrokeOptions = {
  eventName?: KeyStrokeEventName
  target?: MaybeRef<EventTarget>
  passive?: boolean
}
/**
 * Listen for keyboard keys being stroked.
 *
 * @see https://vueuse.org/onKeyStroke
 * @param key
 * @param handler
 * @param options
 */
export declare function onKeyStroke(
  key: KeyFilter,
  handler: (event: KeyboardEvent) => void,
  options?: KeyStrokeOptions
): Fn
/**
 * Listen to the keydown event of the given key.
 *
 * @see https://vueuse.org/onKeyStroke
 * @param key
 * @param handler
 * @param options
 */
export declare function onKeyDown(
  key: KeyFilter,
  handler: (event: KeyboardEvent) => void,
  options?: Omit<KeyStrokeOptions, "eventName">
): Fn
/**
 * Listen to the keypress event of the given key.
 *
 * @see https://vueuse.org/onKeyStroke
 * @param key
 * @param handler
 * @param options
 */
export declare function onKeyPressed(
  key: KeyFilter,
  handler: (event: KeyboardEvent) => void,
  options?: Omit<KeyStrokeOptions, "eventName">
): Fn
/**
 * Listen to the keyup event of the given key.
 *
 * @see https://vueuse.org/onKeyStroke
 * @param key
 * @param handler
 * @param options
 */
export declare function onKeyUp(
  key: KeyFilter,
  handler: (event: KeyboardEvent) => void,
  options?: Omit<KeyStrokeOptions, "eventName">
): Fn

Source

Source • Demo • Docs