用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    慵懒
    2017-1-6 10:46
  • 签到天数: 2 天

    [LV.1]初来乍到

    173

    主题

    182

    帖子

    945

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    0
    2017-2-15 17:05:43 柿霖不是林 咫尺尊享 楼主 61522

    试验性质的一个微信小程序,用canvas做的一个类似flappy-bird的小游戏

    包含一些基本的功能:躲避障碍物、计分、排行榜等等。后端的工程也一并上传了,在java目录中,很简单的一个SpringMVC工程。

    游戏原型见这里


    使用说明

    直接git clone下来,用微信开发者工具导入即可。

    导入的时候,最好填上appid,原因下方说明。

    注意事项
    • 小程序目前还在公测状态,个人可以去公众平台上申请,但无法认证,最终的程序也无法发布。不过对于demo而言,有appid,能在手机上预览就可以了。
    • 如果不填写appid,小程序无法在手机上预览,只能在开发者工具里使用。
    • 小程序要求后端接口都是https的(必须事先在公众平台上配置好),对个人而言搞https证书实在太麻烦了。有两个办法绕过去:不填写appid,就不会有https的限制,但这样就不能在手机上预览;或者使用代理,将针对https://xxx的请求都代理到http://localhost:8080。我的做法是使用神器Charles的SSL Proxy和Map Remote功能,实现对https请求的代理。
    • 我尽量使用ES6的写法,但微信对ES6的支持还不太完善。




    [HTML] 纯文本查看 复制代码
    /**
     * 某个可以在canvas中绘制的图形
     */
    class Component {
        // 构造函数
        constructor(config) {
            this.ctx = config.context;  // canvas对应的context
            this.type = config.type;  // 组件类型,要么是文字,要么是矩形,其实对于不同的组件类型,用继承更好
            this.text = config.text;  // 如果是文字型组件,要显示的文字是啥?
            this.fontSize = config.fontSize || 25;  // 文字的大小,单位是像素
            this.width = config.width || 10;  // 宽度,宽度和长度只对矩形有用
            this.height = config.height || 10;  // 长度
            this.x = config.x || 0;  // x坐标
            this.y = config.y || 0;  // y坐标
            this.xSpeed = config.xSpeed || 0;  // 在x轴上的速度
            this.ySpeed = config.ySpeed || 0;  // 在y轴上的速度
            this.color = config.color || '#CD853F';  // 颜色
            this.xAcc = config.xAcc || 0;  // 在x轴上的加速度
            this.yAcc = config.yAcc || 0;  // 在y轴上的加速度
            this.canvasHeight = config.canvasHeight || 400;  // canvas的高度
        }
     
        // 在canvas上绘制图形
        update() {
            // 微信的canvas API真是难用,跟标准的完全不一样
            this.ctx.setFillStyle(this.color);
            this.ctx.setStrokeStyle(this.color);
            if (this.type == "text") {
                this.ctx.setFontSize(this.fontSize);
                this.ctx.fillText(this.text, this.x, this.y);
            } else if (this.type == "bird") {
                this.ctx.drawImage("../../images/bird.png", this.x, this.y, this.width, this.height);
            } else {
                this.ctx.rect(this.x, this.y, this.width, this.height);
                this.ctx.fill();
            }
        }
     
        // 计算组件新的位置,每一帧都要重新计算一次
        newPos() {
            // console.log('xSpeed=%d, ySpeed=%d, xAcc=%d, yAcc=%d', this.xSpeed, this.ySpeed, this.xAcc, this.yAcc);
            // 首先计算新的速度
            this.xSpeed += this.xAcc;
            this.ySpeed += this.yAcc;
            // 计算新的位置
            this.x += this.xSpeed;
            this.y += this.ySpeed;
            // 检测是否碰到了canvas边缘
            this.hitBoundary();
        }
     
        // 检测组件是否碰到了canvas边缘
        hitBoundary() {
            // 其实只检测了y轴的边界
            if (this.y < 0) {
                this.y = 0;
                this.ySpeed = 0;
                if (this.yAcc < 0) {
                    this.yAcc = 0;
                }
            }
     
            let bottom = this.y + this.height;
            if (bottom > this.canvasHeight) {
                // 这里其实可能有个bug,就是假设组件的高度一定不会超过canvas的高度
                this.y = this.canvasHeight - this.height;
                this.ySpeed = 0;
                if (this.yAcc > 0) {
                    this.yAcc = 0;
                }
            }
        }
     
        // 检测是否撞到了障碍物
        crashWith(otherobj) {
            let myleft = this.x;
            let myright = this.x + (this.width);
            let mytop = this.y;
            let mybottom = this.y + (this.height);
            let otherleft = otherobj.x;
            let otherright = otherobj.x + (otherobj.width);
            let othertop = otherobj.y;
            let otherbottom = otherobj.y + (otherobj.height);
            let crash = true;
     
            // 因为自己的角色是只鸟,形状不规则,碰撞检测很难搞,偷个懒
            if (this.type == 'bird') {
                myleft += 5;
                myright -= 5;
                mytop += 5;
                mybottom -= 5;
            }
     
            if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
                crash = false;
            }
            return crash;
        }
     
        // ES6的set/get是个很让人费解的设计,跟java bean中的setter/getter不是一个概念
        // 在我看来更多的是弥补js对象没有private变量的不足
        // 当然不用这种蛋疼的写法也可以,我只是想试试新特性
        set newYAcc(acc) {
            this.yAcc = acc;
        }
    }
     
    export default Component;




    游客,如果您要查看本帖隐藏内容请回复


    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    感谢楼主分享 谢谢
    感谢楼主
    使用道具 举报 回复
    感谢分享
    使用道具 举报 回复
    研究下ha
    使用道具 举报 回复
    2018-10-19 11:14:22 qwer 新人求带
    6#
    :D:D
    使用道具 举报 回复
    谢谢分享谢谢分享谢谢分享
    发新帖
    *滑动验证:
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X