60 lignes de code, faisant la version H5 du jeu de guerre d'avions

Avec la logique de code la plus élémentaire, le gameplay de base d'Airplane Wars est réalisé

La production utilise le framework PIXI, qui optimise assez bien l'efficacité de fonctionnement de la production d'applications H5.

Si vous êtes intéressé, vous pouvez étudier ensemble

Fait les fonctions suivantes

1. Créer les éléments de scène et les effets d'animation du jeu

2. Contrôle des aéronefs

3. Tirez des balles pour abattre les avions ennemis, fonction de notation

4. Après Game Over, redémarrez le jeu

Les fonctions couvrent les routines de production des jeux H5 de base.

Les fonctions peuvent être enrichies par "copier" et "coller"

Le code source peut être débogué en ligne ou directement parcouru par téléphone mobile

Adresse du code source : http://pro.youyu001.com

description du code

Le contenu suivant peut être utilisé comme manuel d'aide pour le développement de jeux H5

1) Créer une candidature

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

2) Ajoutez une image, définissez la position de l'image et le point d'ancrage

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) Ajouter un affichage de texte

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

4) Ajouter une fonction de contrôle pour obtenir la position de la souris

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) Faire des animations

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

6) La logique de collision du jeu

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


}

code source complet

<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>