首页 > 代码库 > 小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载三（整蛊小游戏）
小白学jquery Mobile《构建跨平台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=http://www.mamicode.com/"jquery.mobile-1.0.min.css" />08 <script src=http://www.mamicode.com/"jquery-1.7.1.min.js"></script>09 <script src=http://www.mamicode.com/"jquery.mobile-1.1.1.min.js"></script> 10 <!--<script type="text/javascript" src=http://www.mamicode.com/"cordova.js"></script>-->11 </head>12 <body>13 <div data-role="page">14 <a href=http://www.mamicode.com/"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=http://www.mamicode.com/"jquery.mobile-1.0.min.css" />08 <script src=http://www.mamicode.com/"jquery-1.7.1.min.js"></script>09 <script src=http://www.mamicode.com/"jquery.mobile-1.1.1.min.js"></script> 10 <!--<script type="text/javascript" src=http://www.mamicode.com/"cordova.js"></script>-->11 </head>12 <body>13 <div data-role="page"> 14 <h1>老实交代！你到底是不是弱智！</h1>15 <a href=http://www.mamicode.com/"result.html" data-role="button">这你都知道！！！！</a> //跳至最终页面16 <a href=http://www.mamicode.com/"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=http://www.mamicode.com/"jquery.mobile-1.0.min.css" />08 <script src=http://www.mamicode.com/"jquery-1.7.1.min.js"></script>09 <script src=http://www.mamicode.com/"jquery.mobile-1.1.1.min.js"></script> 10 <!--<script type="text/javascript" src=http://www.mamicode.com/"cordova.js"></script>-->11 </head>12 <body>13 <div data-role="page"> 14 <h1>老实交代！你到底是不是弱智！</h1>15 <a href=http://www.mamicode.com/"result.html" data-role="button">我承认，我是</a> <!--跳至最终页面-->16 <a href=http://www.mamicode.com/"question.html" data-role="button" data-rel="dialog">我不是！</a><!--继续循环-->17 </div>18 </body>19 </html>
【范例4-8 游戏结束页面result.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=http://www.mamicode.com/"jquery.mobile-1.0.min.css" />08 <script src=http://www.mamicode.com/"jquery-1.7.1.min.js"></script>09 <script src=http://www.mamicode.com/"jquery.mobile-1.1.1.min.js"></script> 10 <!--<script type="text/javascript" src=http://www.mamicode.com/"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移动应用实战》的例子就好了。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。