← 小游戏飞行的子弹 小游戏消灭敌机 →

小游戏敌机出现

英雄飞机也有了，子弹也有了，怎么可以少了飞机呢，对吧

同样，我们也不使用官方的图片，而是使用下面这张雪碧图

  1. 图片地址为: https://www.twle.cn/static/i/minigame/enemy.png
  2. 图片大小为 400x100
  3. 每个子弹大小为 100x100

下载这张图片，并保存到 images 目录

敌机一般都是从顶部出现的，然后一路飞到屏幕的下面

game.js

var c = wx.createCanvas();
var ctx = c.getContext('2d');

var bullet = wx.createImage();

function reset() {

    ctx.save();
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.restore();
}

function draw_copy() {
    ctx.save();
    ctx.textAlign = "center" // 居中对齐
    ctx.textBaseline = "middle" //垂直居中绘制
    ctx.fillStyle = "#aaa";
    ctx.font = "16px Arial" // 字体大小 16 像素
    ctx.fillText("简单教程，简单编程", c.width / 2, (c.height - 108))
    ctx.fillText(" © 2015-2018 www.twle.cn", c.width / 2, (c.height - 128));
    ctx.restore();
}

bullet.onload = function () {
    reset(ctx);

    ctx.drawImage(bullet, 0, 0, 100,100, c.width / 2 - 25, 0, 50, 50);
    draw_copy();
}

reset();

bullet.src = 'images/enemy.png'

虽然敌机大小为 100x100 ，但我们把它绘制小一点，不然一屏幕都放不下几个敌机

运行效果如下

对敌机进行封装

因为剧情 (接下里的教程) 需要，我们对敌机做一些封装

function Enemy()
{
    // 位置
    this.x = 0;
    this.y = 0;

    //宽高
    this.w = 50;
    this.h = 50;

    // 飞行速度
    this.speed = 2;

    // 敌机图片
    this.img = null;

    // 敌机类型
    this.kind = 1;

    // 原图位置
    this.rx = 0;
    this.ry = 0;
    this.rw = 100;
    this.rh = 100;

    this.change_kind = function(k)
    {
        this.rx = (k-1) * 100;
        this.ry = 0;
    }

    this.move = function(){
        this.y += this.speed;
    };

    this.draw = function(ctx){
        ctx.drawImage(this.img,this.rx,this.ry,
            this.rw,this.rh,
            this.x-this.w/2,this.y-this.h/2,
            this.w,this.h);
    }
}

注意

  1. 我们绘制敌机的时候，x 和 y 所代表的，就是敌机中间的位置
  2. 敌机的飞行方向是从下往上

是不是发现和子弹差不多，对的，等下我们会说

让敌机飞起来

把敌机放到动画里，敌机就会飞起来了

有一个点需要注意，敌机不可能凭空出现对吧，所以敌机初始化的 Y 坐标轴为 -h

然后我们就可以把敌机放到动画里，让敌机飞起来

var c = wx.createCanvas();
var ctx = c.getContext('2d');

var enemy = null;

function Enemy()
{

    //宽高
    this.w = 50;
    this.h = 50;


    // 位置
    this.x = 0;
    this.y = - this.h;


    // 飞行速度
    this.speed = 2;

    // 敌机图片
    this.img = null;

    // 敌机类型
    this.kind = 1;

    // 原图位置
    this.rx = 0;
    this.ry = 0;
    this.rw = 100;
    this.rh = 100;

    this.change_kind = function(k)
    {
        this.rx = (k-1) * 100;
        this.ry = 0;
    }

    this.move = function(){
        this.y += this.speed;
    };

    this.draw = function(ctx){
        ctx.drawImage(this.img,this.rx,this.ry,
            this.rw,this.rh,
            this.x-this.w/2,this.y-this.h/2,
            this.w,this.h);
    }
}


function reset() {

    ctx.save();
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.restore();
}

function draw_copy() {
    ctx.save();
    ctx.textAlign = "center" // 居中对齐
    ctx.textBaseline = "middle" //垂直居中绘制
    ctx.fillStyle = "#aaa";
    ctx.font = "16px Arial" // 字体大小 16 像素
    ctx.fillText("简单教程，简单编程", c.width / 2, (c.height - 108))
    ctx.fillText(" © 2015-2018 www.twle.cn", c.width / 2, (c.height - 128));
    ctx.restore();
}

function animate_it() {

    reset(ctx);

    enemy.move();
    enemy.draw(ctx);

    draw_copy();

    requestAnimationFrame(animate_it);
}


enemy = new Enemy();
enemy.x = c.width / 2;
enemy.y = - enemy.h;
enemy.img = wx.createImage();
enemy.img.onload = function () {
    reset(ctx);
    enemy.draw(ctx);
    draw_copy();
    requestAnimationFrame(animate_it);
}

reset();

enemy.img.src = 'images/enemy.png'

运行演示如下

更多敌机

我们每 800ms 产生一个敌机

这时候要使用一个数组来存储全部的敌机，还要检查敌机是否超出边界，如果超出了边界就删除敌机

注意，一般来说，敌机的产生速度要远远小于子弹的，不然子弹都忙不过来不是

还有一点，敌机的位置是随机的，所以我们要使用随机数创建一个敌机位置

game.js

var c = wx.createCanvas();
var ctx = c.getContext('2d');

var screenHeight = c.height;
var screenWidth = c.width;

function Enemy() {

    //宽高
    this.w = 50;
    this.h = 50;


    // 位置
    this.x = 0;
    this.y = - this.h;


    // 飞行速度
    this.speed = 2;

    // 敌机图片
    this.img = null;

    // 敌机类型
    this.kind = 1;

    // 原图位置
    this.rx = 0;
    this.ry = 0;
    this.rw = 100;
    this.rh = 100;

    this.change_kind = function (k) {
        this.rx = (k - 1) * 100;
        this.ry = 0;
    }

    this.move = function () {
        this.y += this.speed;
    };

    this.draw = function (ctx) {
        ctx.drawImage(this.img, this.rx, this.ry,
            this.rw, this.rh,
            this.x - this.w / 2, this.y - this.h / 2,
            this.w, this.h);
    }
}


var Enemys = {
    _data: [],
    move: function () {
        for (var i in this._data) {
            this._data[i].move();
            if (this._data[i].y >= screenHeight) {
                this._data.splice(i, 1);
            }
        }
    },
    add: function (enemy) {
        this._data.push(enemy);
    },

    draw: function (ctx) {
        for (var i in this._data) {
            this._data[i].draw(ctx);
        }
    }
}

function reset() {

    ctx.save();
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.restore();
}

function draw_copy() {
    ctx.save();
    ctx.textAlign = "center" // 居中对齐
    ctx.textBaseline = "middle" //垂直居中绘制
    ctx.fillStyle = "#aaa";
    ctx.font = "16px Arial" // 字体大小 16 像素
    ctx.fillText("简单教程，简单编程", c.width / 2, (c.height - 108))
    ctx.fillText(" © 2015-2018 www.twle.cn", c.width / 2, (c.height - 128));
    ctx.restore();
}

function animate_it() {

    reset(ctx);

    Enemys.move();
    Enemys.draw(ctx);

    draw_copy();

    requestAnimationFrame(animate_it);
}

function create_enemy(img) {
    var enemy = new Enemy();
    enemy.x = (enemy.w / 2) + Math.random() * (screenWidth - enemy.w / 2);
    enemy.y = - enemy.h;
    enemy.img = img;
    Enemys.add(enemy);
}

var enemy_img = wx.createImage();
enemy_img.onload = function () {
    reset(ctx);
    create_enemy(enemy_img);
    Enemys.draw(ctx);
    draw_copy();

    setInterval(function () { create_enemy(enemy_img); }, 800);

    requestAnimationFrame(animate_it);
}

reset();

enemy_img.src = 'images/enemy.png'

运行演示如下

把敌机也绘制到游戏上

好了，加下来就是组装我们的敌机和之前已经做好的游戏了

除了组长之外，还有一个很重要的工作，就是合并

我们发现敌机和子弹所使用的信息都差不多，连保存数组也差不多，那么我们就可以把它们的主要代码合并

game.js

var inherits = function (superCtor) {
    var f = function () { superCtor.call(this); }
    f.super_ = superCtor;
    f.prototype = Object.create(superCtor.prototype, {
        constructor: {
            value: f,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });
    return f;
};
var Resource = {
    _res: [], // [][] 资源对象数组, 0 表示资源 1  url  2 类型 3 是否加载完成
    _load: function (idx, ops) {
        var res = this._res[idx];
        if (!res[3]) {
            if (res[2] == "audio")
                this._load_audio(res[1], idx, ops)
            if (res[2] == "image")
                this._load_image(res[1], idx, ops);
        }
    },

    _load_image: function (src, i, ops) {
        var img = wx.createImage();
        var that = this;
        that._res[i][0] = img;
        img.onload = function () {
            that._res[i][3] = true;
        }
        img.src = src;
    },

    _load_audio: function (src, i, ops) {
        var audio = wx.createInnerAudioContext();

        if (ops != null) {
            for (var k in ops) {
                audio[k] = ops[k];
            }
        }

        var that = this;
        that._res[i][0] = audio;

        audio.onCanplay(function () {
            that._res[i][3] = true;
        });
        audio.src = src;
    },

    loaded: function (callback) {
        for (var i = 0; i < this._res.length; i++) {
            if (!this._res[i][3]) {
                var that = this;
                setTimeout(function () { that.loaded(callback); }, 200);
                return;
            }

        }
        callback();
    },

    add: function (src, type, id, ops) {
        this._res.push([null, src, type, false, id]);
        this._load(this._res.length-1, ops);
    },

    item: function (src) {
        for (var i = 0; i < this._res.length; i++) {
            if (this._res[i][1] == src) {
                return this._res[i][0];
            }
        }
        return null;
    }
}


var Bucket = {
    _bucket: {},
    move: function () {
        for (var i in this._bucket) {
            for (var j in this._bucket[i]) {
                this._bucket[i][j].move();

                if (this._bucket[i][j].hit()) {
                    this._bucket[i].splice(j, 1);
                }
            }
        }
    },

    add: function (obj, bucket) {
        if (!(bucket in this._bucket)) {
            this._bucket[bucket] = [];
        }
        this._bucket[bucket].push(obj);
    },

    draw: function (ctx) {
        for (var i in this._bucket) {

            for (var j in this._bucket[i]) {
                this._bucket[i][j].draw();
            }
        }
    }
}

function Sprite() {
    // 位置
    this.x = 0;
    this.y = 0;

    //宽高
    this.w = 0;
    this.h = 0;

    // 飞行速度
    this.speed = 0;

    // 图片
    this.img = null;

    // 类型
    this.kind = 0;

    // 原图位置
    this.rx = 0;
    this.ry = 0;
    this.rw = 0;
    this.rh = 0;
    this.ctx = null;

    this.change_kind = function (k) {
        this.rx = (k - 1) * this.rw;
        this.ry = 0;
    }

    this.move = function () {
        this.y += this.speed;
    };





    this.draw = function () {
        this.ctx.drawImage(this.img, this.rx, this.ry,
            this.rw, this.rh,
            this.x - this.w / 2, this.y - this.h / 2,
            this.w, this.h);
    }
}

var Bullet = inherits(Sprite);
Bullet.prototype.hit = function () {
    return this.y <= 0;
}

var Enemy = inherits(Sprite);
Enemy.prototype.hit = function () {
    return this.y >= screenHeight;
}

var c = wx.createCanvas();
var ctx = c.getContext('2d');

var img = wx.createImage();
var plane = wx.createImage();

var bgCanvas = null;
var offset = 0;
var w = 0;
var h = 0;
var screenWidth = c.width;
var screenHeight = c.height;

// 上一次飞机的位置
var lasted = { x: 0, y: 0 };
// 触摸区域是否在飞机内部
var in_plane = false;

// 创建计时器
var t = 0;



function init_bg() {
    bgCanvas = wx.createCanvas();
    bgCanvas.width = screenWidth;
    bgCanvas.height = screenHeight + h;

    var bgctx = bgCanvas.getContext('2d');

    var y = 0;
    var x = 0;

    // 底部多绘制一张图片
    while (y < screenHeight + h) {
        x = 0;
        while (x < screenWidth) {
            bgctx.drawImage(img, x, y, w, h);
            x += w;
        }
        y += h;
    }
}

function reset() {

    ctx.save();
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.restore();
}

function draw_copy() {
    ctx.save();
    ctx.textAlign = "center" // 居中对齐
    ctx.textBaseline = "middle" //垂直居中绘制
    ctx.fillStyle = "#aaa";
    ctx.font = "16px Arial" // 字体大小 16 像素
    ctx.fillText("简单教程，简单编程", c.width / 2, (c.height - 36))
    ctx.fillText(" © 2015-2018 www.twle.cn", c.width / 2, (c.height - 18));
    ctx.restore();
}

function animate_it() {

    reset(ctx);

    ctx.drawImage(bgCanvas, 0, offset, screenWidth, screenHeight, 0, 0, screenWidth, screenHeight);

    Bucket.move();
    Bucket.draw(ctx);

    ctx.drawImage(plane, 0, 0, 128, 128, lasted.x - 64, lasted.y - 64, 128, 128);


    draw_copy();

    timeit();

    offset;
    if (offset % h == 0) {
        offset = 0;
    }

    requestAnimationFrame(animate_it);
}

wx.onShow(function () {
    Resource.item('audio/bgm.mp3').play();
})

wx.onAudioInterruptionBegin(function () {
    // 暂停音乐
    Resource.item('audio/bgm.mp3').stop();
    // 中断动画
    //cancelAnimationFrame(animate_it);
})

wx.onAudioInterruptionEnd(function () {

    Resource.item('audio/bgm.mp3').play()
    // 恢复动画
    cancelAnimationFrame(animate_it);
})



wx.onTouchStart(function (e) {

    var x = e.touches[0].clientX;
    var y = e.touches[0].clientY;
    if (plane_hit(x, y)) {
        in_plane = true;
    }
});


wx.onTouchEnd(function (e) {

    if (in_plane) {
        lasted.x = e.touches[0].clientX;
        lasted.y = e.touches[0].clientY;
        in_plane = false;
    }
});

// 触摸移动事件
wx.onTouchMove(function (e) {

    if (in_plane) {
        lasted.x = e.touches[0].clientX;
        lasted.y = e.touches[0].clientY;
    }
})

function plane_hit(x, y) {
    return x > (lasted.x - 64) &&
        x < (lasted.x + 64) &&
        y > (lasted.y - 64) &&
        y < (lasted.y + 64);
}

function start() {

    w = screenWidth > img.width ? img.width : screenWidth;
    h = img.height * (w / img.width);

    lasted.x = (screenWidth - 128) / 2;
    lasted.y = screenHeight - 128;

    var bgm = Resource.item('audio/bgm.mp3').play();

    init_bg();
    ctx.drawImage(plane, 0, 0, 128, 128, lasted.x, lasted.y, 128, 128);
    draw_copy();
    requestAnimationFrame(animate_it);
}

function create_bullet(img) {
    var bullet = new Bullet();

    bullet.x = lasted.x;
    bullet.y = lasted.y;
    bullet.img = img;
    bullet.w = 30;
    bullet.h = 30;
    bullet.speed = - 2;
    bullet.img = img;
    bullet.kind = 1;
    bullet.rw = 60;
    bullet.rh = 60;
    bullet.ctx = ctx;

    Bucket.add(bullet, 'buttet');
}

function create_enemy(img) {
    var enemy = new Enemy();

    enemy.w = 50;
    enemy.h = 50;
    enemy.x = (enemy.w / 2) + Math.random() * (screenWidth - enemy.w / 2);
    enemy.y = -50;
    enemy.img = img;
    enemy.speed = 2;
    enemy.img = img;
    enemy.kind = 1;
    enemy.rw = 100;
    enemy.rh = 100;
    enemy.ctx = ctx;

    Bucket.add(enemy, 'enemy');
}


function timeit() {

    if (t % 60 == 0) {
        var enemy = Resource.item('images/enemy.png');
        create_enemy(enemy);
    }


    if (in_plane && t % 20 == 0) {
        var bullet = Resource.item('images/bullet.png');
        create_bullet(bullet);
    }

    t++;

}


reset();


Resource.add('images/bg.jpg', 'image');
Resource.add('audio/bgm.mp3', 'audio', null, { loop: true });
Resource.add('images/plane.png', 'image');
Resource.add('images/bullet.png', 'image');
Resource.add('images/enemy.png', 'image');

Resource.loaded(function () {
    img = Resource.item('images/bg.jpg');
    plane = Resource.item('images/plane.png');
    start();
});

运行演示如下


手机录制视频会严重掉帧

← 小游戏飞行的子弹 小游戏消灭敌机 →

微信小游戏 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

♥   简单教程，简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.