HBuilder X搭建

[wm_tips]我会把整理出来的笔记发到文章里面，如果对javascript感兴趣的朋友可以跟着我一起来学习javascript哦，我们一起进步。[/wm_tips]

准备步骤

1.了解HBuilder X-点击跳转到HBuilder X搭建环境和基本使用操作

2.下载对应素材，我每天会把素材会放到底部百度网盘里

一、新建HTML并引入js文件

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="../js/pixi.min.js"></script>
    <script type="text/javascript">
      //该位置书写代码
    </script>
  </body> 
</html>

二、创建应用

创建应用窗口是指在网页中规划一个固定大小的区域用来展示某个应用

var app = new PIXI.Application(500,700); //创建一个游戏窗口
document.body.appendChild (app.view); //在网页内添加游戏窗口

代码解释

1.创建一个应用窗口元素

//new PIXI.Application(); 表示创建一个应用窗口
//500 ： 窗口宽度（单位：px）
//700 ： 窗口高度（单位：px）
//var app ：为应用窗口元素在程序中的别名
var app = new PIXI.Application(500,700);

2.将应用窗口元素添加到网页中

//document ：表示整张页面
//body  ：网页体部分（可以显示在页面的部分）
//appendChild(); ：向body中添加一个元素
//app.view ： 应用窗口的视图
document.body.appendChild( app.view );

三、创建图片元素

创建图片，就是指创建图片，并将图片显示显示在游戏窗口内

//创建图片,该参数为图片路径，可以是网络路径，也可以是本地路径
var plane = new
PIXI.Sprite.fromImage("http://www.yyfun001.com/lesson/res/plane_blue_01.png");
或 
 var plane = new PIXI.Sprite.fromImage("img/plane_blue_01.png");
//将图片添加到游戏窗体内部（右键检查元素可以看到窗体的大小）
app.stage.addChild(plane);

代码解释

1.创建图片元素

//new PIXI.Sprite.fromImage(); ： 创建一个图片元素
//"img/plane_blue_01.png"： 图片路径（img目录中的plane_blue_01.png文件)
//var plane  ：图片元素在程序中的别名
var plane = new PIXI.Sprite.fromImage("img/plane_blue_01.png");

2.将图片添加到游戏窗口内

//app ：之前为应用窗口元素设置的别名
//stage ：应用窗口的内部
//addChild(); ：添加一个元素
//plane ：图片元素在程序中的别名
app.stage.addChild( plane );

[wm_notice]注意：单词是否有错误、大小写是否规范，语句结尾是否有英文 ;[/wm_notice]

四、最终代码

<script src="../js/pixi.min.js"> </script>
<script>
var app = new PIXI.Application(500,700);
document.body.appendChild( app.view );
var plane = new PIXI.Sprite.fromImage("img/plane_blue_01.png");
app.stage.addChild( plane );
</script>