欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)彈球游戲

 更新時間:2022年09月08日 16:18:39   作者:楓渝浪天下  
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)彈球游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)彈球游戲的具體代碼,供大家參考,具體內(nèi)容如下

實驗內(nèi)容:

小球按照隨機的角度直線運動,如果碰到四壁則反彈。你們不需要做游戲計時、設(shè)置小球及背景顏色等,只完成小球在方框內(nèi)反彈運動的功能。這里主要考查繪圖知識,數(shù)學(xué)計算能力,以及對定時器的應(yīng)用。

實驗效果(最簡單版本):

實驗代碼:

index.js

// index.js
Page({
? ? data:{
? ? ? cx:200,
? ? ? cy:50,
? ? ? destinaX:3,
? ? ? destinaY:2
? ? },
? ? //初次渲染觸發(fā)
? ? onReady:function(){
? ? ? var c=wx.createCanvasContext("canvasTest");
? ? ? // var c=wx.createSelectorQuery('canvasTest')
? ? ? var that=this;
? ? ? var timer=setInterval(canvasSize,20);
? ? ? function canvasSize(){
? ? ? ? //畫布數(shù)據(jù)
? ? ? ? const width=300;
? ? ? ? const height=300;
? ? ? ? const speed=2;
? ? ? ? const r=7;
? ? ? ? //下面是相對左上角基點距離 和畫布大小
? ? ? ? c.rect(0,0,width,height);
? ? ? ? c.stroke();
? ? ? ? //球會根據(jù)實時位置發(fā)生變化
? ? ? ? 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;
? }

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論