分享一個用html5實現砲彈自由落體的實例程式碼
html5仿大砲砲彈的自由落體實現
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'>小
</p>
<canvas id='can' width="640" height="480" style=" border:2px solid">no support html5</canvas>
<script src='vector2d.js'></script>
<script src='jquery/jquery-1.7.2.min.js'></script>
<script>
var gameObj=[],
canvas=document.getElementById('can'),
ctx=canvas.getContext('2d');
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,8,0,Math.PI * 2);
ctx.fill();
ctx.closePath();
}
};
return that;
}
var cannon= function (x,y,lidu){
var mx=0,
my=0,
angle=0,
that={
x: x,
y: y,
lidu:lidu,
angle:0,
removeMe:false,
move:function (){
angle=Math.atan2(my-that.y,mx-that.x);
},
draw:function(){
ctx.save();
ctx.lineWidth=2;
ctx.translate(that.x,that.y);
//平移，将画布的坐标原点向左右方向移动x，向上下方向移动y.canvas的默认位置是在（0,0）
ctx.rotate(angle);
//画布旋转
ctx.strokeRect(0,-5,50,10);
ctx.moveTo(0,0);
ctx.beginPath();
ctx.arc(0,0,15,0,Math.PI * 2 );
ctx.fill();
ctx.closePath();
ctx.restore();
}
};//end that
canvas.onmousedown = function(){
//在这里调用向量的那个js
var vec = vector2d(mx-that.x,my-that.y);
vec.normalize();
//console.log(lidu);
vec.scale(lidu);
gameObj.push(cannonBall(that.x,that.y,vec));
}
canvas.onmousemove = function (event){
var bb= canvas.getBoundingClientRect();
mx=(event.clientX - bb.left);
my=(event.clientY - bb.top);
};
return that;
};
//画蓝田和草地
var drawSkyAndGrass = function (){
ctx.save();
ctx.globalAlpha= 0.4;
var linGrad=ctx.createLinearGradient(0,0,0,canvas.height);
linGrad.addColorStop(0,'#00BFFF');
linGrad.addColorStop(0.5,'white');
linGrad.addColorStop(0.5,'#55dd00');
linGrad.addColorStop(1,'white');
ctx.fillStyle=linGrad;
ctx.fillRect(0,0,canvas.width, canvas.height);
ctx.restore();
}
///////main/////////////
var lidu=$('#lidu').find("input:checked").val();
gameObj.push(cannon(50,canvas.height-150,lidu));
$('#lidu').click(function (event){
var cl=event.target;
$(this).find('input').each(function(){
$(this).attr('checked',false)
});
$(cl).attr('checked',true);
lidu=$(cl).val();
gameObj.splice(0,gameObj.length);
gameObj.push(cannon(50,canvas.height-150,lidu));
})
setInterval( function (){
drawSkyAndGrass();
var gameObj_fresh=[];
for (var i = 0; i < gameObj.length; i++) {
gameObj[i].move();
gameObj[i].draw();
if(gameObj[i].removeMe === false){
gameObj_fresh.push(gameObj[i]);
}
}
gameObj=gameObj_fresh;
},50);
</script>
</body>
</html>結束語
一個真正的前端絕不是ui，一個前端遊戲工程師也絕對是個數學家。
【相關推薦】
1. 免費h5線上影片教學
2. HTML5 完整版手冊
以上是分享一個用html5實現砲彈自由落體的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Python中的SVM實例
Jun 11, 2023 pm 08:42 PM
Python中的支援向量機（SupportVectorMachine，SVM）是一個強大的監督學習演算法，可以用來解決分類和回歸問題。 SVM在處理高維度資料和非線性問題的時候表現出色，被廣泛地應用於資料探勘、影像分類、文字分類、生物資訊學等領域。在本文中，我們將介紹在Python中使用SVM進行分類的實例。我們將使用scikit-learn函式庫中的SVM模
h5是指什麼
Aug 02, 2023 pm 01:52 PM
H5是指HTML5，是HTML的最新版本，H5是一個功能強大的標記語言，為開發者提供了更多的選擇和創造空間，它的出現推動了Web技術的發展，使得網頁的交互和效果更加出色，隨著H5技術的逐漸成熟和普及，相信它將在互聯網的世界中發揮越來越重要的作用。
VUE3入門實例：製作一個簡單的影片播放器
Jun 15, 2023 pm 09:42 PM
隨著新一代前端框架的不斷湧現，VUE3作為一個快速、靈活、易上手的前端框架備受熱愛。接下來，我們就來一起學習VUE3的基礎知識，製作一個簡單的影片播放器。一、安裝VUE3首先，我們需要在本地安裝VUE3。開啟命令列工具，執行以下命令:npminstallvue@next接著，新建一個HTML文件，引入VUE3：<!doctypehtml>
學習Golang指標轉換的最佳實務範例
Feb 24, 2024 pm 03:51 PM
Golang是一門功能強大且高效的程式語言，可用於開發各種應用程式和服務。在Golang中，指標是一種非常重要的概念，它可以幫助我們更靈活和有效率地操作資料。指標轉換是指在不同類型之間進行指標操作的過程，本文將透過具體的實例來學習Golang中指標轉換的最佳實踐。 1.基本概念在Golang中，每個變數都有一個位址，位址就是變數在記憶體中的位置。
PHP 簡單網頁爬蟲開發實例
Jun 13, 2023 pm 06:54 PM
隨著網路的快速發展，數據已成為了當今資訊時代最為重要的資源之一。而網路爬蟲作為一種自動化獲取和處理網路數據的技術，也越來越受到人們的關注和應用。本文將介紹如何使用PHP開發簡單的網路爬蟲，並實現自動化取得網路資料的功能。一、網路爬蟲概述網路爬蟲是一種自動化取得和處理網路資源的技術，其主要工作流程是模擬瀏覽器行為，自動存取指定的URL位址並提取所
Python中的VAE演算法實例
Jun 11, 2023 pm 07:58 PM
VAE是一種生成模型，全名為VariationalAutoencoder，中文譯為變分自編碼器。它是一種無監督的學習演算法，可以用來產生新的數據，例如圖像、音訊、文字等。與普通的自編碼器相比，VAE更加靈活和強大，能夠產生更複雜和真實的數據。 Python是目前使用最廣泛的程式語言之一，也是深度學習的主要工具之一。在Python中，有許多優秀的機器學習和深度
