Hbuilder创建项目，制作html网页第六天

标签：img Hbuilder 第六天 html PIXI push var new png

纹理切换

更换图片中显示的内容，可以让元素中的内容产生变化

元素与纹理

var feiji = new PIXI.Sprite.fromImage("img/plane1.png")

feiji是图片元素， "img/plane.png" 是纹理

创建纹理

var t1=new PIXI.Texture.fromImage("img/plane07.png")

创建图片并添加纹理

1、添加图片 var tiaoyue=new PIXI.Sprite.fromImage("img/tiao.png");

2、创建纹理 var shang=new PIXI.Texture.fromImage("img/tiaoqi.png");

修改图片元素中的纹理

1、创建纹理1 var t1 = new PIXI.Texture.fromImage("img/plane1.png");

var t2 = new PIXI.Texture.fromImage("img/plane2.png");

2、创建图片元素并添加纹理 t1 var plane = new PIXI.Sprite( t1 );

3、将plane元素中的纹理更改为t2 plane.texture = t2;

通过快速切换纹理实现帧频动画

1、准备一个存放所有纹理路径的数组

var baozha=[];
baozha.push("img/bao01.png");
baozha.push("img/bao02.png");
baozha.push("img/bao03.png");
baozha.push("img/bao04.png");
baozha.push("img/bao05.png");

2、创建纹理播放器

var enemybeng=new PIXI.extras.AnimatedSprite.fromImages(baozha);

3、调整属性并在应用中添加播放器

baozha.x = 200;

baozha.y = 200;

app.stage.addChild( baozha );

4、设置播放速度

baozha.animationSpeed = 0.15;

5、播放动画

baozha.play();

常用属性

animationSpeed 值在0-1之间，默认值是1

texture 播放器中的“欢迎图片“，播放器停止时、第一次播放时会呈现该图片（默认使用过第1个纹理作为欢迎图片）

textures 播放器中所有的纹理图像，可以用其他纹理数组为其赋值，改变原有播放器中播放的纹理

loop是否重复播放 1：重复播放，0 不重复播放，默认值是1

onComplete使用函数名赋值，当loop等于0时，播放完成后调用函数

方法

play( ) 播放动画

stop( ) 停止播放

练习一：飞机爆炸

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/pixi.min.js"></script>
	</head>
	<body>
		<script>
			var app=new PIXI.Application(500,700);
			document.body.appendChild(app.view);
			var bg=new PIXI.Sprite.fromImage("img/bg_01.png");
			app.stage.addChild(bg);
			//飞机
			var feiji=new PIXI.Sprite.fromImage("img/plane_blue_01.png");
			feiji.x=200;
			feiji.y=500;
			app.stage.addChild(feiji);
			//敌机
			var dj=new PIXI.Sprite.fromImage("img/enemy.png");
			dj.x=200;
			dj.y=0;
			app.stage.addChild(dj);
			//子弹
			var zd=new PIXI.Sprite.fromImage("img/bullet.png");
			zd.x=233;
			zd.y=500;
			app.stage.addChild(zd);
			//
			var baozha=[];
			baozha.push("img/bao01.png");
			baozha.push("img/bao02.png");
			baozha.push("img/bao03.png");
			baozha.push("img/bao04.png");
			baozha.push("img/bao05.png");
			baozha.push("img/bao06.png");
			baozha.push("img/bao07.png");
			var enemybeng=new PIXI.extras.AnimatedSprite.fromImages(baozha);
			enemybeng.animationSpeed=0.15;
			enemybeng.loop=0
			enemybeng.x=dj.x;
			enemybeng.y=dj.y;
			function move(){
				zd.y-=2;
				if((zd.y-dj.y)*(zd.y-dj.y)+(zd.x-dj.x)*(zd.x-dj.x)<=(77*77)){
					enemybeng.play();
					app.stage.addChild(zd);
					app.stage.addChild(enemybeng);
					app.stage.removeChild(dj);
					enemybeng.onComplete=remove;
					app.stage.removeChild(zd)
				}
				}
			function remove(){
				app.stage.removeChild(enemybeng)
			}
			app.ticker.add(move);
		</script>
	</body>
<ml>

</html>

图一

图二

练习二：飞机切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/pixi.min.js"></script>
		<link rel="shortcut icon" href="#"/>
	</head>
	<body>
		<script type="text/javascript">
		    //思路：先创建纹理再创建一台主机，和三台备选机。给三台备选机添加监听事件，添加点击事件，设置函数让点击飞机时切换到对应的纹理
		    //应用
			var app=new PIXI.Application(500,800);
			document.body.appendChild(app.view);
			//创建纹理
			var t1=new PIXI.Texture.fromImage("img/img_plane_main_07.png")
			var t2=new PIXI.Texture.fromImage("img/img_plane_main_08.png")
			var t3=new PIXI.Texture.fromImage("img/img_plane_main_09.png")
			//飞机
		    var feiji=new PIXI.Sprite.fromImage("img/plane_blue_01.png");
			feiji.x=200;
			feiji.y=250;
			app.stage.addChild(feiji);
			//添加三个备选飞机
			var bj1=new PIXI.Sprite.fromImage("img/img_plane_main_07.png");
			var bj2=new PIXI.Sprite.fromImage("img/img_plane_main_08.png");
			var bj3=new PIXI.Sprite.fromImage("img/img_plane_main_09.png");
			bj1.x=20;
			bj1.y=400;
			bj2.x=200;
			bj2.y=400;
			bj3.x=370;
			bj3.y=400;
			app.stage.addChild(bj1);
			app.stage.addChild(bj2);
			app.stage.addChild(bj3);
			bj1.interactive=true;
			bj2.interactive=true;
			bj3.interactive=true;
			bj1.on("click",Cbj1);
			bj2.on("click",Cbj2);
			bj3.on("click",Cbj3);
			function Cbj1(){
				feiji.texture=t1;
			}
			function Cbj2(){
				feiji.texture=t2;
			}
			function Cbj3(){
				feiji.texture=t3;
			}
			
		</script>
	</body>
</html>

图三

图四

图五

练习三：蝴蝶振动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/pixi.min.js"></script>
		<link rel="shortcut icon" href="#"/>
	</head>
	<body>
		<script type="text/javascript">
		var app=new PIXI.Application(500,800);
		document.body.appendChild(app.view);
			//创建数组
			var hs=[];
			//向数组中添加纹理
			hs.push("img/planplay_1.png");
			hs.push("img/planplay_2.png");
			hs.push("img/planplay_3.png");
			hs.push("img/planplay_4.png");
			hs.push("img/planplay_5.png");
			hs.push("img/planplay_6.png");
			hs.push("img/planplay_7.png");
			hs.push("img/planplay_8.png");
			hs.push("img/planplay_9.png");
			hs.push("img/planplay_10.png");
			hs.push("img/planplay_11.png");
			//创建纹理播放器
			var hsFlay=new PIXI.extras.AnimatedSprite.fromImages(hs);
			hsFlay.x=200;
			hsFlay.y=200;
			app.stage.addChild(hsFlay);
			//循环播放1、设置播放速度2、播放
			hsFlay.animationSpeed=0.15;
			
			hsFlay.play();
			
			
		</script>
	</body>
</html>

图六

图七

练习四：跑酷

<!D<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/pixi.min.js"></script>
	</head>
	<body>
		<script>
		    //应用
			var app=new PIXI.Application(700,510);
			document.body.appendChild(app.view);
			//天空
			var tiankong=new PIXI.Sprite.fromImage("img/bg2.png");
			app.stage.addChild(tiankong);
			//天空1
			var tiankong1=new PIXI.Sprite.fromImage("img/bg2.png");
			tiankong1.x=800;
			app.stage.addChild(tiankong1);
			//海面
			var haimian=new PIXI.Sprite.fromImage("img/bg3.png");
			haimian.y=200;
			app.stage.addChild(haimian);
			//海面1
			var haimian1=new PIXI.Sprite.fromImage("img/bg3.png");
			haimian1.x=800;
			haimian1.y=200;
			app.stage.addChild(haimian1);
			//地面
			var dimian=new PIXI.Sprite.fromImage("img/bg4.png");
			dimian.width=1600;
			dimian.y=400;
			app.stage.addChild(dimian);
			//跳跃
			var tiaoyue=new PIXI.Sprite.fromImage("img/tiao.png");
			tiaoyue.x=560;
			tiaoyue.y=360;
			app.stage.addChild(tiaoyue);
			//角色纹理数组
			var js=[];
			js.push("img/player1.png");
			js.push("img/player2.png");
			js.push("img/player3.png");
			js.push("img/player4.png");
			js.push("img/player5.png");
		    //添加纹理(角色上下)
		    var shang=new PIXI.Texture.fromImage("img/tiaoqi.png");
		    var xia=new PIXI.Texture.fromImage("img/luoxia.png");
		    //创建纹理播放器
		    var jsPlay=new PIXI.extras.AnimatedSprite.fromImages(js);
		    jsPlay.x=20;
		    jsPlay.y=320;
		    jsPlay.animationSpeed=0.15;
		    app.stage.addChild(jsPlay);
		    jsPlay.play();
		    var istiao=-1;
		    function move(){
		    	if(istiao==1){
		    		jsPlay.y-=3;
		    		jsPlay.texture=shang;
		    		jsPlay.stop();
		    		if(jsPlay.y<=100)istiao=0;
		    	}
		    	if(istiao==0){
		    		jsPlay.y+=3;
		    		jsPlay.texture=xia;
		    		if(jsPlay.y==320){
		    		    istiao=-1;
		    		    jsPlay.play();
		    		}
		        }
		    	//天空
		        if(tiankong.x>-800){
					tiankong.x-=3;
					tiankong1.x=tiankong.x+800;
				}else{
					tiankong.x=tiankong1.x;
				}
				//海面
				if(haimian.x>-800){
					haimian.x-=2;
					haimian1.x=haimian.x+800;
				}else{
					haimian.x=haimian1.x;
				}
		        //地面
		        dimian.x-=5;
		        if(dimian.x<=-700)dimian.x=0;
		    }
		    //添加帧函数
		    app.ticker.add(move);
		    tiaoyue.interactive=true;
		    tiaoyue.on("pointertap",tiao);
		    function tiao(){
		    	if(jsPlay.y==320){
		    		istiao=1;
		    	}
		    }
		</script>
	</body>
</html>

图八

图九

图十

今日反思及总结：

1、飞机爆炸中：

（1）给爆炸设置一组数组var baozha[];baozha.push("img/bao01.png");baozha.push("img/bao02.png");

（2）创建纹理播放器,var enemybeng=new PIXI.extras.AnimatedSprite.fromImages(baozha);

（3）设置播放器位置,enemybeng.x=dj.x;enemybeng.y=dj.y;

2、飞机切换中：

（1）先创建纹理再创建一台主机，和三台备选机。给三台备选机添加监听事件，添加点击事件，设置函数让点击飞机时切换到对应的纹理

标签：img,Hbuilder,第六天,html,PIXI,push,var,new,png
From： https://blog.csdn.net/m0_65230676/article/details/139789035