码迷,mamicode.com
首页 > 其他好文 > 详细

2d物理引擎01

时间:2017-12-21 17:18:25      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:知识   context   png   script   sea   .com   gre   width   需要   

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

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

所以有了这个博文

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

标签:知识   context   png   script   sea   .com   gre   width   需要   

原文地址:http://www.cnblogs.com/szpq/p/8081005.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!