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

2024-06-17 05:38:02
开发
7

1、引入js文件

2、创建应用

var app=new PIXI.Application(500,600);//宽500，高600

3、将应用放进页面
document.body.appendChild(app.view);

4、创建背景元素

var bg =new PIXI.Sprite.fromImage("img/bg.jpg");

5、将背景元素放进界面

app.stage.addChild(bg);

6、创建图片元素

var feiji=new PIXI.Sprite.fromImage("img/plane1.png");
feiji.anchor.set(0.5,0.5);
feiji.x=200;
feiji.y=450;

7、将图片放进界面

app.stage.addChild(feiji);

8、创建文本元素

var text=new PIXI.Text("得分：0000");

text.style.fill="white";

9、将文本放进界面

app.stage.addChild(text);

10、定位元素

feiji.x=100;

feiji.y=200;

11、设置元素的宽度/高度

feiji.width=100;

feiji.height=200;

12、设置元素是否可见

feiji.visible=false;

feiji.visible=0;//不可见

feiji.visible=true;

feiji.visible=1;//可见

13、设置元素透明度

feiji.alpha=0.5;

14、设置文本颜色/字号/加粗/字体

feiji.style.fill="white";

feiji.style.fontsize=70;

feiji.style.fontWeight="bold"

feiji.style.fontFamily="黑体";

15、设置元素的弧度

plane.rotation = 0.1745329*9;//90度 0.1745329 = 10度

16、设置元素的缩放【与width，height冲突】

plane.scale.x = 0.5;

plane.scale.y = 0.5;

17、设置元素的翻转

plane.scale.x = -1;//水平翻转

plane.scale.y = -1;//上下翻转

练习一：飞机

<!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/img_bg_level_3.jpg");
			app.stage.addChild(bg);
			var feiji=new PIXI.Sprite.fromImage("img/plane_blue_01.png");
			feiji.x=195;
			feiji.y=540;
			app.stage.addChild(feiji);
			var xuetiao=new PIXI.Sprite.fromImage("img/3_03.png");
			xuetiao.x=40;
			xuetiao.y=13;
			app.stage.addChild(xuetiao);
			var hp=new PIXI.Sprite.fromImage("img/img_ui_16.png");
			hp.x=5;
			hp.y=10;
			app.stage.addChild(hp);
			var score=new PIXI.Text("得分：00000");
			score.x=320;
			score.y=10;
			score.style.fill="white";
			app.stage.addChild(score)
			var yunceng=new PIXI.Sprite.fromImage("img/yun02.png");
			yunceng.y=100;
			app.stage.addChild(yunceng);
			var jingyan=new PIXI.Sprite.fromImage("img/img_plane_item_15");
			jingyan.x=100;
			jingyan.y=300;
			app.stage.addChild(jingyan);
		</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(1008,640);
			document.body.appendChild(app.view);
			var bg=new PIXI.Sprite.fromImage("img/bg1.png");
			app.stage.addChild(bg)
			var js1=new PIXI.Sprite.fromImage("img/js1.png");
			js1.x=350;
			js1.y=300;
			app.stage.addChild(js1);
			var js2=new PIXI.Sprite.fromImage("img/js2.png");
			js2.x=750;
			js2.y=200;
			app.stage.addChild(js2);
		    var js3=new PIXI.Sprite.fromImage("img/js3.png");
			js3.x=600;
			js3.y=300;
			app.stage.addChild(js3);
			var js4=new PIXI.Sprite.fromImage("img/js4.png");
			js4.x=800;
			js4.y=380;
			app.stage.addChild(js4);
			var item=new PIXI.Sprite.fromImage("img/item.png");
			//item.x=100;
			app.stage.addChild(item);
			var num=new PIXI.Text("100");
			num.x=15;
			num.y=62;
			app.stage.addChild(num);
		</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,400);
			document.body.appendChild(app.view);
			var tiankong=new PIXI.Sprite.fromImage("img/bg_back_02.png");
			app.stage.addChild(tiankong);
			var haimian=new PIXI.Sprite.fromImage("img/bg_front_02.png");
			haimian.y=200;
			app.stage.addChild(haimian);
			var dimain=new PIXI.Sprite.fromImage("img/ground01_2.png");
			dimain.y=280;
			app.stage.addChild(dimain);
			var juese=new PIXI.Sprite.fromImage("img/player003.png");
			juese.x=130;
			juese.y=200;
			app.stage.addChild(juese);
			var jinbi=new PIXI.Sprite.fromImage("img/gold.png");
			jinbi.x=400;
			jinbi.y=150;
			app.stage.addChild(jinbi);
			var zhangaiwu=new PIXI.Sprite.fromImage("img/luzhang004.png");
			zhangaiwu.x=600;
			zhangaiwu.y=-170;
			app.stage.addChild(zhangaiwu);
			var tiaoyue=new PIXI.Sprite.fromImage("img/jumpBtn.png");
			tiaoyue.y=270;
			app.stage.addChild(tiaoyue);
			var xiadun=new PIXI.Sprite.fromImage("img/dunBtn.png");
			xiadun.x=670;
			xiadun.y=270;
			app.stage.addChild(xiadun);	
			
		</script>
	</body>
</html>

图三

今日反思：

1、界面出不来的原因主要是单词打错、必须大小写的地方没有大小写、图片名称写错。

2、出现favicon.ico文件不存在时在HTML页面中的<head></head>标签中添加如下代码：

<link rel="shortcut icon" href="#"/>

原文地址:https://blog.csdn.net/m0_65230676/article/details/139726707 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1802455615990272000.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

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

相关推荐

最近更新

热门阅读