p5实现古典城楼孔明灯放飞鼠标交互动画带音效效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：p5实现古典城楼孔明灯放飞鼠标交互动画带音效效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
 
    <link href="https://fonts.googleapis.com/css?family=Knewave|Raleway" rel="stylesheet">
<style>
    body {
  position: relative;
  user-select: none;
  cursor: pointer;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: black;
}

@keyframes reveal {
  100% {
    opacity: 1;
  }
}
#instruction {
  position: absolute;
  bottom: 2vw;
  right: 2vw;
  line-height: 0;
  opacity: 1;
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  margin-top: 1em;
  color: white;
}

#title {
  display: block;
  position: absolute;
  top: 25%;
  left: 50%;
  font-family: "Knewave", cursive;
  font-size: 24px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
  opacity: 0.8;
}
#title::after {
  content: "Years";
  display: block;
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  margin-top: 1em;
}

#logo {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

#badgeSound, #badgeDrag {
  width: 60px;
  height: 70px;
  position: absolute;
  left: 80px;
  bottom: 10px;
}

#badgeDrag {
  left: 10px;
}
</style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">


</head>

<body>
    <!-- partial:index.partial.html -->
    <canvas width="800" height="800" id="canvas"></canvas>

    <img id="badgeSound" src="//repo.bfw.wiki/bfwrepo/images/huadeng/Button_Sound_White.svg" />
    <img id="badgeDrag" src="//repo.bfw.wiki/bfwrepo/images/huadeng/Button_Click_White.svg" />

    <img id="badge" src="//repo.bfw.wiki/bfwrepo/images/huadeng/Button_Click_Black.svg">
    <!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5-0.5.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/easeljs.1.0.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tweenjs.1.0.2.js"></script>
    <script >
        (function (cjs, an) {

var p; // shortcut to reference prototypes
var lib={};var ss={};var img={};
lib.ssMetadata = [
		{name:"Alex7Year_atlas_", frames: [[1023,1082,101,213],[0,1082,360,360],[362,1082,360,360],[0,0,1920,1080],[724,1082,297,357]]}
];


// symbols:



(lib.alex = function() {
	this.spriteSheet = ss["Alex7Year_atlas_"];
	this.gotoAndStop(0);
}).prototype = p = new cjs.Sprite();



(lib.lantern_0 = function() {
	this.spriteSheet = ss["Alex7Year_atlas_"];
	this.gotoAndStop(1);
}).prototype = p = new cjs.Sprite();



(lib.lantern_1 = function() {
	this.spriteSheet = ss["Alex7Year_atlas_"];
	this.gotoAndStop(2);
}).prototype = p = new cjs.Sprite();



(lib.temple = function() {
	this.spriteSheet = ss["Alex7Year_atlas_"];
	this.gotoAndStop(3);
}).prototype = p = new cjs.Sprite();



(lib.type = function() {
	this.spriteSheet = ss["Alex7Year_atlas_"];
	this.gotoAndStop(4);
}).prototype = p = new cjs.Sprite();
// helper functions:

function mc_symbol_clone() {
	var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop));
	clone.gotoAndStop(this.currentFrame);
	clone.paused = this.paused;
	clone.framerate = this.framerate;
	return clone;
}

function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
	var prototype = cjs.extend(symbol, cjs.MovieClip);
	prototype.clone = mc_symbol_clone;
	prototype.nominalBounds = nominalBounds;
	prototype.frameBounds = frameBounds;
	return prototype;
	}


(lib.Type = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.instance = new lib.type();
	this.instance.parent = this;
	this.instance.setTransform(-106,-172.5);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = getMCSymbolPrototype(lib.Type, new cjs.Rectangle(-106,-172.5,297,357), null);


(lib.Temple = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.instance = new lib.temple();
	this.instance.parent = this;
	this.instance.setTransform(-960,-540);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = getMCSymbolPrototype(lib.Temple, new cjs.Rectangle(-960,-540,1920,1080), null);


(lib.Lantern = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{lantern_0:0,lantern_1:5});

	// Layer_1
	this.instance = new lib.lantern_0();
	this.instance.parent = this;
	this.instance.setTransform(-180,-180);

	this.instance_1 = new lib.lantern_1();
	this.instance_1.parent = this;
	this.instance_1.setTransform(-180,-180);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance}]}).to({state:[{t:this.instance_1}]},5).wait(5));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-180,-180,360,360);


(lib.Alex = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.instance = new lib.alex();
	this.instance.parent = this;
	this.instance.setTransform(-50.5,-106.5);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = getMCSymbolPrototype(lib.Alex, new cjs.Rectangle(-50.5,-106.5,101,213), null);


// stage content:
(lib.Alex7Year = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{temple:0,lantern:7,type:14,alex:21,Temple:0,Lantern:7,Type:14,Alex:21,"Temple":0});

	// Artwork
	this.Temple = new lib.Temple();
	this.Temple.name = "Temple";
	this.Temple.parent = this;
	this.Temple.setTransform(960,540);

	this.Lantern = new lib.Lantern();
	this.Lantern.name = "Lantern";
	this.Lantern.parent = this;
	this.Lantern.setTransform(1067.6,620.9);

	this.Type = new lib.Type();
	this.Type.name = "Type";
	this.Type.parent = this;
	this.Type.setTransform(941.4,400.6);

	this.Alex = new lib.Alex();
	this.Alex.name = "Alex";
	this.Alex.parent = this;
	this.Alex.setTransform(953.5,857.3);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.Temple}]}).to({state:[{t:this.Lantern}]},7).to({state:[{t:this.Type}]},7).to({state:[{t:this.Alex}]},7).wait(7));

	// Background
	this.instance = new lib.Temple();
	this.instance.parent = this;
	this.instance.setTransform(960,540);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(28));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(960,540,1920,1080);
// library properties:
lib.properties = {
	id: '487D69E3C45A4AA9BA0B5DD3EDB4DE66',
	width: 1920,
	height: 1080,
	fps: 24,
	color: "#FFFFFF",
	opacity: 1.00,
	manifest: [
		{src:"/Alex7Year_atlas_.png", id:"Alex7Year_atlas_"}
	],
	preloads: []
};



// bootstrap callback support:

(lib.Stage = function(canvas) {
	createjs.Stage.call(this, canvas);
}).prototype = p = new createjs.Stage();

p.setAutoPlay = function(autoPlay) {
	this.tickEnabled = autoPlay;
}
p.play = function() { this.tickEnabled = true; this.getChildAt(0).gotoAndPlay(this.getTimelinePosition()) }
p.stop = function(ms) { if(ms) this.seek(ms); this.tickEnabled = false; }
p.seek = function(ms) { this.tickEnabled = true; this.getChildAt(0).gotoAndStop(lib.properties.fps * ms / 1000); }
p.getDuration = function() { return this.getChildAt(0).totalFrames / lib.properties.fps * 1000; }

p.getTimelinePosition = function() { return this.getChildAt(0).currentFrame / lib.properties.fps * 1000; }

an.bootcompsLoaded = an.bootcompsLoaded || [];
if(!an.bootstrapListeners) {
	an.bootstrapListeners=[];
}

an.bootstrapCallback=function(fnCallback) {
	an.bootstrapListeners.push(fnCallback);
	if(an.bootcompsLoaded.length > 0) {
		for(var i=0; i<an.bootcompsLoaded.length; ++i) {
			fnCallback(an.bootcompsLoaded[i]);
		}
	}
};

an.compositions = an.compositions || {};
an.compositions['487D69E3C45A4AA9BA0B5DD3EDB4DE66'] = {
	getStage: function() { return exportRoot.getStage(); },
	getLibrary: function() { return lib; },
	getSpriteSheet: function() { return ss; },
	getImages: function() { return img; }
};

an.com.........完整代码请登录后点击上方下载按钮下载查看