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

最新推荐文章于 2024-07-29 11:53:27 发布

M小慕同学

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量416

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_65230676/article/details/139745776

版权

数组

1、定义数组

var fishs=[ ];

2、向数组中添加元素

fishList.push( fish )；

3、循环遍历数组

var fishLeft = [50,10,800];

for(var i=0; i<3; i++){ }

4、获取数组长度

var fishLeft = [10,20,30]; fishLeft .length;

5、使用数组长度增强遍历

for (var i=0;i<fishLeft.length;i++){
fishLeft[i].x-=2;

6、删除元素

数组名称.splice(下标 , 个数);

var fishLeft= [100,200,300,400,500];fishRight.splice(i,1);

帧频控制

1、计时动画

定义时间变量 var time = 60;

定义计数变量 var count = 1

function move(){

if(count == 60){

feiji.y+=30;

count=0;

}

count++; }

2、定时创建元素与动画效果

使用数组，将move函数创建的每架飞机存储起来避免被覆盖

遍历数组获取每架飞机，执行动画

//详细可看练习三代码

练习一：大鱼吃小鱼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/pixi.min.js"></script>
	</head>
	<body>
	<script type="text/javascript">
		    //应用
			var app=new PIXI.Application(800,600);
			document.body.appendChild(app.view);
			//背景
			var bg =new PIXI.Sprite.fromImage("img/bg.png");
			app.stage.addChild(bg);	
			//添加点击
			var fishLeft=[];
			var fishRight=[];
			bg.interactive=true;
			function fishLai(event){
				if(Math.random()*(100)>=50){
				var fish=new PIXI.Sprite.fromImage("img/yu1.png");
				var pos = event.data.getLocalPosition(app.stage);
				 fish.x = pos.x;
                 fish.y = pos.y;
				app.stage.addChild(fish);
				fishRight.push(fish);
			}else{
				var fish=new PIXI.Sprite.fromImage("img/yu2.png");
				var pos = event.data.getLocalPosition(app.stage);
				 fish.x = pos.x;
                 fish.y = pos.y;
				 app.stage.addChild(fish);
				fishLeft.push(fish)
			}
			}
			bg.on("click",fishLai);
			function move(){
			for (var i=0;i<fishLeft.length;i++){
				fishLeft[i].x-=2;
				console.log(fishLeft);
			if (fishLeft[i].x<=0){
				app.stage.removeChild(fishLeft[i]);
				fishLeft.splice(i,1);	
			}
			}
			for (var i=0;i<fishRight.length;i++){
				fishRight[i].x+=2;
				console.log(fishRight);
			if (fishRight[i].x>=800){
				app.stage.removeChild(fishRight[i])
				fishRight.splice(i,1);
			}}}
			app.ticker.add(move);
	</script>
	</body>
</html>

图一

练习二：发射速率

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/pixi.min.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			//应用
			var app=new PIXI.Application(512,768);
			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=250;
			feiji.y=450;
			feiji.anchor.set(0.5,0.5);
			app.stage.addChild(feiji);
			app.ticker.add(move);
			var count=1;
			var bs=[];
			function move(){
				if(count==30){
				    var zidan=new PIXI.Sprite.fromImage("img/bullet_1.png");
				    zidan.x=feiji.x;
				    zidan.y=feiji.y;
				    zidan.anchor.set(0.5,0.5);
				    app.stage.addChild(zidan);
				    bs.push(zidan);
				    count=0;
				}
				for(var i=0;i<bs.length;i++){
					var b=bs[i];
					b.y-=10;
					if(b.y<0){
						bs.splice(i,1);
						app.stage.removeChild(b);
					}
				}
				count++;
			}
			bg.interactive=true;
			bg.on("mousemove",dong);
			function dong(event){
				var pos=event.data.getLocalPosition(app.stage);
				feiji.x=pos.x;
				feiji.y=pos.y;
			}
		</script>
	</body>
</html>

图二

练习三：飞机下行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/pixi.min.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			var app=new PIXI.Application(500,700);
			document.body.appendChild(app.view);
			var bg=new PIXI.Sprite.fromImage("img/bg2.jpg");
			app.stage.addChild(bg);
			var dijis=[];
			for(var i=1;i<=5;i++){
				var diji=new PIXI.Sprite.fromImage("img/enemy1.png");
				diji.x=i*60;
				diji.y=i*70;
				dijis.push(diji);
				app.stage.addChild(diji);
			}
			function animate(){
				for(var i=0;i<dijis.length;i++){
					var e=dijis[i];
					e.y+=2;
					if(e.y>=700)e.y=-74;
				}
			}
			app.ticker.add(animate);
		</script>
	</body>
</html>

图三

练习四：闹钟计时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/pixi.min.js"></script>
	</head>
	<body>
	<script type="text/javascript">
		    //应用
			var app=new PIXI.Application(500,800);
			document.body.appendChild(app.view);
			//背景
			var bg=new PIXI.Sprite.fromImage("img/bg2.png");
			app.stage.addChild(bg);
			//黑条
			var heitiao=new PIXI.Sprite.fromImage("img/tiaoBg.png");
			//heitiao.anchor.set(1,0);
			heitiao.width=424;
			heitiao.x=20;
			heitiao.y=150;
			app.stage.addChild(heitiao);
			//红条
			var hongtiao=new PIXI.Sprite.fromImage("img/tiao.png");
			hongtiao.width=420;
			hongtiao.anchor.set(1,0);
			hongtiao.x=442;
			hongtiao.y=152;
			app.stage.addChild(hongtiao);
			//闹钟
			var naozhong=new PIXI.Sprite.fromImage("img/naozhong.png");
			naozhong.x=410;
			naozhong.y=120;
			app.stage.addChild(naozhong);
			//文本
			var text=new PIXI.Text("Time:60");
			text.x=350;
			text.y=80;
			app.stage.addChild(text);
			
			var count=1;
			var time=60;
			function move(){
				//count++;
				if(count==60){
					time-=1;
					//血条变短
				hongtiao.width-=424/60;
				//计时器-1
				text.text="Time:"+time
				count=0;
				}
				count+=1;
			}
			app.ticker.add(move);
	</script>
	</body>
</html>

图四

今日反思：

将敌机从数组中移除 enemyList.splice(i,1);

将敌机从应用窗口中移除 app.stage.removeChild( e );

移除帧频动画：app.stage.removeChild(fishRight[i])；

M小慕同学

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Hbuilder创建项目，制作html网页第四天

1、定义数组var fishs=[ ];2、向数组中添加元素fishList.push( fish )；3、循环遍历数组var fishLeft = [50,10,800]; for(var i=0; i<3; i++){ }4、获取数组长度var fishLeft = [10,20,30]; fishLeft .length;5、使用数组长度增强遍历for (var i=0;i<fishLeft.length;i++){ fishLeft[i].x-=2;6、删除元素数组名
复制链接

扫一扫