图片演示:
代码摘要:
HTML:
<div id="preloadScreen" class="preload-screen external-screen">
<div class="center panel">
<div class="css-loader-container">
<div class="css-loader"></div>
</div>
</div>
</div>
<div id="gameLoader" class="canvas-loader vertical-center">
<div class="center js-loader-container">
<canvas class="canvas"></canvas>
</div>
</div>
<div id="gameContainer"></div>
<div id="rotateDevice" class="rotate-device-overlay vertical-center">
<div class="center">
<div class="segment-phone icon-rotate-device inline-svg js-inline-svg" data-use="#svg-icon-rotate-device-01">Please rotate your device.</div>
<div class="segment-arrows icon-rotate-device inline-svg js-inline-svg" data-use="#svg-icon-rotate-device-01"></div>
</div>
</div>
<div class="helper-btns js-helper-btns">
<button type="button" class="btn btn-sound btn-action-2 btn-bg-glow inline-svg js-inline-svg js-soundBtn js-track-click js-sfx-ui-click" data-use="#svg-btn-sound-01" data-sound="1" data-track-label="Sound" data-track-category="Game-Play-UI">Sound</button>
<button type="button" class="btn btn-help btn-action-2 btn-bg-glow inline-svg js-open-help js-inline-svg js-sfx-ui-click" data-use="#svg-btn-help-01">Help</button>
<button type="button" class="btn btn-menu btn-action-2 inline-svg js-open-menu js-inline-svg js-track-click js-sfx-ui-click" data-use="#svg-btn-pause-01" data-track-label="Menu" data-track-category="Game-Play-UI">Menu</button>
</div>
<svg class="svg-gradient-container" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="0" height="0" viewBox="0 0 0 0" enable-background="new 0 0 0 0" xml:space="preserve">
<g>
<radialGradient id="svg-gradient-1" cx="34" cy="34" r="34" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#231F20;stop-opacity:1" />
<stop offset="1" style="stop-color:#231F20;stop-opacity:0" />
</radialGradient>
<radialGradient id="svg-gradient-2" cx="72" cy="72" r="72" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#231F20;stop-opacity:0.7" />
<stop offset="1" style="stop-color:#231F20;stop-opacity:0" />
</radialGradient>
<radialGradient id="svg-gradient-3" cx="72" cy="72" r="72" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#F8E3D9;stop-opacity:0.5" />
<stop offset="0.1793" style="stop-color:#F8E1CF;stop-opacity:0.4104" />
<stop offset="0.6769" style="stop-color:#F8DDBA;stop-opacity:0.1615" />
<stop offset="1" style="stop-color:#F8DBB2;stop-opacity:0" />
</radialGradient>
</g>
</svg>
CSS:
引入css
<link href="css/style.css" rel="stylesheet" type="text/css">
JS:
<script type="text/javascript">
/**
* LOCALISATION
* ------------
*
* Uncomment the 'window.lang' property to load localisation from an alternate subfolder, e.g.
*
* window.lang = 'es'
*
* to load files from
*
* ./localisation/es/
*/
//window.lang = 'es'
</script>
<script type="text/javascript">
window.base_url = 'http://www.zzfriend.com';
</script>
<div class="js-svg-sprite-def" data-name="store-main" data-url="img/svg-store/store-main.svg?1415836146349" aria-hidden="true"></div>
<script type="text/javascript">
if (!Modernizr.canvas) {
var footer = '<div class="browser-not-supported"><div class="center">';
footer += '<div class="body-text"><p>This game is only compatible with modern browsers.</p><p>Please update your browser to continue.</p></div>';
footer += '<div class="footer">The Hobbit - The Battle of Five Armies. December 2014</div>';
footer += '</div></div>';
document.write(footer);
}
</script>
<script src="js/main.js">
</script>