60 lines of code, making H5 version of the aircraft war game

With the most basic code logic, the core gameplay of Airplane Wars is realized

The production uses the PIXI framework, which optimizes the operating efficiency of the production of H5 applications quite well.

If you are interested, you can study together

Made the following functions

1. Made the scene elements and animation effects of the game

2. Aircraft control

3. Fire bullets to shoot down enemy planes, scoring function

4. After Game Over, restart the game

The functions cover the production routines of basic H5 games.

Functions can be enriched by "copying" and "pasting"

The source code can be debugged online or directly browsed by mobile phone

Source code address: http://pro.youyu001.com

code description

The following content can be used as a help manual for H5 game development

1) Create an application

var app = new PIXI.Application(512,768);
document.body.appendChild(app.view);

2) Add a picture, set the picture position and anchor point

var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
app.stage.addChild(plane); //将图片放置到舞台
plane.anchor.x = 0.5; //设置图片锚点为图片中心
plane.anchor.y = 0.5;
plane.x = 200; //设置图片的位置
plane.y = 600;

3) Add text display

var scoreTxt = new PIXI.Text("score 0");
app.stage.addChild(scoreTxt); //将文本添加到舞台

4) Add control function to get mouse position

bg.interactive = true;//背景图片允许接受控制信息
bg.on("pointermove", movePlane); //滑动控制
function movePlane(event) {
    var pos = event.data.getLocalPosition(app.stage); //获取鼠标当前位置
    plane.x = pos.x;
    plane.y = pos.y;
}

5) Make animation

app.ticker.add(animate); //指定帧频函数
function animate() {
    //背景图片移动
    bg.y += 2;
    if(bg.y >= 0) {
        bg.y = -768;
    }
}

6) The collision logic of the game

//根据两张图片的位置，计算距离
var pos = (bullet.x - enemy.x) * (bullet.x - enemy.x) + (bullet.y - enemy.y) * (bullet.y - enemy.y);
if(pos < 40 * 40) { //小于一定距离，则判定为碰上了


}

complete source code

<body></body>
<script src="pixi.js"></script>     
<script>
    //创建应用
    var app = new PIXI.Application(512,768);
    document.body.appendChild(app.view);
    app.view.style.height = "100%";

    //添加背景
    var bg = new PIXI.Sprite.fromImage("res/bg/img_bg_level_3.jpg");
    app.stage.addChild(bg);

    //添加子弹
    var bullet = new PIXI.Sprite.fromImage("res/bullet_01.png");
    app.stage.addChild(bullet);
    bullet.anchor.x = 0.5;   //设置飞机图片锚点为图片中心
    bullet.anchor.y = 0.5;

    //创建飞机图片
    var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
    app.stage.addChild(plane); //将图片放置到舞台
    plane.anchor.x = 0.5; //设置图片锚点为图片中心
    plane.anchor.y = 0.5;
    plane.x = 200; //设置图片的位置
    plane.y = 600;

    //添加敌机
    var enemy = new PIXI.Sprite.fromImage("res/enemy_01.png");
    app.stage.addChild(enemy);
    enemy.anchor.x = 0.5;   //设置飞机图片锚点为图片中心
    enemy.anchor.y = 0.5;
    enemy.x = 200;

    //创建得分显示文本
    var scoreTxt = new PIXI.Text("score 0");
    app.stage.addChild(scoreTxt); //将文本添加到舞台
    var score = 0; //得分变量，记录得分使用

    bg.interactive = true;//背景图片允许接受控制信息
    bg.on("pointermove", movePlane); //滑动控制
    function movePlane(event) {
        var pos = event.data.getLocalPosition(app.stage); //获取鼠标当前位置
        plane.x = pos.x;
        plane.y = pos.y;
    }

    var isGameOver = false; //是否游戏结束
    app.ticker.add(animate); //指定帧频函数
    function animate() {
        if(isGameOver == true) { //如果游戏结束，则不执行下面动画
            return;
        }

        //背景移动
        bg.y += 2;
        if(bg.y >= 0) {
            bg.y = -768;
        }

        //子弹移动
        bullet.y -= 10;
        if(bullet.y < -50) {
            bullet.x = plane.x;
            bullet.y = plane.y;
        }

        //敌机移动
        enemy.y += 5;
        if(enemy.y > 800) {
            enemy.y = -100;
            enemy.x = Math.random() * 450 + 50;
        }

        //子弹与敌机碰撞
        var pos = (bullet.x - enemy.x) * (bullet.x - enemy.x) + (bullet.y - enemy.y) * (bullet.y - enemy.y);
        if(pos < 40 * 40) {
            //敌机重新出现
            enemy.y = -100;
            enemy.x = Math.random() * 450 + 50;
            //重新发射子弹
            bullet.x = plane.x;
            bullet.y = plane.y;
            //得分+1
            score ++; 
            scoreTxt.text = "score " + score;
        }

        //玩家飞机与敌机碰撞
        var pos = (enemy.x - plane.x) * (enemy.x - plane.x) + (enemy.y - plane.y) * (enemy.y - plane.y);
        if(pos < 40 * 40) {
            //游戏结束标记
            isGameOver = true;
            //是否重玩
            if (confirm("Game Over, restart?")==true){  
                window.location.reload();
            }
        }
    }


</script>