2d物理引擎01
阿新 • • 發佈：2017-12-21
blue idt 不知道 速度 物理引擎 alt 坐標 obj key
我一直想做一個遊戲，但一直感覺自己水平不夠
想了想覺得不去做的話就永遠做不出來
所以有了這個博文
01
我需要一個東西來顯示，很顯然h5中canvas是很好的選擇
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="js/index.js" type="text/javascript" charset="utf-8"></script> <script src="js/map.js" type="text/javascript" charset="utf-8"></script> <script src="js/obj.js" type="text/javascript" charset="utf-8"></script> <script src="js/碰撞.js" type="text/javascript" charset="utf-8"></script> <title></title> </head> <body> <canvas style="border: 1px solid lightseagreen;" onclick="單擊()" onkeydown="input_key()" id="id-canvas" width="800" height="600"></canvas> </body> </html>
02
一個引擎到底該怎麽寫？我不知道
需要哪些功能？我也不知道
但我覺得首先我需要能在畫板上畫點什麽
我需要一個主角
function 誕生(color){return {
x:100,y:100,
r:20,m:20,
Vx:Math.random()*10*隨機取負(),Vy:Math.random()*10*隨機取負(), //v=v+at v+=a v+=F/m
Fx:0,Fy:0, //F=ma a=F/m
g:3,
color:color,
}}
function 隨機取負(){
if(Math.random()>0.5)
return(-1)
return(1)
}
我想了想這個主角會有這樣的一些屬性
x,y 自身坐標
r 它的大小，因為他是圓的所以是半徑
m 它的質量
Vx，Vy 它的速度，根據我可憐的高中物理知識將速度分解成x和y兩個分量
g 它受到的引力，按理來說引力應該是大家共享的，但我為了以後可能會有的漂浮之類的效果給了每一個對象一個g
color 它的外表
好了，一個主角構建成功
現在是要把它畫出來
cav=document.getElementById("id-canvas")
ctx=cav.getContext(‘2d‘)、
e=誕生(‘blue‘)
ctx.fillStyle=e.color
ctx.arc(e.x,e.y,e.r,0,2*Math.PI)
ctx.fill()
嗯，畫出來了，感覺我的遊戲可能成功了一半
2d物理引擎01