/
game.html
282 lines (238 loc) · 15 KB
/
game.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width" />
<meta name="description" content="本網站為個人練習作品，部分影片、遊戲畫面、道具圖、規條政策、來自於市面遊戲、素材，僅供畫面示意，無商業用途。
「Qyropa奇樂寶寶」LOGO、遊戲內容、架構、說明、角色設計、Banner等，均為個人創作，請勿任意盜取謝謝合作！">
<meta name="author" content="Cutylala Studio | Ren">
<title>遊戲說明｜Qyropa奇樂寶寶</title>
<link rel="shortcut icon" href="favicon.ico" />
<!-- 手機用 -->
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-width:0px) and (max-width:480px)" />
<!-- 平板用 -->
<link href="css/table.css" rel="stylesheet" type="text/css" media="only screen and (min-width:481px) and (max-width:768px)" />
<!-- 桌機 小於1025 -->
<link href="css/SD-desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px) and (max-width:1024px)" />
<!-- 桌機 -->
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:1025px)" />
<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<!-- FlexSlider -->
<script defer src="js/jquery.flexslider.js"></script>
<style type="text/css" >
@media only screen and (min-width:1025px){
.dec-qyropaGo03{
position:absolute ;bottom:-90px;
}
.memo img:hover{
transition:.2s;
transform:translateY(5px);
}
}
@media only screen and (min-width:0px) and (max-width:1024px) {
.dec-qyropaGo03{
margin:auto ;
}
}
</style>
</head>
<body>
<a href="#" class="dec-qyropaGo02-top">Top</a>
<!--banner和下載 --------------------------------------------------------------------------------------->
<header>
<nav>
<div id="menu">
<div id="menu-inner" >
<div id="menu-logo" >
<a id="menu-logo-a" href="index.html">Qyropa奇樂寶寶</a>
</div>
<a href="#menu-nav" id="menu_btn">menu</a>
<div id="menu-nav" >
<ul id="nav-ul" >
<li class="nav-list" style="background-position:-165px 0 ;" ><a class="nav-a" href="game.html">遊戲介紹</a></li>
<li class="nav-list" ><span class="nav-line" ></span></li>
<li class="nav-list" ><a class="nav-a" href="qyropa.html">寶寶介紹</a></li>
<li class="nav-list" ><span class="nav-line" ></span></li>
<li class="nav-list" ><a class="nav-a" href="HowToPlay.html">遊玩說明</a></li>
<li class="nav-list" ><span class="nav-line" ></span></li>
<li class="nav-list" ><a class="nav-a" href="FAQ.html">飼養問題</a></li>
<li class="nav-list" ><span class="nav-line" ></span></li>
<li class="nav-list" ><a class="nav-a" href="shop.html">線上特典</a></li>
<li class="nav-list" ><a id="off" href="">關閉視窗</a></li>
</ul>
</div><!--#menu-nav over-->
</div><!--#menu-inner over-->
</div><!--#menu over-->
</nav>
<article>
<div id="banner">
<div id="banner-inner" >
<!-- 幻燈片秀開始 ------------------------------------------------------------------------->
<div id="slider" class="flexslider">
<ul class="slides">
<li><img src="images/banner/banner3.jpg" /></li> <!-- This is the last image in the slideshow -->
<li><img src="images/banner/banner1.jpg" /></li>
<li><img src="images/banner/banner4.jpg" /></li>
<li><img src="images/banner/banner2.jpg" /></li><!-- This is the first image in the slideshow -->
</ul>
</div>
<script type="text/javascript">
// BeginOAWidget_Instance_e395051064e17ee7762d1975999cea3c: #OAWidget
$(window).load(function() {
$('#slider').flexslider({
namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin
selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
animation: "slide",
easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: "horizontal", //String: Select the sliding direction, 'horizontal' or 'vertical'
reverse: false, //{NEW} Boolean: Reverse the animation direction
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: true, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 5000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds
initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds
randomize: false, //Boolean: Randomize slide order
useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
keyboard: true, //Boolean: Allow slider navigating via keyboard left/right keys
mousewheel: false, //Boolean: Allow slider navigating via mousewheel
prevText: "", //String: Set the text for the "previous" directionNav item
nextText: "", //String: Set the text for the "next" directionNav item
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: "Pause", //String: Set the text for the "pause" pausePlay item
playText: "Play", //String: Set the text for the "play" pausePlay item
startAt: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: true, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
// Carousel Options
itemWidth: 0, //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin: 10, //{NEW} Integer: Margin between carousel items.
minItems: 0, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: 0, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move: 0, //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
});
});
// EndOAWidget_Instance_e395051064e17ee7762d1975999cea3c
</script> <!-- FlexSlider -->
<!-- 幻燈片結束 ------------------------------------------------------------------------->
</div>
<div id="banner-tran" ><a id="banner-tran-a" href="#banner-inner">go</a></div>
</div><!--#banner over-->
<div id="download">
<div id="download-button"><a id="download-button-a"><img src="images/button-download.png" alt="立即下載"></a></div>
<div id="download-button-app"><a id="download-button-app-a" href="https://itunes.apple.com/tw/genre/ios/id36?mt=8" target="_new" ><img src="images/button-app.png" alt="APP Store"></a></div>
<div id="download-button-play"><a id="download-button-play-a" href="https://play.google.com/store?hl=zh-TW&tab=w8" target="_new" ><img src="images/button-play.png" alt="Google Play"></a></div>
</div><!--#download over-->
</article>
</header>
<!-----------------------------------------------------------------------------------banner和下載 over ------>
<div class="positionForDec" >
<div class="dec-qyropaGo03" >御飯糰種</div>
</div>
<div class="colum" style=" top:40px; " >
<header>
<h1 class="h1ForIndex" >最Q的手機寵物，奇樂寶寶</h1>
</header>
<!--關於奇樂寶寶 --------------------------------------------------------------------------------------->
<section>
<div class="blackboard">
<p class="blackboard-text" >
距離地球1911億光年的Qyro星，居住其中的Qyro族，
由於故鄉星球的毀滅，而降臨於地球。
在人類博士的幫助下，牠們要在地球建立新的家鄉，
並且開放這些稱為「奇樂寶寶」的外星生物供認養。
包含原生6種的、和超過30隱藏種！
選擇您喜歡的認養，教育、餵食、陪伴牠們，
您將會養出屬於自己的獨特奇樂寶寶！
</p>
<div class="blackboard-bg" ></div><div class="blackboard-z" style="height:376px;position:absolute;top:0 ;left:0 ;" ></div>
</div><!--.blackboard-text over-->
<div class="memo memoForIndex" >
<div class="memo-icon" >
<img class="memo-icon-img" src="images/icon.png">
</div>
<div class="hr" >-------</div>
<p ><b>語言：</b>繁體中文<br>
<b>收費模式：</b>免費下載<br>
<b>大小：</b>8MB</p>
<p><b>系統支援</b>：<br>
iOS 5.9版本或以上<br>
Android2.3版本或以上<br></p>
<p><b>內容分級：</b><br>
心智成熟度 - 中
</p>
</div> <!--.memo over-->
</section>
<p class="sal" >skip a line</p>
<!---------------------------------------------------------------------------關於奇樂寶寶 over-------------->
<br clear="all" >
</section>
</div><!--.colum over-->
<!--螢幕截圖--------------------------------------------------------------------------------------->
<section >
<div class="dec-flower" style="" >
<img src="images/dec-flower.png" alt="這是花" />
<div class="freze-qyropa" style="top:-210px; left:180px; background:url(images/qyropa/general/qyropa-3.png) no-repeat ;transform:scale(.5) ; width:249px ; height:692px; ">茄子種</div>
</div>
<div class="colum-blue" >
<header>
<span class="h2-bg" ><h2 style=" background-image:url(images/h2-shortscreen.png)" >螢幕截圖</h2></span>
</header>
<div class="colum-blue-inner" >
<div class="colum-blue-inner-img">
<img src="images/short-screen/2.png" >
</div>
</div><div class="dec-qyropaGo01" style=" " ></div><!--奇樂寶寶走路-->
</div>
</section>
<!------------------------------------------------------------------------------螢幕截圖 over----------->
<!--#footer--------------------------------------------------------------------------------------->
<div id="footer">
<div id="footer-inner">
<div id="footer-logo" >
<div class="slide">
<ul >
<li class="slide-list" ></li>
<li class="slide-list" ></li>
<li class="slide-list" ></li>
<li class="slide-list" ></li>
<li class="slide-list" ></li>
<li class="slide-list" ></li>
</ul>
</div>
</div>
<p class="footer-p" >
<a id="fb" href="#">Facebook</a>
<a id="go" href="#">google+</a>
<a id="tw" href="#">Twitter</a><br/>
<a href="about.html"> 關於我們</a> |
<a href="rules.html"> 私隱政策 </a> |
<a href="terms.html"> 服務條款</a>|
<a href="FAQ.html#contactUs">聯絡我們</a>
</p>
<div class="level"></div>
</div>
</div>
<!--#footer over--------------------------------------------------------------------------------------->
<!-- 裝飾 ------------------------------------------------------------------------->
<article>
<div class="body-bg-stars" style="top:30px; left:0px;" ></div>
<div class="dec-cloud" style=" top:1677px ; right:20% ; animation:cloud 3s infinite alternate ;-webkit-animation:cloud 3s infinite alternate "></div>
<div class="dec-cloud" style=" top:700px ; left:60px ; animation:cloud2 3s infinite alternate ;-webkit-animation:cloud 3s infinite alternate "></div>
</article>
<!-- 裝飾over ------------------------------------------------------------------------->
</html>