我一直想做一个游戏,但一直感觉自己水平不够
想了想觉得不去做的话就永远做不出来
所以有了这个博文
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()
嗯,画出来了,感觉我的游戏可能成功了一半