See the Pen CSS Game:Battleships by Daniel Schulz Playing Around With CSSĬSS provides us with more than just a way to make our websites look attractive.
#CRAZY GAMES FILL THE GAP CODE#
Take a look through the code to see how it works. While it’s not quite as secretive as the physical version, it does provide an excellent foray into conditional logic. Grab a friend (or your alter ego) and play a spirited game of Battleship – powered only by CSS. See the Pen Pure CSS Game:Stacker by Jerry Low You Sunk My Battleship by Daniel Schulz Now, if I could just find my old Game Boy!
It may sound easy enough but requires precise timing to get right. Reminiscent of Tetris, this game challenges you to stack groups of moving blocks on top of each other. See the Pen Pure CSS ghost bustin’ game w/ CSS variables 👻🕹#CodePenChallenge by Jhey Stack ‘em High by Jerry Low It’s a good demonstration of timing animations with CSS. The difference here is that you only have 15 seconds to work with. This time around, we’re hunting down ghosts in a whack-a-mole type of setup. Here’s another shooter game – but with a twist.
#CRAZY GAMES FILL THE GAP MOVIE#
See the Pen Guess The Movie – a mini CSS game by Inès I Ain’t Afraid of No Ghosts by Jhey CSS will tell you if you’ve entered the right one (or you could just look at the source code). But each form input only has a single valid letter. From there, you’re expected to type in the movie’s name. This little trivia/hangman-style game makes clever use of the CSS :valid and :invalid pseudo-classes to guide you towards a correct answer.įirst, you’re shown a set of emojis that represents a movie. See the Pen Pure CSS Cake 100×50 Game 🎂🎉 by Jhey Guess the Movie Inès Move your cursor too far, though, and you’ll have to start all over again. If you make it through, you shall be rewarded. Hover over a tiny box and avoid the little crumbs and sprinkles. But this game may drive you mad in its pursuit, as it takes some skill with your mouse. See the Pen Demon Killer II by Mark Sottek You Want Cake? You’d Better Earn It by Jhey A quick look under the hood reveals that HTML checkboxes and animated GIFs make the whole thing work. Place your cursor over a demon and click to send them packing. Here’s a simple shooter game that asks you to take out some demonic minions (no, not those minions). See the Pen CommitSweeper – Pure CSS Game by Stephanie Eckles Save the World from Demons by Mark Sottek
Again, CSS is used to generate “random” locations for each mine. See how many squares you can paint before hitting one of those pesky mines. This game combines the classic premise of Minesweeper with the look of a GitHub contribution graph. See the Pen Pure CSS Game Rock Paper Scissor by Jerry Low Minesweeper for Git Commits by Stephanie Eckles The game uses HTML radio buttons and some random CSS to power the match. If you don’t have a partner to play along with, you can give this virtual version a go.Ĭlick on your weapon of choice and then on the “Fight!” button to see how you did. Start Downloading Now! Rock, Paper, Scissors by Jerry LowĪ rock, paper, scissors session is always a great way to beat boredom.
0 kommentar(er)
