CreateJS: Pac-Man Cabinet (CSS)!

var dragProps, rotationY = -30, rotationX = 0, scaleFactor = 1, rotationDirection = 0, sideImage, activeTween, cabinetId, oldCabinetId, cabinetQueue, animationQueue, changeScreenTimeout, cabinet = document.getElementById(“cabinet”), joystick1 = document.querySelector(“#joystick1 .handle”), joystick2 = document.querySelector(“#joystick2… Read the entire article at the source link…

Blinky Toggle – no JS

$color_pacman: #ffee00; $color_ghost-1: #ea82e5; $color_ghost-2: #46bfee; $color_ghost-3: #d03e19; $color_ghost-4: #db851c; $color_ghost_5: #0a50fe; $color_ghost-eye: #0a50fe; $char_size: 48px; $color_background: #000022; $pacman_mouth-animation_duration: .4s; $path-animation_duration: $pacman_mouth-animation_duration * 21 ; %a-character { width: $char_size; height: $char_size; position: absolute; top: 0; left: 0; } body { Continue reading Blinky Toggle – no JS

PAC-MAN’S Jedi Mind Trick

<svg id=”demo” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 1200 800″> <title>Pac-Man’s Jedi Mind Trick</title> <defs> <mask id=”dotsCover”> <path id=”dotsMask” d=”M600,382H314.31V20H885.69V382Z” fill=”none” stroke=”#fff” stroke-width=”16″/> </mask> <g id=”helmet”> <g> <path… Read the entire article at the source link…