👨🏿‍🚒 💅 🤦🏽 HTML5 iPhone ऐप टेट्रिस 🤰🏻 👻 🍒

यदि आप iPhone के लिए एक एप्लिकेशन बनाना चाहते हैं और आप C डेवलपर नहीं हैं, लेकिन आपके ज्ञान सेट में अभी भी HTML (5), CSS और JavaScript शामिल हैं, तो मैं दिखाऊंगा कि कैसे Tetris गेम के उदाहरण का उपयोग करके iPhone HTML5 एप्लिकेशन बनाया जाए।

यह आवेदन, निश्चित रूप से, कार्यक्षेत्र में एक आइकन होना चाहिए, ऑफ़लाइन काम करेगा, अर्थात। इंटरनेट कनेक्शन के बिना और नीचे दी गई छवि की तरह कुछ देखें:

शुरू करने के लिए, हमें अभी भी एक कॉन्फ़िगर किए गए वेब सर्वर की आवश्यकता है, और फिर हम पहले से ही कैश के साथ काम कर सकते हैं। खुद iPhone सेट करें: Settings.app> Safari> डेवलपर, डिबग कंसोल को सक्षम करें।

आइए एक आइकन 57x57 और स्वागत स्क्रीन 320x460 की एक तस्वीर बनाते हैं। वे पीएनजी या जेपीजी प्रारूप में होना चाहिए।

एचटीएमएल

हमारा 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>

कृपया निम्नलिखित पर ध्यान दें:

DOCTYPE में हम HTML लिखते हैं, लेकिन HTML5 नहीं;
मैनिफ़ेस्ट = "cache.manifest", ऐप्पल-मोबाइल-वेब-ऐप-सक्षम - यह कैशिंग के लिए है;
ऐप्पल-मोबाइल-वेब-ऐप-स्टेटस-बार-स्टाइल - यह स्टेटस बार और नेविगेशन बार को छुपाता है;
ऐप्पल-टच-आइकन एप्लिकेशन आइकन की छवि का एक संकेतक है;
ऐप्पल-टच-स्टार्टअप-इमेज - यह एक स्वागत योग्य स्क्रीन इमेज को दर्शाता है।

प्रकट

Tetris.manifest फ़ाइल में कैशिंग के लिए फ़ाइलों की एक सूची होनी चाहिए।

CACHE MANIFEST

# संस्करण 3

tetris.css
index.html
tetris.js

# ऑफ़लाइन आइकन
icon.png
startup.png

सीएसएस

body { overflow:hidden;
background: #d7d7d7;
margin:0;
padding:0;
}
#tetris {
width: 320px;
height: 460px;
background:#000;
}

जावास्क्रिप्ट

स्क्रिप्ट https://github.com/daltonridenhour/DOM-Tetris से ली गई थी।
लेकिन यह सामान्य ब्राउज़रों के लिए बनाया गया था, इसलिए यह बिना कीबोर्ड वाले उपकरणों पर उपयोग के लिए थोड़ा डोपिलन था।
स्क्रिप्ट में एप्लिकेशन की सभी कार्यक्षमता शामिल है।

Teteris के काम कर रहे संस्करण के लिए लिंक:
http://tetris.alexkessinger.net/

एप्लिकेशन की कार्यक्षमता को डेटा वेयरहाउस (लोकलस्टोरेज या वेबडेटाबेस) के साथ काम करके विस्तारित किया जा सकता है, उदाहरण के लिए, गेम के परिणामों को बचाने के लिए।

दस्तावेज़ीकरण लिंक

Http://dev.w3.org/html5/spec/offline.html पर कैशिंग के बारे में
सफारी के लिए विकास http://developer.apple.com/library/safari/navigation/
IPhone घटना लेख
http://www.quirksmode.org/blog/archives/2008/08/iphone_events.html
वेबदाबेस प्रलेखन http://dev.w3.org/html5/webdatabase/

मूल धन्यवाद लंबे खो लिंक के लिए धन्यवाद

HTML5 iPhone ऐप टेट्रिस

एचटीएमएल

प्रकट

सीएसएस

जावास्क्रिप्ट

दस्तावेज़ीकरण लिंक

More articles: