├── .prettierignore ├── README.md ├── assets ├── background.png ├── bonetrousle-tobyfox-by-bulby.mp3 ├── bonetrousle-tobyfox-by-bulby.ogg ├── boxing.mp3 ├── bubble.mp3 ├── cake-is-a-lie.png ├── cake.min.svg ├── cassette.png ├── cat.png ├── chalk-fridge-1.png ├── chalk-fridge-2.png ├── chars.png ├── closed-chest.png ├── codepen-guy.png ├── coin.mp3 ├── coin.png ├── computer-pixel.png ├── concert.jpg ├── cube-company.jpg ├── cup.png ├── death-star-256x256.png ├── diamond.png ├── dischipo-2.mp3 ├── dischipo.mp3 ├── drop-cup.mp3 ├── du-hast-by-8-bit-universe.mp3 ├── du-hast-start.mp3 ├── ewof-sad-8-bits-by-finn-formiga.mp3 ├── explode.mp3 ├── eye-tiger-intro.mp3 ├── eye-tiger.mp3 ├── eyeshit.png ├── fail-trombone.mp3 ├── finish.mp3 ├── fish.mp3 ├── fish.png ├── fishes.png ├── folder.min.svg ├── folder.png ├── folder.svg ├── french-fries-empty.png ├── french-fries-face.png ├── french-fries-only.png ├── french-fries.png ├── futurama-by-plastiware.mp3 ├── futurama-by-plastiware.ogg ├── god-eye.png ├── guitar-pixel.png ├── happier-times-by-paperlaur.mp3 ├── happy-face.png ├── heart-mouse.png ├── hooked.mp3 ├── hylian-lemon-by-willrock-and-damonz.mp3 ├── imperial-8bit-by-crig.mp3 ├── leopard-pattern.jpg ├── link-past-by-willrock-and-damonz.mp3 ├── man.png ├── maniac-mansion-by-kenneth-moller.mp3 ├── maniac-mansion-by-kenneth-moller.ogg ├── motor.mp3 ├── mouse-sprites.png ├── naru-by-mike-skitch.mp3 ├── ocean-side-by-jjayberthume.mp3 ├── open-chest.png ├── pixel-cloud.png ├── planet-express.png ├── playing-power-2.mp3 ├── playing-power.mp3 ├── podium.png ├── polarity-by-kubbi.mp3 ├── polarity-by-kubbi.ogg ├── polka-by-rainbowdragoneyes.mp3 ├── polka-by-rainbowdragoneyes.ogg ├── portal2-cara-mia.mp3 ├── portal2-cara-mia.ogg ├── power-up-1.mp3 ├── power-up-1.ogg ├── power-up-2.mp3 ├── power-up-2.ogg ├── power-up-3.mp3 ├── power-up-3.ogg ├── press-start.mp3 ├── profile-80.png ├── ring-boxing.png ├── rock-hands.png ├── rocket-fire.png ├── rocket-no-fire.png ├── rocket-raccoon-true.png ├── rocket-raccoon.png ├── rockguy.png ├── screens.png ├── segment7.ttf ├── segment7.woff ├── segment7.woff2 ├── shooting-stars-by-janderson-barboza.mp3 ├── skogens-djur-1.mp3 ├── skogens-djur-2.mp3 ├── snail-pixel.png ├── space-odyseey-by-dj-otaking-333.mp3 ├── spookcat.mp3 ├── starjhol.ttf ├── starjhol.woff ├── starjhol.woff2 ├── start-motor.mp3 ├── still-alive-8-bits-by-michaelaker.mp3 ├── sunglasses.png ├── sword.png ├── tape-play.mp3 ├── tetris-a.mp3 ├── tron-by-mcklain.mp3 ├── tron.ttf ├── tron.woff ├── turret-image.svg ├── weather-girl-by-radix.mp3 ├── weather-girl-by-radix.ogg ├── weather-girl.mp3 ├── weather-girl.ogg ├── wheatfield.jpg ├── wheatfield.mp4 ├── wings.mp3 ├── winning.mp3 ├── wonderful.mp3 ├── wonderful.ogg ├── world-map.png └── zebra.png ├── codevember-logo.gif ├── day-1 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-10 ├── README.txt ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-11 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-12 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-13 ├── README.txt ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-14 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-15 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-16 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-17 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-18 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-19 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-2 ├── README.txt ├── css │ └── style.css ├── index.html └── license.txt ├── day-20 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-21 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-22 ├── README.txt ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-23 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js ├── less │ └── style.less └── license.txt ├── day-24 ├── README.txt ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-25 ├── README.txt ├── css │ └── style.css ├── index.html ├── js │ └── index.js ├── less │ └── style.less └── license.txt ├── day-26 ├── README.txt ├── css │ └── style.css ├── index.html └── license.txt ├── day-27 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-28 ├── README.txt ├── css │ └── style.css ├── index.html └── license.txt ├── day-29 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-3 ├── README.txt ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-30 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-4 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-5 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-6 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── day-7 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js ├── less │ └── style.less └── license.txt ├── day-8 ├── README.txt ├── css │ └── style.css ├── index.html └── license.txt ├── day-9 ├── README.txt ├── babel │ └── index.babel ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── license.txt ├── docs ├── 1.png ├── 10.png ├── 11.png ├── 12.png ├── 13.png ├── 14.png ├── 15.png ├── 16.png ├── 17.png ├── 18.png ├── 19.png ├── 2.png ├── 20.png ├── 21.png ├── 22.png ├── 23.png ├── 24.png ├── 25.png ├── 26.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 7.png ├── 8.png └── 9.png └── extra-day ├── README.txt ├── babel └── index.babel ├── css └── style.css ├── index.html ├── js └── index.js └── license.txt /.prettierignore: -------------------------------------------------------------------------------- 1 | * 2 | -------------------------------------------------------------------------------- /assets/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/background.png -------------------------------------------------------------------------------- /assets/bonetrousle-tobyfox-by-bulby.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/bonetrousle-tobyfox-by-bulby.mp3 -------------------------------------------------------------------------------- /assets/bonetrousle-tobyfox-by-bulby.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/bonetrousle-tobyfox-by-bulby.ogg -------------------------------------------------------------------------------- /assets/boxing.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/boxing.mp3 -------------------------------------------------------------------------------- /assets/bubble.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/bubble.mp3 -------------------------------------------------------------------------------- /assets/cake-is-a-lie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/cake-is-a-lie.png -------------------------------------------------------------------------------- /assets/cassette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/cassette.png -------------------------------------------------------------------------------- /assets/cat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/cat.png -------------------------------------------------------------------------------- /assets/chalk-fridge-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/chalk-fridge-1.png -------------------------------------------------------------------------------- /assets/chalk-fridge-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/chalk-fridge-2.png -------------------------------------------------------------------------------- /assets/chars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/chars.png -------------------------------------------------------------------------------- /assets/closed-chest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/closed-chest.png -------------------------------------------------------------------------------- /assets/codepen-guy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/codepen-guy.png -------------------------------------------------------------------------------- /assets/coin.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/coin.mp3 -------------------------------------------------------------------------------- /assets/coin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/coin.png -------------------------------------------------------------------------------- /assets/computer-pixel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/computer-pixel.png -------------------------------------------------------------------------------- /assets/concert.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/concert.jpg -------------------------------------------------------------------------------- /assets/cube-company.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/cube-company.jpg -------------------------------------------------------------------------------- /assets/cup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/cup.png -------------------------------------------------------------------------------- /assets/death-star-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/death-star-256x256.png -------------------------------------------------------------------------------- /assets/diamond.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/diamond.png -------------------------------------------------------------------------------- /assets/dischipo-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/dischipo-2.mp3 -------------------------------------------------------------------------------- /assets/dischipo.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/dischipo.mp3 -------------------------------------------------------------------------------- /assets/drop-cup.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/drop-cup.mp3 -------------------------------------------------------------------------------- /assets/du-hast-by-8-bit-universe.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/du-hast-by-8-bit-universe.mp3 -------------------------------------------------------------------------------- /assets/du-hast-start.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/du-hast-start.mp3 -------------------------------------------------------------------------------- /assets/ewof-sad-8-bits-by-finn-formiga.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/ewof-sad-8-bits-by-finn-formiga.mp3 -------------------------------------------------------------------------------- /assets/explode.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/explode.mp3 -------------------------------------------------------------------------------- /assets/eye-tiger-intro.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/eye-tiger-intro.mp3 -------------------------------------------------------------------------------- /assets/eye-tiger.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/eye-tiger.mp3 -------------------------------------------------------------------------------- /assets/eyeshit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/eyeshit.png -------------------------------------------------------------------------------- /assets/fail-trombone.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/fail-trombone.mp3 -------------------------------------------------------------------------------- /assets/finish.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/finish.mp3 -------------------------------------------------------------------------------- /assets/fish.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/fish.mp3 -------------------------------------------------------------------------------- /assets/fish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/fish.png -------------------------------------------------------------------------------- /assets/fishes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/fishes.png -------------------------------------------------------------------------------- /assets/folder.min.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/folder.png -------------------------------------------------------------------------------- /assets/folder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 38 | 40 | 41 | 43 | image/svg+xml 44 | 46 | 47 | 48 | 49 | 50 | 55 | 60 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /assets/french-fries-empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/french-fries-empty.png -------------------------------------------------------------------------------- /assets/french-fries-face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/french-fries-face.png -------------------------------------------------------------------------------- /assets/french-fries-only.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/french-fries-only.png -------------------------------------------------------------------------------- /assets/french-fries.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/french-fries.png -------------------------------------------------------------------------------- /assets/futurama-by-plastiware.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/futurama-by-plastiware.mp3 -------------------------------------------------------------------------------- /assets/futurama-by-plastiware.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/futurama-by-plastiware.ogg -------------------------------------------------------------------------------- /assets/god-eye.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/god-eye.png -------------------------------------------------------------------------------- /assets/guitar-pixel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/guitar-pixel.png -------------------------------------------------------------------------------- /assets/happier-times-by-paperlaur.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/happier-times-by-paperlaur.mp3 -------------------------------------------------------------------------------- /assets/happy-face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/happy-face.png -------------------------------------------------------------------------------- /assets/heart-mouse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/heart-mouse.png -------------------------------------------------------------------------------- /assets/hooked.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/hooked.mp3 -------------------------------------------------------------------------------- /assets/hylian-lemon-by-willrock-and-damonz.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/hylian-lemon-by-willrock-and-damonz.mp3 -------------------------------------------------------------------------------- /assets/imperial-8bit-by-crig.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/imperial-8bit-by-crig.mp3 -------------------------------------------------------------------------------- /assets/leopard-pattern.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/leopard-pattern.jpg -------------------------------------------------------------------------------- /assets/link-past-by-willrock-and-damonz.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/link-past-by-willrock-and-damonz.mp3 -------------------------------------------------------------------------------- /assets/man.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/man.png -------------------------------------------------------------------------------- /assets/maniac-mansion-by-kenneth-moller.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/maniac-mansion-by-kenneth-moller.mp3 -------------------------------------------------------------------------------- /assets/maniac-mansion-by-kenneth-moller.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/maniac-mansion-by-kenneth-moller.ogg -------------------------------------------------------------------------------- /assets/motor.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/motor.mp3 -------------------------------------------------------------------------------- /assets/mouse-sprites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/mouse-sprites.png -------------------------------------------------------------------------------- /assets/naru-by-mike-skitch.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/naru-by-mike-skitch.mp3 -------------------------------------------------------------------------------- /assets/ocean-side-by-jjayberthume.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/ocean-side-by-jjayberthume.mp3 -------------------------------------------------------------------------------- /assets/open-chest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/open-chest.png -------------------------------------------------------------------------------- /assets/pixel-cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/pixel-cloud.png -------------------------------------------------------------------------------- /assets/planet-express.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/planet-express.png -------------------------------------------------------------------------------- /assets/playing-power-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/playing-power-2.mp3 -------------------------------------------------------------------------------- /assets/playing-power.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/playing-power.mp3 -------------------------------------------------------------------------------- /assets/podium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/podium.png -------------------------------------------------------------------------------- /assets/polarity-by-kubbi.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/polarity-by-kubbi.mp3 -------------------------------------------------------------------------------- /assets/polarity-by-kubbi.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/polarity-by-kubbi.ogg -------------------------------------------------------------------------------- /assets/polka-by-rainbowdragoneyes.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/polka-by-rainbowdragoneyes.mp3 -------------------------------------------------------------------------------- /assets/polka-by-rainbowdragoneyes.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/polka-by-rainbowdragoneyes.ogg -------------------------------------------------------------------------------- /assets/portal2-cara-mia.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/portal2-cara-mia.mp3 -------------------------------------------------------------------------------- /assets/portal2-cara-mia.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/portal2-cara-mia.ogg -------------------------------------------------------------------------------- /assets/power-up-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/power-up-1.mp3 -------------------------------------------------------------------------------- /assets/power-up-1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/power-up-1.ogg -------------------------------------------------------------------------------- /assets/power-up-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/power-up-2.mp3 -------------------------------------------------------------------------------- /assets/power-up-2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/power-up-2.ogg -------------------------------------------------------------------------------- /assets/power-up-3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/power-up-3.mp3 -------------------------------------------------------------------------------- /assets/power-up-3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/power-up-3.ogg -------------------------------------------------------------------------------- /assets/press-start.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/press-start.mp3 -------------------------------------------------------------------------------- /assets/profile-80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/profile-80.png -------------------------------------------------------------------------------- /assets/ring-boxing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/ring-boxing.png -------------------------------------------------------------------------------- /assets/rock-hands.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/rock-hands.png -------------------------------------------------------------------------------- /assets/rocket-fire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/rocket-fire.png -------------------------------------------------------------------------------- /assets/rocket-no-fire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/rocket-no-fire.png -------------------------------------------------------------------------------- /assets/rocket-raccoon-true.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/rocket-raccoon-true.png -------------------------------------------------------------------------------- /assets/rocket-raccoon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/rocket-raccoon.png -------------------------------------------------------------------------------- /assets/rockguy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/rockguy.png -------------------------------------------------------------------------------- /assets/screens.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/screens.png -------------------------------------------------------------------------------- /assets/segment7.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/segment7.ttf -------------------------------------------------------------------------------- /assets/segment7.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/segment7.woff -------------------------------------------------------------------------------- /assets/segment7.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/segment7.woff2 -------------------------------------------------------------------------------- /assets/shooting-stars-by-janderson-barboza.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/shooting-stars-by-janderson-barboza.mp3 -------------------------------------------------------------------------------- /assets/skogens-djur-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/skogens-djur-1.mp3 -------------------------------------------------------------------------------- /assets/skogens-djur-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/skogens-djur-2.mp3 -------------------------------------------------------------------------------- /assets/snail-pixel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/snail-pixel.png -------------------------------------------------------------------------------- /assets/space-odyseey-by-dj-otaking-333.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/space-odyseey-by-dj-otaking-333.mp3 -------------------------------------------------------------------------------- /assets/spookcat.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/spookcat.mp3 -------------------------------------------------------------------------------- /assets/starjhol.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/starjhol.ttf -------------------------------------------------------------------------------- /assets/starjhol.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/starjhol.woff -------------------------------------------------------------------------------- /assets/starjhol.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/starjhol.woff2 -------------------------------------------------------------------------------- /assets/start-motor.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/start-motor.mp3 -------------------------------------------------------------------------------- /assets/still-alive-8-bits-by-michaelaker.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/still-alive-8-bits-by-michaelaker.mp3 -------------------------------------------------------------------------------- /assets/sunglasses.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/sunglasses.png -------------------------------------------------------------------------------- /assets/sword.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/sword.png -------------------------------------------------------------------------------- /assets/tape-play.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/tape-play.mp3 -------------------------------------------------------------------------------- /assets/tetris-a.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/tetris-a.mp3 -------------------------------------------------------------------------------- /assets/tron-by-mcklain.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/tron-by-mcklain.mp3 -------------------------------------------------------------------------------- /assets/tron.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/tron.ttf -------------------------------------------------------------------------------- /assets/tron.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/tron.woff -------------------------------------------------------------------------------- /assets/weather-girl-by-radix.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/weather-girl-by-radix.mp3 -------------------------------------------------------------------------------- /assets/weather-girl-by-radix.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/weather-girl-by-radix.ogg -------------------------------------------------------------------------------- /assets/weather-girl.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/weather-girl.mp3 -------------------------------------------------------------------------------- /assets/weather-girl.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/weather-girl.ogg -------------------------------------------------------------------------------- /assets/wheatfield.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/wheatfield.jpg -------------------------------------------------------------------------------- /assets/wheatfield.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/wheatfield.mp4 -------------------------------------------------------------------------------- /assets/wings.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/wings.mp3 -------------------------------------------------------------------------------- /assets/winning.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/winning.mp3 -------------------------------------------------------------------------------- /assets/wonderful.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/wonderful.mp3 -------------------------------------------------------------------------------- /assets/wonderful.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/wonderful.ogg -------------------------------------------------------------------------------- /assets/world-map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/world-map.png -------------------------------------------------------------------------------- /assets/zebra.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/assets/zebra.png -------------------------------------------------------------------------------- /codevember-logo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/codevember-logo.gif -------------------------------------------------------------------------------- /day-1/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/KypYmz. 2 | 3 | Day 1: Galaxy 4 | 5 | HTML5 6 | CSS3 (Google Fonts) 7 | Javascript (Canvas) 8 | Pixel art: Piskel 9 | --- 10 | Credits: Crig (Imperial March 8 bits) -------------------------------------------------------------------------------- /day-1/babel/index.babel: -------------------------------------------------------------------------------- 1 | // Init 2 | let canvas = document.querySelector('#galaxy'); 3 | let ctx = canvas.getContext('2d'); 4 | canvas.width = innerWidth; 5 | canvas.height = innerHeight; 6 | 7 | let deathstar = { 8 | image: new Image(), 9 | laser: 0, 10 | x: innerWidth + 100, 11 | y: (innerHeight / 2) - 150, 12 | update: function() { 13 | this.x = this.x - 1; 14 | this.laser--; 15 | }, 16 | draw: function() { 17 | if (this.laser > 0) { 18 | ctx.save(); 19 | ctx.beginPath(); 20 | ctx.lineWidth = 5; 21 | ctx.strokeStyle = '#FFF' 22 | ctx.shadowColor='#00960a'; 23 | ctx.shadowOffsetX=0; 24 | ctx.shadowOffsetY=0; 25 | ctx.shadowBlur=20; 26 | ctx.moveTo(deathstar.x + 85, deathstar.y + 75); 27 | ctx.lineTo(0, deathstar.y + 75); 28 | ctx.stroke(); 29 | ctx.restore(); 30 | } 31 | } 32 | } 33 | deathstar.image.src = 'https://manzdev.github.io/codevember2017/assets/death-star-256x256.png'; 34 | 35 | // Fix resize canvas 36 | window.onresize = function() { 37 | canvas.width = innerWidth; 38 | canvas.height = innerHeight; 39 | } 40 | 41 | function clearScreen() { 42 | ctx.fillStyle = '#000'; 43 | ctx.fillRect(0, 0, canvas.width, canvas.height); 44 | } 45 | 46 | let stars = [] 47 | for (let i=0; i < 500; i++) { 48 | // star(x, y, speed) 49 | stars.push({ 50 | x: ~~(Math.random() * canvas.width), 51 | y: ~~(Math.random() * canvas.height), 52 | speed: ~~(1 + Math.random() * 5), 53 | color: ~~(Math.random() * 3), 54 | }); 55 | } 56 | 57 | // Main loop 58 | function loop() { 59 | requestAnimationFrame(loop, canvas); 60 | update(); 61 | render(); 62 | } 63 | 64 | // Update 65 | function update() { 66 | 67 | // Stars 68 | for (let i=0; i < 500; i++) { 69 | stars[i].x -= stars[i].speed; 70 | if (stars[i].x < 0) 71 | stars[i].x = canvas.width; 72 | } 73 | 74 | deathstar.update(); 75 | 76 | } 77 | 78 | // Render 79 | function render() { 80 | 81 | clearScreen(); 82 | for (let i=0; i < 500; i++) { 83 | var s = stars[i]; 84 | ctx.lineWidth = 1; 85 | ctx.strokeStyle = ['#444', '#888', '#FFF'][stars[i].color]; 86 | ctx.strokeRect(s.x, s.y, 1, 1); 87 | } 88 | 89 | if (~~(Math.random() * 250) == 1) 90 | deathstar.laser = 15 + ~~(Math.random() * 25); 91 | 92 | // DeathStar 93 | ctx.drawImage(deathstar.image, deathstar.x, deathstar.y); 94 | // laser 95 | deathstar.draw(); 96 | } 97 | 98 | loop(); 99 | let music = new Audio('https://manzdev.github.io/codevember2017/assets/imperial-8bit-by-crig.mp3'); 100 | music.play(); 101 | -------------------------------------------------------------------------------- /day-1/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600'); 2 | 3 | html, body { 4 | background:#080808; 5 | } 6 | 7 | .data { 8 | position:relative; 9 | z-index:1; 10 | text-align:center; 11 | } 12 | 13 | h1, h2, .ghost { 14 | font-family:Montserrat; 15 | font-weight:600; 16 | margin:0; 17 | } 18 | 19 | h1 { 20 | font-size:64px; 21 | color:#444; 22 | } 23 | 24 | h2 { 25 | font-size:24px; 26 | color:#888; 27 | } 28 | 29 | .ghost { 30 | font-weight:400; 31 | font-size:15px; 32 | color:#CCC; 33 | display:inline-block; 34 | margin:8px 2px; 35 | padding:8px; 36 | border:1px solid #CCC; 37 | text-decoration:none; 38 | } 39 | 40 | a.ghost:hover { 41 | -webkit-transition:all 1s linear; 42 | transition:all 1s linear; 43 | background:rgba(50,50,50, .25); 44 | border-color:#bc0000; 45 | color:#bc0000; 46 | } 47 | 48 | a { 49 | color:#0ed7f2; 50 | } 51 | 52 | #galaxy { 53 | position:absolute; 54 | top:0; 55 | left:0; 56 | } -------------------------------------------------------------------------------- /day-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 1: Galaxy 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

Galaxy

18 |

#Codevember

19 | Code by Manz 20 | Music by Crig 21 |
22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /day-1/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Init 4 | var canvas = document.querySelector('#galaxy'); 5 | var ctx = canvas.getContext('2d'); 6 | canvas.width = innerWidth; 7 | canvas.height = innerHeight; 8 | 9 | var deathstar = { 10 | image: new Image(), 11 | laser: 0, 12 | x: innerWidth + 100, 13 | y: innerHeight / 2 - 150, 14 | update: function update() { 15 | this.x = this.x - 1; 16 | this.laser--; 17 | }, 18 | draw: function draw() { 19 | if (this.laser > 0) { 20 | ctx.save(); 21 | ctx.beginPath(); 22 | ctx.lineWidth = 5; 23 | ctx.strokeStyle = '#FFF'; 24 | ctx.shadowColor = '#00960a'; 25 | ctx.shadowOffsetX = 0; 26 | ctx.shadowOffsetY = 0; 27 | ctx.shadowBlur = 20; 28 | ctx.moveTo(deathstar.x + 85, deathstar.y + 75); 29 | ctx.lineTo(0, deathstar.y + 75); 30 | ctx.stroke(); 31 | ctx.restore(); 32 | } 33 | } 34 | }; 35 | deathstar.image.src = 'https://manzdev.github.io/codevember2017/assets/death-star-256x256.png'; 36 | 37 | // Fix resize canvas 38 | window.onresize = function () { 39 | canvas.width = innerWidth; 40 | canvas.height = innerHeight; 41 | }; 42 | 43 | function clearScreen() { 44 | ctx.fillStyle = '#000'; 45 | ctx.fillRect(0, 0, canvas.width, canvas.height); 46 | } 47 | 48 | var stars = []; 49 | for (var i = 0; i < 500; i++) { 50 | // star(x, y, speed) 51 | stars.push({ 52 | x: ~ ~(Math.random() * canvas.width), 53 | y: ~ ~(Math.random() * canvas.height), 54 | speed: ~ ~(1 + Math.random() * 5), 55 | color: ~ ~(Math.random() * 3) 56 | }); 57 | } 58 | 59 | // Main loop 60 | function loop() { 61 | requestAnimationFrame(loop, canvas); 62 | update(); 63 | render(); 64 | } 65 | 66 | // Update 67 | function update() { 68 | 69 | // Stars 70 | for (var i = 0; i < 500; i++) { 71 | stars[i].x -= stars[i].speed; 72 | if (stars[i].x < 0) stars[i].x = canvas.width; 73 | } 74 | 75 | deathstar.update(); 76 | } 77 | 78 | // Render 79 | function render() { 80 | 81 | clearScreen(); 82 | for (var i = 0; i < 500; i++) { 83 | var s = stars[i]; 84 | ctx.lineWidth = 1; 85 | ctx.strokeStyle = ['#444', '#888', '#FFF'][stars[i].color]; 86 | ctx.strokeRect(s.x, s.y, 1, 1); 87 | } 88 | 89 | if (~ ~(Math.random() * 250) == 1) deathstar.laser = 15 + ~ ~(Math.random() * 25); 90 | 91 | // DeathStar 92 | ctx.drawImage(deathstar.image, deathstar.x, deathstar.y); 93 | // laser 94 | deathstar.draw(); 95 | } 96 | 97 | loop(); 98 | var music = new Audio('https://manzdev.github.io/codevember2017/assets/imperial-8bit-by-crig.mp3'); 99 | music.play(); 100 | -------------------------------------------------------------------------------- /day-1/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-10/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/vWgrwp. 2 | 3 | Day 10: Rocket 4 | --- 5 | 6 | HTML5 7 | CSS3 (Google Fonts) 8 | JS (Howler.js, Canvas) 9 | 10 | Credits: We Are Carnival (Hooked on a feeling 8 bits) 11 | -------------------------------------------------------------------------------- /day-10/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600'); 2 | 3 | html, body { 4 | background:#000; 5 | overflow:hidden; 6 | } 7 | 8 | .data { 9 | /* position:relative; 10 | z-index:11; */ 11 | width: 425px; 12 | margin-top: 18px; 13 | text-align:center; 14 | } 15 | 16 | h1, h2, .ghost { 17 | font-family:Montserrat; 18 | font-weight:600; 19 | margin:0; 20 | } 21 | 22 | h1 { 23 | font-size:64px; 24 | color:#444; 25 | } 26 | 27 | h2 { 28 | font-size:24px; 29 | color:#888; 30 | } 31 | 32 | .ghost { 33 | font-weight:400; 34 | font-size:15px; 35 | color:#CCC; 36 | display:inline-block; 37 | margin:8px 2px; 38 | padding:8px; 39 | border:1px solid #CCC; 40 | text-decoration:none; 41 | } 42 | 43 | a.ghost:hover { 44 | -webkit-transition:all .5s linear; 45 | transition:all .5s linear; 46 | background:rgba(50,50,50, .2); 47 | border-color:#f2ea00; 48 | color:#f2ea00; 49 | } 50 | 51 | /* Codevember */ 52 | 53 | #screen { 54 | width:1024px; 55 | margin:auto; 56 | background:#000 no-repeat bottom; 57 | position:absolute; 58 | top:25px; 59 | left:calc((100vw - 1024px) / 2); 60 | border:10px solid #333; 61 | border-radius:25px; 62 | box-shadow:0 0 15px #555; 63 | overflow:hidden; 64 | } 65 | 66 | #rocket { 67 | width:256px; 68 | height:336px; 69 | position:absolute; 70 | } 71 | 72 | #cassette { 73 | width:128px; 74 | height:128px; 75 | background:url(https://manzdev.github.io/codevember2017/assets/cassette.png); 76 | background-size:128px 128px; 77 | position:absolute; 78 | top:0; 79 | right:25px; 80 | opacity:0; 81 | } 82 | 83 | #cassette.on { 84 | opacity:1 85 | } 86 | 87 | #canvas { 88 | width:100%; 89 | height:100%; 90 | position:absolute; 91 | top:0; 92 | left:0; 93 | } 94 | -------------------------------------------------------------------------------- /day-10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 10: Rocket 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 |
19 | 20 |
21 |
22 |

Rocket

23 |

#Codevember

24 | Code by Manz 25 | Music by WeAreCarnival 26 | 27 |
28 |
29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /day-10/js/index.js: -------------------------------------------------------------------------------- 1 | let screen = document.querySelector('#screen'); 2 | let cassette = document.querySelector('#cassette'); 3 | screen.style.height = innerHeight - 75 + 'px'; 4 | 5 | let canvas = document.querySelector('#canvas'); 6 | let ctx = canvas.getContext('2d'); 7 | canvas.width = 1024; 8 | canvas.height = innerHeight - 75; 9 | let idata = ctx.createImageData(canvas.width, canvas.height); 10 | let buffer32 = new Uint32Array(idata.data.buffer); 11 | 12 | let tape = new Howl({ 13 | src: ['https://manzdev.github.io/codevember2017/assets/tape-play.mp3?1'] 14 | }); 15 | 16 | //let cursors = []; 17 | let landed = false; 18 | let tapeView = false; 19 | 20 | let rocket = { 21 | img: document.querySelector('#rocket'), 22 | x: (1024/2 - 128), 23 | y: -250, 24 | speed: 2, 25 | update: function() { 26 | if (this.y < innerHeight - 400) 27 | this.y = this.y + this.speed; 28 | else { 29 | landed = true; 30 | enableGuardians(); 31 | } 32 | }, 33 | render: function() { 34 | this.img.style.top = this.y + 'px'; 35 | this.img.style.left = this.x + 'px'; 36 | } 37 | } 38 | 39 | function update() { 40 | 41 | // rocket 42 | if (!landed) 43 | rocket.update(); 44 | rocket.render(); 45 | 46 | // noise tv 47 | noise(); 48 | 49 | } 50 | 51 | function loop() { 52 | update(); 53 | requestAnimationFrame(loop); 54 | } 55 | 56 | loop(); 57 | 58 | function enableGuardians() { 59 | noise = function() {}; 60 | ctx.clearRect(0, 0, canvas.width, canvas.height); 61 | canvas.remove(); 62 | cassette.classList.add('on'); 63 | tape.play(); 64 | setTimeout(function() { 65 | rocket.img.src = 'https://manzdev.github.io/codevember2017/assets/rocket-raccoon-true.png'; 66 | let music = new Howl({ 67 | src: ['https://manzdev.github.io/codevember2017/assets/hooked.mp3'], 68 | loop: true 69 | }).play(); 70 | }, 2000); 71 | } 72 | 73 | function noise() { 74 | let len = buffer32.length - 1; 75 | while(len--) buffer32[len] = Math.random() < 0.85 ? 0 : -1>>0; 76 | ctx.putImageData(idata, 0, 0); 77 | } 78 | -------------------------------------------------------------------------------- /day-10/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-11/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/NwjPJd. 2 | 3 | Day 11: Bike 4 | --- 5 | 6 | HTML5 7 | CSS3 (Google Fonts, Animations) 8 | Javascript (HowlerJS, Canvas) 9 | 10 | Credits: 11 | - McKlain (The Grid Amstrad, Tron Legacy) 12 | - TRON Font (Paul Albers, Tron Legacy) -------------------------------------------------------------------------------- /day-11/babel/index.babel: -------------------------------------------------------------------------------- 1 | let canvas = document.querySelector('#canvas'); 2 | let ctx = canvas.getContext('2d'); 3 | canvas.width = innerWidth * 2; 4 | canvas.height = innerHeight; 5 | 6 | let music = new Howl({ 7 | src: ['https://manzdev.github.io/codevember2017/assets/tron-by-mcklain.mp3?1'] 8 | }).play(); 9 | 10 | let gridY = { 11 | color: '#18dadd', 12 | x: innerWidth / 2, 13 | y: innerHeight, 14 | sep: 150, 15 | update: function() { 16 | if (this.y > 0) 17 | this.y -= 1; 18 | }, 19 | drawLine: function(x, y) { 20 | // Y 21 | ctx.beginPath(); 22 | ctx.strokeStyle = this.color; 23 | ctx.moveTo(x, y); 24 | ctx.lineTo(x, y-1); 25 | ctx.stroke(); 26 | }, 27 | draw: function() { 28 | // grid lines 29 | for (let x = 0; x < canvas.width; x= x + this.sep) 30 | this.drawLine(x, this.y); 31 | } 32 | } 33 | 34 | let gridX = { 35 | color: '#18dadd', 36 | x: 0, 37 | y: 0, 38 | sep: 75, 39 | update: function() { 40 | if (this.x < canvas.width) 41 | this.x += 2; 42 | }, 43 | drawLine: function(x, y) { 44 | // Y 45 | ctx.beginPath(); 46 | ctx.strokeStyle = this.color; 47 | ctx.moveTo(x, y); 48 | ctx.lineTo(x+2, y); 49 | ctx.stroke(); 50 | }, 51 | draw: function() { 52 | // grid lines 53 | for (let y = 0; y < canvas.height; y= y + this.sep) 54 | this.drawLine(this.x, y); 55 | } 56 | } 57 | 58 | function update() { 59 | gridY.update(); 60 | gridY.draw(); 61 | gridX.update(); 62 | gridX.draw(); 63 | } 64 | 65 | (function loop() { 66 | requestAnimationFrame(loop); 67 | update(); 68 | })(); 69 | -------------------------------------------------------------------------------- /day-11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 11: Bike 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 |

Bike

19 |

#Codevember

20 | Code by Manz 21 | Music by McKlain 22 |
23 | 24 |
25 | 26 | 27 |
28 |
29 |
Press START
30 |
31 | 32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /day-11/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var canvas = document.querySelector('#canvas'); 4 | var ctx = canvas.getContext('2d'); 5 | canvas.width = innerWidth * 2; 6 | canvas.height = innerHeight; 7 | 8 | var music = new Howl({ 9 | src: ['https://manzdev.github.io/codevember2017/assets/tron-by-mcklain.mp3?1'] 10 | }).play(); 11 | 12 | var gridY = { 13 | color: '#18dadd', 14 | x: innerWidth / 2, 15 | y: innerHeight, 16 | sep: 150, 17 | update: function update() { 18 | if (this.y > 0) this.y -= 1; 19 | }, 20 | drawLine: function drawLine(x, y) { 21 | // Y 22 | ctx.beginPath(); 23 | ctx.strokeStyle = this.color; 24 | ctx.moveTo(x, y); 25 | ctx.lineTo(x, y - 1); 26 | ctx.stroke(); 27 | }, 28 | draw: function draw() { 29 | // grid lines 30 | for (var x = 0; x < canvas.width; x = x + this.sep) { 31 | this.drawLine(x, this.y); 32 | } 33 | } 34 | }; 35 | 36 | var gridX = { 37 | color: '#18dadd', 38 | x: 0, 39 | y: 0, 40 | sep: 75, 41 | update: function update() { 42 | if (this.x < canvas.width) this.x += 2; 43 | }, 44 | drawLine: function drawLine(x, y) { 45 | // Y 46 | ctx.beginPath(); 47 | ctx.strokeStyle = this.color; 48 | ctx.moveTo(x, y); 49 | ctx.lineTo(x + 2, y); 50 | ctx.stroke(); 51 | }, 52 | draw: function draw() { 53 | // grid lines 54 | for (var y = 0; y < canvas.height; y = y + this.sep) { 55 | this.drawLine(this.x, y); 56 | } 57 | } 58 | }; 59 | 60 | function update() { 61 | gridY.update(); 62 | gridY.draw(); 63 | gridX.update(); 64 | gridX.draw(); 65 | } 66 | 67 | (function loop() { 68 | requestAnimationFrame(loop); 69 | update(); 70 | })(); 71 | -------------------------------------------------------------------------------- /day-11/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-12/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/LOyrMp. 2 | 3 | Day 12: Zebra 4 | --- 5 | 6 | HTML5 7 | CSS3 (Google Fonts) 8 | JS (HowlerJS) 9 | 10 | Credits: PaperLaur - Happier Times -------------------------------------------------------------------------------- /day-12/babel/index.babel: -------------------------------------------------------------------------------- 1 | let zebra = document.querySelectorAll('.zebra.b'); 2 | let total = zebra.length; 3 | 4 | let music = new Howl({ 5 | src: ['https://manzdev.github.io/codevember2017/assets/happier-times-by-paperlaur.mp3'], 6 | loop: true 7 | }).play(); 8 | 9 | function update() { 10 | 11 | if (~~(Math.random() * 2) == 0) { 12 | let i = ~~(Math.random() * total); 13 | zebra[i].classList.add('press'); 14 | setTimeout(function() { 15 | zebra[this].classList.remove('press'); 16 | }.bind(i), ~~(Math.random() * 3) * 1000); 17 | } 18 | 19 | } 20 | 21 | (function loop() { 22 | requestAnimationFrame(loop); 23 | update(); 24 | })(); 25 | -------------------------------------------------------------------------------- /day-12/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600'); 2 | 3 | html { 4 | background:#000; 5 | overflow:hidden; 6 | } 7 | 8 | .data { 9 | position:relative; 10 | z-index:1; 11 | text-align:center; 12 | } 13 | 14 | h1, h2, .ghost { 15 | font-family:Montserrat; 16 | font-weight:600; 17 | margin:0; 18 | } 19 | 20 | h1 { 21 | font-size:64px; 22 | color:#444; 23 | } 24 | 25 | h2 { 26 | font-size:24px; 27 | color:#888; 28 | } 29 | 30 | .ghost { 31 | font-weight:400; 32 | font-size:15px; 33 | color:#CCC; 34 | display:inline-block; 35 | margin:8px 2px; 36 | padding:8px; 37 | border:1px solid #CCC; 38 | text-decoration:none; 39 | } 40 | 41 | a.ghost:hover { 42 | -webkit-transition:all .5s linear; 43 | transition:all .5s linear; 44 | background:rgba(50,50,50, .2); 45 | border-color:#f2ea00; 46 | color:#f2ea00; 47 | } 48 | 49 | #screen { 50 | position:absolute; 51 | top:0; 52 | left:0; 53 | width:100vw; 54 | height:100vh; 55 | } 56 | 57 | /*******/ 58 | 59 | .paso { 60 | width:1024px; 61 | margin:auto; 62 | display:-webkit-box; 63 | display:-ms-flexbox; 64 | display:flex; 65 | -webkit-perspective:700px; 66 | perspective:700px; 67 | } 68 | 69 | .paso .zebra { 70 | width:50px; 71 | height:300px; 72 | -webkit-transform:translateY(235px) rotateX(80deg); 73 | transform:translateY(235px) rotateX(80deg); 74 | -webkit-transition:background .1s ease, 75 | -webkit-transform 0 linear; 76 | transition:background .1s ease, 77 | -webkit-transform 0 linear; 78 | transition:transform 0 linear, 79 | background .1s ease; 80 | transition:transform 0 linear, 81 | background .1s ease, 82 | -webkit-transform 0 linear; 83 | } 84 | 85 | .paso .zebra.b { 86 | background:#FFF; 87 | } 88 | 89 | .paso .zebra.n { 90 | background:transparent; 91 | } 92 | 93 | .paso .zebra.press { 94 | background:#333; 95 | -webkit-transform:translateY(240px) rotateX(80deg); 96 | transform:translateY(240px) rotateX(80deg); 97 | } 98 | 99 | #zebra { 100 | position:absolute; 101 | top:20px; 102 | left:calc(50vw - 135px); 103 | width:288px; 104 | height:288px; 105 | margin:7em auto; 106 | z-index:1; 107 | pointer-events:none; 108 | background:url(https://manzdev.github.io/codevember2017/assets/zebra.png); 109 | -webkit-animation:eyes 4s steps(2) infinite; 110 | animation:eyes 4s steps(2) infinite; 111 | } 112 | 113 | @-webkit-keyframes eyes { 114 | 0%, 90% { background-position:0 0 } 115 | 100% { background-position:-576px 0 } 116 | } 117 | 118 | @keyframes eyes { 119 | 0%, 90% { background-position:0 0 } 120 | 100% { background-position:-576px 0 } 121 | } 122 | -------------------------------------------------------------------------------- /day-12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 12 - Zebra 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

Zebra

18 |

#Codevember

19 | Code by Manz 20 | Music by PaperLaur 21 |
22 | 23 |
24 | 25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | 55 |
56 | 57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /day-12/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var zebra = document.querySelectorAll('.zebra.b'); 4 | var total = zebra.length; 5 | 6 | var music = new Howl({ 7 | src: ['https://manzdev.github.io/codevember2017/assets/happier-times-by-paperlaur.mp3'], 8 | loop: true 9 | }).play(); 10 | 11 | function update() { 12 | 13 | if (~ ~(Math.random() * 2) == 0) { 14 | var i = ~ ~(Math.random() * total); 15 | zebra[i].classList.add('press'); 16 | setTimeout(function () { 17 | zebra[this].classList.remove('press'); 18 | }.bind(i), ~ ~(Math.random() * 3) * 1000); 19 | } 20 | } 21 | 22 | (function loop() { 23 | requestAnimationFrame(loop); 24 | update(); 25 | })(); 26 | -------------------------------------------------------------------------------- /day-12/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-13/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/jawyyQ. 2 | 3 | Day 13: Orange 4 | --- 5 | 6 | HTML5 (SVG) 7 | CSS3 (Google Fonts, Animation CSS, Blend Modes) 8 | No JS! 9 | 10 | Credits: Mike Skitch - Naru, Embracing the pulse remix 11 | -------------------------------------------------------------------------------- /day-13/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600'); 2 | 3 | html { 4 | background:#000; 5 | overflow:hidden; 6 | } 7 | 8 | .data { 9 | position:relative; 10 | z-index:10; 11 | text-align:center; 12 | } 13 | 14 | h1, h2, .ghost { 15 | font-family:Montserrat; 16 | font-weight:600; 17 | margin:0; 18 | } 19 | 20 | h1 { 21 | font-size:64px; 22 | color:#FFF; 23 | letter-spacing:-2px; 24 | } 25 | 26 | h2 { 27 | font-size:24px; 28 | color: #000; 29 | text-shadow: 0 0 5px #282828; 30 | } 31 | 32 | .ghost { 33 | font-weight:400; 34 | font-size:15px; 35 | color:#CCC; 36 | display:inline-block; 37 | margin:8px 2px; 38 | padding:8px; 39 | border:1px solid #CCC; 40 | text-decoration:none; 41 | background: RGBA(0,0,0, .5); 42 | } 43 | 44 | a.ghost:hover { 45 | -webkit-transition:all .5s linear; 46 | transition:all .5s linear; 47 | background:RGBA(0,0,0, .85); 48 | border-color:#ee4d00; 49 | color:#ee4d00; 50 | } 51 | 52 | #screen { 53 | position:absolute; 54 | top:0; 55 | left:0; 56 | width:100vw; 57 | height:100vh; 58 | } 59 | 60 | .orange { 61 | display:block; 62 | width:329px; 63 | height:329px; 64 | -webkit-filter: drop-shadow(0 0 5px orange); 65 | filter: drop-shadow(0 0 5px orange); 66 | -webkit-animation:spin 2.5s linear infinite, 67 | move 5s linear infinite alternate; 68 | animation:spin 2.5s linear infinite, 69 | move 5s linear infinite alternate; 70 | 71 | position:absolute; 72 | bottom:100px; 73 | left:calc(50% - 165px); 74 | mix-blend-mode:darken; 75 | } 76 | 77 | .piece { 78 | fill:#ee7c00; 79 | } 80 | 81 | @-webkit-keyframes spin { 82 | 0% { -webkit-transform:rotate(0); transform:rotate(0) } 83 | 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg) } 84 | } 85 | 86 | @keyframes spin { 87 | 0% { -webkit-transform:rotate(0); transform:rotate(0) } 88 | 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg) } 89 | } 90 | 91 | @-webkit-keyframes move { 92 | 0% { left:calc(50% - 165px + 250px) } 93 | 100% { left:calc(50% - -165px - 550px) } 94 | } 95 | 96 | @keyframes move { 97 | 0% { left:calc(50% - 165px + 250px) } 98 | 100% { left:calc(50% - -165px - 550px) } 99 | } 100 | 101 | .orange.outside { 102 | z-index:5; 103 | border-radius:50%; 104 | background:-webkit-radial-gradient(orange, #ee5200); 105 | background:radial-gradient(orange, #ee5200); 106 | -webkit-animation:spin 2.5s linear infinite, 107 | move 5s linear infinite alternate-reverse; 108 | animation:spin 2.5s linear infinite, 109 | move 5s linear infinite alternate-reverse; 110 | } 111 | 112 | .crowd { 113 | width:100%; 114 | height:100%; 115 | background:url(https://manzdev.github.io/codevember2017/assets/concert.jpg) no-repeat bottom; 116 | background-size:1500px 950px; 117 | box-shadow: 250px 0 30px #000 inset, -250px 0 30px #000 inset; 118 | -webkit-animation:appears 6s ease-in-out 1 6s forwards; 119 | animation:appears 6s ease-in-out 1 6s forwards; 120 | opacity:0; 121 | position:absolute; 122 | z-index:-1; 123 | } 124 | 125 | @-webkit-keyframes appears { 126 | 0% { opacity:0 } 127 | 100% { opacity:1 } 128 | } 129 | 130 | @keyframes appears { 131 | 0% { opacity:0 } 132 | 100% { opacity:1 } 133 | } 134 | -------------------------------------------------------------------------------- /day-13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 13 - Orange 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

Orange

18 |

#Codevember

19 | Code by Manz 20 | Music by Mike Skitch 21 |
22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |
33 |
34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /day-13/js/index.js: -------------------------------------------------------------------------------- 1 | /* Look mom, without JS! */ -------------------------------------------------------------------------------- /day-13/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-14/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/jawjgo. 2 | 3 | Day 14: Cheese 4 | --- 5 | 6 | HTML5 (SVG) 7 | CSS3 (Google Fonts, Animation) 8 | JS 9 | 10 | Credits: DJ Otaking 333 (2001 Odissey in Space) -------------------------------------------------------------------------------- /day-14/babel/index.babel: -------------------------------------------------------------------------------- 1 | let ground = document.querySelector('.ground'); 2 | 3 | Array.prototype.shuffle = function () { 4 | for (let i = this.length - 1; i > 0; i--) { 5 | let j = Math.floor(Math.random() * (i + 1)); 6 | [this[i], this[j]] = [this[j], this[i]]; 7 | } 8 | return this; 9 | } 10 | 11 | let paridad = [0, 0, 0, 1, 1].shuffle(); 12 | //console.log(paridad); 13 | 14 | class Mouse { 15 | constructor(id) { 16 | this.mouse = document.createElement('div'); 17 | 18 | //if (~~(Math.random() * 2) == 0) { 19 | if (id == 0) { 20 | this.mouse.className = 'mouse'; 21 | this.mouse.style.left = ~~(Math.random() * 200) + 'px'; 22 | } else { 23 | this.mouse.className = 'mouse mirror'; 24 | this.mouse.style.transform = 'scale(-1,1) translateX(' + ~~(Math.random() * 200) + 'px)'; 25 | this.mouse.style.left = -1024 + ~~(Math.random() * 200) + 'px'; 26 | } 27 | this.zindex = 5 + ~~(Math.random() * 50); 28 | this.mouse.style.zIndex = this.zindex; 29 | this.mouse.style.top = (295 + this.zindex) + 'px'; 30 | ground.insertAdjacentElement('beforebegin', this.mouse); 31 | } 32 | 33 | update() { 34 | 35 | if (~~(Math.random() * 250) == 0) 36 | click(); 37 | 38 | } 39 | } 40 | 41 | let mouses = [] 42 | 43 | function click() { 44 | console.log('click'); 45 | let i = ~~(Math.random() * mouses.length); 46 | mouses[i].mouse.classList.add('click'); 47 | setTimeout(function() { 48 | mouses[this].mouse.classList.remove('click'); 49 | }.bind(i), 250 + ~~(Math.random() * 500)); 50 | } 51 | 52 | let update = function() { 53 | 54 | // Add mouse 55 | if (~~(Math.random() * 450) == 0) { 56 | if (mouses.length < 5) { 57 | mouses.push(new Mouse(paridad.pop())); 58 | } 59 | } 60 | 61 | for (let i = 0; i < mouses.length; i++) 62 | mouses[i].update(); 63 | 64 | } 65 | 66 | function loop() { 67 | requestAnimationFrame(loop); 68 | update(); 69 | } 70 | 71 | function fadeToBlack() { 72 | let fade = document.createElement('div'); 73 | fade.className = 'fade'; 74 | document.body.appendChild(fade); 75 | let p = 100; 76 | 77 | update = function() { 78 | if (p>0) { 79 | if (p>20) 80 | p = p - 1; 81 | else if (p>15) 82 | p = p - .05 83 | else 84 | p = p - .5 85 | fade.style.background = 'radial-gradient(circle at center, transparent '+p+'%, #000 '+p+'%)'; 86 | } 87 | } 88 | } 89 | 90 | //loop(); 91 | setTimeout(loop, 15000); 92 | setTimeout(fadeToBlack, 66000); -------------------------------------------------------------------------------- /day-14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 14 - Cheese 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

Cheese

18 |

#Codevember

19 | Code by Manz 20 | Music by DJ Otaking 333 21 |
22 | 23 |
24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 |
38 | 39 |
40 |
41 | 42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /day-14/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 4 | 5 | var ground = document.querySelector('.ground'); 6 | 7 | Array.prototype.shuffle = function () { 8 | for (var i = this.length - 1; i > 0; i--) { 9 | var j = Math.floor(Math.random() * (i + 1)); 10 | var _ref = [this[j], this[i]]; 11 | this[i] = _ref[0]; 12 | this[j] = _ref[1]; 13 | } 14 | return this; 15 | }; 16 | 17 | var paridad = [0, 0, 0, 1, 1].shuffle(); 18 | //console.log(paridad); 19 | 20 | var Mouse = function () { 21 | function Mouse(id) { 22 | _classCallCheck(this, Mouse); 23 | 24 | this.mouse = document.createElement('div'); 25 | 26 | //if (~~(Math.random() * 2) == 0) { 27 | if (id == 0) { 28 | this.mouse.className = 'mouse'; 29 | this.mouse.style.left = ~ ~(Math.random() * 200) + 'px'; 30 | } else { 31 | this.mouse.className = 'mouse mirror'; 32 | this.mouse.style.transform = 'scale(-1,1) translateX(' + ~ ~(Math.random() * 200) + 'px)'; 33 | this.mouse.style.left = -1024 + ~ ~(Math.random() * 200) + 'px'; 34 | } 35 | this.zindex = 5 + ~ ~(Math.random() * 50); 36 | this.mouse.style.zIndex = this.zindex; 37 | this.mouse.style.top = 295 + this.zindex + 'px'; 38 | ground.insertAdjacentElement('beforebegin', this.mouse); 39 | } 40 | 41 | Mouse.prototype.update = function update() { 42 | 43 | if (~ ~(Math.random() * 250) == 0) click(); 44 | }; 45 | 46 | return Mouse; 47 | }(); 48 | 49 | var mouses = []; 50 | 51 | function click() { 52 | console.log('click'); 53 | var i = ~ ~(Math.random() * mouses.length); 54 | mouses[i].mouse.classList.add('click'); 55 | setTimeout(function () { 56 | mouses[this].mouse.classList.remove('click'); 57 | }.bind(i), 250 + ~ ~(Math.random() * 500)); 58 | } 59 | 60 | var update = function update() { 61 | 62 | // Add mouse 63 | if (~ ~(Math.random() * 450) == 0) { 64 | if (mouses.length < 5) { 65 | mouses.push(new Mouse(paridad.pop())); 66 | } 67 | } 68 | 69 | for (var i = 0; i < mouses.length; i++) { 70 | mouses[i].update(); 71 | } 72 | }; 73 | 74 | function loop() { 75 | requestAnimationFrame(loop); 76 | update(); 77 | } 78 | 79 | function fadeToBlack() { 80 | var fade = document.createElement('div'); 81 | fade.className = 'fade'; 82 | document.body.appendChild(fade); 83 | var p = 100; 84 | 85 | update = function update() { 86 | if (p > 0) { 87 | if (p > 20) p = p - 1;else if (p > 15) p = p - .05;else p = p - .5; 88 | fade.style.background = 'radial-gradient(circle at center, transparent ' + p + '%, #000 ' + p + '%)'; 89 | } 90 | }; 91 | } 92 | 93 | //loop(); 94 | setTimeout(loop, 15000); 95 | setTimeout(fadeToBlack, 66000); -------------------------------------------------------------------------------- /day-14/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-15/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/LOzVrM. 2 | 3 | Day 15: Rock 4 | --- 5 | 6 | HTML5 (SVG) 7 | CSS3 (Google Fonts, Animation CSS3) 8 | JS (Howler.js) 9 | 10 | Credits: 8 Bit Universe (Du Hast 8 bits) -------------------------------------------------------------------------------- /day-15/babel/index.babel: -------------------------------------------------------------------------------- 1 | let speakers = document.querySelectorAll('.speaker'); 2 | let rockguy = document.querySelector('.rockguy'); 3 | let data = document.querySelector('.data'); 4 | 5 | let music = new Howl({ 6 | src: ['https://manzdev.github.io/codevember2017/assets/du-hast-by-8-bit-universe.mp3'], 7 | onplay: function() { 8 | speakers.forEach(function(e) { 9 | e.classList.add('anim'); 10 | data.classList.add('anim'); 11 | rockguy.classList.add('head'); 12 | setTimeout(function() { 13 | e.classList.remove(this); 14 | rockguy.classList.remove('head'); 15 | rockguy.classList.add('anim'); 16 | data.classList.remove('anim'); 17 | }.bind('anim'), 13000); 18 | setTimeout(function() { 19 | e.classList.add(this); 20 | data.classList.add('anim'); 21 | rockguy.classList.add('head'); 22 | }.bind('anim'), 29000); 23 | setTimeout(function() { 24 | e.classList.remove(this); 25 | rockguy.classList.remove('anim'); 26 | data.classList.remove('anim'); 27 | rockguy.classList.remove('head'); 28 | }.bind('anim'), 44000); 29 | }); 30 | }, 31 | loop: true 32 | }); 33 | 34 | let start = new Howl({ 35 | src: ['https://manzdev.github.io/codevember2017/assets/du-hast-start.mp3'], 36 | onend: function() { 37 | music.play(); 38 | } 39 | }).play() 40 | -------------------------------------------------------------------------------- /day-15/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var speakers = document.querySelectorAll('.speaker'); 4 | var rockguy = document.querySelector('.rockguy'); 5 | var data = document.querySelector('.data'); 6 | 7 | var music = new Howl({ 8 | src: ['https://manzdev.github.io/codevember2017/assets/du-hast-by-8-bit-universe.mp3'], 9 | onplay: function onplay() { 10 | speakers.forEach(function (e) { 11 | e.classList.add('anim'); 12 | data.classList.add('anim'); 13 | rockguy.classList.add('head'); 14 | setTimeout(function () { 15 | e.classList.remove(this); 16 | rockguy.classList.remove('head'); 17 | rockguy.classList.add('anim'); 18 | data.classList.remove('anim'); 19 | }.bind('anim'), 13000); 20 | setTimeout(function () { 21 | e.classList.add(this); 22 | data.classList.add('anim'); 23 | rockguy.classList.add('head'); 24 | }.bind('anim'), 29000); 25 | setTimeout(function () { 26 | e.classList.remove(this); 27 | rockguy.classList.remove('anim'); 28 | data.classList.remove('anim'); 29 | rockguy.classList.remove('head'); 30 | }.bind('anim'), 44000); 31 | }); 32 | }, 33 | loop: true 34 | }); 35 | 36 | var start = new Howl({ 37 | src: ['https://manzdev.github.io/codevember2017/assets/du-hast-start.mp3'], 38 | onend: function onend() { 39 | music.play(); 40 | } 41 | }).play(); 42 | -------------------------------------------------------------------------------- /day-15/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-16/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/JOOYNV. 2 | 3 | Day 16: Internet 4 | --- 5 | 6 | HTML5 7 | CSS3 (Google Fonts, Animation) 8 | JS 9 | 10 | Credits: FantomenK -------------------------------------------------------------------------------- /day-16/babel/index.babel: -------------------------------------------------------------------------------- 1 | let internet = document.querySelector('#internet'); 2 | let switchon = document.querySelector('#switchon'); 3 | let earth = document.querySelector('.earth'); 4 | let bits = document.querySelectorAll('.bit'); 5 | let text = document.querySelector('.text'); 6 | let pcs = document.querySelectorAll('.pc'); 7 | let go = false; 8 | let number = ''; 9 | let id = -1; 10 | let times = 0; 11 | let chain = ''; 12 | let web = [{class: 'yt', word: 'yout'}, 13 | {class: 'cp', word: 'code'}, 14 | {class: 'tw', word: 'twit'}, 15 | {class: 'fb', word: 'face'}]; 16 | 17 | let music2 = new Howl({ 18 | src: ['https://manzdev.github.io/codevember2017/assets/dischipo-2.mp3'], 19 | loop: true 20 | }); 21 | 22 | let music = new Howl({ 23 | src: ['https://manzdev.github.io/codevember2017/assets/dischipo.mp3'], 24 | onend: function() { 25 | if (!go) 26 | this.play(); 27 | else 28 | music2.play(); 29 | } 30 | }); 31 | 32 | function changeBits() { 33 | if ((times %2) == 0) { 34 | number = 0 + (64 + ~~(Math.random() * 58)).toString(2); 35 | for (let i = 0; i < 4; i++) 36 | bits[i].dataset.bit = number[i]; 37 | } else { 38 | for (let i = 0; i < 4; i++) 39 | bits[i].dataset.bit = number[i+4]; 40 | } 41 | 42 | times++; 43 | 44 | if (times == 10) { 45 | go = true; 46 | clearInterval(id); 47 | internet.classList.remove('anim'); 48 | pcs.forEach(function(e) { 49 | e.classList.add('jump'); 50 | }); 51 | pcs[0].querySelector('.screen').classList.add(web[~~(Math.random() * 4)].class); 52 | } 53 | 54 | console.log(times); 55 | if ((times > 1) && ((times %2) != 0)) { 56 | console.log('Bits: ', chain); 57 | let word = String.fromCharCode(parseInt(chain, 2)); 58 | text.textContent += word; 59 | chain = ''; 60 | } 61 | chain = chain + bits[0].dataset.bit + bits[1].dataset.bit + 62 | bits[2].dataset.bit + bits[3].dataset.bit; 63 | } 64 | 65 | // Init 66 | switchon.onclick = function() { 67 | id = setInterval(changeBits, 5000); 68 | changeBits(); 69 | music.play(); 70 | internet.classList.add('anim'); 71 | earth.classList.add('spin'); 72 | this.disable = true; 73 | this.onclick = function() { 74 | return false; 75 | }; 76 | } 77 | -------------------------------------------------------------------------------- /day-16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 16 - Internet 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | Switch on: 19 |
20 | 21 |
22 |

Internet

23 |

#Codevember

24 | Code by Manz 25 | Music by FantomenK 26 |
27 | 28 |
29 | 30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | 41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | 49 |
50 | 51 |
52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /day-16/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var internet = document.querySelector('#internet'); 4 | var switchon = document.querySelector('#switchon'); 5 | var earth = document.querySelector('.earth'); 6 | var bits = document.querySelectorAll('.bit'); 7 | var text = document.querySelector('.text'); 8 | var pcs = document.querySelectorAll('.pc'); 9 | var go = false; 10 | var number = ''; 11 | var id = -1; 12 | var times = 0; 13 | var chain = ''; 14 | var web = [{ class: 'yt', word: 'yout' }, { class: 'cp', word: 'code' }, { class: 'tw', word: 'twit' }, { class: 'fb', word: 'face' }]; 15 | 16 | var music2 = new Howl({ 17 | src: ['https://manzdev.github.io/codevember2017/assets/dischipo-2.mp3'], 18 | loop: true 19 | }); 20 | 21 | var music = new Howl({ 22 | src: ['https://manzdev.github.io/codevember2017/assets/dischipo.mp3'], 23 | onend: function onend() { 24 | if (!go) this.play();else music2.play(); 25 | } 26 | }); 27 | 28 | function changeBits() { 29 | if (times % 2 == 0) { 30 | number = 0 + (64 + ~ ~(Math.random() * 58)).toString(2); 31 | for (var i = 0; i < 4; i++) { 32 | bits[i].dataset.bit = number[i]; 33 | } 34 | } else { 35 | for (var i = 0; i < 4; i++) { 36 | bits[i].dataset.bit = number[i + 4]; 37 | } 38 | } 39 | 40 | times++; 41 | 42 | if (times == 10) { 43 | go = true; 44 | clearInterval(id); 45 | internet.classList.remove('anim'); 46 | pcs.forEach(function (e) { 47 | e.classList.add('jump'); 48 | }); 49 | pcs[0].querySelector('.screen').classList.add(web[~ ~(Math.random() * 4)].class); 50 | } 51 | 52 | console.log(times); 53 | if (times > 1 && times % 2 != 0) { 54 | console.log('Bits: ', chain); 55 | var word = String.fromCharCode(parseInt(chain, 2)); 56 | text.textContent += word; 57 | chain = ''; 58 | } 59 | chain = chain + bits[0].dataset.bit + bits[1].dataset.bit + bits[2].dataset.bit + bits[3].dataset.bit; 60 | } 61 | 62 | // Init 63 | switchon.onclick = function () { 64 | id = setInterval(changeBits, 5000); 65 | changeBits(); 66 | music.play(); 67 | internet.classList.add('anim'); 68 | earth.classList.add('spin'); 69 | this.disable = true; 70 | this.onclick = function () { 71 | return false; 72 | }; 73 | }; 74 | -------------------------------------------------------------------------------- /day-16/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-17/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/WXdbBP. 2 | 3 | Day 17: Speed 4 | --- 5 | 6 | HTML5 7 | CSS3 (Google Fonts) 8 | JS (Howler.js) 9 | 10 | Credits: FantomenK (Playing the power) -------------------------------------------------------------------------------- /day-17/babel/index.babel: -------------------------------------------------------------------------------- 1 | let speed = document.querySelector('.lcd'); 2 | let key = document.querySelector('.key'); 3 | let race = true; 4 | let sound = new Audio('https://manzdev.github.io/codevember2017/assets/coin.mp3'); 5 | 6 | let music2 = new Howl({ 7 | src: ['https://manzdev.github.io/codevember2017/assets/playing-power-2.mp3'], 8 | loop: true 9 | }) 10 | 11 | let music = new Howl({ 12 | src: ['https://manzdev.github.io/codevember2017/assets/playing-power.mp3?3'], 13 | onend: function() { 14 | if (player.turbo) 15 | music2.play(); 16 | else 17 | this.play(); 18 | } 19 | }).play(); 20 | 21 | class Snail { 22 | constructor(element, max) { 23 | this.element = document.querySelector(element); 24 | this.x = 0; 25 | this.tired = 0; 26 | this.max = max; 27 | this.lastSpeed = 0; 28 | this.turbo = false; 29 | } 30 | 31 | start() { 32 | this.element.classList.add('run'); 33 | } 34 | 35 | update() { 36 | 37 | if (this.tired == 1) { 38 | 39 | this.stop(); 40 | this.timer = setTimeout(function() { 41 | this.start(); 42 | this.tired = 0; 43 | }.bind(this), 500 + ~~(Math.random() * 1500)); 44 | 45 | } else { 46 | this.tired = ~~(Math.random() * 50); 47 | 48 | // inc; 49 | this.x += this.inc(); 50 | this.element.style.left = this.x + 'px'; 51 | } 52 | 53 | if (this.x > 750) 54 | this.finish(); 55 | } 56 | 57 | inc() { 58 | this.lastSpeed = ~~(Math.random() * this.max); 59 | return this.lastSpeed; 60 | } 61 | 62 | finish() { 63 | this.element.classList.add('winner'); 64 | if (this.timer) 65 | clearTimeout(this.timer); 66 | race = false; 67 | 68 | let div = document.createElement('div'); 69 | div.className = 'turnoff'; 70 | document.body.appendChild(div); 71 | } 72 | 73 | stop() { 74 | this.element.classList.remove('run'); 75 | } 76 | 77 | updateSpeed() { 78 | if (this.tired == 1) 79 | speed.textContent = 0; 80 | else 81 | speed.textContent = this.max; 82 | } 83 | 84 | enableTurbo() { 85 | sound.play(); 86 | key.classList.add('off'); 87 | this.turbo = true; 88 | this.max *= 3; 89 | this.element.classList.add('turbo'); 90 | } 91 | } 92 | 93 | let player = new Snail('.snail1', 2), 94 | cpu = new Snail('.snail2', 2.5); 95 | 96 | // Snail updates 97 | player.start(); 98 | cpu.start(); 99 | 100 | setTimeout(showKey, 11500); 101 | 102 | let eventEnableTurbo = function(e) { 103 | if (e.keyCode == 84) 104 | player.enableTurbo(); 105 | }; 106 | 107 | function eventDisableTurbo() { 108 | key.classList.add('off'); 109 | removeEventListener('keydown', eventEnableTurbo); 110 | } 111 | 112 | function showKey() { 113 | key.classList.remove('off'); 114 | addEventListener('keydown', eventEnableTurbo); 115 | setTimeout(eventDisableTurbo, 2000); 116 | } 117 | 118 | function loop() { 119 | if (race) { 120 | requestAnimationFrame(loop); 121 | player.update(); 122 | player.updateSpeed(); 123 | cpu.update(); 124 | } 125 | } 126 | 127 | loop(); 128 | -------------------------------------------------------------------------------- /day-17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 17 - Speed 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | t
16 |
17 |

Speed

18 |

#Codevember

19 | Code by Manz 20 | Music by FantomenK 21 |
22 | 23 |
24 | 25 |
26 |
27 |
28 |
29 | 30 |
31 |
T
32 |
33 | 34 |
000
35 |
000
36 |
37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /day-17/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-18/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/oopwBJ. 2 | 3 | Day 18: Motors 4 | --- 5 | 6 | HTML5, SVG 7 | CSS (Google Fonts, Animations) 8 | JS (Howler.js) -------------------------------------------------------------------------------- /day-18/babel/index.babel: -------------------------------------------------------------------------------- 1 | let motor = new Howl({ 2 | src: ['https://manzdev.github.io/codevember2017/assets/motor.mp3'], 3 | loop: true 4 | }); 5 | 6 | let startmotor = new Howl({ 7 | src: ['https://manzdev.github.io/codevember2017/assets/start-motor.mp3?4'] 8 | }); 9 | 10 | setTimeout(function() { startmotor.play() }, 5000); 11 | setTimeout(function() { motor.play() }, 6000); 12 | -------------------------------------------------------------------------------- /day-18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 18 - Motors 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

Motors

18 |

#Codevember

19 | Code by Manz 20 |
21 | 22 |
23 | 24 |
25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /day-18/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var motor = new Howl({ 4 | src: ['https://manzdev.github.io/codevember2017/assets/motor.mp3'], 5 | loop: true 6 | }); 7 | 8 | var startmotor = new Howl({ 9 | src: ['https://manzdev.github.io/codevember2017/assets/start-motor.mp3?4'] 10 | }); 11 | 12 | setTimeout(function () { 13 | startmotor.play(); 14 | }, 5000); 15 | setTimeout(function () { 16 | motor.play(); 17 | }, 6000); 18 | -------------------------------------------------------------------------------- /day-18/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-19/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/pdpGPz. 2 | 3 | Day 19: Ocean 4 | --- 5 | 6 | HTML5 7 | CSS3 (Animations, Blend Modes) 8 | JS (Canvas) -------------------------------------------------------------------------------- /day-19/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600|Lobster'); 2 | 3 | html { 4 | background:#000; 5 | overflow:hidden; 6 | } 7 | 8 | .data { 9 | position:relative; 10 | z-index:1; 11 | text-align:center; 12 | } 13 | 14 | h1, h2, .ghost { 15 | font-family:Montserrat; 16 | font-weight:600; 17 | margin:0; 18 | } 19 | 20 | h1 { 21 | font-family:Lobster; 22 | font-size:64px; 23 | color:#000; 24 | text-shadow:0 0 10px #ceac03; 25 | } 26 | 27 | h2 { 28 | font-size:24px; 29 | color:#111; 30 | text-shadow:0 0 15px #FFF; 31 | } 32 | 33 | .ghost { 34 | font-weight:400; 35 | font-size:15px; 36 | color:#CCC; 37 | display:inline-block; 38 | margin:8px 2px; 39 | padding:8px; 40 | border:1px solid #CCC; 41 | text-decoration:none; 42 | } 43 | 44 | a.ghost:hover { 45 | -webkit-transition:all .5s linear; 46 | transition:all .5s linear; 47 | background:rgba(50,50,50, .2); 48 | border-color:#f2ea00; 49 | color:#f2ea00; 50 | } 51 | 52 | #screen { 53 | position:absolute; 54 | top:0; 55 | left:0; 56 | width:100vw; 57 | height:100vh; 58 | } 59 | 60 | /*** Codevember ***/ 61 | 62 | .moon { 63 | position:absolute; 64 | width:128px; 65 | height:128px; 66 | border-radius:50%; 67 | background:#FFF; 68 | 69 | z-index:-1; 70 | opacity:1; 71 | -webkit-animation:moonmove 60s linear infinite; 72 | animation:moonmove 60s linear infinite; 73 | } 74 | 75 | @-webkit-keyframes moonmove { 76 | 0% { 77 | top:calc(100vh - 128px); 78 | left:-256px; 79 | } 80 | 81 | 25%, 75% { 82 | top:calc(30vh - 128px); 83 | } 84 | 85 | 50% { 86 | top:calc(3vh); 87 | } 88 | 89 | 100% { 90 | top:calc(100vh - 128px); 91 | left:calc(100vw + 256px); 92 | } 93 | 94 | 25%, 75% { opacity: 1; box-shadow:0 0 25px RGBA(255,255,255, .75) } 95 | 0%, 100% { opacity: 0; box-shadow:0 0 25px RGBA(255,255,255, 0) } 96 | } 97 | 98 | @keyframes moonmove { 99 | 0% { 100 | top:calc(100vh - 128px); 101 | left:-256px; 102 | } 103 | 104 | 25%, 75% { 105 | top:calc(30vh - 128px); 106 | } 107 | 108 | 50% { 109 | top:calc(3vh); 110 | } 111 | 112 | 100% { 113 | top:calc(100vh - 128px); 114 | left:calc(100vw + 256px); 115 | } 116 | 117 | 25%, 75% { opacity: 1; box-shadow:0 0 25px RGBA(255,255,255, .75) } 118 | 0%, 100% { opacity: 0; box-shadow:0 0 25px RGBA(255,255,255, 0) } 119 | } 120 | 121 | #canvas { 122 | background: -webkit-linear-gradient(top, transparent, #000 50%); 123 | background: linear-gradient(to bottom, transparent, #000 50%); 124 | } 125 | 126 | .cloud { 127 | position:absolute; 128 | width:256px; 129 | height:128px; 130 | background:url(https://manzdev.github.io/codevember2017/assets/pixel-cloud.png); 131 | -webkit-animation:cloud 120s linear infinite; 132 | animation:cloud 120s linear infinite; 133 | mix-blend-mode:soft-light; 134 | } 135 | 136 | .cloud.type1 { background-position:0 0; } 137 | .cloud.type2 { background-position:0 128px; } 138 | .cloud.type3 { background-position:0 0; -webkit-transform:scaleX(-1); transform:scaleX(-1) } 139 | .cloud.type4 { background-position:0 128px; -webkit-transform:scaleX(-1); transform:scaleX(-1) } 140 | -------------------------------------------------------------------------------- /day-19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 19 - Ocean 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

Oceans

18 |

#Codevember

19 | Code by Manz 20 | Music by JJayBerthume 21 |
22 | 23 |
24 |
25 |
26 |
27 | 28 |
29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /day-19/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-2/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/vWNrdE. 2 | 3 | Day 2: Cake 4 | --- 5 | 6 | HTML5 7 | CSS3 (Google Fonts) 8 | No Javascript 9 | 10 | Credits: Michael Aker (Still Alive 8 bits) -------------------------------------------------------------------------------- /day-2/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-20/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/yPvopx. 2 | 3 | Day 20: SWAG 4 | --- 5 | 6 | HTML5 7 | CSS3 (Google Fonts, Animations) 8 | JS (Howler.js) -------------------------------------------------------------------------------- /day-20/babel/index.babel: -------------------------------------------------------------------------------- 1 | let chars = ['rocket', 'zebra', 'cat', 'rockguy', 'eyeshit', 'god', 'computer', 'manz']; 2 | let circle = document.querySelector('.circle'); 3 | let current = 0; 4 | 5 | let music = new Howl({ 6 | src: ['https://manzdev.github.io/codevember2017/assets/shooting-stars-by-janderson-barboza.mp3'], 7 | autoplay: true, 8 | loop: true 9 | }); 10 | 11 | let next = function() { 12 | console.log(current); 13 | current = (current + 1) % chars.length; 14 | update(); 15 | } 16 | 17 | let prev = function() { 18 | current = (current - 1); 19 | if (current == -1) 20 | current = chars.length -1; 21 | update(); 22 | } 23 | 24 | addEventListener('keydown', e => { 25 | if (e.keyCode == 39) 26 | next(); 27 | else if (e.keyCode == 37) 28 | prev(); 29 | }); 30 | 31 | function update() { 32 | circle.className = 'circle'; 33 | circle.classList.add(chars[current]); 34 | } 35 | -------------------------------------------------------------------------------- /day-20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 20: SWAG 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

SWAG

18 |

#Codevember

19 | Code by Manz 20 | Music by Janyork 21 |
22 | 23 |
24 | 25 |
26 |
27 |
28 |
29 | 30 |
31 | 32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /day-20/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var chars = ['rocket', 'zebra', 'cat', 'rockguy', 'eyeshit', 'god', 'computer', 'manz']; 4 | var circle = document.querySelector('.circle'); 5 | var current = 0; 6 | 7 | var music = new Howl({ 8 | src: ['https://manzdev.github.io/codevember2017/assets/shooting-stars-by-janderson-barboza.mp3'], 9 | autoplay: true, 10 | loop: true 11 | }); 12 | 13 | var next = function next() { 14 | console.log(current); 15 | current = (current + 1) % chars.length; 16 | update(); 17 | }; 18 | 19 | var prev = function prev() { 20 | current = current - 1; 21 | if (current == -1) current = chars.length - 1; 22 | update(); 23 | }; 24 | 25 | addEventListener('keydown', function (e) { 26 | if (e.keyCode == 39) next();else if (e.keyCode == 37) prev(); 27 | }); 28 | 29 | function update() { 30 | circle.className = 'circle'; 31 | circle.classList.add(chars[current]); 32 | } 33 | -------------------------------------------------------------------------------- /day-20/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-21/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/vWRZGa. 2 | 3 | Day 21: Fight 4 | --- 5 | 6 | HTML5 + Unicode Emojis 7 | CSS3 (Google Fonts, Animations) 8 | JS (Howler.js) 9 | 10 | Credits: PeachyPixel8 (Eye of the Tiger 8 bits) -------------------------------------------------------------------------------- /day-21/babel/index.babel: -------------------------------------------------------------------------------- 1 | let music = new Howl({ 2 | src: ['https://manzdev.github.io/codevember2017/assets/eye-tiger.mp3'], 3 | loop: true 4 | }) 5 | 6 | let boxing = new Howl({ 7 | src: ['https://manzdev.github.io/codevember2017/assets/boxing.mp3'] 8 | }) 9 | 10 | let intro = new Howl({ 11 | src: ['https://manzdev.github.io/codevember2017/assets/eye-tiger-intro.mp3'], 12 | autoplay: true, 13 | onend: function() { 14 | music.play(); 15 | } 16 | }) 17 | 18 | let [p1, p2] = document.querySelectorAll('.player'); 19 | let crowd = document.querySelector('.crowd'); 20 | let crowd2 = document.querySelector('.crowd2'); 21 | let data = document.querySelector('.data'); 22 | 23 | setTimeout(function() { 24 | data.classList.add('off'); 25 | boxing.play(); 26 | }, 8000); 27 | 28 | function getRandomEmoji() { 29 | return String.fromCharCode(55357, 56832 + ~~(Math.random() * 69)); 30 | } 31 | 32 | p1.textContent = getRandomEmoji(); 33 | p2.textContent = getRandomEmoji(); 34 | 35 | let people = [], 36 | maxPeople = 200; 37 | 38 | for (let i = 0; i < 200; i++) { 39 | crowd.textContent += getRandomEmoji(); 40 | crowd2.textContent += getRandomEmoji(); 41 | } 42 | 43 | function update(player) { 44 | 45 | //console.log('Updating...'); 46 | let r = ~~(Math.random() * 25); 47 | 48 | if ((r % 2) == 0) { 49 | player.classList.toggle('move'); 50 | } 51 | 52 | if (r == 1) { 53 | player.classList.add('block'); 54 | setTimeout(function() { 55 | player.classList.remove('block'); 56 | }, 2000); 57 | } 58 | 59 | if (r == 2) { 60 | player.classList.add('strong'); 61 | setTimeout(function() { 62 | player.classList.remove('strong'); 63 | }, 1000); 64 | } 65 | 66 | if (r == 3) { 67 | player.classList.add('punch'); 68 | setTimeout(function() { 69 | player.classList.remove('punch'); 70 | }, 1000); 71 | } 72 | 73 | } 74 | 75 | 76 | setInterval(function() { 77 | update(p1); 78 | update(p2); 79 | }, 1000); 80 | -------------------------------------------------------------------------------- /day-21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 21: Fight 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Emoji 18 |

Fight

19 |

#Codevember

20 | Code by Manz 21 | Music by PeachyPixel8 22 |
23 | 24 |
25 |
26 |
27 |
28 | 29 |
30 |
31 |
32 |
33 | 34 |
35 | 36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /day-21/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var music = new Howl({ 4 | src: ['https://manzdev.github.io/codevember2017/assets/eye-tiger.mp3'], 5 | loop: true 6 | }); 7 | 8 | var boxing = new Howl({ 9 | src: ['https://manzdev.github.io/codevember2017/assets/boxing.mp3'] 10 | }); 11 | 12 | var intro = new Howl({ 13 | src: ['https://manzdev.github.io/codevember2017/assets/eye-tiger-intro.mp3'], 14 | autoplay: true, 15 | onend: function onend() { 16 | music.play(); 17 | } 18 | }); 19 | 20 | var _document$querySelect = document.querySelectorAll('.player'); 21 | 22 | var p1 = _document$querySelect[0]; 23 | var p2 = _document$querySelect[1]; 24 | 25 | var crowd = document.querySelector('.crowd'); 26 | var crowd2 = document.querySelector('.crowd2'); 27 | var data = document.querySelector('.data'); 28 | 29 | setTimeout(function () { 30 | data.classList.add('off'); 31 | boxing.play(); 32 | }, 8000); 33 | 34 | function getRandomEmoji() { 35 | return String.fromCharCode(55357, 56832 + ~ ~(Math.random() * 69)); 36 | } 37 | 38 | p1.textContent = getRandomEmoji(); 39 | p2.textContent = getRandomEmoji(); 40 | 41 | var people = [], 42 | maxPeople = 200; 43 | 44 | for (var i = 0; i < 200; i++) { 45 | crowd.textContent += getRandomEmoji(); 46 | crowd2.textContent += getRandomEmoji(); 47 | } 48 | 49 | function update(player) { 50 | 51 | //console.log('Updating...'); 52 | var r = ~ ~(Math.random() * 25); 53 | 54 | if (r % 2 == 0) { 55 | player.classList.toggle('move'); 56 | } 57 | 58 | if (r == 1) { 59 | player.classList.add('block'); 60 | setTimeout(function () { 61 | player.classList.remove('block'); 62 | }, 2000); 63 | } 64 | 65 | if (r == 2) { 66 | player.classList.add('strong'); 67 | setTimeout(function () { 68 | player.classList.remove('strong'); 69 | }, 1000); 70 | } 71 | 72 | if (r == 3) { 73 | player.classList.add('punch'); 74 | setTimeout(function () { 75 | player.classList.remove('punch'); 76 | }, 1000); 77 | } 78 | } 79 | 80 | setInterval(function () { 81 | update(p1); 82 | update(p2); 83 | }, 1000); 84 | -------------------------------------------------------------------------------- /day-21/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-22/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/eergPg. 2 | 3 | Day 22: Planet 4 | 5 | HTML5, SVG 6 | CSS3 (Animations) 7 | ¡No JS! 8 | 9 | Credits: Plastiware (Futurama Theme) -------------------------------------------------------------------------------- /day-22/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 22: Planet 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

Planet

18 | Express 19 |

#Codevember

20 | Code by Manz 21 | Music by Plastiware 22 |
23 | 24 |
25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 |
45 |
46 | 47 |
48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /day-22/js/index.js: -------------------------------------------------------------------------------- 1 | /* Look, mom!! Without Javascript! */ -------------------------------------------------------------------------------- /day-22/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-23/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/MOXWZy. 2 | 3 | Day 23: King 4 | --- 5 | 6 | HTML5, SVG 7 | CSS3 (Google Fonts, Animations) 8 | JS 9 | 10 | Credits: Valve (Cara mía, Portal 2) -------------------------------------------------------------------------------- /day-23/babel/index.babel: -------------------------------------------------------------------------------- 1 | let template = document.querySelector('.template'); 2 | let soprano = document.querySelector('#soprano'); 3 | let lines = document.querySelectorAll('.board .line'); 4 | let elevator = document.querySelector('.elevator'); 5 | let win = document.querySelector('.window'); 6 | 7 | for (let i = 0; i < lines.length; i++) 8 | for (let j = 0; j < [1,8,12][i]; j++) 9 | lines[i].appendChild(template.content.cloneNode(true)) 10 | 11 | lines[0].appendChild(soprano.content.cloneNode(true)); 12 | lines[0].appendChild(template.content.cloneNode(true)); 13 | 14 | for (let i = 0; i < 4; i++) 15 | elevator.appendChild(template.content.cloneNode(true)); 16 | 17 | let turrets = document.querySelectorAll('.turret'); 18 | 19 | function updateTurrets(ini, rnd) { 20 | for (let i = ini; i < turrets.length; i++) 21 | if (~~(Math.random() * rnd) == 1) 22 | turrets[i].classList.toggle('open'); 23 | } 24 | 25 | function sopranoSing() { 26 | if (~~(Math.random() * 2) == 1) 27 | turrets[1].classList.toggle('open'); 28 | } 29 | 30 | let id = setInterval(function() { 31 | updateTurrets(23, 2) 32 | }, 500); 33 | 34 | setTimeout(function() { 35 | clearInterval(id); 36 | setInterval(function() { 37 | updateTurrets(0, 4); 38 | }, 500); 39 | setInterval(function() { 40 | sopranoSing(); 41 | }, 250); 42 | }, 35000); -------------------------------------------------------------------------------- /day-23/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var template = document.querySelector('.template'); 4 | var soprano = document.querySelector('#soprano'); 5 | var lines = document.querySelectorAll('.board .line'); 6 | var elevator = document.querySelector('.elevator'); 7 | var win = document.querySelector('.window'); 8 | 9 | for (var i = 0; i < lines.length; i++) { 10 | for (var j = 0; j < [1, 8, 12][i]; j++) { 11 | lines[i].appendChild(template.content.cloneNode(true)); 12 | } 13 | }lines[0].appendChild(soprano.content.cloneNode(true)); 14 | lines[0].appendChild(template.content.cloneNode(true)); 15 | 16 | for (var i = 0; i < 4; i++) { 17 | elevator.appendChild(template.content.cloneNode(true)); 18 | }var turrets = document.querySelectorAll('.turret'); 19 | 20 | function updateTurrets(ini, rnd) { 21 | for (var i = ini; i < turrets.length; i++) { 22 | if (~ ~(Math.random() * rnd) == 1) turrets[i].classList.toggle('open'); 23 | } 24 | } 25 | 26 | function sopranoSing() { 27 | if (~ ~(Math.random() * 2) == 1) turrets[1].classList.toggle('open'); 28 | } 29 | 30 | var id = setInterval(function () { 31 | updateTurrets(23, 2); 32 | }, 500); 33 | 34 | setTimeout(function () { 35 | clearInterval(id); 36 | setInterval(function () { 37 | updateTurrets(0, 4); 38 | }, 500); 39 | setInterval(function () { 40 | sopranoSing(); 41 | }, 250); 42 | }, 35000); -------------------------------------------------------------------------------- /day-23/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-24/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/xPzepW. 2 | 3 | Day 24: Heart 4 | --- 5 | 6 | HTML5, Emojis 7 | CSS3 (Animations) 8 | No JS! 9 | 10 | Credits: Louis Armstrong (Wonderful World) -------------------------------------------------------------------------------- /day-24/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 24: Heart 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 28 |
29 |

Heart

30 |

What a Wonderful World

31 |
32 | 33 |
34 | Code by Manz 35 | Music by Louis Armstrong 36 |

#Codevember

37 |
38 | 39 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /day-24/js/index.js: -------------------------------------------------------------------------------- 1 | /* Look mom! Without Javascript */ -------------------------------------------------------------------------------- /day-24/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-25/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/QOBbKg. 2 | 3 | Day 25: Avocado 4 | --- 5 | 6 | HTML5, SVG 7 | CSS3 (Google Fonts, Animation) 8 | JS 9 | 10 | Credits: Tom Da Lips (Avocado Remix) -------------------------------------------------------------------------------- /day-25/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 25: Avocado 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 49 | 50 |
51 |
52 | 53 |
54 |

Avocado

55 |
🎵
56 |

#Codevember

57 | Code by Manz 58 | Music by Tom Da Lips 59 |
60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /day-25/js/index.js: -------------------------------------------------------------------------------- 1 | let avocado = document.querySelector('template'); 2 | let grid = document.querySelector('.grid'); 3 | let waves = document.querySelector('.waves'); 4 | let options = ['avocado', 'avocado back', 'super avocado', 'avocado dorito']; 5 | 6 | for (let i = 0; i < 3; i++) 7 | grid.appendChild(avocado.content.cloneNode(true)); 8 | 9 | for (let i = 0; i < 10; i++) { 10 | let bar = document.createElement('div'); 11 | bar.className = 'bar'; 12 | waves.appendChild(bar); 13 | } 14 | 15 | let avocados = document.querySelectorAll('.avocado'); 16 | let bars = document.querySelectorAll('.bar'); 17 | 18 | function change() { 19 | for (let i = 0; i < avocados.length; i++) 20 | avocados[i].className = options[~~(Math.random() * options.length)]; 21 | } 22 | 23 | function updateBars() { 24 | for (let i = 0; i < bars.length; i++) 25 | bars[i].style.height = ~~(Math.random() * 100) + '%'; 26 | } 27 | 28 | setInterval(change, 3000); 29 | setInterval(updateBars, 100 + ~~(Math.random() * 100)); -------------------------------------------------------------------------------- /day-25/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-26/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/MOBVod. 2 | 3 | Day 26: Mountain 4 | --- 5 | 6 | HTML5 7 | CSS3 (Animation) 8 | 9 | Credits: Radix (Weather Girl) -------------------------------------------------------------------------------- /day-26/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 26: Mountain 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 |
34 |
35 |
36 |
37 |
38 | 39 |
40 |
41 |
42 |
43 | 44 |
45 | 46 |
47 |

Mountain

48 |

#Codevember

49 | Code by Manz 50 | Music by Radix 51 |
52 | 53 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /day-26/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-27/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/vWzZNG. 2 | 3 | Day 27: Beer 4 | --- 5 | 6 | HTML5 7 | CSS3 (Google Fonts, Blends, Animations) 8 | JS (for reset animation) 9 | 10 | Credits: Rainbowdragoneyes (Polka) -------------------------------------------------------------------------------- /day-27/babel/index.babel: -------------------------------------------------------------------------------- 1 | let people = document.querySelector('.people'); 2 | setInterval(function() { 3 | 4 | people.classList.remove('anim'); 5 | setTimeout(function() { 6 | people.classList.add('anim'); 7 | },1000); 8 | 9 | }, 15000); -------------------------------------------------------------------------------- /day-27/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 27: Beer 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 |
19 |
20 |
21 | 22 |
23 |
24 |
25 |
26 |
27 | 28 |
29 | 30 |
31 |
32 |
33 |
34 |
35 |
36 |
A human!!
37 |
38 | 39 |
40 |

🍺 Beer

41 |

#Codevember

42 | Code by Manz 43 | Music by Rainbowdragoneyes 44 |
45 | 46 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /day-27/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var people = document.querySelector('.people'); 4 | setInterval(function () { 5 | 6 | people.classList.remove('anim'); 7 | setTimeout(function () { 8 | people.classList.add('anim'); 9 | }, 1000); 10 | }, 15000); -------------------------------------------------------------------------------- /day-27/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-28/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/VrEYWr. 2 | 3 | Day 28: Pen 4 | --- 5 | 6 | HTML5 7 | CSS (Google Fonts, Animations) 8 | No JS! -------------------------------------------------------------------------------- /day-28/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 28: Pen 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 | 22 |
Untitled
23 |
24 |
25 |
26 |
27 |
28 | 29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 |
44 | 45 |
46 |

Pen

47 |

#Codevember

48 | Code by Manz 49 | Music by TobyFox/Bulby 50 |
51 | 52 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /day-28/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-29/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/jaQOjp. 2 | 3 | Day 29: Giraffe 4 | --- 5 | 6 | HTML5, SVG 7 | CSS3 (Google Fonts, Animations) 8 | JS 9 | 10 | Credits: Kubbi -------------------------------------------------------------------------------- /day-29/babel/index.babel: -------------------------------------------------------------------------------- 1 | let place = document.querySelector('.place'); 2 | let cloud = document.querySelector('#cloud'); 3 | let sky = document.querySelector('.sky'); 4 | let music = new Howl({ 5 | src: ['https://manzdev.github.io/codevember2017/assets/polarity-by-kubbi.mp3', 6 | 'https://manzdev.github.io/codevember2017/assets/polarity-by-kubbi.ogg'], 7 | loop: true, 8 | autoplay: true 9 | }); 10 | let clouds = [], 11 | maxClouds = 15; 12 | 13 | for (let i = 0; i < maxClouds; i++) { 14 | let div = document.createElement('div'); 15 | div.className = 'cloud'; 16 | div.appendChild(cloud.content.cloneNode(true)); 17 | clouds[i] = div; 18 | clouds[i].style.opacity = Math.random(); 19 | clouds[i].style.zIndex = -2 + ~~(Math.random() * 4); 20 | clouds[i].style.top = ~~(Math.random() * 150) + 'px'; 21 | clouds[i].style.animationDuration = ~~(Math.random() * 55) + 20 + 's'; 22 | sky.appendChild(clouds[i]); 23 | } 24 | 25 | function chew() { 26 | place.classList.toggle('up'); 27 | place.classList.toggle('chew'); 28 | } 29 | 30 | setInterval(chew, 4000); 31 | -------------------------------------------------------------------------------- /day-29/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var place = document.querySelector('.place'); 4 | var cloud = document.querySelector('#cloud'); 5 | var sky = document.querySelector('.sky'); 6 | var music = new Howl({ 7 | src: ['https://manzdev.github.io/codevember2017/assets/polarity-by-kubbi.mp3', 'https://manzdev.github.io/codevember2017/assets/polarity-by-kubbi.ogg'], 8 | loop: true, 9 | autoplay: true 10 | }); 11 | var clouds = [], 12 | maxClouds = 15; 13 | 14 | for (var i = 0; i < maxClouds; i++) { 15 | var div = document.createElement('div'); 16 | div.className = 'cloud'; 17 | div.appendChild(cloud.content.cloneNode(true)); 18 | clouds[i] = div; 19 | clouds[i].style.opacity = Math.random(); 20 | clouds[i].style.zIndex = -2 + ~ ~(Math.random() * 4); 21 | clouds[i].style.top = ~ ~(Math.random() * 150) + 'px'; 22 | clouds[i].style.animationDuration = ~ ~(Math.random() * 55) + 20 + 's'; 23 | sky.appendChild(clouds[i]); 24 | } 25 | 26 | function chew() { 27 | place.classList.toggle('up'); 28 | place.classList.toggle('chew'); 29 | } 30 | 31 | setInterval(chew, 4000); 32 | -------------------------------------------------------------------------------- /day-29/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-3/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/bYEvoL. 2 | 3 | Day 3: Tree 4 | --- 5 | 6 | HTML5 7 | CSS3 (Google Fonts) 8 | Javascript 9 | 10 | Credits: Finn Formiga (Ewof 8 bits) -------------------------------------------------------------------------------- /day-3/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat:200,400,600|Press+Start+2P'); 2 | 3 | html, body { 4 | background:#000; 5 | overflow:hidden; 6 | } 7 | 8 | .data { 9 | position:relative; 10 | z-index:1; 11 | text-align:center; 12 | background:RGBA(20,20,20, .99); 13 | padding:15px; 14 | width:350px; 15 | margin:auto; 16 | font-family:Montserrat; 17 | font-weight:200; 18 | color:#AAA; 19 | } 20 | 21 | h1, h2, .ghost { 22 | font-family:Montserrat; 23 | font-weight:600; 24 | margin:0; 25 | } 26 | 27 | h1 { 28 | font-size:64px; 29 | color:#444; 30 | } 31 | 32 | h2 { 33 | font-size:24px; 34 | color:#888; 35 | } 36 | 37 | .ghost { 38 | font-weight:400; 39 | font-size:15px; 40 | color:#CCC; 41 | display:inline-block; 42 | margin:8px 2px; 43 | padding:8px; 44 | border:1px solid #CCC; 45 | text-decoration:none; 46 | } 47 | 48 | a.ghost:hover { 49 | -webkit-transition:all .5s linear; 50 | transition:all .5s linear; 51 | background:rgba(50,50,50, .2); 52 | border-color:#f2ea00; 53 | color:#f2ea00; 54 | } 55 | 56 | #tree { 57 | position:absolute; 58 | top:0; 59 | left:0; 60 | width:100vw; 61 | height:100vh; 62 | } 63 | 64 | .folder { 65 | position:absolute; 66 | } 67 | 68 | .folder:hover { 69 | -webkit-filter:hue-rotate(120deg); 70 | filter:hue-rotate(120deg); 71 | } 72 | 73 | #panel { 74 | font-family:'Press Start 2P'; 75 | font-size:24px; 76 | text-shadow:0 0 10px #111; 77 | background:#111; 78 | padding:12px; 79 | position:fixed; 80 | bottom:50px; 81 | text-align:center; 82 | width:100vw; 83 | z-index:2; 84 | color:#AAA; 85 | opacity:0; 86 | -webkit-transition:all .25s linear; 87 | transition:all .25s linear; 88 | } 89 | 90 | #panel.turnon { 91 | opacity:1; 92 | } -------------------------------------------------------------------------------- /day-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 3: Tree 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

Tree

18 |

#Codevember

19 |

[Move mouse over folders]

20 | Code by Manz 21 | Music by Finn Formiga 22 |
23 | 24 |
25 |
26 | 27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /day-3/js/index.js: -------------------------------------------------------------------------------- 1 | let tree = document.querySelector('#tree'); 2 | let panel = document.querySelector('#panel'); 3 | 4 | function setText(elem, e) { 5 | let num = Number(elem.dataset.num); 6 | panel.textContent = words[num]; 7 | panel.className = 'turnon'; 8 | } 9 | 10 | function unsetText(elem, e) { 11 | let num = Number(elem.dataset.num); 12 | panel.innerHTML = ' '; 13 | panel.className = ''; 14 | } 15 | 16 | function pop(elem, e) { 17 | let num = Number(elem.dataset.num); 18 | bubble.currentTime = 0; 19 | bubble.play(); 20 | 21 | elem.style.display = 'none'; 22 | } 23 | 24 | // Prepare 25 | let bubble = new Audio('https://manzdev.github.io/codevember2017/assets/bubble.mp3'); 26 | let stack = []; 27 | for (let i = 0; i < 100; i++) { 28 | 29 | let folder = document.createElement('img'); 30 | folder.dataset.num = i; 31 | folder.className = 'folder'; 32 | folder.src = 'https://manzdev.github.io/codevember2017/assets/folder.png'; 33 | folder.style.left = ~~(Math.random() * innerWidth) + 'px'; 34 | folder.style.top = ~~(Math.random() * innerHeight) + 'px'; 35 | folder.onmouseover = setText.bind(event, folder); 36 | folder.onmouseleave = unsetText.bind(event, folder); 37 | folder.onclick = pop.bind(event, folder); 38 | stack.push(folder); 39 | tree.appendChild(folder); 40 | 41 | } 42 | 43 | let words = ['System32', 'Windows', 'Program Files', 'Fonts', 'Images', 44 | 'Assets', 'My music', 'Updates', 'Temp', 'Boot', 45 | 'etc', 'User', 'My documents', 'p0rn', 'Holiday photos', 'dev', 46 | 'Summer 99', 'AC-DC', 'Mike Oldfield', 'Europe', 'Imagine Dragons', 47 | 'Pimpinela', 'iTunes', 'aTunes', 'Logs', 'Config.msi', 'opt', 48 | 'More updates', 'secret folder', 'secret pics', 'tmp', 'Downloads', 49 | 'Desktop', 'Documents', 'Videos', 'hOrse vids', 'My photos', 50 | 'Internet Explorer', 'Internet Exploter', 'Chrome', 'Firefox', 'data', 51 | 'es-ES', 'en-US', 'INF', 'Recover data', 'Codevember2017', 52 | 'Emezeta.com', 'LenguajeCSS.com', 'LenguajeHTML.com', 'LenguajeJS.com', 53 | 'Installer', 'My teddy bear pics', 'Digital scan docs', 'To print', 54 | 'Help', 'Diagnosis', 'Antivirus', 'Quarantine', 'My daddy vids', 55 | 'SECRET DOCS DONT LOOK', 'usr', 'information', 'cv', 'Important data', 56 | 'Birds', 'Strange Birds', 'Curious Birds', 'Weird Birds', 'Cats', 57 | 'Cats pics', 'Jokes', 'Cat jokes', 'PDF documents', 'codes', 58 | 'Device info', 'Accounts', 'Passwords DONT LOOK', 'Debug', 'Local', 59 | 'Localization', 'Steam', 'Games', 'Gmail', 'Migration docs', 60 | 'Setup', 'WhatsApp images', 'WhatsApp audios', 'Phone backup', 'mine', 61 | 'TWAIN32', 'WinSxS', 'XAMPP', 'Beauty ladies', 'Pretty cats', 62 | 'My friends', 'To backup', 'Secure data', 'DATA [CHECK]', 'Tickets'] 63 | 64 | 65 | // Main loop 66 | function loop() { 67 | requestAnimationFrame(loop, tree); 68 | update(); 69 | } 70 | 71 | // Update 72 | function update() { 73 | for (let i = 0; i < stack.length; i++) { 74 | stack[i].style.left = parseInt(stack[i].style.left) + -2 + ~~(Math.random() * 5) + 'px'; 75 | stack[i].style.top = parseInt(stack[i].style.top) + -2 + ~~(Math.random() * 5) + 'px'; 76 | } 77 | } 78 | 79 | loop(); 80 | -------------------------------------------------------------------------------- /day-3/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-30/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/BmGdbG. 2 | 3 | Day 30: Supernova 4 | --- 5 | 6 | HTML5 7 | CSS3 (Google Fonts, Animations) 8 | JS (Canvas, Howler.js) 9 | 10 | Credits: David Warhol / Ron Gilbert / Kenneth Moller (Maniac Mansion Opening Theme Remake) -------------------------------------------------------------------------------- /day-30/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 30: Supernova 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

Supernova

18 |

#codevember

19 | Code by Manz 20 | Music by Kenneth Moller 21 |
22 | 23 | 24 |
25 | 26 |
27 |
Thanks for viewing!
28 |
Please, feel free to comment or like
29 |
...
30 |
Full list on my GitHub!
31 |
32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /day-30/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-4/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/zPqvmg. 2 | 3 | Day 4: Sapphire 4 | --- 5 | 6 | HTML5 7 | CSS3 (Google Fonts, Animate.css) 8 | Javascript (ThreeJS) 9 | 10 | Credits: WillRock / DaMonz (Mirror Image Album) -------------------------------------------------------------------------------- /day-4/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600'); 2 | 3 | html { 4 | background:#111; 5 | } 6 | 7 | body { 8 | margin:0; 9 | overflow:hidden; 10 | display:-webkit-box; 11 | display:-ms-flexbox; 12 | display:flex; 13 | -webkit-box-orient:vertical; 14 | -webkit-box-direction:normal; 15 | -ms-flex-direction:column; 16 | flex-direction:column; 17 | -webkit-box-pack:center; 18 | -ms-flex-pack:center; 19 | justify-content:center; 20 | } 21 | 22 | .data { 23 | position:relative; 24 | z-index:1; 25 | text-align:center; 26 | font-family:Montserrat; 27 | font-weight:200; 28 | color:#666; 29 | } 30 | 31 | h1, h2, .ghost { 32 | font-family:Montserrat; 33 | font-weight:600; 34 | margin:0; 35 | } 36 | 37 | h1 { 38 | font-size:64px; 39 | color:#444; 40 | } 41 | 42 | h2 { 43 | font-size:24px; 44 | color:#888; 45 | } 46 | 47 | .ghost { 48 | font-weight:400; 49 | font-size:15px; 50 | color:#CCC; 51 | display:inline-block; 52 | margin:2px; 53 | padding:8px; 54 | border:1px solid #CCC; 55 | text-decoration:none; 56 | } 57 | 58 | a.ghost:hover { 59 | -webkit-transition:all .5s ease-in-out; 60 | transition:all .5s ease-in-out; 61 | background:rgba(0,0,150, 0); 62 | border-color:#9999FF; 63 | color:#9999FF; 64 | } 65 | 66 | #screen { 67 | width:100vw; 68 | height:128px; 69 | display:-webkit-box; 70 | display:-ms-flexbox; 71 | display:flex; 72 | -ms-flex-pack:distribute; 73 | justify-content:space-around; 74 | } 75 | 76 | .sprite { 77 | width:128px; 78 | height:128px; 79 | } 80 | 81 | .top { 82 | opacity:0; 83 | -webkit-transition:all .5 linear 0; 84 | transition:all .5 linear 0; 85 | } 86 | 87 | #topscreen { 88 | margin-top:2em; 89 | width:100vw; 90 | height:172px; 91 | display:-webkit-box; 92 | display:-ms-flexbox; 93 | display:flex; 94 | -ms-flex-pack:distribute; 95 | justify-content:space-around; 96 | } 97 | 98 | .top.on { 99 | opacity:1; 100 | } 101 | 102 | .chest:hover { 103 | -webkit-transition:all .5s ease-in-out; 104 | transition:all .5s ease-in-out; 105 | -webkit-animation:hover .25s ease infinite alternate; 106 | animation:hover .25s ease infinite alternate; 107 | } 108 | 109 | .lost { 110 | position:absolute; 111 | top:0; 112 | bottom:0; 113 | left:0; 114 | right:0; 115 | background: #000; 116 | mix-blend-mode: saturation; 117 | } 118 | 119 | .lost::after { 120 | content: "YOU LOST"; 121 | font-family:Montserrat; 122 | font-weight:800; 123 | position: relative; 124 | top: 30vh; 125 | text-align: center; 126 | display: block; 127 | font-size: 122px; 128 | color: #FFF; 129 | } -------------------------------------------------------------------------------- /day-4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 4: Sapphire 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sapphire

19 |

#Codevember

20 |

Click and open all chests!

21 | Code by Manz 22 | Music by WillRock/DaMonz 23 |
24 | 25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 | 33 | 34 |
35 | 36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /day-4/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-5/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/wPGQjq. 2 | 3 | Day 5: Sword 4 | --- 5 | 6 | HTML5 7 | CSS3 (Google Fonts) 8 | Javascript (HowlerJS, IziToast) 9 | 10 | Credits: Demoscene Time Machine (Power Up) -------------------------------------------------------------------------------- /day-5/babel/index.babel: -------------------------------------------------------------------------------- 1 | let sword = document.querySelector('#sword'); 2 | let hud = document.querySelector('#hud'); 3 | let power = document.querySelector('#power'); 4 | let extrapower = document.querySelector('#extrapower'); 5 | let text = document.querySelector('#text'); 6 | let strength = 0; 7 | let firstStrength = 0; 8 | let currentMusic = false; 9 | let music = [ 10 | new Howl({ 11 | src: ['https://manzdev.github.io/codevember2017/assets/power-up-1.ogg', 12 | 'https://manzdev.github.io/codevember2017/assets/power-up-1.mp3'], 13 | onend: checkMusic.bind(), 14 | }), 15 | new Howl({ 16 | src: ['https://manzdev.github.io/codevember2017/assets/power-up-2.ogg', 17 | 'https://manzdev.github.io/codevember2017/assets/power-up-2.mp3'], 18 | onend: checkMusic.bind() 19 | }), 20 | new Howl({ 21 | src: ['https://manzdev.github.io/codevember2017/assets/power-up-3.ogg', 22 | 'https://manzdev.github.io/codevember2017/assets/power-up-3.mp3'], 23 | onend: checkMusic.bind() 24 | }) 25 | ]; 26 | 27 | sword.onmouseenter = function(e) { 28 | 29 | if (currentMusic === false) { 30 | toast('Try get THE SWORD...', 4000); 31 | currentMusic = 0; 32 | music[0].play(); 33 | } 34 | 35 | } 36 | 37 | function checkMusic(p) { 38 | 39 | if ((currentMusic == false) && (firstStrength < 5)) { 40 | toast('Click FASTER!...', 3000); 41 | } 42 | else if ((currentMusic == 0) && (firstStrength > 15)) { 43 | //strength = 5; 44 | toast('A little MORE!!...', 3000); 45 | sword.classList.add('try'); 46 | currentMusic = 1; 47 | } 48 | else if ((currentMusic == 1) && (strength > 50)) { 49 | currentMusic = 2; 50 | sword.classList.remove('try'); 51 | sword.classList.add('up'); 52 | setTimeout(function() { 53 | sword.classList.add('move'); 54 | }, 2000); 55 | sword.onclick = null; 56 | toast('Greetings, SWORDMASTER!', 6000); 57 | text.textContent = firstStrength + strength + ' Points'; 58 | } 59 | 60 | music[currentMusic].play(); 61 | } 62 | 63 | sword.onclick = function(e) { 64 | 65 | console.log(e.clientX, e.clientY); 66 | console.log(e.detail); 67 | console.log(e.ctrlKey); 68 | console.log(status); 69 | power.style.width = firstStrength + 'px'; 70 | extrapower.style.width = strength + 'px'; 71 | 72 | if (e.detail > 1) { 73 | if (currentMusic < 1) 74 | firstStrength++; 75 | else 76 | strength = (firstStrength + strength < 200 ? strength + 1 : strength + 0); 77 | } 78 | } 79 | 80 | function toast(m, t = 5000) { 81 | iziToast.show({ 82 | title: 'Tip', 83 | message: m, 84 | titleColor: '#FFF', 85 | messageColor: '#AAA', 86 | backgroundColor: '#161616', 87 | position: 'topRight', 88 | timeout: t, 89 | }); 90 | } 91 | -------------------------------------------------------------------------------- /day-5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 5: Sword 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sword

19 |

#Codevember

20 | Code by Manz 21 | Music by Demoscene TimeMachine 22 |
23 | 24 |
25 | 26 |
27 | 28 |
29 |
30 |
31 |
32 |
33 | 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /day-5/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var sword = document.querySelector('#sword'); 4 | var hud = document.querySelector('#hud'); 5 | var power = document.querySelector('#power'); 6 | var extrapower = document.querySelector('#extrapower'); 7 | var text = document.querySelector('#text'); 8 | var strength = 0; 9 | var firstStrength = 0; 10 | var currentMusic = false; 11 | var music = [new Howl({ 12 | src: ['https://manzdev.github.io/codevember2017/assets/power-up-1.ogg', 'https://manzdev.github.io/codevember2017/assets/power-up-1.mp3'], 13 | onend: checkMusic.bind() 14 | }), new Howl({ 15 | src: ['https://manzdev.github.io/codevember2017/assets/power-up-2.ogg', 'https://manzdev.github.io/codevember2017/assets/power-up-2.mp3'], 16 | onend: checkMusic.bind() 17 | }), new Howl({ 18 | src: ['https://manzdev.github.io/codevember2017/assets/power-up-3.ogg', 'https://manzdev.github.io/codevember2017/assets/power-up-3.mp3'], 19 | onend: checkMusic.bind() 20 | })]; 21 | 22 | sword.onmouseenter = function (e) { 23 | 24 | if (currentMusic === false) { 25 | toast('Try get THE SWORD...', 4000); 26 | currentMusic = 0; 27 | music[0].play(); 28 | } 29 | }; 30 | 31 | function checkMusic(p) { 32 | 33 | if (currentMusic == false && firstStrength < 5) { 34 | toast('Click FASTER!...', 3000); 35 | } else if (currentMusic == 0 && firstStrength > 15) { 36 | //strength = 5; 37 | toast('A little MORE!!...', 3000); 38 | sword.classList.add('try'); 39 | currentMusic = 1; 40 | } else if (currentMusic == 1 && strength > 50) { 41 | currentMusic = 2; 42 | sword.classList.remove('try'); 43 | sword.classList.add('up'); 44 | setTimeout(function () { 45 | sword.classList.add('move'); 46 | }, 2000); 47 | sword.onclick = null; 48 | toast('Greetings, SWORDMASTER!', 6000); 49 | text.textContent = firstStrength + strength + ' Points'; 50 | } 51 | 52 | music[currentMusic].play(); 53 | } 54 | 55 | sword.onclick = function (e) { 56 | 57 | console.log(e.clientX, e.clientY); 58 | console.log(e.detail); 59 | console.log(e.ctrlKey); 60 | console.log(status); 61 | power.style.width = firstStrength + 'px'; 62 | extrapower.style.width = strength + 'px'; 63 | 64 | if (e.detail > 1) { 65 | if (currentMusic < 1) firstStrength++;else strength = firstStrength + strength < 200 ? strength + 1 : strength + 0; 66 | } 67 | }; 68 | 69 | function toast(m) { 70 | var t = arguments.length <= 1 || arguments[1] === undefined ? 5000 : arguments[1]; 71 | 72 | iziToast.show({ 73 | title: 'Tip', 74 | message: m, 75 | titleColor: '#FFF', 76 | messageColor: '#AAA', 77 | backgroundColor: '#161616', 78 | position: 'topRight', 79 | timeout: t 80 | }); 81 | } 82 | -------------------------------------------------------------------------------- /day-5/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-6/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/WXxxZE. 2 | 3 | Day 6: Storm 4 | --- 5 | 6 | HTML5 7 | CSS3 (Google Fonts, MagicInput) 8 | Javascript (HowlerJS, Canvas) 9 | 10 | Credits: Demoscene Time Machine (Power Up) -------------------------------------------------------------------------------- /day-6/babel/index.babel: -------------------------------------------------------------------------------- 1 | let canvas = document.querySelector('#rain'); 2 | let ctx = canvas.getContext('2d'); 3 | canvas.width = 175; 4 | canvas.height = 310; 5 | 6 | function clearScreen() { 7 | ctx.clearRect(0, 0, canvas.width, canvas.height); 8 | } 9 | 10 | let music; 11 | let boxes = document.querySelectorAll('.mgc-switch'); 12 | let cloud = document.querySelector('#cloud'); 13 | let god = document.querySelector('#god'); 14 | let totalDrops = 0; 15 | let maxDrops = 500; 16 | let rainColors = ['#7ab7dd', '#a4cee8', '#FFF', '#113d59', '#9da5aa']; 17 | 18 | function newDrop() { 19 | return { 20 | x: ~~(Math.random() * canvas.width), 21 | y: ~~(Math.random() * canvas.height), 22 | height: ~~(Math.random() * 50), 23 | color: ~~(Math.random() * 5), 24 | update: function() { 25 | this.x += ~~(Math.random() * 1); 26 | this.y += 1 + ~~(Math.random() * 25); 27 | if (this.y > canvas.height) 28 | this.y = ~~(Math.random() * 10) 29 | } 30 | } 31 | } 32 | 33 | // Init 34 | let drops = []; 35 | for (let i = 0; i < maxDrops; i++) { 36 | drops.push(newDrop()); 37 | } 38 | 39 | // Update 40 | function update() { 41 | for (let i = 0; i < totalDrops; i++) 42 | drops[i].update(); 43 | clearScreen(); 44 | } 45 | 46 | // Render 47 | function draw() { 48 | if ((~~(Math.random() * 75) == 1) && (totalDrops > 400)) { 49 | ctx.fillStyle = '#FFF'; 50 | ctx.fillRect(0, 0, canvas.width, canvas.height); 51 | } 52 | for (let i = 0; i < totalDrops; i++) { 53 | ctx.lineWidth = 1; 54 | ctx.strokeStyle = rainColors[drops[i].color]; 55 | ctx.beginPath(); 56 | ctx.moveTo(drops[i].x, drops[i].y); 57 | ctx.lineTo(drops[i].x, drops[i].y + drops[i].height); 58 | ctx.stroke(); 59 | } 60 | } 61 | 62 | function loop() { 63 | requestAnimationFrame(loop, canvas); 64 | update(); 65 | draw(); 66 | } 67 | 68 | loop(); 69 | 70 | // Events 71 | boxes.forEach(function(e) { 72 | e.onclick = checkBox.bind(); 73 | }); 74 | 75 | function checkBox() { 76 | 77 | // First time 78 | if (!music) { 79 | music = new Howl({ 80 | src: ['https://manzdev.github.io/codevember2017/assets/tetris-a.mp3'], 81 | autoplay: false, 82 | loop: true 83 | }).play(); 84 | god.classList.add('appear'); 85 | } 86 | 87 | totalDrops = (boxes[0].checked ? 0 : 5) + 88 | (boxes[1].checked ? 25 : 0) + 89 | (boxes[2].checked ? 125 : 0) + 90 | (boxes[3].checked ? 170 : 0) + 91 | (boxes[4].checked ? 75 : 0) + 92 | (boxes[5].checked ? 100 : 0); 93 | 94 | if (totalDrops > 400) 95 | cloud.classList.add('verydark'); 96 | else if (totalDrops > 250) { 97 | cloud.classList.add('dark'); 98 | cloud.classList.remove('verydark'); 99 | } 100 | else if (totalDrops < 250) 101 | cloud.classList.remove('dark', 'verydark'); 102 | } 103 | -------------------------------------------------------------------------------- /day-6/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600|Shadows+Into+Light'); 2 | 3 | html { 4 | background:#050505; 5 | overflow:hidden; 6 | } 7 | 8 | .data { 9 | position:relative; 10 | z-index:1; 11 | text-align:center; 12 | width:275px; 13 | margin-left:auto; 14 | margin-right:2em; 15 | z-index:8; 16 | } 17 | 18 | h1, h2, .ghost { 19 | font-family:Montserrat; 20 | font-weight:600; 21 | margin:0; 22 | } 23 | 24 | h1 { 25 | font-size:64px; 26 | color:#444; 27 | } 28 | 29 | h2 { 30 | font-size:24px; 31 | color:#888; 32 | } 33 | 34 | .ghost { 35 | font-weight:400; 36 | font-size:15px; 37 | color:#CCC; 38 | display:inline-block; 39 | margin:6px 2px; 40 | padding:8px; 41 | border:1px solid #CCC; 42 | text-decoration:none; 43 | } 44 | 45 | a.ghost:hover { 46 | -webkit-transition:all .5s linear; 47 | transition:all .5s linear; 48 | background:rgba(50,50,50, .2); 49 | border-color:#10b0e5; 50 | color:#10b0e5; 51 | } 52 | 53 | #tasks { 54 | position:absolute; 55 | top:50px; 56 | left:100px; 57 | width:290px; 58 | height:400px; 59 | background:#e0db8f; 60 | color:#222; 61 | font-family:'Shadows into light'; 62 | font-size:32px; 63 | padding:25px; 64 | z-index:10; 65 | } 66 | 67 | #tasks h2 { 68 | color:#000; 69 | text-align:center; 70 | margin:0 0 1em 0; 71 | } 72 | 73 | #tasks label { 74 | display:block; 75 | } 76 | 77 | .mgc-switch { 78 | position:relative; 79 | top:3px; 80 | } 81 | 82 | #screen { 83 | position:absolute; 84 | top:0; 85 | left:0; 86 | width:100vw; 87 | height:100vh; 88 | z-index:10; 89 | pointer-events:none; 90 | } 91 | 92 | #cloud { 93 | width:180px; 94 | height:100px; 95 | margin:auto; 96 | display:block; 97 | position:relative; 98 | z-index:5; 99 | } 100 | 101 | #cloud path { 102 | fill:#FFF; 103 | -webkit-transition:all 1s ease-in-out; 104 | transition:all 1s ease-in-out; 105 | } 106 | 107 | #cloud.dark path { fill:#666 } 108 | #cloud.verydark path { fill:#222 } 109 | 110 | #rain { 111 | width:175px; 112 | left:calc(50% - (175px/2)); 113 | top:180px; 114 | position:absolute; 115 | z-index:1; 116 | } 117 | 118 | #god { 119 | position:relative; 120 | top:12px; 121 | width:128px; 122 | margin:auto; 123 | display:block; 124 | height:128px; 125 | opacity:0; 126 | -webkit-transition:all 2s ease-in-out; 127 | transition:all 2s ease-in-out; 128 | } 129 | 130 | .float { 131 | -webkit-animation:float 1s ease-in-out infinite alternate; 132 | animation:float 1s ease-in-out infinite alternate; 133 | } 134 | 135 | #god.appear { 136 | opacity:1; 137 | } 138 | 139 | #man { 140 | width:256px; 141 | height:256px; 142 | margin:auto; 143 | display:block; 144 | position:relative; 145 | /*top:116px;*/ 146 | bottom:0; 147 | left:10px; 148 | } 149 | 150 | @-webkit-keyframes float { 151 | 0% { -webkit-transform: translateY(-5px); transform: translateY(-5px) } 152 | 100% { -webkit-transform: translateY(5px); transform: translateY(5px) } 153 | } 154 | 155 | @keyframes float { 156 | 0% { -webkit-transform: translateY(-5px); transform: translateY(-5px) } 157 | 100% { -webkit-transform: translateY(5px); transform: translateY(5px) } 158 | } 159 | 160 | .off { 161 | display:none 162 | } -------------------------------------------------------------------------------- /day-6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 6: Storm 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Storm

19 |

#Codevember

20 | Code by Manz 21 | Music by Hirokazu Tanaka 22 |
23 | 24 |
25 |

Tasks

26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 | 43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /day-6/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var canvas = document.querySelector('#rain'); 4 | var ctx = canvas.getContext('2d'); 5 | canvas.width = 175; 6 | canvas.height = 310; 7 | 8 | function clearScreen() { 9 | ctx.clearRect(0, 0, canvas.width, canvas.height); 10 | } 11 | 12 | var music = undefined; 13 | var boxes = document.querySelectorAll('.mgc-switch'); 14 | var cloud = document.querySelector('#cloud'); 15 | var god = document.querySelector('#god'); 16 | var totalDrops = 0; 17 | var maxDrops = 500; 18 | var rainColors = ['#7ab7dd', '#a4cee8', '#FFF', '#113d59', '#9da5aa']; 19 | 20 | function newDrop() { 21 | return { 22 | x: ~ ~(Math.random() * canvas.width), 23 | y: ~ ~(Math.random() * canvas.height), 24 | height: ~ ~(Math.random() * 50), 25 | color: ~ ~(Math.random() * 5), 26 | update: function update() { 27 | this.x += ~ ~(Math.random() * 1); 28 | this.y += 1 + ~ ~(Math.random() * 25); 29 | if (this.y > canvas.height) this.y = ~ ~(Math.random() * 10); 30 | } 31 | }; 32 | } 33 | 34 | // Init 35 | var drops = []; 36 | for (var i = 0; i < maxDrops; i++) { 37 | drops.push(newDrop()); 38 | } 39 | 40 | // Update 41 | function update() { 42 | for (var i = 0; i < totalDrops; i++) { 43 | drops[i].update(); 44 | }clearScreen(); 45 | } 46 | 47 | // Render 48 | function draw() { 49 | if (~ ~(Math.random() * 75) == 1 && totalDrops > 400) { 50 | ctx.fillStyle = '#FFF'; 51 | ctx.fillRect(0, 0, canvas.width, canvas.height); 52 | } 53 | for (var i = 0; i < totalDrops; i++) { 54 | ctx.lineWidth = 1; 55 | ctx.strokeStyle = rainColors[drops[i].color]; 56 | ctx.beginPath(); 57 | ctx.moveTo(drops[i].x, drops[i].y); 58 | ctx.lineTo(drops[i].x, drops[i].y + drops[i].height); 59 | ctx.stroke(); 60 | } 61 | } 62 | 63 | function loop() { 64 | requestAnimationFrame(loop, canvas); 65 | update(); 66 | draw(); 67 | } 68 | 69 | loop(); 70 | 71 | // Events 72 | boxes.forEach(function (e) { 73 | e.onclick = checkBox.bind(); 74 | }); 75 | 76 | function checkBox() { 77 | 78 | // First time 79 | if (!music) { 80 | music = new Howl({ 81 | src: ['https://manzdev.github.io/codevember2017/assets/tetris-a.mp3'], 82 | autoplay: false, 83 | loop: true 84 | }).play(); 85 | god.classList.add('appear'); 86 | } 87 | 88 | totalDrops = (boxes[0].checked ? 0 : 5) + (boxes[1].checked ? 25 : 0) + (boxes[2].checked ? 125 : 0) + (boxes[3].checked ? 170 : 0) + (boxes[4].checked ? 75 : 0) + (boxes[5].checked ? 100 : 0); 89 | 90 | if (totalDrops > 400) cloud.classList.add('verydark');else if (totalDrops > 250) { 91 | cloud.classList.add('dark'); 92 | cloud.classList.remove('verydark'); 93 | } else if (totalDrops < 250) cloud.classList.remove('dark', 'verydark'); 94 | } 95 | -------------------------------------------------------------------------------- /day-6/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-7/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/YEWmGG. 2 | 3 | Day 7: Pillow 4 | --- 5 | 6 | HTML5, SVG 7 | CSS3 (Google Fonts) 8 | Javascript (HowlerJS) 9 | 10 | Credits: Coma (Skogens Djur) -------------------------------------------------------------------------------- /day-7/babel/index.babel: -------------------------------------------------------------------------------- 1 | let heart = document.querySelector('#heart'); 2 | let page = document.querySelector('#page'); 3 | let days = document.querySelectorAll('.day'); 4 | let phase = 0; 5 | let daysWeek = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun', 'monreboot']; 6 | let currentMusic = 0; 7 | let music = [new Howl({ 8 | src: ['https://manzdev.github.io/codevember2017/assets/skogens-djur-1.mp3?1'], 9 | onend: checkMusic.bind() 10 | }), new Howl({ 11 | src: ['https://manzdev.github.io/codevember2017/assets/skogens-djur-2.mp3?1'], 12 | onend: checkMusic.bind() 13 | })]; 14 | 15 | // days.forEach(function(e) { 16 | // e.onclick = pushDay.bind(event, e.classList[1]); 17 | // }); 18 | 19 | function pushDay(day, e) { 20 | //heart.className = day; 21 | page.className = day; 22 | 23 | if ((day == 'fri') || (day == 'sat')) 24 | currentMusic = 1; 25 | else 26 | currentMusic = 0; 27 | } 28 | 29 | function checkMusic() { 30 | music[currentMusic].play(); 31 | } 32 | 33 | checkMusic(); 34 | setInterval(loop, 10245 / 2); 35 | 36 | function loop() { 37 | phase = (phase + 1) % 8; 38 | pushDay(daysWeek[phase], page); 39 | } 40 | -------------------------------------------------------------------------------- /day-7/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var heart = document.querySelector('#heart'); 4 | var page = document.querySelector('#page'); 5 | var days = document.querySelectorAll('.day'); 6 | var phase = 0; 7 | var daysWeek = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun', 'monreboot']; 8 | var currentMusic = 0; 9 | var music = [new Howl({ 10 | src: ['https://manzdev.github.io/codevember2017/assets/skogens-djur-1.mp3?1'], 11 | onend: checkMusic.bind() 12 | }), new Howl({ 13 | src: ['https://manzdev.github.io/codevember2017/assets/skogens-djur-2.mp3?1'], 14 | onend: checkMusic.bind() 15 | })]; 16 | 17 | // days.forEach(function(e) { 18 | // e.onclick = pushDay.bind(event, e.classList[1]); 19 | // }); 20 | 21 | function pushDay(day, e) { 22 | //heart.className = day; 23 | page.className = day; 24 | 25 | if (day == 'fri' || day == 'sat') currentMusic = 1;else currentMusic = 0; 26 | } 27 | 28 | function checkMusic() { 29 | music[currentMusic].play(); 30 | } 31 | 32 | checkMusic(); 33 | setInterval(loop, 10245 / 2); 34 | 35 | function loop() { 36 | phase = (phase + 1) % 8; 37 | pushDay(daysWeek[phase], page); 38 | } 39 | -------------------------------------------------------------------------------- /day-7/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-8/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/EbNjWy. 2 | 3 | Day 8: Fridge 4 | --- 5 | 6 | HTML5, SVG 7 | CSS3 (Google Fonts) 8 | No Javascript 9 | 10 | Credits: Toby Fox / GameChops (Spook song) -------------------------------------------------------------------------------- /day-8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 8: Fridge 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

Fridge

18 |

#Codevember

19 |

Open the fridge!

20 | Code by Manz 21 | Music by Toby Fox/GameChops 22 |
23 | 24 |
25 | 26 |
27 |
28 |
29 |
Schrödinger's Fridge
30 |
31 | A wild cat! 32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
❓❓
50 | 51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 |
59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /day-8/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /day-9/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/eeBPaz. 2 | 3 | Day 9: French Fries 4 | --- 5 | 6 | HTML5 7 | CSS3 (Google Fonts, Animation CSS) 8 | Javascript 9 | 10 | Credits: Razor (Wings of Liberty Crack) -------------------------------------------------------------------------------- /day-9/babel/index.babel: -------------------------------------------------------------------------------- 1 | let factory = document.querySelector('#factory'); 2 | let music = new Howl({ 3 | src: ['https://manzdev.github.io/codevember2017/assets/wings.mp3'], 4 | loop: true, 5 | autoplay: true 6 | }); 7 | 8 | setTimeout(refill, 4950); 9 | setTimeout(reface, 8250); 10 | setInterval(reboot, 12000); 11 | 12 | function reboot() { 13 | document.querySelector('.fries').remove(); 14 | let newfries = document.createElement('img'); 15 | newfries.className = 'fries'; 16 | newfries.src = 'https://manzdev.github.io/codevember2017/assets/french-fries-empty.png'; 17 | factory.insertAdjacentElement('afterEnd', newfries); 18 | setTimeout(refill, 4900); 19 | setTimeout(reface, 8250); 20 | } 21 | 22 | function refill() { 23 | document.querySelector('.fries').src = 'https://manzdev.github.io/codevember2017/assets/french-fries.png' 24 | } 25 | 26 | function reface() { 27 | document.querySelector('.fries').src = 'https://manzdev.github.io/codevember2017/assets/french-fries-face.png' 28 | } 29 | -------------------------------------------------------------------------------- /day-9/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day 9: French Fries 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

French Fries

18 |

#Codevember

19 | Code by Manz 20 | Music by Razor 1911 21 |
22 | 23 |
24 |
25 | 26 | 27 | 28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /day-9/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var factory = document.querySelector('#factory'); 4 | var music = new Howl({ 5 | src: ['https://manzdev.github.io/codevember2017/assets/wings.mp3'], 6 | loop: true, 7 | autoplay: true 8 | }); 9 | 10 | setTimeout(refill, 4950); 11 | setTimeout(reface, 8250); 12 | setInterval(reboot, 12000); 13 | 14 | function reboot() { 15 | document.querySelector('.fries').remove(); 16 | var newfries = document.createElement('img'); 17 | newfries.className = 'fries'; 18 | newfries.src = 'https://manzdev.github.io/codevember2017/assets/french-fries-empty.png'; 19 | factory.insertAdjacentElement('afterEnd', newfries); 20 | setTimeout(refill, 4900); 21 | setTimeout(reface, 8250); 22 | } 23 | 24 | function refill() { 25 | document.querySelector('.fries').src = 'https://manzdev.github.io/codevember2017/assets/french-fries.png'; 26 | } 27 | 28 | function reface() { 29 | document.querySelector('.fries').src = 'https://manzdev.github.io/codevember2017/assets/french-fries-face.png'; 30 | } 31 | -------------------------------------------------------------------------------- /day-9/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /docs/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/1.png -------------------------------------------------------------------------------- /docs/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/10.png -------------------------------------------------------------------------------- /docs/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/11.png -------------------------------------------------------------------------------- /docs/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/12.png -------------------------------------------------------------------------------- /docs/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/13.png -------------------------------------------------------------------------------- /docs/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/14.png -------------------------------------------------------------------------------- /docs/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/15.png -------------------------------------------------------------------------------- /docs/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/16.png -------------------------------------------------------------------------------- /docs/17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/17.png -------------------------------------------------------------------------------- /docs/18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/18.png -------------------------------------------------------------------------------- /docs/19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/19.png -------------------------------------------------------------------------------- /docs/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/2.png -------------------------------------------------------------------------------- /docs/20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/20.png -------------------------------------------------------------------------------- /docs/21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/21.png -------------------------------------------------------------------------------- /docs/22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/22.png -------------------------------------------------------------------------------- /docs/23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/23.png -------------------------------------------------------------------------------- /docs/24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/24.png -------------------------------------------------------------------------------- /docs/25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/25.png -------------------------------------------------------------------------------- /docs/26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/26.png -------------------------------------------------------------------------------- /docs/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/3.png -------------------------------------------------------------------------------- /docs/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/4.png -------------------------------------------------------------------------------- /docs/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/5.png -------------------------------------------------------------------------------- /docs/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/6.png -------------------------------------------------------------------------------- /docs/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/7.png -------------------------------------------------------------------------------- /docs/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/8.png -------------------------------------------------------------------------------- /docs/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/codevember2017/03b8ce2f4f3a3a5e809670e119365908b0bcf4e5/docs/9.png -------------------------------------------------------------------------------- /extra-day/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/KyBWvV. 2 | 3 | Day Extra: Finish 4 | --- 5 | 6 | HTML5 7 | CSS3 (Google Fonts, Animation) 8 | JS (Howler.js) 9 | 10 | Credits: Nintendo (Super Mario Kart) -------------------------------------------------------------------------------- /extra-day/babel/index.babel: -------------------------------------------------------------------------------- 1 | const win = new Howl({ 2 | src: ['https://manzdev.github.io/codevember2017/assets/winning.mp3'], 3 | volume: 0.4, 4 | autoplay: true 5 | }); 6 | 7 | const fish = new Audio('https://manzdev.github.io/codevember2017/assets/fish.mp3'); 8 | const drop = new Audio('https://manzdev.github.io/codevember2017/assets/drop-cup.mp3'); 9 | const finish = new Audio('https://manzdev.github.io/codevember2017/assets/finish.mp3'); 10 | 11 | function fishSwim() { 12 | fish.currentTime = 0; 13 | fish.play(); 14 | } 15 | 16 | function fishDrop() { 17 | drop.play(); 18 | } 19 | 20 | function fishFinish() { 21 | finish.play(); 22 | } 23 | 24 | for (let i = 1; i < 10; i++) { 25 | setTimeout(fishSwim, i * 500) 26 | setTimeout(fishSwim, (i * 500) + 9000) 27 | } 28 | 29 | setTimeout(fishDrop, 6000); 30 | setTimeout(fishFinish, 16000); 31 | -------------------------------------------------------------------------------- /extra-day/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | #codevember - Day Extra: 🏆 Finish 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 |
19 |
20 |
21 |
22 | 23 |
24 | 25 | 26 | 😃 27 |
28 |
29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /extra-day/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var win = new Howl({ 4 | src: ['https://manzdev.github.io/codevember2017/assets/winning.mp3'], 5 | volume: 0.4, 6 | autoplay: true 7 | }); 8 | 9 | var fish = new Audio('https://manzdev.github.io/codevember2017/assets/fish.mp3'); 10 | var drop = new Audio('https://manzdev.github.io/codevember2017/assets/drop-cup.mp3'); 11 | var finish = new Audio('https://manzdev.github.io/codevember2017/assets/finish.mp3'); 12 | 13 | function fishSwim() { 14 | fish.currentTime = 0; 15 | fish.play(); 16 | } 17 | 18 | function fishDrop() { 19 | drop.play(); 20 | } 21 | 22 | function fishFinish() { 23 | finish.play(); 24 | } 25 | 26 | for (var i = 1; i < 10; i++) { 27 | setTimeout(fishSwim, i * 500); 28 | setTimeout(fishSwim, i * 500 + 9000); 29 | } 30 | 31 | setTimeout(fishDrop, 6000); 32 | setTimeout(fishFinish, 16000); 33 | -------------------------------------------------------------------------------- /extra-day/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | --------------------------------------------------------------------------------