HTML5: Background Generator

 

 

HTML5: Background Generator

 

 

Background Generator (BG) provides the ability to edit the background of any website in real-time! To give you an idea, the backgrounds of the Journal, Photos, Projects, and Labs sections of Mudcu.be were created using BG.

BG allows you to create fancy Web 3.0 backgrounds without getting dirty with Photoshop, GIMP, ect. The project includes a collection of textures (wood, rust, paper, concrete and so-on) which are combined with custom linear-gradients and colors to create a wide assortment of themes.

BG outputs valid CSS3 code, and also supports older browsers back to CSS1.  Supporting CSS1 is accomplished through the fallback of using of an embedded JPEG. Designers targeting newer browsers will also be happy; BG supports -moz-linear-gradient (for Firefox), -o-linear-gradient (for Opera) and -webkit-gradient (for Safari/Chrome) with multiple color-stops. Additionally, BG outputs DXImageTransform (Internet Explorer) code, as long as there are no more than two color-stops; IE can support multiple color-stops by using the fallback method (JPEG). Supporting browsers across the spectrum: IE, Firefox, Safari, Chrome, and Opera.

Please enjoy, and if you find it useful, post the website you designed here!

Ref: http://mudcu.be/journal/2011/03/html5-background-generator/

20 Stunning Games Built in HTML5

HTML5 is the new and updated version of HTML, the common language of the internet. It is currently in the process of being adopted around the world. But at this point we are merely seeing the surface of its possibilities. HTML5 is still in its infancy, but developers are starting to experiment with what it can do, which has created some pretty interesting results. The HTML5 specification itself isn’t supposed to be “officially” ratified for another 10 years, but millions of developers and web companies have already made the switch and many more are doing so every day. One of these experiments have led the developers to start making games in HTML5. One of the real measures of whether HTML5 will take off will be how well it will support the gaming industry.

The HTML5 specification introduces cool new features for making games, such as the CanvasVideo, andAudio elements. When HTML5 is combined with the other exciting web technologies that make up the Open Web Platform, plugin-free gaming can be taken to a whole new level. In their most basic form, HTML5 games consist ofjavascript with the new HTML5 Canvas element.

In this post we are publishing 20 Stunning Games Built in HTML5 for your Inspiration for your Inspiration. I really hope that these might inspire you to start learning about html5 and how it should be used and how to implement it

Space War

Html5 Games 2.jpg

Animals Puzzle

Crystal Galaxy

Html5 Games 3.jpg

Space Cannon

Html5 Games 4.jpg

Sand Trap

Html5 Games 5.jpg

Bubble

Html5 Games 6.jpg

Game

Html5 Games 7.jpg

Dark Age

Html5 Games 8.jpg

Game

Html5_Games_9.jpg

Html5-Helicopter

Html5_Games_10.jpg

Oribum

Html5_Games_11.jpg

Angry Birds

Html5_Games_12.jpg

Pirates Daisies

Html5_Games_13.jpg

Google Pac-Man

Html5_Games_14.jpg

Biolab Disaster

Html5_Games_15.jpg

Chain Reaction

Html5_Games_1.jpg

Agent8ball

Html5_Games_16.jpg

COCO LOCO

2011-06-18_131619.jpg

Battle For Beauty

2011-06-18_132509.jpg

Ztype

2011-06-22_135017.jpg

Solitaire

solitaire_in_html5

From http://artatm.com/2011/07/20-stunning-games-built-in-html5/

5 Awesome HTML5 Games

It’s the end of the week, and it’s been a while since I last looked at native browser-based games. I’ve therefore picked a new selection for your research purposes … it’s amazing how far the technology has progressed within a few short months.

The following examples have all been implemented using HTML5 technologies such as canvas and JavaScript. They work in most modern browsers, but most won’t work in Internet Explorer 8.0 and below. Chrome or Opera generally provide the best experience.

Biolab DisasterBiolab Disaster

While I’m far too young to remember 8-bit gaming in the 1980s, Biolab is a homage to those simpler but addictive titles from 20-30 years ago. The game is a space-themed platformer with colorful chunky sprites, great animation and sound effects. The developer, Dominic Szablewski, has also released the canvas-based library at ImpactJS.com.

Biolab is a fine game. In fact, it’s better than many released in the 80s … so I’ve heard.

Crystal GalaxyCrystal Galaxy

Crystal Galaxy is a sideways scrolling space shooter reminiscent of R-Type. However, the game’s unique in that the mouse controls the direction of the ship as well as its location.

Unusually, Crystal Galaxy doesn’t use the HTML5 canvas element. Every sprite is an individual HTML div moved around the screen. It works quickly in all browsers and is even playable in IE6! The authors at EffectGames.comalso provide free tools and libraries to help you write your own titles.

Crystal Galaxy is fun, and you won’t be able to resist another go.

Canvas RiderCanvas Rider

As you might expect, Canvas Rider is a version of Line Rider implemented using the HTML5 canvas element. The game is simple: you ride a bicycle over a series of obstacles to reach a goal — but the realistic gravity and physics make it a serious challenge.

What makes Canvas Rider more special is the online track editor and the thousands of tracks submitted by fans of the game.

Agent 008 BallAgent 008 Ball

Agent 008 Ball is a glorious-looking game of pool for one player. The objective is to pot as many balls as possible before the timer runs out.

Again, Agent 008 Ball uses the HTML5 canvas element, but it’s the photo-realistic graphics and real-world physics make the game stand out.

Pirates Love DaisiesPirates Love Daisies

Pirate Love Daisies is a Tower-Defense-like game which pushes the boundaries of what’s possible with HTML5 and JavaScript. It was written by Flash developer Grant Skinner who was commissioned by Microsoft to create a game which showed off the new technologies in IE9.

The game works well in most browsers but, as you’d expect, it’s best on a fast PC using a browser with native hardware-accelerated graphics. For the moment, IE9 beta offers the best experience.

While a browser is never likely to be the best platform for games, these titles show that a little ingenuity can yield amazing results. What’s your favorite, and have you discovered any awesome HTML5 games?

Copy from http://www.sitepoint.com/5-awesome-html5-games/#fbid=LqpE_QalsEi

30 the best HTML5 Games

HTML5 is set to revolutionise the creation of online games over coming years. Here, we present you with the longest list of HTML5 games available on the internet.

We love Flash. Until recently, it has provided the easiest and most powerful way of creating the online games that we showcase on this blog. It is not going too far to say that Flash spawned the online casual gaming industry. Without it, game studios would have found it almost impossible to provide online the slick animations, vector graphics and lightning fast interactivity that gamers demand.

They would have been forced to resort to the old way of doing things, painstakingly creating games using difficult-to-learn operating system specific technologies. These games would be expensive to develop, would only work on one operating system (so if you were on a Mac, you would have a problem) and users would be forced to download the games to play them.

At the very least, there would be far fewer free games available in a world without Flash compared to the tens of thousands that are on offer to internet users today. As we said, we love Flash. But we are also aware of its limitations. Developers have to buy expensive software in order to create Flash games. Flash is not open source, limiting what people can do with it. Flash also requires a browser plugin to work.

That is why we are excited about a new, emerging technology called HTML5. HTML5 is open source, completely free and, as you will see later, powerful enough to create fun and addictive online games. There are some problems with HTML5, as you would expect from any new technology, but these are likely to be overcome over coming years, especially as the technology has the support of some of the biggest names in web technology: Google, Apple and, belatedly, Microsoft.

The big issue with HTML5 at present is that older browsers – in particular Internet Explorer – do not support it. In order to play the games we have listed below, you will need to ensure that you have a modern browser. We recommend one of the following -ChromeSafari or Firefox. If you are an Internet Explorer user and you don’t want to change to a different browser, we recommend you install this plugin. It will invisibly upgrade your browser to the latest standards. I know this is a pain but, just think, you will be among the first in the world to experience HTML5 gaming.

Okay, now that you are all prepared for the HTML5 goodness that awaits you, let’s go straight to the games:

Vii, Best 30 HTML5 Games, Casual Girl Gamer

1.

A slick physics-based puzzle platformer by Matt Pelham, one of the leading lights in HTML5 gaming. You wake up in a laboratory with none of the super powers that you are used to. A computer voice gives you instructions on how you can regain your powers. One of the best looking HTML5 games out there. The movement is a little sluggish but the realistic physics and neat graphics provide the perfect demonstration of the gaming possibilities offered by HTML5. You can play Vii here.

3Bored, Best 30 HTML5 Games, Casual Girl Gamer

2BORED

One concern about HTML5 in the early days was that it would simply not be fast enough for games. There was no need to worry. HTML5 is proving itself to be easily powerful enough to create the lightning fast games that gamers crave, as 3Boredproves. 3Bored is one of the fastest actions games we have played in a browser. You play the part of a little rocket-propelled creature under attack from a whole host of enemies. You dart around the screen like a maniac trying to avoid the bullets that are criss-crossing all around you. The longer you avoid dying, the more points you get in this fun and addictive survival game.

3Bored also highlights another of the advantages of HTML5 over Flash. The game effortlessly scales to the size of your browser window – most Flash games are of a fixed size and do not therefore take advantage of all the available space. 3Bored can be played here.

Swarmation, Best 30 HTML5 Games, Casual Girl Gamer

3SWARMATION

The team behind Swarmation were originally planning to simply create a web app that demonstrated the power of HTML5′s networking capabilities. But what they inadvertently ended up with was one of the most interesting multi-player puzzle games we have seen. Your task in the game is to work with others to create a particular shape out of little squares. You only have a limited period of time to get your own little square into position. If your square forms part of the desired shape when the timer reaches zero, then you are rewarded with some points. You are then presented with a new shape that you need to form, and the cycle repeats. As a single player game, Swarmnation would not have much going for it, but as a multi-player game, (despite some odd bugs) it absolutely rocks. Play Swarmation here.

Sinuous, Best 30 HTML5 Games, Casual Girl Gamer

4SINUOUS

The developer of Sinuous deserves credit for coming up with a unique idea for a game. Certainly, I have not seen anything like it before. Sinuous is perhaps best described as an amalgam ofBoomshine and the classic snake game. You must navigate your ‘snake’ around the screen without touching the moving circles. It is not as easy as it initially seems. Sinuous is a mesmeric and relaxing game with that just-one-more-time quality that all games strive for but few achieve. Sinuous can be played here.

Crystal Galaxy, Best 30 HTML5 Games, Casual Girl Gamer

5CRYSTAL GALAXY

This space shooter game features a really neat way of controlling the direction of your space craft using your mouse. This is not the only cool thing about the game. Crystal Galaxyalso offers some of the fastest action we have seen in an HTML5 game. Plus, the graphics and music are top notch. You would not know that it wasn’t Flash. This is not the kind of game I would usually play but technically it is brilliant and it would be criminal not to include it near the top of this list. Crystal Galaxy can be played here.

Onslaught, Best 30 HTML5 Games, Casual Girl Gamer

6ONSLAUGHT

Created by Lost Decade GamesOnslaught is a fun defend-your-castle-style game that, with its cute, pixelated graphics, harks back to the 8-bit era of gaming. You need to fight off waves of enemies attacking your castle. Things start off pretty easy but each new wave is stronger than the last, featuring ever more powerful enemies, that you soon find yourself in a desperate fight for survival. You can play Onslaught here.

Space Cannon, Best 30 HTML5 Games, Casual Girl Gamer

7SPACE CANNON

The mysteriously named Mr Doob is a legend in the world of Flash and javascript programming. He plays the browser like a virtuoso musician plays the piano, time and time again creating browser-based animations and artworks that bedazzle with their ingenuity and creativity. His work for the Johnny Cash Project for one should not be missed. Needless to say, the possibilities offered by HTML5 have not passed him by. Space Cannon is one of the first games he has created using his new HTML5 3D gaming engine. You are put in charge of a cannon and set the task of destroying all incoming obstacles. This could be quite boring but the game’s physics engine turns what could be a tedious, repetitive task into an intriguing challenge requiring quick reflexes and precision accuracy. You can play Space Cannon here.

The Legend of Sadness, Best 30 HTML5 Games, Casual Girl Gamer

8THE LEGEND OF SADNESS

Fans of the early top-down Zelda games will love this game. The cute, cartoony graphics and fun puzzles of The Legend of Sadness are clearly a tribute to the Nintendo masterpieces of the 1990s. You play a young boy on a quest to lift the curse from his village. The game is very short (it was originally developed as a demo for the Akihabara game engine rather than a fully-fledged game) but the little that you get does not disappoint. The game also features a cool twist ending. The Legend of Sadness can be played here. Be aware that when it asks you to press the ‘A’ key you should press the ‘z’ key. In the game, use the arrow keys to move around, ‘z’ key to fire your weapon and ‘x’ to interact with people.

Sand Trap, Best 30 HTML5 Games, Casual Girl Gamer

9SAND TRAP

Physics games are all the rage at present. Our list of the Top 30 Physics Games, published earlier in the year, remains one of the most visited pages on our blog. This game - Sand Trap - would probably have made the list if we were compiling it now. All the more impressive given that it was developed from scratch in HTML5 rather than using one of the many pre-made physics engines available to Flash developers. The aim of the game is to move the grains of sand to the desired location by rotating different containers. The way that each grain of sand moves independantly is particularly impressive. Play the gamehere.

DHTML Lemmings, Best 30 HTML5 Games, Casual Girl Gamer

10DHTML LEMMINGS

You could argue that DHTML Lemmings is not truly an HTML5 games, and you would be right. The game was developed several years ago – long before anyone had even thought of HTML5. However, the game does use the javascript programming language (which is also used extensively in HTML5 games), and it has done an amazing job of showcasing what can be achieved in the browser without Flash, and so we think we can justify including it. The game is a faithful reproduction of the legendary PC puzzle game Lemmings, where over a series of levels you have to help the lemmings reach their destination. The only difference we can see is that the game can be played in the browser. Truly an amazing technical feat. You can play the game here.

Sandpit, Best 30 HTML5 Games, Casual Girl Gamer

11SANDPIT

Brent Silby has been developing games with HTML5-like technologies for almost as long as the web has been around. He deserves far more recognition for his work in this area. His latest HTML game, created for the Casual Gameplay Design Competition, is Sandpit, an innovative driving game where you have to pave over a sandpit using a truck, avoiding various monsters in the process. Unusual but strangely addictive. You can play Sandpit here.

Fontanero, Best 30 HTML5 Games, Casual Girl Gamer

12FONTANERO

Fontanero is one of the best clones of that legendary game Nethack that we have seen, and it is done entirely in HTML5. Developed for A List Apart’s 10k competition, the game replaces the ascii characters of the original Nethack with clean illustratve icons. This makes the game not only much better looking than Nethack (fans of the original may disagree!) but also much easier to play. The monsters, potions and other items littered around the game actually look like what they are meant to be (well, some of them, anyway). Fontanero can be played here.

Brain Snackers, Best 30 HTML5 Games, Casual Girl Gamer

13BRAIN SNACKERS

Matt Pelham’s Brain Snackers is undoubtedly the best isometric-style HTML5 game we have come across. It features great graphics, slick animations and an intriguing storyline. A deadly virus has wiped out most of humanity. Many of those left have been transformed into zombie-like creatures with an appetite for human flesh. You awake, alone and defenceless. You better find a weapon fast, else you are going to be zombie meat in no time… Brain Snackers can be played here.

Leisure Suit Larry, Best 30 HTML5 Games, Casual Girl Gamer

14LEISURE SUIT LARRY

In the 1980s and 1990s, Sierra Entertainment created some of the most influential adventure games in the history of gaming. Games like King’s Quest, Space Quest and Lesiure Suit Larry proved huge hits at the time. Now, thanks to the work ofSarien.net, many of these games have been ported to HTML5 and can be played in the browser for free. For this list, we’ve picked out one of the Sierra games - Lesiure Suit Larry. You should be warned that this game has a very adult theme. Strictly for adults only. If you are not easily offended, play Leisure Suit Larry here. Else check out some of Sierra’s tamer titles such as King’s Quest or Gold Rush.

Dark Age, Best 30 HTML5 Games, Casual Girl Gamer

15DARK AGE

We could quite easily have filled this list with games by Brent Silby. He has probably created more HTML5-style games than anyone else in the world, and all of them are of a high quality. One of our favourites is Dark Age, a top down action adventure game inspired by the legendary Atari game Gauntlet. You can play the game here. Once you have finished the game, make sure you visit Brent’s site and check out his other HTML5 games here.

Thrust 2010, Best 30 HTML5 Games, Casual Girl Gamer

16THRUST 2010

Most of you are probably not old enough to remember the gameThrust. It was one of the best games available on that legendary 1980s gaming computer the Commodore 64. Now you can play the game in your browser for free, thanks to the power of HTML5. The 2010 version of the games features all the addictive game play of the original – navigate your craft around the cave without smashing into the walls. You can play Thrust 2010 here.

Torus, Best 30 HTML5 Games, Casual Girl Gamer

17TORUS

There are so many variations of Tetris to play on the web (very few of which add much to the original game) that to say that we are unexcited when we hear of a new one could be the understatement of the year. But, surprisingly, the version of Tetris seen in this game is actually worth a second look. The game is also the perfect showcase of the 3d capabilities that HTML5 has to offer. Play Torus here.

Infiltration, Best 30 HTML5 Games, Casual Girl Gamer

18INFILTRATION

Infiltration is a unique take on the defend-your-castle game genre. While most games of this type expect you to use your mouse or a couple of keys to aim and fire your weapon at the enemy hordes, this game puts the whole keyboard at your disposal. The direction that you fire your weapon is determined by which key you press. The game manages to be both fun and challenging. You can play Infiltration here.

Missile Fleet, Best 30 HTML5 Games, Casual Girl Gamer

19MISSILE FLEET

Missile Fleet was one of the first games on the web to take advantage of HTML5′s canvas technology. But that is not the only thing impressive about it. It is also one of the best looking HTML5 games, featuring mesmerising explosions and beautiful bullet tracers. You are in charge of the red team in this space strategy game and your task is to destroy the blue team. Select multiple units using your mouse, and click where you want them to go. Play Missile Fleet here.

Bombada, Best 30 HTML5 Games, Casual Girl Gamer

20BOMBADA

Bombada is a slickly produced match-three-or-more-of-a-kind puzzle game featuring cute graphics and addictive game-play. The game was built on Lost Decade Games’s Diggy HTML5 game engine. You can play Bombada here.

Bubble Trouble, Best 30 HTML5 Games, Casual Girl Gamer

21BUBBLE TROUBLE

This is a pretty faithful reproduction in HTML of the kind of colour-matching Bejewelled-style puzzle games that can be found all over the web in Flash. Although it is designed for use on an iPhone, it can also be played perfectly satisfactorily on a laptop or desktop. The game was developed by Janos Pal Toth, a Hungarian javascript wizard who lives in London. He is also the man behind PicFog, the impressive real-time image search app. Play Bubble Trouble here.

10K Sniper, Best 30 HTML5 Games, Casual Girl Gamer

2210K SNIPER

Another entry into A List Apart’s 10k competition, this game puts you in the shoes of a sniper. Carefully scan over the cityscape to find your target, and then without a moment’s hesitation take him out. 10k Sniper can be played here.

Blink Wang, Best 30 HTML5 Games, Casual Girl Gamer

23BLINK WANG

This is quite a cute idea. The game flashes a number of objects on the screen for the briefest of moments, and asks you to guess how many there are. There is not enough time to count them, or sometimes even identify what they are, so you have to rely on instinct or intuition. The funny thing is that after repeated plays, your intuition seems to get better. Can intuition be learnt? This game appears to show that it can. Play Blink Wang here.

Chain Reaction Advanced, Best 30 HTML5 Games, Casual Girl Gamer

24CHAIN REACTION ADVANCED

Games don’t always need brilliant graphics and great storylines to be a success. Sometimes less is better. That is certainly true of Boomshine, one of the simplest and most addictive games to come out of the Flash scene in recent years. You simply click to create an explosion that sets off other explosions when moving balls come into contact with it. Those explosions in turn create more explosions and so on. The more explosions you create, the greater your score. This game - Chain Reaction Advanced - is basically an HTML5 clone of Boomshine (though it does add some small twists on the game play). Nothing wrong with that – if it ain’t broke… You can play Chain Reaction Advanced here.

HTML5 Helicopter, Best 30 HTML5 Games, Casual Girl Gamer

25HTML5 HELICOPTER

You’ve probably come across games like this before. Navigate your helicopter through the cave using just one key. Hold down the key to increase thrust from the helicopter’s rotors and increase the altitude of your craft, lift up on the key to reduce thust and lose altitude. See how long you can go before, inevitably, you crash into the cave wall. HTML5 Helicopter can be played here.

Entanglement, Best 30 HTML5 Games, Casual Girl Gamer

26ENTANGLEMENT

A relaxing puzzle game where you have to create the longest wiggly line by rotating shapes engraved with line segments. The game reminds me a lot of Loops of Zen in its relaxing, slightly hypnotic feel. Play Entanglement here.

Orbium, Best 30 HTML5 Games, Casual Girl Gamer

27ORBIUM

Orbium is an interesting puzzle game where the challenge is to collect together spheres of the same colour. The puzzles start off pretty easy but as you progress through the levels they get steadily harder. Orbium can be played here.

Cover Fire, Best 30 HTML5 Games, Casual Girl Gamer

28COVER FIRE

This is a remake of the classic Atari game Crossfire from the 1980s. You are the pilot of a small craft exploring a foreign planet. You are under attack from the local fauna. Stay alive by moving constantly and firing through the gaps at your enemies. Don’t forget to pick up the gems and other bonus items. Play Cover Fire here.

Blobby Volley 2, Best 30 HTML5 Games, Casual Girl Gamer

29BLOBBY VOLLEY 2

I got hooked on an earlier Mac version of this volley ball-inspired game, so may be a bit biased in including it in the list. The updated version plays very similar to the original but is lacking one key feature – there is no computer AI, so you will need to play the game with someone else. Blobby Volley 2 can be played here.

JSNebulo, Best 30 HTML5 Games, Casual Girl Gamer

30JSNEBULO

This is a pseudo 3d platform game. You need to help Mr Frog reach the top of the tower by leaping between platforms, avoiding enemies, taking lifts and climbing stairways. Watch out for the platforms that disappear shortly after you step on them. You can play JSNebulo here.

We hope you enjoyed our list of HTML5 games. If you come across any other great HTML5 games, please tell us all about them in the comments section below.

Copy from http://www.casualgirlgamer.com/articles/entry/28/The-Best-30-HTML-5-games/

10 Excellent HTML5 Examples

HTML5 is a reality. With the improvements in Microsoft’s Internet Explorer 9, every major browser vendor now supports significant portions of the standard.

With this in mind, I set out to find sites that were putting HTML5 to use to producing new effects or improved user experiences. Below are ten excellent examples of sites that are using HTML5 right now.

The Bifter

The Bifter takes advantage of HTML5 scalable vector graphic (SVG) capabilities to produce a monthly comic. Be sure to check out the source code.

The Bifter

Apple

MP3 player, smartphone, and tablet powerhouse, Apple, is running HTML5 on its site. It looks beautiful.

Apple

Microsoft IE 10 Test Drive

Microsoft’s Internet Explorer 10 Test Drive site is, as you might expect, running HTML5. Check out the “Fishbowl Benchmark” — in the lower left — in a few different browsers. The results might surprise you.

Microsoft Test Drive Site

Agent 008 Ball

Agent 008 Ball is a smooth running HTML5 game from the folks at Pixel Lab.

Agent 008 Ball

Google

Surprised? Google, the top search engine, has been running HTML5 for some time.

Google

Nike Better World

This Nike micro-site makes extensive use of HTML5.

Nike Better World

Mozilla

The Mozilla Foundation, which makes Firefox, Thunderbird, and several other open web products, uses HTML5 for its site. There is even a “Demo Studio” — on the lower right — that you’ll want to check out.

Mozilla

Lommé

This sleek and modern ecommerce site runs on HTML5.

Lomme

Cherry Blossom

Cherry Blossom is the portfolio site for a cake maker in Queenstown, New Zealand.

Cherry Blossom

Kevin Roast’s Asteroids

Kevin Roast wrote this Asteroids game to learn the HTML5 canvas API.

Asteriods

Copy from http://developer.practicalecommerce.com/articles/2729-10-Excellent-HTML5-Examples

Ping your blog, website, or RSS feed for Free Sitetag