2d物理引擎01

我一直想做一个游戏，但一直感觉自己水平不够

想了想觉得不去做的话就永远做不出来

所以有了这个博文

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()

 

嗯，画出来了，感觉我的游戏可能成功了一半

posted @ 2017-12-21 15:56  崮生  阅读(155)  评论(0)  编辑  收藏  举报