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 = Continue ReadingCreateJS: Pac-Man Cabinet (CSS)!

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: Continue ReadingBlinky 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 Continue ReadingPAC-MAN’S Jedi Mind Trick

Readability playground

<div mv-app=”readability” mv-bar=”none”> <div class=”controls”> <label>Line length: <input type=”range” property=”lineLength” max=”150″></label> <label>Leading: <input type=”range” property=”lineHeight” min=”0″ max=”2″ step=”.1″></label> <div class=”grid”> Alignment: <div class=”spread”> <label><input type=”radio” property=”align” name=”align” value=”left” checked /> Continue ReadingReadability playground