前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【开源游戏/网络游戏】勇士的战争!

【开源游戏/网络游戏】勇士的战争!

作者头像
用户5997198
发布2019-12-19 16:41:51
1.6K0
发布2019-12-19 16:41:51
举报
文章被收录于专栏:蚂蚁开源社区蚂蚁开源社区
游戏说明: 勇士的战争,拿起属于你的弓和箭,为你的荣誉而战!

图片演示:

代码摘要:

HTML:

代码语言:javascript
复制
<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

代码语言:javascript
复制
<link href="css/style.css" rel="stylesheet" type="text/css">

JS:

代码语言:javascript
复制
<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>
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-12-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 蚂蚁大喇叭 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档