小程序-飞翔的小鸟:canvas实现,java后端

[复制链接]
hyt_xcx手机认证 实名认证 视频认证 发表于 2016-12-13 22:49:29 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
作者:jiangxy
试验性质的一个微信小程序,用canvas做的一个类似flappy-bird的小游戏。
包含一些基本的功能:躲避障碍物、计分、排行榜等等。后端的工程也一并上传了,在java目录中,很简单的一个SpringMVC工程。
screenshot.jpg
使用说明
直接git clone下来,用微信开发者工具导入即可。
导入的时候,最好填上appid,原因下方说明。
注意事项
  • 小程序目前还在公测状态,个人可以去公众平台上申请,但无法认证,最终的程序也无法发布。不过对于demo而言,有appid,能在手机上预览就可以了。
  • 如果不填写appid,小程序无法在手机上预览,只能在开发者工具里使用。
  • 小程序要求后端接口都是https的(必须事先在公众平台上配置好),对个人而言搞https证书实在太麻烦了。有两个办法绕过去:不填写appid,就不会有https的限制,但这样就不能在手机上预览;或者使用代理,将针对https://xxx的请求都代理到http://localhost:8080。我的做法是使用神器Charles的SSL Proxy和Map Remote功能,实现对https请求的代理。
  • 我尽量使用ES6的写法,但微信对ES6的支持还不太完善。

  1. /**
  2. * 某个可以在canvas中绘制的图形
  3. */
  4. class Component {
  5.     // 构造函数
  6.     constructor(config) {
  7.         this.ctx = config.context;  // canvas对应的context
  8.         this.type = config.type;  // 组件类型,要么是文字,要么是矩形,其实对于不同的组件类型,用继承更好
  9.         this.text = config.text;  // 如果是文字型组件,要显示的文字是啥?
  10.         this.fontSize = config.fontSize || 25;  // 文字的大小,单位是像素
  11.         this.width = config.width || 10;  // 宽度,宽度和长度只对矩形有用
  12.         this.height = config.height || 10;  // 长度
  13.         this.x = config.x || 0;  // x坐标
  14.         this.y = config.y || 0;  // y坐标
  15.         this.xSpeed = config.xSpeed || 0;  // 在x轴上的速度
  16.         this.ySpeed = config.ySpeed || 0;  // 在y轴上的速度
  17.         this.color = config.color || '#CD853F';  // 颜色
  18.         this.xAcc = config.xAcc || 0;  // 在x轴上的加速度
  19.         this.yAcc = config.yAcc || 0;  // 在y轴上的加速度
  20.         this.canvasHeight = config.canvasHeight || 400;  // canvas的高度
  21.     }

  22.     // 在canvas上绘制图形
  23.     update() {
  24.         // 微信的canvas API真是难用,跟标准的完全不一样
  25.         this.ctx.setFillStyle(this.color);
  26.         this.ctx.setStrokeStyle(this.color);
  27.         if (this.type == "text") {
  28.             this.ctx.setFontSize(this.fontSize);
  29.             this.ctx.fillText(this.text, this.x, this.y);
  30.         } else if (this.type == "bird") {
  31.             this.ctx.drawImage("../../images/bird.png", this.x, this.y, this.width, this.height);
  32.         } else {
  33.             this.ctx.rect(this.x, this.y, this.width, this.height);
  34.             this.ctx.fill();
  35.         }
  36.     }

  37.     // 计算组件新的位置,每一帧都要重新计算一次
  38.     newPos() {
  39.         // console.log('xSpeed=%d, ySpeed=%d, xAcc=%d, yAcc=%d', this.xSpeed, this.ySpeed, this.xAcc, this.yAcc);
  40.         // 首先计算新的速度
  41.         this.xSpeed += this.xAcc;
  42.         this.ySpeed += this.yAcc;
  43.         // 计算新的位置
  44.         this.x += this.xSpeed;
  45.         this.y += this.ySpeed;
  46.         // 检测是否碰到了canvas边缘
  47.         this.hitBoundary();
  48.     }

  49.     // 检测组件是否碰到了canvas边缘
  50.     hitBoundary() {
  51.         // 其实只检测了y轴的边界
  52.         if (this.y < 0) {
  53.             this.y = 0;
  54.             this.ySpeed = 0;
  55.             if (this.yAcc < 0) {
  56.                 this.yAcc = 0;
  57.             }
  58.         }

  59.         let bottom = this.y + this.height;
  60.         if (bottom > this.canvasHeight) {
  61.             // 这里其实可能有个bug,就是假设组件的高度一定不会超过canvas的高度
  62.             this.y = this.canvasHeight - this.height;
  63.             this.ySpeed = 0;
  64.             if (this.yAcc > 0) {
  65.                 this.yAcc = 0;
  66.             }
  67.         }
  68.     }

  69.     // 检测是否撞到了障碍物
  70.     crashWith(otherobj) {
  71.         let myleft = this.x;
  72.         let myright = this.x + (this.width);
  73.         let mytop = this.y;
  74.         let mybottom = this.y + (this.height);
  75.         let otherleft = otherobj.x;
  76.         let otherright = otherobj.x + (otherobj.width);
  77.         let othertop = otherobj.y;
  78.         let otherbottom = otherobj.y + (otherobj.height);
  79.         let crash = true;

  80.         // 因为自己的角色是只鸟,形状不规则,碰撞检测很难搞,偷个懒
  81.         if (this.type == 'bird') {
  82.             myleft += 5;
  83.             myright -= 5;
  84.             mytop += 5;
  85.             mybottom -= 5;
  86.         }

  87.         if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
  88.             crash = false;
  89.         }
  90.         return crash;
  91.     }

  92.     // ES6的set/get是个很让人费解的设计,跟java bean中的setter/getter不是一个概念
  93.     // 在我看来更多的是弥补js对象没有private变量的不足
  94.     // 当然不用这种蛋疼的写法也可以,我只是想试试新特性
  95.     set newYAcc(acc) {
  96.         this.yAcc = acc;
  97.     }
  98. }

  99. export default Component;
复制代码


项目地址:
游客,如果您要查看本帖隐藏内容请回复


回复

使用道具 举报

精彩评论1

tramper 发表于 2018-2-28 21:53:32 | 显示全部楼层
希望程序是完整的,我正好学习学习,谢谢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ- Archiver-手机版-小黑屋- 浩阳天社区  

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.  蜀ICP备16032957号-1