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

M小慕同学

于 2024-06-17 14:25:18 发布

阅读量554

点赞数 6

文章标签： html 前端

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

版权

动画基础

帧频函数

1、定义帧频函数

function move(){

plane.y -=1; }

2、添加帧频动画

app.ticker.add( move )

3、超出边界，复原坐标：

if( bullet.y<0 ){ bullet.x = plane.x; bullet.y = plane.y; } }

逻辑控制

1、用 var 变量控制程序执行逻辑

var sudu=1；//每帧移动的距离

enemy1.y += sudu;

2、多条件判断

&&：表示并且，左右两边条件必须同时满足

||：表示或者，左右两边条件有一个满足即可

3、移除帧频动画效果

自定义帧频函数 function dong(){ }

添加帧频动画 app.ticker.add( dong );

移除帧频函数 app.ticker.remove( dong );

循环

定义循环变量 var i = 1;

定义循环条件 ( i <= 10)

改变循环变量的值 i++;

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

练习一：发射子弹

<!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(800,640);
			document.body.appendChild(app.view);
			//背景
			var bg=new PIXI.Sprite.fromImage("img/bg1.png");
			app.stage.addChild(bg)
			//子弹
			var zidan=new PIXI.Sprite.fromImage("img/zidan1.png");
			zidan.anchor.set(0.5,0.5);
			zidan.x=300;
			zidan.y=300;
			app.stage.addChild(zidan);
			//豌豆
			var peas=new PIXI.Sprite.fromImage("img/peas.png");
			peas.anchor.set(0.5,0.5);
			peas.x=300;
			peas.y=300;
			app.stage.addChild(peas);
			//条款
			var item=new PIXI.Sprite.fromImage("img/item.png");
			app.stage.addChild(item);
			//太阳数量
			var num=new PIXI.Text("100");
			num.x=15;
			num.y=62;
			app.stage.addChild(num);
			
			//让子弹动起来
			app.ticker.add(zidanMove);
			function zidanMove(){
				zidan.x+=3
				//判断子弹是否超出边界，超出复原坐标
				if(zidan.x>800){
					zidan.x=peas.x;
					zidan.y=peas.y-15;
				}
			}
		</script>
	</body>
</html>

图一

练习二：继续游戏

<!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(510,674);
			document.body.appendChild(app.view);
			//背景
			var bg =new PIXI.Sprite.fromImage("img/bg.jpg");
			app.stage.addChild(bg);
			//子弹
			var zidan=new PIXI.Sprite.fromImage("img/bullet_1.png");
			zidan.anchor.set(0.5,0.5);
			zidan.x=150;
			zidan.y=500;
			app.stage.addChild(zidan);
			//飞机
			var feiji=new PIXI.Sprite.fromImage("img/plane.png");
			feiji.anchor.set(0.5,0.5);
			feiji.x=150;
			feiji.y=500;
			app.stage.addChild(feiji);
			//加速
			var shang=new PIXI.Sprite.fromImage("img/shang.png");
			shang.x=450;
			shang.y=520;
			app.stage.addChild(shang);
			//减速
			var xia=new PIXI.Sprite.fromImage("img/xia.png");
			xia.x=450;
			xia.y=620;
			app.stage.addChild(xia);
			//文本
			var text=new PIXI.Text("速度：1");
			text.style.fill="white";
			text.x=400;
			text.y=580;
			app.stage.addChild(text);
			//暂停
			var zanting=new PIXI.Sprite.fromImage("img/zanting.png")
			zanting.x=450;
			app.stage.addChild(zanting);
			//蒙版
			var mengban=new PIXI.Sprite.fromImage("img/mengban.png")
			mengban.visible=false;
			app.stage.addChild(mengban);
			//继续游戏
			var jixu=new PIXI.Sprite.fromImage("img/jixu.png")
			jixu.x=150;
			jixu.y=300;
			app.stage.addChild(jixu);
			var sudu=1;
		    app.ticker.add(zidanMove)
		    function zidanMove(){
		    	zidan.y-=sudu;
		    	if(zidan.y<0){
		    		zidan.y=feiji.y	
		    	}
		    } 
		    shang.interactive=true;
		    shang.on("click",zeng);
		   function zeng(){
		    	sudu++;
		    	text.text="速度："+sudu;
		   }
		    xia.interactive=true;
		    xia.on("click",jian);
		   function jian(){
		    	if(sudu>1){
		    	sudu--; 	
		    }text.text="速度："+sudu;
           }
		   zanting.interactive=true;
		   jixu.interactive=true;
		   zanting.on("click",ting);
		   jixu.on("click",ji);
		   function ting(){
		   	sudu=0;
		   	zanting.visible=false;
		   	mengban.visible=true;
		   	jixu.visible=true;
		   }
		   function ji(){
		   	sudu=1;
		   	zanting.visible=true;
		   	mengban.visible=false;
		   	jixu.visible=false;
		   }
		</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(600,600);
			document.body.appendChild(app.view)
			var xiaoqiu1=new PIXI.Sprite.fromImage("img/qiu2.png")
			xiaoqiu1.x=50;
			app.stage.addChild(xiaoqiu1);
			var xiaoqiu2=new PIXI.Sprite.fromImage("img/qiu2.png")
			xiaoqiu2.x=200;
			app.stage.addChild(xiaoqiu2);
			var xiaoqiu3=new PIXI.Sprite.fromImage("img/qiu2.png")
			xiaoqiu3.x=400;
	
			app.stage.addChild(xiaoqiu3);
			app.ticker.add(down1);
			function down1(){
				xiaoqiu1.y+=2;
				xiaoqiu2.y+=3;
				xiaoqiu3.y+=4;
				if(xiaoqiu1.y>600){
					xiaoqiu1.y=0;
				}
				if(xiaoqiu2.y>600){
					xiaoqiu2.y=0;
				}
				if(xiaoqiu3.y>600){
					xiaoqiu3.y=0;
				}
			}
			xiaoqiu1.interactive=true;
			xiaoqiu2.interactive=true;
			xiaoqiu3.interactive=true;
			xiaoqiu1.on("click",return1);
			xiaoqiu2.on("click",return2);
			xiaoqiu3.on("click",return3);
			function return1(){
				xiaoqiu1.y=0;
			}
			function return2(){
				xiaoqiu2.y=0;
			}
			function return2(){
				xiaoqiu2.y=0;
			}
		</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(750,450);
			document.body.appendChild(app.view);
			//背景
			var bg=new PIXI.Sprite.fromImage("img/bg12.jpg");
			app.stage.addChild(bg);
			//小鸟
			var xiaomiao=new PIXI.Sprite.fromImage("img/bird.png");
			xiaomiao.x=100;
			xiaomiao.y=200;
			app.stage.addChild(xiaomiao);
			//游戏结束
			var jieshu=new PIXI.Text("游戏结束");
			jieshu.visible=false;
			jieshu.x=300;
			jieshu.y=200;
			app.stage.addChild(jieshu);
			
			var direction=2;
			function dong(){
				xiaomiao.x+=2;
				if(direction==1)xiaomiao.y-=3;
				if(direction==0)xiaomiao.y+=3;
				if(xiaomiao.x>=750)xiaomiao.x=0;
				if(xiaomiao.y<=0||xiaomiao.y>=450){
					jieshu.visible=true;
					app.ticker.remove(dong);
				}
			}
			
			app.ticker.add(dong);
			bg.interactive=true;
			bg.on("pointerdown",shang);
			bg.on("pointerup",xia);
			function shang(){
				direction=1;
			}
			function xia(){
				direction=0;
			}
		</script>
	</body>
</html>

图四

练习五：跑酷

<!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(800,500);
			document.body.appendChild(app.view);
			//天空
			var tiankong=new PIXI.Sprite.fromImage("img/bg_back_02.png");
			app.stage.addChild(tiankong);
			//天空1
			var tiankong1=new PIXI.Sprite.fromImage("img/bg_back_02.png");
			tiankong1.x=800;
			app.stage.addChild(tiankong1);
			//海面
			var haimian=new PIXI.Sprite.fromImage("img/bg_front_02.png");
			haimian.y=200;
			app.stage.addChild(haimian);
			//海面1
			var haimian1=new PIXI.Sprite.fromImage("img/bg_front_02.png");
			haimian1.x=800;
			haimian1.y=200;
			app.stage.addChild(haimian1);
			//地面
			var dimian=new PIXI.Sprite.fromImage("img/ground03_1.png");
			dimian.width=1600;
			dimian.y=400;
			app.stage.addChild(dimian);
			//人物
			var juese=new PIXI.Sprite.fromImage("img/player003.png");
			juese.x=130;
			juese.y=300;
			app.stage.addChild(juese);
			//跳跃
			var tiaoyue=new PIXI.Sprite.fromImage("img/jumpBtn.png");
			tiaoyue.x=600;
			tiaoyue.y=270;
			app.stage.addChild(tiaoyue);
			tiaoyue.interactive=true;
			tiaoyue.on("mousedown",tiaoqi);
			tiaoyue.on("mouseup",xialuo);
			function tiaoqi(){
				juese.y-=100;
			}
			function xialuo(){
				juese.y+=100;
			}
			app.ticker.add(movedimian);
			function movedimian(){
				if(dimian.x>-800){
					dimian.x-=5;
				}else{
					dimian.x=0
				}
			}
			app.ticker.add(movetiankong);
			function movetiankong(){
				if(tiankong.x>-800){
					tiankong.x-=3;
					tiankong1.x=tiankong.x+800;
				}else{
					tiankong.x=tiankong1.x;
				}
			}
			app.ticker.add(movehaimian);
			function movehaimian(){
				if(haimian.x>-800){
					haimian.x-=2;
					haimian1.x=haimian.x+800;
				}else{
					haimian.x=haimian1.x;
				}
			}
		</script>
	</body>
</html>

图五

今日反思及补充：scale.x 缩小/放大宽度 scale.y 缩小/放大高度

获取随机数 Math.random() ：feiji.x=Math.random() * (50,450);feiji.x=Math.random() * (50,450)；

蒙版 var mengban=new PIXI.Sprite.fromImage("img/mengban.png")；mengban.visible=false;

app.stage.addChild(mengban);

M小慕同学

关注

6
点赞
踩
8

收藏

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

帧频函数1、定义帧频函数 function move(){ plane.y -=1; }2、添加帧频动画app.ticker.add( move )3、超出边界，复原坐标：if( bullet.y<0 ){ bullet.x = plane.x; bullet.y = plane.y; } }逻辑控制1、用 var 变量控制程序执行逻辑var sudu=1；//每帧移动的距离enemy1.y += sudu;2、多条件判断&&：表示并且，左右两边条件必须同时满足||：表示或者，左右两边条
复制链接

扫一扫