通过写一个简单的东方系弹幕入门微信小游戏

Harpsichord1207 发布于2019-08-26 11:39 / 2890人阅读

摘要：入口文件整个微信小游戏实际上是运行在微信框架中一个原生中，没有浏览器页面环境如这就是为什么有一个模拟浏览器环境的适配器，启动时小游戏框架运行，然后在中基本上都是对微信小游戏的调用及原生的操作了。

了解微信小游戏

官方文档有详细的介绍

小游戏的文件结构 我们以新建一个官方示例说明

如图最外层除了readme外有3个文件

game.js 程序入口

game.json小游戏配置文件

project.config.json 项目设置文件

具体配置可以查看官方文档，只有这几个文件需要按照文件名格式来写，其他文件的内容和

这个文件是官方示例中用于模拟浏览器环境的适配器，如有需要可以自己写，我们这里沿用这个。

入口文件 game.js

import "./js/libs/weapp-adapter"
import "./js/libs/symbol"

import Main from "./js/main"

new Main()

整个微信小游戏实际上是运行在微信框架中一个原生canvas中，没有浏览器页面环境如document（这就是为什么有一个模拟浏览器环境的适配器），启动时小游戏框架运行game.js，然后在main.js中基本上都是对微信小游戏api的调用及原生canvas的操作了。如果之前使用过原生canvas或者其他canvas库的同学马上就可以上手开发0成本，官方开发工具也有es6=》es5的转换所以如果项目比较小都不用其他东西，直接文本编辑器修改保存查看即可。

开工

音频使用原来的代码

帧定时也使用wx的回调函数

window.requestAnimationFrame(
      this.TimerHandel.bind(this),
      canvas
    )

引入一个canvas2d库createjs中的ease 和一个自己写的工具库

import "./js/libs/weapp-adapter"
import "./js/libs/ease"
import "./js/plugin/Math"

import Main from "./js/main"
window.main = new Main();

保留原来的触摸移动飞机并且新增重力感应移动飞机

this.initEvent();
wx.startAccelerometer({ success:()=>{console.log("开始监听加速计")}});
wx.onAccelerometerChange((res)=>{
  this.player.speedx = Math.floor(res.x*100)/10;
  this.player.speedy = Math.floor(-res.y * 100)/10;
})

其他全部删除基于create.js库重写；所有子弹继承一个父类

export default class Bullet_Super {

    constructor(cantiner, SHOOT_FRAME = 10,sprite_sheet) {
        this.cantiner = cantiner;
        this.shoot_frame = SHOOT_FRAME;
        this.list = [];
        this.deletelist = [];
        this.y = 0;
        this.x = 0;

        this.spriteSheet = new createjs.SpriteSheet(sprite_sheet);
    }
    outOfScreen(s, test) {
        if (test) {
            if (s.y > window.innerHeight + 100 || s.x > window.innerWidth + 100 || s.x < -100) {
                this.deletelist.push(s);
                s.visible = false;
                return false;
            }
        }
        return true;
    }
    createSprite(anime, option, die_option) {
        let isnew = true;
        let sprite = this.deletelist.length > 0
            ? (isnew = false, this.deletelist.shift())
            : new createjs.Sprite(this.spriteSheet, anime);
        sprite.isdie = false;
        sprite.dieing_frame=0;
        sprite.diecount = 0;
        Object.assign(sprite, option);
        sprite.die = sprite.die || (() => {
            sprite.isdie = true;
            Object.assign(sprite, die_option);
        });
        !isnew
            ? (sprite.visible = true, sprite.gotoAndPlay(anime))
            : this.cantiner.addChild(sprite);
        this.list.push(sprite);
    }
    update(timeFunc, dieFunc, diedFunc, test) {
        this.list = this.list.filter((s) => {
            if (s.isdie) {
                s.diecount++;
                dieFunc(s);
                if (s.diecount > (s.dieing_frame)) {
                    diedFunc(s);
                    this.deletelist.push(s);
                    s.visible = false;
                    return false;
                }
                return true;
            }
            timeFunc(s);
            return this.outOfScreen(s, test);
        });
    }
}

之后就是实现各种弹幕，计分显示等

具体移步github https://github.com/lichffffd/we...
b站演示https://www.bilibili.com/vide...

云服务器 GPU云服务器简单的c语言做小游戏简单入门 linux简单入门 python简单入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107311.html

使用pygame开发的游戏发布+小总结

摘要：于是准备在这里总结下用开发游戏的经验，大致讲一下这个游戏是怎么开发出来的，代码比较长就不贴在这里了。为本游戏的证物系统，管理证物的显示，指证等。概述大约两年前接触了python，然后就爱上了这个语言。然后就想用它写游戏，很快就找到了pygame这个库，但是pygame貌似十分冷门，网上教程也比较少，好在还有个文档来参考。于是胡乱搞了很久，前后搞了弹幕射击类（模拟东方project系...

songze 2019-07-30 14:24 评论0 收藏0
第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

seanHai 2019-08-22 13:58 评论0 收藏0
第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

gityuan 2019-08-29 14:17 评论0 收藏0
前端基础入门

摘要：手把手教你做个人火的时候，随便一个都能赚的盆满钵满，但是，个人没有服务端，没有美工，似乎就不能开发了，真的是这样的吗秘密花园经典的中文手册。涵盖前端知识体系知识结构图书推荐以及入门视频教程，全的简直不要不要的了。 JavaScript 实现点击按钮复制指定区域文本 html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能，不需要依赖 flash。...

shinezejian 2019-08-22 13:51 评论0 收藏0