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

实验内容：

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

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

实验代码：

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.wxss

/**index.wxss**/

.canvasStyle{

display: flex;

justify-content: center;

margin: 10px;

margin-top: 70px;

background-color: aqua;

}

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

您可能感兴趣的文章:微信小程序实战之自定义模态弹窗（8）微信小程序实现漂亮的弹窗效果微信小程序 弹窗自定义实例代码微信小程序实现蒙版弹窗效果微信小程序自定义toast弹窗效果的实现代码微信小程序自定义modal弹窗组件的方法详解