mirror of
https://github.com/wassname/phaser.git
synced 2026-06-30 16:40:20 +08:00
New examples HTML page added.
This commit is contained in:
photonstorm
@@ -0,0 +1,165 @@
|
||||
/* reset css starts */
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
|
||||
body {line-height: 1;}
|
||||
ol, ul {list-style: none;}
|
||||
blockquote, q {quotes: none;}
|
||||
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
|
||||
table {border-collapse: collapse; border-spacing: 0;}
|
||||
/* reset css ends */
|
||||
@font-face{font-family: 'HelveticaBd'; src: url('../fonts/HelveticaNeueLTStd-Bd.otf');}
|
||||
|
||||
body{margin:0;padding:0; overflow-x:hidden; font-family: 'HelveticaBd', Helvetica, Arial, Tahoma, Verdana !important; background: #e0e4f1;}
|
||||
|
||||
a{color:#fff; text-decoration: none;}
|
||||
a:hover{text-decoration: underline;}
|
||||
|
||||
.helvetica{font-family: 'HelveticaBd', Helvetica, Arial, Tahoma, Verdana !important;}
|
||||
.header{background: #e0e4f1 url('../img/header-bg.jpg') no-repeat; width:100%; margin:0; padding:0; background-size: cover; height: 910px; display: block; clear:both; margin-bottom: -400px}
|
||||
.main-container{display: block; clear:both; width: 1125px; height: auto; margin:0 auto;}
|
||||
ul.nav-links{margin:0;padding:0;display: inline-block; float: right; list-style-type: none; color: #fff; font-size: 15px; line-height: 2em; margin-top: 50px; min-width: 180px;}
|
||||
ul.nav-links > li{margin:0; padding:0; list-style-type: none; padding-left: 55px;}
|
||||
ul.nav-links > li > a{color: #fff; text-decoration: none;}
|
||||
ul.nav-links > li > a:hover{text-decoration: underline;}
|
||||
.link-home, .link-latest, .link-forum, .link-docs, .link-twitter{background-image: url('../img/nav-icons.png'); background-repeat: no-repeat;}
|
||||
|
||||
.main-title{font-size:55px;color:#fff;text-shadow:0 0 15px #b643e6; text-align: center; display: block; text-transform: uppercase; margin: 40px auto 0 auto;}
|
||||
.link-home{background-position: 0 -9px;}
|
||||
.link-latest{background-position: 0 -37px;}
|
||||
.link-forum{background-position: 0 -67px;}
|
||||
.link-docs{background-position: 0 -97px;}
|
||||
.link-twitter{background-position: 0 -127px;}
|
||||
.phaser-examples{background: url('../img/phaser-examples.png') no-repeat; display: block; width: 485px; height: 205px; margin: 20px auto;}
|
||||
.phaser-version{float: right; background: url('../img/phaser-version.png') no-repeat; display: block; width: 345px; height: 30px; color: #fff; font-size: 11px; text-shadow: 1px 1px #000; right:0; top:0; }
|
||||
.phaser-version > span{margin-top: 10px; display: inline-block; margin-left: 60px; margin-right: 25px;}
|
||||
.phaser-version > a{color: #fff; text-decoration: none; background: url('../img/version-button.png') no-repeat; background-size: cover; display: inline-block; width: 123px; height: 10px; vertical-align: middle; text-align: center;padding-top:11px; padding-bottom: 11px}
|
||||
.phaser-version > a:hover{text-decoration: underline;}
|
||||
.phaser-logo{display: block; float: right; width: 168px;height: 144px; background: url('../img/phaser-logo.png') no-repeat; margin-top: 40px; margin-right: 40px;}
|
||||
|
||||
.line{display:block;clear:both; width:100%; margin:0;padding:0; float:left; background-color: transparent;}
|
||||
.go-top{margin-top: -200px;}
|
||||
.box5, .box10, .box15 .box20, .box25, .box30, .box35, .box40, .box45, .box50, .box55, .box60, .box65, .box70, .box75, .box80, .box85, .box90, .box95, .box100{position: relative;display: inline-block; box-sizing: border-box; padding: 5px 10px; -moz-box-sizing: border-box; vertical-align: top; margin:0;}
|
||||
.float-right{float:right !important;}
|
||||
|
||||
.box5{width:4%; min-width: 100px; float:left;}
|
||||
.box10{width:9%; min-width: 100px; float:left;}
|
||||
.box15{width:14%; min-width: 150px;float:left;}
|
||||
.box20{width:19%; min-width: 200px;float:left;}
|
||||
.box25{width:24%; min-width: 250px;float:left;}
|
||||
.box30{width:29%; min-width: 300px;float:left;}
|
||||
.box35{width:34%; min-width: 350px;float:left;}
|
||||
.box40{width:39%; min-width: 400px;float:left;}
|
||||
.box45{width:44%; min-width: 450px;float:left;}
|
||||
.box50{width:49%; min-width: 500px;float:left;}
|
||||
.box55{width:54%; min-width: 550px;float:left;}
|
||||
.box60{width:59%; min-width: 600px;float:left;}
|
||||
.box65{width:64%; min-width: 650px;float:left;}
|
||||
.box70{width:69%; min-width: 700px;float:left;}
|
||||
.box75{width:74%; min-width: 750px;float:left;}
|
||||
.box80{width:79%; min-width: 800px;float:left;}
|
||||
.box85{width:84%; min-width: 850px;float:left;}
|
||||
.box90{width:89%; min-width: 900px;float:left;}
|
||||
.box95{width:94%; min-width: 950px;float:left;}
|
||||
.box100, .clear, .clear5, .clear10, .clear15, .clear20, .clear25{width:100%; clear: both;}
|
||||
.clear{display: block;}
|
||||
.clear5{height: 10px;}
|
||||
.clear10{height: 20px;}
|
||||
.clear15{height: 30px;}
|
||||
.clear20{height: 40px;}
|
||||
.clear25{height: 50px;}
|
||||
.strong{text-transform: uppercase !important;}
|
||||
.no-margin{margin:0 !important;}
|
||||
.no-padding{padding:0 !important;}
|
||||
.box-center{float: none !important; margin-left: auto !important; margin-right: auto !important;}
|
||||
.txt-center{text-align: center !important;}
|
||||
|
||||
p.title{font-size: 30px; color: #fff; text-shadow: 0 1px 3px #9e6ce8; text-align: right;}
|
||||
p.count-examples{font-size: 12px; color: #676773; text-align: right;}
|
||||
|
||||
ul.group-items{background-image: url('../img/laser1.png'); background-repeat: no-repeat; background-position: left top 5px; padding-left: 125px; width: 875px !important;}
|
||||
ul.group-items > li{width: 213px; padding-top: 15px; height: 35px; background: url('../img/group-item.png') no-repeat; text-align: center; display: inline-block; margin-bottom: 15px}
|
||||
ul.group-items > li a{display:block; width:100%; height: 100%; padding: 20px 0; margin-top: -20px; color:#333;}
|
||||
ul.group-items > li a:hover{cursor: pointer; text-decoration: underline;}
|
||||
ul.group-items > li a span.mark{display:inline-block;width: 1px; height: 25px; vertical-align: middle;}
|
||||
ul.group-items > li a:visited span.mark{background: url('../img/group-item-hover.png') no-repeat; background-position: center center;width:25px; padding-left:4px;}
|
||||
|
||||
.laser2{background-image: url('../img/laser2.png') !important; background-repeat: no-repeat; background-position: center 20px;}
|
||||
.laser3{background-image: url('../img/laser3.png') !important; background-repeat: no-repeat; background-position: center 20px;}
|
||||
.laser4{background-image: url('../img/laser4.png') !important; background-repeat: no-repeat; background-position: center 20px;}
|
||||
.laser5{background-image: url('../img/laser5.png') !important; background-repeat: no-repeat; background-position: center 20px;}
|
||||
.laser6{background-image: url('../img/laser6.png') !important; background-repeat: no-repeat; background-position: center 20px;}
|
||||
.laser7{background-image: url('../img/laser7.png') !important; background-repeat: no-repeat; background-position: center 20px;}
|
||||
.laser8{background-image: url('../img/laser8.png') !important; background-repeat: no-repeat; background-position: center 20px;}
|
||||
.laser9{background-image: url('../img/laser9.png') !important; background-repeat: no-repeat; background-position: center 20px;}
|
||||
.laser10{background-image: url('../img/laser10.png') !important; background-repeat: no-repeat; background-position: center 20px;}
|
||||
|
||||
.bright-bg, .dark-bg{border-bottom: 1px solid #d1d1d1; padding:25px 0;}
|
||||
.bright-bg{background-color: #e0e0ee;}
|
||||
.dark-bg{background-color:#e0e4f1;}
|
||||
.border-bottom{border-bottom: 1px solid #d1d1d1;}
|
||||
|
||||
.prize-bg{background: url('../img/prize-bg.png') no-repeat; background-size: cover; background-position: center center; height: 326px; width: 100%;}
|
||||
.gradient{background: url('../img/gradient-bg') repeat-y;}
|
||||
.prize-button{text-transform: uppercase; color: #000; text-shadow: 1px 0 #fff; float:right; background: url('../img/prize-button.png') no-repeat; width: 300px; height: 70px; padding-top:135px; font-size: 16px; padding-left: 75px; margin-top: 25px; margin-right: 145px;}
|
||||
|
||||
.footer{background: #e0e4f1 url('../img/footer-bg.jpg') no-repeat; background-size: cover; width:100%; height: 425px; bottom:0; color:#fff; text-shadow: 1px 1px 0 #000; line-height: 1.25em; font-size: 15px;}
|
||||
.photonstorm-logo{background: url('../img/photonstorm-logo.png') no-repeat; background-size: cover; display: block;clear:both; width:113px;height:15px; margin-bottom: 6px;}
|
||||
.flixel-logo{display:block; clear:both; width:26px; height:50px; background: url('../img/flixel-logo.png') no-repeat;}
|
||||
.forums-icon, .twitter-icon, .github-icon{background: url('../img/forums-icon.png') no-repeat; vertical-align: middle; padding-left: 68px; height: 35px; display: inline-block; padding-top: 25px;}
|
||||
.twitter-icon{background: url('../img/twitter-icon.png') no-repeat;}
|
||||
.github-icon{background: url('../img/github-icon.png') no-repeat;}
|
||||
|
||||
.footer > .main-container > .line{margin-top: 270px;}
|
||||
|
||||
ul.footer-links{list-style-type: none; width:100%; clear:both; padding:0; margin:0; float:right; margin-top: -20px;}
|
||||
ul.footer-links > li{display: inline-block; padding:0; margin:0; float:right;}
|
||||
|
||||
|
||||
.game-panel{width:800px; height: 680px; overflow: hidden; display:block; clear:both;box-shadow: 0 0 15px #6ac8f8; margin:-150px auto 0 auto; border-radius: 10px; position: relative; z-index: 10;}
|
||||
.game-screen{display:block; clear:both; width:800px;height:600px;margin:0;}
|
||||
.game-controls{display:block; width:100%; height:80px; margin:0; padding:0;background: url('../img/game-controls-bg.jpg') repeat-x;}
|
||||
ul.left-controls{float:left; list-style-type: none; margin:30px 0 0 25px;padding:0; display: inline-block;}
|
||||
ul.left-controls > li{margin:0;padding:0; display: inline-block; vertical-align: middle;}
|
||||
.controls-label{display:inline-block; width:80px; height:9px; background: url('../img/controls-label.png') no-repeat;}
|
||||
.up-label{display: inline-block; width:11px; height: 11px; background: url('../img/up-label.png') no-repeat;}
|
||||
.down-label{display: inline-block; width:11px; height: 11px; background: url('../img/down-label.png') no-repeat;}
|
||||
.left-label{display: inline-block; width:13px; height: 11px; background: url('../img/left-label.png') no-repeat;}
|
||||
.right-label{display: inline-block; width:12px; height: 11px; background: url('../img/right-label.png') no-repeat;}
|
||||
.space-label{display: inline-block; width:64px; height: 18px; background: url('../img/space-label.png') no-repeat;}
|
||||
|
||||
ul.right-controls{float:right;list-style-type: none; padding:0; display: inline-block; margin: 15px 25px 0 0;}
|
||||
ul.right-controls > li{margin:0;padding:0; display: inline-block; vertical-align: middle;}
|
||||
.pause-button{width: 121px; height:52px; display:inline-block; background: url('../img/pause-button.png') no-repeat;}
|
||||
.mute-button{width: 121px; height:52px; display:inline-block; background: url('../img/mute-button.png') no-repeat;}
|
||||
.reset-button{width: 121px; height:52px; display:inline-block; background: url('../img/reset-button.png') no-repeat;}
|
||||
.pause-button:hover, .mute-button:hover, .reset-button:hover{cursor: pointer;}
|
||||
.filler{height: 420px;}
|
||||
.code-block{width:750px; height:auto; overflow: hidden;margin:0 auto;border-radius: 10px;background:#fdfdfd; border:0 !important; box-shadow: inset 0 5px 15px rgba(0,0,0,0.15), 0 0 10px rgba(106,200,248,0.5); padding: 25px !important;display: block; margin-bottom: 20px; margin-top: 30px;}
|
||||
.px800{width:800px; clear:both; display: block; margin:0 auto; line-height: 1.5em;}
|
||||
.gradient p{color:#333;}
|
||||
|
||||
@media only screen and (max-width: 1235px), only screen and (max-device-width: 1235px){
|
||||
ul.nav-links{min-width:100% !important;}
|
||||
ul.nav-links > li{display: inline-block;}
|
||||
}
|
||||
@media only screen and (max-width: 1120px), only screen and (max-device-width: 1120px){
|
||||
.footer .box20, .footer .box55, .footer .box15{display: block; clear:both; margin:10px auto; text-align: center; float:none;}
|
||||
.footer .box5{display:none;}
|
||||
.photonstorm-logo{margin:10px auto;}
|
||||
.footer .box55{width:100%; float:none; margin:10px auto;}
|
||||
.footer ul.footer-links{width:100%;}
|
||||
.footer ul.footer-links > li{float:none;}
|
||||
.footer > .main-container > .line{margin-top: 125px;}
|
||||
}
|
||||
@media only screen and (max-width: 1020px), only screen and (max-device-width: 1020px){
|
||||
.phaser-logo{display:none;}
|
||||
.header{margin-bottom: -350px;}
|
||||
p.title, p.count-examples{text-align: center;}
|
||||
.box20, .box60{min-width:100% !important; clear:both; width: 100% !important; max-width: 100% !important; text-align: center;}
|
||||
a.prize-button{margin:0 auto; float:none;display:block;}
|
||||
.prize-bg{background: transparent;}
|
||||
}
|
||||
@media only screen and (max-width: 810px), only screen and (max-device-width: 810px){
|
||||
.main-container{width:100%;}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
|
||||
<head>
|
||||
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
|
||||
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
|
||||
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
|
||||
<script src='./js/application.js' type='text/javascript'></script>
|
||||
<link href='./css/stylesheet.css' media='screen' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="box100 no-padding">
|
||||
<div class="phaser-version">
|
||||
<span>Phaser Version: 1.0.6</span>
|
||||
<a href="#" class="version-button">Update to 1.0.7</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<div class="line">
|
||||
<div class="box20">
|
||||
<ul class="nav-links">
|
||||
<li class="link-home"><a href="#">Back to examples</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box60 txt-center">
|
||||
<span class="main-title">Starstruck</span>
|
||||
</div>
|
||||
<div class="box20">
|
||||
<div class="phaser-logo"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="game-panel centered">
|
||||
<img src="./img/screenshot.jpg" alt="" class="game-screen"/>
|
||||
<div class="game-controls">
|
||||
<ul class="left-controls">
|
||||
<li class="controls-label"></li>
|
||||
<li class="up-label"></li>
|
||||
<li class="down-label"></li>
|
||||
<li class="left-label"></li>
|
||||
<li class="right-label"></li>
|
||||
<li class="space-label"></li>
|
||||
</ul>
|
||||
<ul class="right-controls">
|
||||
<li class="pause-button"></li>
|
||||
<li class="mute-button"></li>
|
||||
<li class="reset-button"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clear filler"></div>
|
||||
<div class="gradient helvetica">
|
||||
<p class="centered px800">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. </p>
|
||||
<p class="centered px800">Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. </p>
|
||||
<pre class="code-block prettyprint centered">
|
||||
var Phaser;
|
||||
(function (Phaser) {
|
||||
var Basic = (function () {
|
||||
function Basic(game) {
|
||||
this.name = 'Space Harrier';
|
||||
this._game = game;
|
||||
this.ID = -1;
|
||||
this.exists = true;
|
||||
this.active = true;
|
||||
}
|
||||
Basic.prototype.destroy =
|
||||
function () {
|
||||
};
|
||||
// Code Comment
|
||||
Basic.prototype.toString =
|
||||
function () {
|
||||
return "";
|
||||
};
|
||||
return Basic;
|
||||
})();
|
||||
Phaser.Basic = Basic;
|
||||
})(Phaser || (Phaser = {}));
|
||||
</pre>
|
||||
<div class="clear20"></div>
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
||||
<div class="footer">
|
||||
<div class="main-container centered">
|
||||
<div class="clear25"></div>
|
||||
<div class="line">
|
||||
<div class="box20 helvetica">
|
||||
<a href="#" class="photonstorm-logo"></a>
|
||||
© 2013 Photon Storm Ltd.<br/>
|
||||
All rights reserved.
|
||||
</div>
|
||||
<div class="box5">
|
||||
<div class="flixel-logo"></div>
|
||||
</div>
|
||||
<div class="box15 helvetica">
|
||||
Looking for a flash game framework?<br/>
|
||||
<a href="#">Try flixel!</a>
|
||||
</div>
|
||||
<div class="box55 helvetica float-right">
|
||||
<ul class="footer-links">
|
||||
<li><a class="forums-icon" href="#">Phaser Forums</a></li>
|
||||
<li><a class="twitter-icon" href="#">@Photonstorm</a></li>
|
||||
<li><a class="github-icon" href="#">Phaser on Github</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@@ -0,0 +1,157 @@
|
||||
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
|
||||
<head>
|
||||
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
|
||||
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
|
||||
<script src='./js/application.js' type='text/javascript'></script>
|
||||
<link href='./css/stylesheet.css' media='screen' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="box100 no-padding">
|
||||
<div class="phaser-version">
|
||||
<span>Phaser Version: 1.0.6</span>
|
||||
<a href="#" class="version-button">Update to 1.0.7</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<div class="line">
|
||||
<div class="box20">
|
||||
<ul class="nav-links">
|
||||
<li class="link-home"><a href="#">Phaser Home</a></li>
|
||||
<li class="link-latest"><a href="#">Download Latest</a></li>
|
||||
<li class="link-forum"><a href="#">Support Forum</a></li>
|
||||
<li class="link-docs"><a href="#">Documentation</a></li>
|
||||
<li class="link-twitter"><a href="#">Twitter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box60 txt-center">
|
||||
<div class="phaser-examples"></div>
|
||||
</div>
|
||||
<div class="box20">
|
||||
<div class="phaser-logo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear clear25"></div>
|
||||
|
||||
<div class="line go-top border-bottom">
|
||||
<div class="box20">
|
||||
<p class="title strong">audio</p>
|
||||
<p class="count-examples strong">9 examples</p>
|
||||
</div>
|
||||
<div class="box80">
|
||||
<ul class="group-items">
|
||||
<li><a href="http://google.com">Play music<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Group<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite<span class="mark"></span></a></li>
|
||||
<li><a href="#">Play music2<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Group2<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite2<span class="mark"></span></a></li>
|
||||
<li><a href="#">Play music3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Group3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite2<span class="mark"></span></a></li>
|
||||
<li><a href="#">Play music3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Group3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite2<span class="mark"></span></a></li>
|
||||
<li><a href="#">Play music3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Group3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite2<span class="mark"></span></a></li>
|
||||
<li><a href="#">Play music3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Group3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite2<span class="mark"></span></a></li>
|
||||
<li><a href="#">Play music3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Group3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite2<span class="mark"></span></a></li>
|
||||
<li><a href="#">Play music3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Group3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite2<span class="mark"></span></a></li>
|
||||
<li><a href="#">Play music3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Group3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite2<span class="mark"></span></a></li>
|
||||
<li><a href="#">Play music3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Group3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite3<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite2<span class="mark"></span></a></li>
|
||||
<li><a href="#">Play music3<span class="mark"></span></a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear5"></div>
|
||||
<div class="line dark-bg">
|
||||
<div class="box20">
|
||||
<p class="title strong">Collision</p>
|
||||
<p class="count-examples strong">3 examples</p>
|
||||
</div>
|
||||
<div class="box80">
|
||||
<ul class="group-items">
|
||||
<li><a href="#">Play music<span class="mark"></span></li>
|
||||
<li><a href="#">Sprite vs Group<span class="mark"></span></li>
|
||||
<li><a href="#">Sprite vs Sprite<span class="mark"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear5"></div>
|
||||
<div class="line bright-bg">
|
||||
<div class="box20">
|
||||
<p class="title strong">Tilemaps</p>
|
||||
<p class="count-examples strong">7 examples</p>
|
||||
</div>
|
||||
<div class="box80">
|
||||
<ul class="group-items">
|
||||
<li><a href="#">Play music<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Group<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite<span class="mark"></span></a></li>
|
||||
<li><a href="#">Play music2<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Group2<span class="mark"></span></a></li>
|
||||
<li><a href="#">Sprite vs Sprite2<span class="mark"></span></a></li>
|
||||
<li><a href="#">Play music3<span class="mark"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear5"></div>
|
||||
<div class="gradient">
|
||||
<div class="main-container centered">
|
||||
<div class="prize-bg">
|
||||
<a href="#" class="prize-button">View details & submit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
||||
<div class="footer">
|
||||
<div class="main-container centered">
|
||||
<div class="clear25"></div>
|
||||
<div class="line">
|
||||
<div class="box20 helvetica">
|
||||
<a href="#" class="photonstorm-logo"></a>
|
||||
© 2013 Photon Storm Ltd.<br/>
|
||||
All rights reserved.
|
||||
</div>
|
||||
<div class="box5">
|
||||
<div class="flixel-logo"></div>
|
||||
</div>
|
||||
<div class="box15 helvetica">
|
||||
Looking for a flash game framework?<br/>
|
||||
<a href="#">Try flixel!</a>
|
||||
</div>
|
||||
<div class="box55 helvetica float-right">
|
||||
<ul class="footer-links">
|
||||
<li><a class="forums-icon" href="#">Phaser Forums</a></li>
|
||||
<li><a class="twitter-icon" href="#">@Photonstorm</a></li>
|
||||
<li><a class="github-icon" href="#">Phaser on Github</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,25 @@
|
||||
$(document).ready(function(){
|
||||
$('ul.group-items').each(function(i){
|
||||
var liAmount = $(this).children('li').length;
|
||||
if ((liAmount/4)>9){
|
||||
$(this).addClass('laser10');
|
||||
}else if((liAmount/4)>8){
|
||||
$(this).addClass('laser9');
|
||||
}else if((liAmount/4)>7){
|
||||
$(this).addClass('laser8');
|
||||
}else if((liAmount/4)>6){
|
||||
$(this).addClass('laser7');
|
||||
}else if((liAmount/4)>5){
|
||||
$(this).addClass('laser6');
|
||||
}else if((liAmount/4)>4){
|
||||
$(this).addClass('laser5');
|
||||
}else if((liAmount/4)>3){
|
||||
$(this).addClass('laser4');
|
||||
}else if((liAmount/4)>2){
|
||||
$(this).addClass('laser3');
|
||||
}else if((liAmount/4)>1){
|
||||
$(this).addClass('laser2');
|
||||
}
|
||||
console.log(liAmount/4);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user