YetiBowl. One Yeti, three platforms...

Today's Modern/Mobile Monday project fun project that shows the same (well, same'ish) HTML5 game on three different platforms... oh, and the source is available for all three too.

clip_image002

Now with more Cow Bell!

For those of you who haven’t been following the antics of the Yeti, we’ve been using this demo game and content around the world to instruct and inspire developers to produce games in HTML5.  Today I’m happy to announce the release of the Yeti Triple Play (Window 8 App, Web and Windows Phone 8) codebase on CodePlex.

Check out the details below:

What is YetiBowl?

YetiBowl is a HTML5 game development workshop.  With Windows 8 HTML5 development, we have the opportunity to reach a whole new community of developers.  These web developers have been “left out” of the app market opportunities of the last few years, and windows 8 provides them an opportunity to get in the game.  With the most recent release of the code base, we now have a version ported to Windows Phone 8 as well!

How do you play the game?

Yeti bowl is a challenge oriented game where you play the Yeti.  Armed with snowballs you have to knock the hikers off the mountain before they reach the summit.  Once three hikers reach the top of the summit, game over.  Go ahead and try the web version of the game.  My high score is 126, good luck!

clip_image003

Why is Yeti Bowl special?

Yeti blow show the powerful portability of HTML5. With no changes to the code base, this web based game can easy be ported to both a Window 8 app and a Windows Phone 8 App.  You�ll see our Windows 8 App is also tricked out with additional features utilizing a handful with Windows 8 APIs to differentiate the App version from the web version of the game.  View our Code Base to see the examples.

clip_image004

 Who is this for?

 In this workshop, you’ll be able to gear it to a few different audiences, including the following.

Students:  We’ve geared this deck to take a developer from the basics of building an HTML5 app, to the advanced features that will set an app apart.  Any student with a basic understanding of web standards should be able to be successful in this workshop.  These sessions would actually go quite well in an event geared towards web standards.

Corporate partners:  Many companies have their development teams stacked with software engineers who have web development skills.  Where other platforms have forced them to “retool” developers (by teaching them an unfamiliar language) to build a native app, Windows 8 lets them build apps in the languages they already know and love. Some partners have reported development times up to 5X faster with HTML5/JS Windows 8 Apps, as compared to iOS apps using the same web services.

Web Developers:  Developers with asp, php, or even ruby skill sets will be comfortable with the constructs of an HTML page and JavaScript files.  Whether they are familiar with traditional Microsoft technologies or not, HTML5/JS app development often provides enough familiar grounds for them to build a great app.  If you are introducing the Windows Store App development environment to a group who haven’t worked in our ecosystems before, I’ve noted HTML5/JS has been the language they prefer.

JavaScript Developers: JavaScript developers have endless opportunities inside of a windows 8 app.  They can use their same skill set, and some of their same js libraries to build windows 8 apps.  Within the decks, some slides are hidden or whole sections tacked on to the end of the decks that can be pulled in for advanced users like JavaScript conferences or user groups.

HTML5 YetiBowl game: an HTML5 cross browser version of the game that works with keyboard or touch.  The game can be found in the “web” folder:

https://yetibowl.codeplex.com/SourceControl/changeset/view/1738d57d6e63#YetiBowl_web/game.html

Windows 8 game:  the windows 8 game requires you install the Microsoft Ad SDK first [GD: Which you can find via Microsoft Advertising SDK for Windows 8 - Getting Started - Prerequisites]. You should then be able to open the game and install it:

https://yetibowl.codeplex.com/SourceControl/changeset/view/1738d57d6e63#YetiBowl_Win8/YetiBowl/game.html

Windows Phone 8 game:  the web version of the game ported to windows phone 8.  See Matthias demonstrate how easy it was to convert this web based game into a Windows Phone 8 App. 

https://yetibowl.codeplex.com/SourceControl/changeset/view/1738d57d6e63#YetiBowl_WP8/Yeti/Html/game.html

Live coding version of talk:  From build 2012, Giorgio presented a session in which he live coded an HTML5 game then converted it to a Windows 8 Store app, all within the one hour session:

http://channel9.msdn.com/Events/Build/2012/3-110

Feedback

This is version 1.1, and I want to continue to develop this content.  For that to happen I need your feedback.  Feel free to change this content to fit your need.  I only ask that you share your additions or improvements back with me so I can incorporate them into the original version. Send feedback to jeffburt@microsoft.com.  Any events using this content or geared towards HTML5, I’ll be happy to retweet.  Find me at @boyofgreen on twitter.

The source downloaded and all three projects ran for me the first time, with no problems (once I found and installed the Microsoft Ad SDK).

Some snaps of the Solutions. WP8;

image 

Windows 8;

image

Web (no solution, just files...)

image

Running snaps? Yep, got those too...

Windows 8
image

Windows Phone 8
SNAGHTML15851ce3

Web
image

All of which show that I stink on all the platforms...

What's nice is that each project is tweaked to utilize the features of the given platform (hence my "same'ish" note in the open line).

For example, in the Windows 8 app, it uses the Camera to make the Yeti all you...

image

There's other cool little features like customizing the Hikers, setting their name and even pictures too...

All in all this is a fun little game that shows how your HTML skills can be used to build real apps and games for the web, Windows Phone 8 and Windows 8...

Tags:

Follow the Discussion

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.