時間：2023-07-05 18:33:01 | 來源：網(wǎng)站運營
時間：2023-07-05 18:33:01 來源：網(wǎng)站運營
h5的游戲開發(fā)詳解：這次給大家?guī)韍5的游戲開發(fā)詳解，h5游戲開發(fā)的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。
在線咨詢
//ball 球function Ball(sx, sy, rad, stylestring) { this.sx = sx; this.sy = sy; this.rad = rad; this.draw = drawball; this.moveit = moveball; this.fillstyle = stylestring;}function drawball() { ctx.fillStyle = this.fillstyle; ctx.beginPath(); //ctx.fillStyle= rgb(0,0,0); ctx.arc(this.sx, this.sy, this.rad, 0, Math.PI * 2, true); ctx.fill();}function moveball(dx, dy) { this.sx += dx; this.sy += dy;}//Rect 方形function Myrectangle(sx, sy, swidth, sheight, stylestring) { this.sx = sx; this.sy = sy; this.swidth = swidth; this.sheight = sheight; this.fillstyle = stylestring; this.draw = drawrects; this.moveit = moveball;//move方法是一樣的}function drawrects() { ctx.fillStyle = this.fillstyle; ctx.fillRect(this.sx, this.sy, this.swidth, this.sheight);}//多邊形function Polycard(sx, sy, rad, n, frontbgcolor, backcolor, polycolor) { this.sx = sx; this.sy = sy; this.rad = rad; this.draw = drawpoly; this.frontbgcolor = frontbgcolor; this.backcolor = backcolor; this.polycolor = polycolor; this.n = n; this.angle = (2 * Math.PI) / n; //parens may not be needed. this.moveit = generalmove;}//畫多邊形function drawpoly() { ctx.fillStyle = this.frontbgcolor; ctx.strokeStyle = this.backcolor; ctx.fillRect(this.sx - 2 * this.rad, this.sy - 2 * this.rad, 4 * this.rad, 4 * this.rad); ctx.beginPath(); ctx.fillStyle = this.polycolor; var i; var rad = this.rad; ctx.beginPath(); ctx.moveTo(this.sx + rad * Math.cos(-.5 * this.angle), this.sy + rad * Math.sin(-.5 * this.angle)); for (i = 1; i < this.n; i++) { ctx.lineTo(this.sx + rad * Math.cos((i - .5) * this.angle), this.sy + rad * Math.sin((i - .5) * this.angle)); } ctx.fill();}function generalmove(dx, dy) { this.sx += dx; this.sy += dy;}//圖像function Picture(sx, sy, swidth, sheight, imga) { this.sx = sx; this.sy = sy; this.img = imga; this.swidth = swidth; this.sheight = sheight; this.draw = drawAnImage;}function drawAnImage() { ctx.drawImage(this.img, this.sx, this.sy, this.swidth, this.sheight);}(ev.layerX || ev.layerX == 0) { mx == (ev.offsetX || ev.offsetX == 0) { mx ==3. 獲取按鍵輸入：function getkey(event) { var keyCode; if(event == null) { keyCode = window.event.keyCode; window.event.preventDefault(); } else { keyCode = event.keyCode; event.preventDefault(); } switch(keyCode) { case 68: //按下D deal(); break; case 72: //按下H playerdone(); break; case 78: //按下N newgame(); break; default: alert("Press d, h, or n."); } }4. 添加事件監(jiān)聽：var canvas1 = document.getElementById('canvas'); canvas1.addEventListener('mousedown', startwall, false);//false表示事件冒泡的順序。 canvas1.addEventListener('mousemove', stretchwall, false); canvas1.addEventListener('mouseup', finish, false);5.運動的圖形一般都是統(tǒng)一加載在一個數(shù)組中，定時器每觸發(fā)一次就重繪一次。每一個對象都有draw方法。var mypent = new Token(100, 100, 20, "rgb(0,0,250)", 5);everything.push(mypent); function drawall() { ctx.clearRect(0, 0, cwidth, cheight); var i; for (i = 0; i < everything.length; i++) { everything[i].draw(); }}6.javascript面向?qū)ο蟮哪芰]有那些高級語言強(qiáng)，很多功能的實現(xiàn)都是巧妙的運用了數(shù)組。比如洗牌的動作。 //洗牌就是更換了牌的位置 function shuffle() { var i = deck.length - 1;//deck代表一副牌 var s; while (i>0) {//這里循環(huán)一次 每張牌平均更換了兩次位置 s = Math.floor(Math.random()*(i+1));//隨機(jī)范圍是0-i (包括i) swapindeck(s,i);//交換位置 i--; } } function swapindeck(j,k) { var hold = new MCard(deck[j].num,deck[j].suit,deck[j].picture.src); //MCard 是一張牌的對象。 deck[j] = deck[k]; deck[k] = hold;}7.很多地方要用到數(shù)學(xué)知識：比如小球碰撞，就需要改變x和y的運動方向即可。判斷是否在擊中目標(biāo)。就是判斷xy是否在一定的區(qū)間。但判斷一個移動的物體能不能經(jīng)過前面的路，且不能能穿越墻。就有點復(fù)雜了。像迷宮那個游戲。本質(zhì)是要判斷線段到球心的距離不小于球的半徑。.sx +=.sy += (i = 0; i < walls.length; i++= (intersect(wall.sx, wall.sy, wall.fx, wall.fy, .sx, .sy, .sx -=.sy -== fx -= fy -= 0.0 - ((sx - cx) * dx + (sy - cy) * dy) / ((dx * dx) + (dy * (t < 0.0= 0.0 (t > 1.0= 1.0= (sx+t*(fx-sx))-= (sy +t*(fy-sy))-= (dx*dx) +(dy* (rt<(rad*相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注我?。?！關(guān)鍵詞：游戲
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
