This one's at:
http://sixrevisions.com/web-development/html5-iphone-app/
It's for building a tetris game oriented toward iPhone.
Here's the first page of code
<!DOCTYPE html>
<html manifest="tetris.manifest">
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="iphon_tetris_icon.png"/>
<link rel="apple-touch-startup-image" href="startup.png" />
<link rel="stylesheet" href="tetris.css" type="text/css" media="screen, mobile" title="main" charset="utf-8">
<title>offline Tetris</title>
</head>
<body>
<!-- Put your Markup Here -->
<script type="text/javascript" src="tetris.js"></script>
</body>
</html>
Some more info:
First, notice the Doctype. Isn’t HTML5 awesome?
The manifest="cache.manifest" property on the tag is how the browser knows that we want to cache this web page offline.
// good info
There’s proprietary Apple markup on our HTML5 page. A brief explanation of each:
apple-mobile-web-app-capable: This is another tip-off that we want to be an offline app.
// good - we're shooting for apple
apple-mobile-web-app-status-bar-style: This hides the status bar, and nav bar when the app is offline.
// hide's web-looking stuff
apple-touch-icon:This is the pointer to the image that want to be the icon.
// ok, we have an icon.
apple-touch-startup-image: This is a url pointing to the startup image.
// splash image.
Also note that you should put CSS at the top and JavaScript at the bottom (best practices still apply here).
// Good to know.
Continuing:
CSS
It’s almost the same as a normal web page. There are some specific -webkit CSS rules that you can use that do some really cool things like animation, but this is a quick-and-dirty guide and that’s outside of the scope of this article.
The CSS is just Plain Jane.
Let's take a look:
body {
overflow:hidden;
background: #d7d7d7;
margin:0;
padding:0;
}
#tetris {
width: 320px;
height: 460px;
background:#000;
}
Pulling my css out of mothballs, the body tag means it won't have a margin (outside the component) or padding (inside the component, e.g. text). Something with the id (?) of tetris with have a specific height and width, and a transparent (?) background.
Let's check on the meaning of overflow...
http://css-tricks.com/2833-the-css-overflow-property/
So, basically if it overflows, it hides it.
The style is really just to the div element on our web page to make sure it fits in the iPhone’s viewport properly.
Possibly 320 x 460 is the iPhone dimenssions. No, it's actually 320 x 480, so he may be leaving room for something. The zero margin padding probably means don't leave any borders.
JavaScript
I used a modded version of a JavaScript from Dalton Ridenhour; I found it on Github.
The JS was written originally for a normal web browser. The only modifications I had to make was to support not having a keyboard.
// Did the author have modify a modified version of Javascript?
In general, JS functions work just fine on the iPhone—there are exceptions though. Think about something like a mouseover, the event exists on the iPhone, but I am not sure how helpful it is when you don’t have a standard pointing device (such as a mouse). Quirksmode posted an article about events on the iPhone that is really helpful.
When you have all of that, you can test it out by opening your index.html in an iPhone, and you should be able to see everything work.
Then, next step is to serve it from an actual webserver that can set the proper settings on the cache.manifest.
Then you could be able to add it to the home screen and have all the extras, and see the offline mode.
You can see a working version I have set up at:
http://tetris.alexkessinger.net
Ok, that's cool - but where is the source? Ah, of course, it's available as javascript when you browse the site.
It's kind of hard to move the falling tetris block when you swipe it - the whole game moves. One of the commenters had a fix for that, but I think I'll move on to something a bit more recent - that is the JQuery mobile framework. See my next post on the JQuery Mobile Framework.
No comments:
Post a Comment