微信小程序实现弹球游戏

本文实例为大家分享了微信小程序实现弹球游戏的具体代码，供大家参考，具体内容如下

实验内容：

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

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

实验代码：

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;
? }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现弹球游戏的详细内容...