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

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

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

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

實(shí)驗(yàn)內(nèi)容：

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

實(shí)驗(yàn)效果（最簡(jiǎn)單版本）：

實(shí)驗(yàn)代碼：

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;
? ? ? ? //下面是相對(duì)左上角基點(diǎn)距離 和畫布大小
? ? ? ? c.rect(0,0,width,height);
? ? ? ? c.stroke();
? ? ? ? //球會(huì)根據(jù)實(shí)時(shí)位置發(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;
? }

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

相關(guān)文章

最新評(píng)論