微信小程序实验二 ——

实验内容：

小球按照随机的角度直线运动，如果碰到四壁则反弹。你们不需要做游戏计时、设置小球及背景颜色等，只完成小球在方框内反弹运动的功能。这里主要考查绘图知识，数学计算能力，以及对定时器的应用。

实验效果（最简单版本）：

实验代码：

index.js

// index.js
Page({data:{cx:200,cy:50,destinaX:3,destinaY:2},//初次渲染触发onReady:function(){var c=wx.createCanvasContext("canvasTest");// var c=wx.createSelectorQuery('canvasTest')var that=this;var timer=setInterval(canvasSize,20);function canvasSize(){//画布数据const width=300;const height=300;const speed=2;const r=7;//下面是相对左上角基点距离 和画布大小c.rect(0,0,width,height);c.stroke();//球会根据实时位置发生变化c.beginPath();var ox1=that.datacox;var oy1=that.datacoy;ox1=that.data.destinaX*speed+that.data.cx;oy1=that.data.cy-that.data.destinaY*speed;if(ox1>=width||ox1<=0){var bounceX=-that.data.destinaX;that.setData({destinaX:bounceX});ox1=that.data.destinaX*speed+that.data.cx;}if(oy1>=height||oy1<=0){var bounceY=-that.data.destinaY;that.setData({destinaY:bounceY});oy1=that.data.cy-that.data.destinaY*speed;}console.log(that.data.ox1,that.data.oy1);that.setData({cx:ox1,cy:oy1});c.arc(that.data.cx,that.data.cy,r,0,2*Math.PI);c.fill();c.stroke();c.draw();}}})

index.wxml

<!--index.wxml-->
<view class="canvasStyle">
<canvas canvas-id="canvasTest" style="width: 300px;height: 300px;"></canvas>
</view>

index.wxss

/**index.wxss**/
.canvasStyle{display: flex;justify-content: center;margin: 10px;margin-top: 70px;background-color: aqua;}

微信小程序实验二 ——— 弹球游戏相关推荐

微信小程序实验四 —— 扫雷游戏
实验小提醒,打开微信小程序模板时,一定要看清楚,要选js模板,不要选ts模板,因为ts中对数据类型检查更严格,同样的代码在ts中可能无法运行! 实验内容: 编写如下扫雷游戏,基本要求如下: (1)方块 ...
微信小程序实验案例：简易成语小词典
微信小程序实验案例:简易成语小词典 01.准备工作 1●申请数据接口现在网络上第三方的免费数据资源越来越少了,这里推荐使用聚合数据的免费接口来实现本次实验案例. 首先访问聚合数据官网https:// ...
【微信小程序】二维码跳转规则的前缀匹配是什么意思？
前言基础库 2.12.0 开发者工具 1.03.2008270 微信小程序的二维码跳转规则为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序 ...
微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
微信小程序获取二维码中URL中带的参数
解析微信小程序获取二维码中的url参数 onLoad: function (options) { console.log(options) let qrUrl = decodeURIComponent ...
微信小程序普通二维码解析
1.区别于微信小程序官方二维码是直接从onLoad的 options 解构出来就行,它是一个对象,这个大家都知道. 2.普通二维码也是从onLoad的 options 里解构出来,此时options ...
微信小程序：二开版优化新紫色UI云开发新款壁纸小程序源码
这是一款由旧版https://airymz.com/3387.html进行优化二开的一个新版本本壁纸表情包头像小程序采用(dcloud云开发)所以无需服务器与域名无需服务器.无需域名.云开发直接上 ...
微信小程序扫描二维码或者条码
程序是需要扫描条形码然后跳转到对应的产品信息页,其实微信小程序就有一个扫码识别的API,下面一起来看看: wx.scanCode(Object object) 调起客户端扫码界面进行扫码. 示例代码: ...
微信小程序项目实例——二维码生成器
微信小程序项目实例--二维码生成器文章目录微信小程序项目实例--二维码生成器一.项目展示二.项目核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示项目是一个简单实 ...

微信小程序实验二 ——— 弹球游戏

微信小程序实验二 ——— 弹球游戏相关推荐

最新文章

热门文章