小白学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="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>  


【范例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="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所示页面,游戏结束,否则便要一直重复下去。

小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载三(整蛊小游戏)小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载三(整蛊小游戏)小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载三(整蛊小游戏)小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载三(整蛊小游戏)

4-6                                                                           4-7                                                                 4-8                                                        4-9



别再犹豫了,想学习更多的APP小游戏,想学习最简单的手游开发,多做这本书《构建跨平台APP:jQuery Mobile移动应用实战》的例子就好了。


小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载三(整蛊小游戏)


小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载三(整蛊小游戏),布布扣,bubuko.com

小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载三(整蛊小游戏)

上一篇:Android Studio Unknown host ‘downloads.gradle.org’


下一篇:小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载六-设计播放器APP