html5的魅力相信大家不會陌生，希望各位大大瀏覽器們早點支持這個特性哦，，還有先吐槽一句，微信的那個broser簡直弱爆了就簡單的動畫，比如滑動，就jquery的show(1000)，hide(1000)都卡的不行，還是qq瀏覽器的內核，qq瀏覽器，，，算了，，我先冷靜下。。。。

還有就是前幾天看到的這個！！！

都不支持要他干嘛？？？？？

整體思路就是將每個打出來的炮彈看做一個對象，他的x，y轉換成canvas的x，y,其中vecior就是個控制力度的一個選項后文會提到。

var cannonBall = function (x,y,vector){ var gravity=0, that={ x: x, y: y, removeMe:false, move: function (){ vector.vy += gravity; gravity += 0.1; //模擬加速度 that.x+=vector.vx; that.y+=vector.vy; if(that.y canvas.height -150){ that.removeMe=true; draw: function (){ ctx.beginPath(); ctx.arc(that.x,that.y,5,0,Math.PI * 2); ctx.fill(); ctx.closePath(); };

其中大炮炮彈的對象勢必涉及到了向量計算，自己封裝了個個方法，，有現成的Vector.js,但覺得太重（對于我們后端每次前端說不用模板，說太重，我們心里都默想重你妹呀，，哈哈哈），很簡單，實現簡單功能可以，大型游戲強烈建議使用現成的。

var vector2d= function (x,y){ var vec={ vx:x, vy:y, scale: function (scale){ vec.vx*=scale; vec.vy*=scale; add:function (vec2){ vec.vx+=vec2.vx; vec.vy+=vec2.vy; sub:function (vec2){ vec.vx-=vec2.vx; vec.vy-=vec2.vy; negate: function(){ vec.vx=-vec.vx; vec.vy=-vec.vy; length:function (){ return Math.sqrt(vec.vx * vec.vx + vec.vy * vec.vy); normalize:function (){ var len=this.length(); if(len){ vec.vx /=len; vec.vy /=len; return len; rotate:function (angle){ var vx = vec.vx; var vy = vec.vy; vec.vx = vx * Math.cos(angle) - vy * Math.sin(angle) vec.vy = vx * Math.sin(angle) + vy * Math.cos(angle); toString:function(){ return ( + vec.vx.toFixed(3) + , + vec.vy.toFixed(3) + )  return vec;};

好了，接著就是個計算角度再加上setInterval了，，其他沒啥說的，這里我著重說下canvas.save();和canvas.restore();這里稍微解釋一下，
當我們對畫布進行旋轉，縮放，平移等操作的時候其實我們是想對特定的元素進行操作，比如圖片，一個矩形等，但是當你用canvas的方法來進行這些操作的時候，其實是對整個畫布進行了操作，那么之后在畫布上的元素都會受到影響，所以我們在操作之前調用canvas.save()來保存畫布當前的狀態，當操作之后取出之前保存過的狀態，這樣就不會對其他的元素進行影響

 !doctype html  html lang= en  head  meta charset= UTF-8  meta author= gongbangwei  title 大炮 /title  /head  body  p id= lidu  span 選擇大炮的 /span  input type= radio checked= checked value= 25 大 input type= radio value= 20 中 input type= radio value= 15 小 canvas id= can width= 640 height= 480 >結束語
一個真正的前端絕不是ui，一個前端游戲工程師也絕對是個數學家。
【相關推薦】
1. 免費h5在線視頻教程
2. HTML5 完整版手冊
3. VeVb.com原創html5視頻教程
以上就是分享一個用html5實現炮彈自由落體的實例代碼的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。