微信小程序?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)文章
千萬不要錯過的JavaScript高效對比數(shù)組差異方法
前端開發(fā)中,我們通常需要對比兩個數(shù)組對象的差異。這其中有很多種方法,但是有些方法會帶來一些問題,所以本文為大家準(zhǔn)備了一個高效方法,需要的可以參考一下2023-05-05Layui組件Table綁定行點擊事件和獲取行數(shù)據(jù)的方法
今天小編就為大家分享一篇Layui組件Table綁定行點擊事件和獲取行數(shù)據(jù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08一個字符串中出現(xiàn)次數(shù)最多的字符 統(tǒng)計這個次數(shù)【實現(xiàn)代碼】
下面小編就為大家?guī)硪黄粋€字符串中出現(xiàn)次數(shù)最多的字符 統(tǒng)計這個次數(shù)【實現(xiàn)代碼】。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-04-04只需五句話搞定JavaScript作用域(經(jīng)典)
javascript作用域是前端開發(fā)比較難理解的知識點,下面小編給大家提供五句話幫助大家很快的了解js作用域,非常不錯,具有參考借鑒價值,感興趣的朋友一起學(xué)習(xí)吧2016-07-07layui監(jiān)聽下拉選框選中值變化的方法(包含監(jiān)聽普通下拉選框)
今天小編大家分享一篇layui監(jiān)聽下拉選框選中值變化的方法(包含監(jiān)聽普通下拉選框),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09詳解JS去重及字符串奇數(shù)位小寫轉(zhuǎn)大寫
本篇文章主要介紹了詳解JS去重及字符串奇數(shù)位小寫轉(zhuǎn)大寫 ,非常具有實用價值,需要的朋友可以參考下。2016-12-12