HTML5 application for iPhone on the example of the Tetris game
If you want to create an application for the iPhone and you are not a C developer, however, your knowledge includes HTML (5), CSS, and JavaScript, then I will show you how to create an iPhone HTML5 application using the example of Tetris.
Of course, this application should have an icon in the workspace, work offline, i.e. without an internet connection and look something like the figure:
For a start, we still need a configured Web server, and then we can work with the cache. Set up the iPhone itself: Settings.app> Safari> Developer, enable debug console.
')
Let's make an icon 57x57 and a picture of the welcome screen 320x460. They must be in PNG or JPG format.
Our index.html
Note the following:
write HTML in DOCTYPE, not HTML5;
manifest = "cache.manifest", apple-mobile-web-app-capable is for caching;
apple-mobile-web-app-status-bar-style - this hides the status bar and the navigation bar;
apple-touch-icon is a pointer to the image of the application icon;
apple-touch-startup-image — this points to the welcome screen image.
The tetris.manifest file should contain a list of files to cache.
CACHE MANIFEST
# Version 3
tetris.css
index.html
tetris.js
# offline icons
icon.png
startup.png
The script was taken from https://github.com/daltonridenhour/DOM-Tetris .
But it was made for ordinary browsers, so it was a bit dopilen for use on devices without a keyboard.
The script contains all the functionality of the application.
Link to the working version of the tetheris:
http://tetris.alexkessinger.net/
The functionality of the application can be extended to work with the data warehouse (localStorage or webdatabase), for example, to save the game results.
About caching http://dev.w3.org/html5/spec/offline.html
Development under Safari http://developer.apple.com/library/safari/navigation/
Article on the events in the iPhone
http://www.quirksmode.org/blog/archives/2008/08/iphone_events.html
Webdatabase documentation http://dev.w3.org/html5/webdatabase/
ps thanks akira for the long lost link to the original
Of course, this application should have an icon in the workspace, work offline, i.e. without an internet connection and look something like the figure:
For a start, we still need a configured Web server, and then we can work with the cache. Set up the iPhone itself: Settings.app> Safari> Developer, enable debug console.
')
Let's make an icon 57x57 and a picture of the welcome screen 320x460. They must be in PNG or JPG format.
HTML
Our index.html
<! 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="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> </ TITLE> </ HEAD> <body> <! - -> <script type="text/javascript" src="tetris.js"> </ SCRIPT> </ BODY> </ HTML> Note the following:
write HTML in DOCTYPE, not HTML5;
manifest = "cache.manifest", apple-mobile-web-app-capable is for caching;
apple-mobile-web-app-status-bar-style - this hides the status bar and the navigation bar;
apple-touch-icon is a pointer to the image of the application icon;
apple-touch-startup-image — this points to the welcome screen image.
Manifest
The tetris.manifest file should contain a list of files to cache.
CACHE MANIFEST
# Version 3
tetris.css
index.html
tetris.js
# offline icons
icon.png
startup.png
CSS
body { overflow:hidden;
background: #d7d7d7;
margin:0;
padding:0;
}
#tetris {
width: 320px;
height: 460px;
background:#000;
}Javascript
The script was taken from https://github.com/daltonridenhour/DOM-Tetris .
But it was made for ordinary browsers, so it was a bit dopilen for use on devices without a keyboard.
The script contains all the functionality of the application.
Link to the working version of the tetheris:
http://tetris.alexkessinger.net/
The functionality of the application can be extended to work with the data warehouse (localStorage or webdatabase), for example, to save the game results.
Documentation Links
About caching http://dev.w3.org/html5/spec/offline.html
Development under Safari http://developer.apple.com/library/safari/navigation/
Article on the events in the iPhone
http://www.quirksmode.org/blog/archives/2008/08/iphone_events.html
Webdatabase documentation http://dev.w3.org/html5/webdatabase/
ps thanks akira for the long lost link to the original
Source: https://habr.com/ru/post/111291/
All Articles