使用Pixi.js编写JavaScript网页小游戏

最新推荐文章于 2024-05-20 10:04:41 发布

番大茄子

最新推荐文章于 2024-05-20 10:04:41 发布

阅读量3.9k

点赞数 3

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/SongD1114/article/details/123945498

版权

Pixi.js中文网https://pixijs.huashengweilai.com/PixiJSOfficial site for PixiJS, The HTML Creation Engine.https://pixijs.com/Pixi是一个非常快的2D sprite渲染引擎，基于它可以轻松地使用JavaScript和其他HTML5技术制作游戏和应用程序。

一. 使用Pixi.js创建一个项目

（1）在开始编写代码之前，为项目创建一个文件夹，并在项目的根目录中启动一个web服务。不运行web服务，Pixi将无法工作。

（2）下载 pixi.min.js 文件，并放在一个名为pixi的文件夹中。

（3）在项目根目录文件夹中创建一个用于编写游戏实现代码的js文件，命名为index.js。

（4）创建一个基本的HTML页面，命名为index.html。使用一个<script>标记来链接pixi.min.js文件，并使用一个<script>标记。

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Plane vs Enemy</title>
    </head>
    <script src="pixi/pixi.min.js"></script>
    <script type='text/javascript' src='index.js'></script>
    <body>
    </body>
</html>

注意：以下代码编写均在index.js文件中进行！

二. Pixi.js基础语法

1. 创建舞台

//新建一个宽500，高500的舞台
var app = new PIXI.Application(500,500);
document.body.appendChild(app.view);

2. 创建图片元素

//新建一个飞机图片
var plane = new PIXI.Sprite.fromImage("res/plane/main/img_plane_enemy_04.png");
app.stage.addChild(plane1);
//设置x、y坐标
plane.x = 300;
plane.y = 300;
//设置宽高
plane.width = 100;
plane.height = 80;
//设置缩放比例
plane.scale.x = 2;//将图片x方向缩放到原来的2倍    
plane.scale.y = 2;//将图片y方向缩放到原来的2倍
//plane.scale.x = -1; //图片沿y轴水平翻转
//设置旋转
plane.rotation = Math.PI / 2;//顺时针旋转90度
//设置元素是否可见 
//plane.visible=false;
//设置元素的透明度    
//plane.alpha=0.6;
//设置图片锚点  btn.anchor.set(0.5,0.5);
plane.anchor.x = 0.5;
plane.anchor.y = 0.5;

3. 创建文字元素

//新建分数文字
var score = new PIXI.Text("得分：10000");
app.stage.addChild(score);     
score.text = “飞机大战真好玩！”;//设置显示内容    
app.stage.addChild(score);    
var score = new PIXI.Text("得分：10000");    
score.style.fill = 0xffffff;//设置字体颜色    
score.style.fontSize = 50;//设置字体大小    
score.style.fontWeight = "bold";//加粗    
score.style.fontStyle = "italic";//斜体    
score.style.fontFamily = "隶书";//设置字体

4. 元素的鼠标点击事件

//新建背景图片
var bg = new PIXI.Sprite.fromImage("res/plane/main/img_plane_enemy_04.png");
app.stage.addChild(bg);
//允许bg图片，可以被鼠标点击
bg.interactive = true;
//bg图片当被点击时，通知执行 move 函数
bg.on("click",move);
function move() {
    plane.y += 10;
}

/*
其他鼠标事件
bg.on(“mousemove”,函数名);  
bg.on(“mousedown”,函数名);   
bg.on(“mouseup”,函数名); 
bg.on(“mouseover”,函数名);
bg.on(“mouseout”,函数名);
bg.on(“touchstart”,函数名);  
bg.on(“touchend”,函数名);
bg.on(“touchmove”,函数名);
*/

5. 实现元素跟随鼠标移动

bg.interactive = true;
//不管把 mousemove 事件添加给舞台上哪一个显示元素，最终都是由应用程序窗口，响应该事件。
bg.on("mousemove", movePlane);
function movePlane(event) {
    var pos = event.data.getLocalPosition(app.stage);
    plane.x = pos.x;
    plane.y = pos.y;
}
bg.buttonMode = true; //鼠标移入按扭时，变成小手样式

6. 为元素添加子元素（跟随）

//右侧僚机
var planeRight = new PIXI.Sprite.fromImage("res/plane/liaoji_01_11.png");
planeRight.anchor.set(0.5,0.5)
planeRight.x = 100;
planeRight.y = 60;
plane.addChild(planeRight);

//左侧僚机
var planeLef