《构建跨平台APP：jQuery Mobile移动应用实战》连载三（整蛊小游戏）
笔者当年还是一枚小白的时候，经常被QQ控件或各种论坛上的某个比较吸引人的标题所吸引，点开之后却发现网页中弹出了一个对话框，必须要不断地点击烦人的按钮无数次才能关闭这个页面。当时也曾经在网上搜索过相应的教程可惜一直都没有成功。时隔多年，笔者又想起了当年的“悲惨经历”，于是决定在这里与读者分享这样一个例子。
在Dreamweaver中编辑4个文件，分别为index.html、question.html、confirm.html、result,html。下面给出具体代码：
【范例4-5 游戏的开始页面index.html】
点击(此处)折叠或打开
-
01 <!DOCTYPE>
-
02 <html xmlns=\"http://www.w3.org/1999/xhtml\">
-
03 <head>
-
04 <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
-
05 <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">
-
06 <title>游戏开始</title>
-
07 <link rel=\"stylesheet\" href=\"jquery.mobile-1.0.min.css\" />
-
08 <script src=\"jquery-1.7.1.min.js\"></script>
-
09 <script src=\"jquery.mobile-1.1.1.min.js\"></script>
-
10 <!--<script type=\"text/javascript\" src=\"cordova.js\"></script>-->
-
11 </head>
-
12 <body>
-
13 <div data-role=\"page\">
-
14 <a href=\"question.html\" data-role=\"button\" data-rel=\"dialog\">开始游戏</a>
-
15 </div>
-
16 </body>
- 17 </html>
【范例4-6 询问读者是否是弱智的页面question.html】
点击(此处)折叠或打开
-
01 <!DOCTYPE>
-
02 <html xmlns=\"http://www.w3.org/1999/xhtml\">
-
03 <head>
-
04 <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
-
05 <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">
-
06 <title>老实交代！你到底是不是弱智！</title>
-
07 <link rel=\"stylesheet\" href=\"jquery.mobile-1.0.min.css\" />
-
08 <script src=\"jquery-1.7.1.min.js\"></script>
-
09 <script src=\"jquery.mobile-1.1.1.min.js\"></script>
-
10 <!--<script type=\"text/javascript\" src=\"cordova.js\"></script>-->
-
11 </head>
-
12 <body>
-
13 <div data-role=\"page\">
-
14 <h1>老实交代！你到底是不是弱智！</h1>
-
15 <a href=\"result.html\" data-role=\"button\">这你都知道！！！！</a> //跳至最终页面
-
16 <a href=\"confirm.html\" data-role=\"button\" data-rel=\"dialog\">死不承认！</a> //继续循环
-
17 </div>
-
18 </body>
- 19 </html>
【范例4-7 另一个询问页面confirm.html】
点击(此处)折叠或打开
-
01 <!DOCTYPE>
-
02 <html xmlns=\"http://www.w3.org/1999/xhtml\">
-
03 <head>
-
04 <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
-
05 <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">
-
06 <title>老实交代！你到底是不是弱智！</title>
-
07 <link rel=\"stylesheet\" href=\"jquery.mobile-1.0.min.css\" />
-
08 <script src=\"jquery-1.7.1.min.js\"></script>
-
09 <script src=\"jquery.mobile-1.1.1.min.js\"></script>
-
10 <!--<script type=\"text/javascript\" src=\"cordova.js\"></script>-->
-
11 </head>
-
12 <body>
-
13 <div data-role=\"page\">
-
14 <h1>老实交代！你到底是不是弱智！</h1>
-
15 <a href=\"result.html\" data-role=\"button\">我承认，我是</a> <!--跳至最终页面-->
-
16 <a href=\"question.html\" data-role=\"button\" data-rel=\"dialog\">我不是！</a><!--继续循环-->
-
17 </div>
-
18 </body>
- 19 </html>
点击(此处)折叠或打开
-
01 <!DOCTYPE>
-
02 <html xmlns=\"http://www.w3.org/1999/xhtml\">
-
03 <head>
-
04 <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
-
05 <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">
-
06 <title>你这个弱智</title>
-
07 <link rel=\"stylesheet\" href=\"jquery.mobile-1.0.min.css\" />
-
08 <script src=\"jquery-1.7.1.min.js\"></script>
-
09 <script src=\"jquery.mobile-1.1.1.min.js\"></script>
-
10 <!--<script type=\"text/javascript\" src=\"cordova.js\"></script>-->
-
11 </head>
-
12 <body>
-
13 <div data-role=\"page\">
-
14 <h1>早点承认不就好了么，何必这么麻烦！</h1>
-
15 </div>
-
16 </body>
- 17 </html>
运行后如图4-6、4-7、4-8和4-9所示。
首先单击“开始游戏”按钮，就会看到页面中有文字询问用户是否承认自己是弱智，若是愿意承认自己是弱智，则可以转到图4-9所示页面，游戏结束，否则便要一直重复下去。
4-6 4-7 4-8 4-9
别再犹豫了，想学习更多的APP小游戏，想学习最简单的手游开发，多做这本书《构建跨平台APP：jQuery Mobile移动应用实战》的例子就好了。
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/9848525/viewspace-1224677/ ，如需转载，请注明出处，否则将追究法律责任。
最新文章
- 20分钟轻松制作移动网站
- 一张图告诉你，只会HTML还不够！
- CSS这些代码你都不会，你还有什么好说的！！！
- 手把手教学，用jQuery Mobile创建Web App
- 《构建跨平台APP：jQuery Mobile移动应用实战》连载七-手机调查问卷
- 《构建跨平台APP：jQuery Mobile移动应用实战》连载七-手机调查问卷
- 《构建跨平台APP：jQuery Mobile移动应用实战》连载五（给按钮加图标）
- 《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）
- 《构建跨平台APP：jQuery Mobile移动应用实战》连载二（简单的QWER键盘）
- 《构建跨平台APP：jQuery Mobile移动应用实战》连载一（Hello World）
