抖音很火的召唤神龙的小游戏完整代码-召唤神龙
Posted 阳阳D_C
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了抖音很火的召唤神龙的小游戏完整代码-召唤神龙相关的知识，希望对你有一定的参考价值。
抖音很火的解压小游戏，完整代码分享。有兴趣的可以试着写一下。
1. index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>召唤神龙</title>
<!--http://www.html5rocks.com/en/mobile/mobifying/-->
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1"/>
<!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=no">
<!-- force webkit on 360 -->
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<!-- force edge on IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="msapplication-tap-highlight" content="no">
<!-- force full screen on some browser -->
<meta name="full-screen" content="yes"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<!-- force screen orientation on some browser -->
<meta name="screen-orientation" content=""/>
<meta name="x5-orientation" content="">
<!--fix fireball/issues/3568 -->
<!--<meta name="browsermode" content="application">-->
<meta name="x5-page-mode" content="app">
<!--<link rel="apple-touch-icon" href=".png" />-->
<!--<link rel="apple-touch-icon-precomposed" href=".png" />-->
<!-- <script>
pushHistory();
window.addEventListener("popstate", function(e)
, false);
function pushHistory()
var state =
title: "",
url: window.location.href
;
window.history.pushState(state, state.title, state.url);
</script> -->
<link rel="stylesheet" type="text/css" href="style-mobile.css"/>
</head>
<!-- <body style="margin: 0; background: #ddd;" align="center"> -->
<div style="align:center;display: none"><img src="res/share.png" width="10%" /></div>
<!-- <div id="canvasDiv" style="width:100%;height:100%;">
</div> -->
<canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0" ></canvas>
<video id="contentElement" style = "display:none;position: absolute;top:0px;left: 0px;">
<!-- <source src="http://rmcdn.2mdn.net/Demo/vast_inspector/android.mp4"></source>
<source src="http://rmcdn.2mdn.net/Demo/vast_inspector/android.webm"></source> -->
</video>
<div id="block-Box" style="display:block;width:100%;height:100%;"></div>
<div id="adContainer" style="display:none;position: absolute;top:0px;left: 0px;width:100%;height:100%;z-index:999;"></div>
<div id="loadingText"
style="width:100%;display: none;text-align:center;position:absolute;top:45%;z-index:2;font-size:20px;color:#f99f0a">
loading......0%
</div>
<div id="splash">
<!-- <div class="progress-bar stripes"> -->
<!-- <span style="width: 0%"></span> -->
<!-- </div> -->
</div>
<div id="loadingImg" style="top:45%;width: 100%;position:absolute; ">
<img src="res/loading.gif" width="7%" height="7%" />
</div>
<!-- 判断浏览器是否屏蔽广告 -->
<script src="http://demo.jb51.net/js/2015/adview_pic_cpc_cpm_cpa_guanggao_gg_ads_300x250.js" type="text/javascript"></script>
<script type="text/javascript">
var killAdT = typeof(killads);
// <!-- if (typeof(killads)=='undefined') -->
// <!-- alert('广告被过滤'); -->
// <!-- -->
</script>
<!--<div align="center" style="font-size: 10px;color: dimgrey">advertisement</div>-->
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script type="text/javascript" src="ads.js"></script>
<script src="src/settings.js" charset="utf-8"></script>
<script type="text/javascript">
var preloader;
var adCompleteFlag = false;
var resCompleteFlag = false;
var adEndComplete = false;
var resEndComplete = false;
judgeLanTitle();
function judgeLanTitle()
// console.log("window.navigator.language",window.navigator.language);
if( window.navigator.language=="zh-CN" ||window.navigator.language=="zh-cn")
document.title = "召唤神龙";
else if(window.navigator.language == "zh-TW" )
document.title = "召喚神龍";
else if(window.navigator.language == "zh-HK" )
document.title = "召喚神龍";
else if(window.navigator.language == "ko-KR")
document.title = "신용 소환";
else if(window.navigator.language == "ja-JP")
document.title = "神竜を召喚する";
else if(window.navigator.language == "th-TH")
document.title = "เรียกมังกร";
else
document.title = "Summon the Dragon";
var loadintT = document.getElementById("loadingText");
var loadintGif = document.getElementById("loadingImg")
setTimeout(function ()
loadintGif.remove();
loadintT.style.display = ""
updateLabView(0.1);
, 1 * 1000)
window.timer = null;
window.tempSeconds = 1;
window.loadData = ;
loadData.completedCount = 0;
loadData.totalCount = 0;
onload();
function onload()
var winHeight = document.documentElement.clientHeight;
document.getElementById("canvasDiv").style.height = winHeight+"px";
;
window.onload =function()
document.getElementById("block-Box").style.display = "none";
function updateLabView(t)
if (timer != null)
clearInterval(timer);
timer = setInterval(function ()
tempSeconds++;
actualTotal();
var loadintT = document.getElementById("loadingText")
if(!loadintT)
// clearInterval(timer);
return;
loadintT.innerHTML = 'loading......' + parseInt(tempSeconds) + '%';
switch (tempSeconds)
case 20:
updateLabView(0.2);
break;
case 40:
updateLabView(0.3);
break;
case 60:
updateLabView(0.4);
break;
case 96:
updateLabView(5);
break;
case 97:
updateLabView(10);
break;
case 98:
updateLabView(50);
break;
case 99:
updateLabView(100);
break;
default:
if (tempSeconds >= 80 && tempSeconds < 96)
updateLabView(t + 0.1);
break;
if (tempSeconds > 100)
clearInterval(timer);
tempSeconds = 100
loadintT.innerHTML = 'loading......' + parseInt(tempSeconds) + '%';
, t * 1000);
function actualTotal()
var percent = parseInt(100 * loadData.completedCount / loadData.totalCount);
if (percent > tempSeconds && loadData.totalCount > 1)
tempSeconds = percent;
function finishLoad()
clearInterval(timer);
loadintT.innerHTML = 'loading......100' + '%';
setTimeout(function()
loadintT.remove();
,0.1 * 1000);
</script>
<script src="src/settings.js" charset="utf-8"></script>
<script src="main.js" charset="utf-8"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 水工厂 -->
<!-- <ins class="adsbygoogle"
style="position:absolute;border-top:5px #f0f0f1 solid;background:#f0f0f1;bottom:0px;z-index:1000;display:inline-block;min-width:320px;max-width:970px;width:100%;height:60px"
data-ad-client="ca-pub-3932234672445376"
data-ad-slot="1751302463"></ins>
<script>
var ads = document.getElementsByClassName('adsbygoogle')[0];
if (document.body.clientHeight > 700)
ads.style.height = 80+'px';
else
ads.style.height = 60+'px';
</script>
<script>
function ShowBannerAD()
(adsbygoogle = window.adsbygoogle || []).push();
</script> -->
<!-- 果盘合合 -->
<script async
data-ad-client="ca-pub-3932234672445376"
data-ad-channel="1828757928"
data-ad-frequency-hint="15s"
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<script>window.adsbygoogle = window.adsbygoogle || [];
const adBreak = function(o) adsbygoogle.push(o);
</script>
<script type="text/javascript">
(function ()
// open web debugger console
if (typeof VConsole !== 'undefined')
window.vConsole = new VConsole();
var debug = window._CCSettings.debug;
var splash = document.getElementById('splash');
splash.style.display = 'block';
function loadScript (moduleName, cb)
function scriptLoaded ()
document.body.removeChild(domScript);
domScript.removeEventListener('load', scriptLoaded, false);
cb && cb();
;
var domScript = document.createElement('script');
domScript.async = true;
domScript.src = moduleName;
domScript.addEventListener('load', scriptLoaded, false);
document.body.appendChild(domScript);
loadScript(debug ? 'cocos2d-js.js' : 'cocos2d-js-min.js', function ()
if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON)
loadScript(debug ? 'physics.js' : 'physics-min.js', window.boot);
else
window.boot();
);
)();
</script>
</body>
</html>
2. ads.js
var videoContent = document.getElementById('contentElement');
var adDisplayContainer =
new google.ima.AdDisplayContainer(
document.getElementById('adContainer'),
videoContent);
// Must be done as the result of a user action on mobile
adDisplayContainer.initialize();
// Re-use this AdsLoader instance for the entire lifecycle of your page.
var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
// Add event listeners
adsLoader.addEventListener(
google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
onAdsManagerLoaded,
false);
adsLoader.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR,
onAdError,
false);
function onAdError(adErrorEvent)
console.log("adError");
document.getElementById("adContainer").style.display = "none";
var GameConfig = __require("GameConfig");
if(GameConfig.playNum == 0)
adCompleteFlag = true;
if(adCompleteFlag && resCompleteFlag)
adCompleteFlag = false;
var launchScene = GameConfig.launchScene;
var Bros = GameConfig.Bros;
var caS = GameConfig.caS;
cc.director.loadScene(launchScene, null,
function ()
adCompleteFlag = false;
if (Bros)
// show canvas
caS = '';
var div = document.getElementById('GameDiv');
if (div)
div.style.backgroundImage = '';
cc.loader.onProgress = null;
console.log('Success to load scene: ' + launchScene);
);
adEndComplete = true;
if(adEndComplete && resEndComplete)
adEndComplete = false;
console.log("indexOverErr");
var MainManger = __require("MainManage");
MainManger.showGameEndLayer();
// Handle the error logging and destroy the AdsManager
console.log(adErrorEvent.getError());
adsManager.destroy();
// An event listener to tell the SDK that our content video
// is completed so the SDK can play any post-roll ads.
var contentEndedListener = function() adsLoader.contentComplete();;
videoContent.onended = contentEndedListener;
// Request video ads.
var preloader = new google.ima.AdsRequest();
preloader.adTagUrl = 'https://googleads.g.doubleclick.net/pagead/ads?ad_type=video_image&client=ca-games-pub-8708616103041212&description_url=http%3A%2F%2Fwww.vsane.com&videoad_start_delay=-1&hl=zh_CN&max_ad_duration=15000';
// Specify the linear and nonlinear slot sizes. This helps the SDK to
// select the correct creative if multiple are returned.
preloader.linearAdSlotWidth = 640;
preloader.linearAdSlotHeight = 400;
preloader.nonLinearAdSlotWidth = 640;
preloader.nonLinearAdSlotHeight = 400;
// showMyAds();
function showMyAds()
// alert("showMy");
if (typeof(killads)=='undefined')
// alert('广告被过滤');
console.log("AdNo");
adEndComplete = false;
var MainManger = __require("MainManage");
MainManger.showGameEndLayer();
else
var winHeight = document.documentElement.clientHeight;
if (document.body.clientHeight > 700)
document.getElementById("adContainer").style.height = winHeight-85+"px";
else
document.getElementById("adContainer").style.height = winHeight-65+"px";
// document.getElementById("adContainer").style.height = winHeight-60+"px";
document.getElementById("adContainer").style.display = "block";
adsLoader.requestAds(preloader);
function onAdsManagerLoaded(adsManagerLoadedEvent)
console.log("ADLoad");
adCompleteFlag = true;
// document.getElementById("adContainer").style.display = "block";
// Get the ads manager.
adsManager = adsManagerLoadedEvent.getAdsManager(
videoContent); // See API reference for contentPlayback
// Add listeners to the required events.
adsManager.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR,
onAdError);
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
onContentPauseRequested);
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
onContentResumeRequested);
var o = document.getElementById("adContainer");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //宽度
try
// Initialize the ads manager. Ad rules playlist will start at this time.
adsManager.init(w, h, google.ima.ViewMode.FULLSCREEN);
// Call start to show ads. Single video and overlay ads will
// start at this time; this call will be ignored for ad rules, as ad rules
// ads start when the adsManager is initialized.
adsManager.start();
catch (adError)
// An error may be thrown if there was a problem with the VAST response.
// Play content here, because we won't be getting an ad.
// videoContent.play();
function onContentPauseRequested()
// This function is where you should setup UI for showing ads (e.g.
// display ad timer countdown, disable seeking, etc.)
videoContent.removeEventListener('ended', contentEndedListener);
videoContent.pause();
//广告结束的时候调用的函数
function onContentResumeRequested()
console.log("ADLoadComplete",resEndComplete);
var GameConfig = __require("GameConfig");
console.log("IndexMainManger",GameConfig.launchScene, GameConfig.Bros,GameConfig.caS);
if(GameConfig.playNum == 1)
adCompleteFlag = true;
if(adCompleteFlag && resCompleteFlag)
var launchScene = GameConfig.launchScene;
var Bros = GameConfig.Bros;
var caS = GameConfig.caS;
cc.director.loadScene(launchScene, null,
function ()
adCompleteFlag = false;
if (Bros)
// show canvas
var canvas = document.getElementById('GameCanvas');
canvas.style.visibility = '';
var div = document.getElementById('GameDiv');
if (div)
div.style.backgroundImage = '';
cc.loader.onProgress = null;
console.log('Success to load scene1: ' + launchScene);
);
adEndComplete = true;
if(adEndComplete && resEndComplete)
adEndComplete = false;
console.log("indexOverErr");
var MainManger = __require("MainManage");
MainManger.showGameEndLayer();
// This function is where you should ensure that your UI is ready
// to play content.
document.getElementById("adContainer").style.display = "none";
// videoContent.addEventListener('ended', contentEndedListener);
// videoContent.play();
function noAdGoToScene()
var GameConfig = __require("GameConfig");
console.log("IndexMainMangerMaing",GameConfig.launchScene, GameConfig.Bros,GameConfig.caS);
var launchScene = GameConfig.launchScene;
var Bros = GameConfig.Bros;
var caS = GameConfig.caS;
cc.director.loadScene(launchScene, null,
function ()
adCompleteFlag = false;
if (Bros)
// show canvas
var canvas = document.getElementById('GameCanvas');
canvas.style.visibility = '';
var div = document.getElementById('GameDiv');
if (div)
div.style.backgroundImage = '';
cc.loader.onProgress = null;
console.log('Success to load scene1Main: ' + launchScene);
);
3.mian.js
var loadingNum = 0;
window.boot = function ()
var settings = window._CCSettings;
window._CCSettings = undefined;
var onProgress = null;
var RESOURCES = cc.AssetManager.BuiltinBundleName.RESOURCES;
var INTERNAL = cc.AssetManager.BuiltinBundleName.INTERNAL;
var MAIN = cc.AssetManager.BuiltinBundleName.MAIN;
function setLoadingDisplay ()
// Loading splash scene
var splash = document.getElementById('splash');
var loadintT = document.getElementById("loadingText")
// var progressBar = splash.querySelector('.progress-bar span');
cc.loader.onProgress = function (finish, total, item)
loadData.completedCount = finish;
loadData.totalCount = total;
var percent = 100 * finish / total;
if(loadingNum >= 1 && total > 1)
if(percent.toFixed(0) >= 100)
loadintT.innerHTML = 'loading......100' + '%';
clearInterval(timer);
setTimeout(function()
loadintT.remove();
,0.1 * 1000);
loadingNum++;
;
splash.style.display = 'block';
// progressBar.style.width = '0%';
cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function ()
splash.style.display = 'none';
);
var onStart = function ()
cc.view.enableRetina(true);
cc.view.resizeWithBrowserSize(true);
if (cc.sys.isBrowser)
setLoadingDisplay();
if (cc.sys.isMobile)
if (settings.orientation === 'landscape')
cc.view.setOrientation(cc.macro.ORIENTATION_LANDSCAPE);
else if (settings.orientation === 'portrait')
cc.view.setOrientation(cc.macro.ORIENTATION_PORTRAIT);
// cc.view.enableAutoFullScreen([
// cc.sys.BROWSER_TYPE_BAIDU,
// cc.sys.BROWSER_TYPE_BAIDU_APP,
// cc.sys.BROWSER_TYPE_WECHAT,
// cc.sys.BROWSER_TYPE_MOBILE_QQ,
// cc.sys.BROWSER_TYPE_MIUI,
// cc.sys.BROWSER_TYPE_HUAWEI,
// cc.sys.BROWSER_TYPE_UC,
// ].indexOf(cc.sys.browserType) < 0);
cc.view.enableAutoFullScreen(false);
// Limit downloading max concurrent task to 2,
// more tasks simultaneously may cause performance draw back on some android system / browsers.
// You can adjust the number based on your own test result, you have to set it before any loading process to take effect.
if (cc.sys.isBrowser && cc.sys.os === cc.sys.OS_ANDROID)
cc.assetManager.downloader.maxConcurrency = 2;
cc.assetManager.downloader.maxRequestsPerFrame = 2;
var launchScene = settings.launchScene;
var bundle = cc.assetManager.bundles.find(function (b)
return b.getSceneInfo(launchScene);
);
var canvas;
if (cc.sys.isBrowser)
canvas = document.getElementById('GameCanvas');
var MainManger = __require("MainManage");
MainManger.init(launchScene,cc.sys.isBrowser,canvas.style.visibility);
// bundle.loadScene(launchScene, null, onProgress,
// function (err, scene)
// if (!err)
// cc.director.runSceneImmediate(scene);
// if (cc.sys.isBrowser)
// // show canvas
// var canvas = document.getElementById('GameCanvas');
// canvas.style.visibility = '';
// var div = document.getElementById('GameDiv');
// if (div)
// div.style.backgroundImage = '';
//
// console.log('Success to load scene: ' + launchScene);
//
//
//
// );
;
var option =
id: 'GameCanvas',
debugMode: settings.debug ? cc.debug.DebugMode.INFO : cc.debug.DebugMode.ERROR,
showFPS: settings.debug,
frameRate: 60,
groupList: settings.groupList,
collisionMatrix: settings.collisionMatrix,
;
cc.assetManager.init(
bundleVers: settings.bundleVers,
remoteBundles: settings.remoteBundles,
server: settings.server
);
var bundleRoot = [INTERNAL];
settings.hasResourcesBundle && bundleRoot.push(RESOURCES);
var count = 0;
function cb (err)
if (err) return console.error(err.message, err.stack);
count++;
if (count === bundleRoot.length + 1)
cc.assetManager.loadBundle(MAIN, function (err)
if (!err) cc.game.run(option, onStart);
);
cc.assetManager.loadScript(settings.jsList.map(function (x) return 'src/' + x;), cb);
for (var i = 0; i < bundleRoot.length; i++)
cc.assetManager.loadBundle(bundleRoot[i], cb);
;
if (window.jsb)
var isRuntime = (typeof loadRuntime === 'function');
if (isRuntime)
require('src/settings.js');
require('src/cocos2d-runtime.js');
if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON)
require('src/physics.js');
require('jsb-adapter/engine/index.js');
else
require('src/settings.js');
require('src/cocos2d-jsb.js');
if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON)
require('src/physics.js');
require('jsb-adapter/jsb-engine.js');
cc.macro.CLEANUP_IMAGE_CACHE = true;
window.boot();
以上是关于抖音很火的召唤神龙的小游戏完整代码-召唤神龙的主要内容，如果未能解决你的问题，请参考以下文章