- 浏览: 231786 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
李君寻:
内容挺好的,这是widget开发项目的大概框架吗?
Widget应用的基本组成 -
lliiqiang:
首先要有条件,算法只是提升系统而已。如果小范围变化基本可以尝试 ...
几个常用的检索排序算法的JavaScript实现 -
blessdyb:
aikki_gogh 写道最近正在研究canvas,求util ...
Canvas做游戏实践分享(十) -
aikki_gogh:
最近正在研究canvas,求utils.js和arrow.js ...
Canvas做游戏实践分享(十) -
Trinea:
请问你博客百度的广告怎么加的,不会是手动每天文章添加js吧
HTML5 WebGame开源工具之impactjs
6 用户交互——移动物体
游戏的核心在于交互,很多时候需要用户动手来操作游戏对象,很基本的一个操作就是移动物体。接下来我们会介绍如何拖动物体,在画布上扔物体等。
6.1 选择与释放对象
使用鼠标对物体的拖拽操作主要有三个步骤——鼠标进入物体范围并按下,鼠标移动及鼠标释放。这涉及到三个鼠标事件:mousedown,mousemove,mouseup。我们按此思路,仍旧以前面介绍的小球系统来实现。
首先需要检测到鼠标是否进入到小球中,为了简化处理,我们把小球看成一个与其外接矩形等效的图形。先得到小球在画布中所占据的位置。如下代码:
ball.prototype.getBounds=function(){ return { x: ball.x-ball.radius, y: ball.y-ball.radius, width: 2*ball.radius, height: 2*ball.radius }; }
如上,得到了小球外接矩形的左上端点及长宽。接下来,我们就需要来查看鼠标是否进入小球,抽象出来就是点是否在当前的矩形中,在其我们使用集合思想,取其对立事件就很容易处理。如下代码:
utils.containsPoint = function (rect, x, y) { return !(x < rect.x || x > rect.x + rect.width || y < rect.y || y > rect.y + rect.height); };
很明白地看到,我们先取得点不在小球的四种情况,然后取其对立事件即为点在小球内。于是很容易就实现:
window.onload=function(){ var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); var mouse=utils.captureMouse(canvas); var ball=new Ball(); ball.x=canvas.width/2; ball.y=canvas.height/2; ball.draw(context); //鼠标按键按下事件 canvas.addEventListener("mousedown",function(event){ if(utils.containsPoint(ball.getBounds(),mouse.x,mouse.y)){ console.log("===[mousedown]===in ball"); }else{ console.log("===[mousedown]===out ball"); } },false); //鼠标按键释放事件 canvas.addEventListener("mouseup",function(event){ if(utils.containsPoint(ball.getBounds(),mouse.x,mouse.y)){ console.log("***[mouseup]===in ball"); }else{ console.log("***[mouseup]===out ball"); } },false); //鼠标移动事件 canvas.addEventListener("mousemove",function(event){ if(utils.containsPoint(ball.getBounds(),mouse.x,mouse.y)){ console.log("###[mousemove]###in ball"); }else{ console.log("###[mousemove]###out ball"); } }) };
6.2 拖动对象
有了上面的实践基础,实现拖动非常容易,只需要在鼠标移动时让小球的位置与鼠标位置相同即可。如下代码:
window.onload=function(){ var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); var mouse=utils.captureMouse(canvas); var ball=new Ball(40); ball.x=canvas.width/2; ball.y=canvas.height/2; ball.draw(context); //小球跳动偏差处理 var offset_fix_x=0; var offset_fix_=0; //鼠标按下时检测是否位于小球内部,如果位于,则注册移动事件处理函数 canvas.addEventListener("mousedown",function(event){ if(utils.containsPoint(ball.getBounds(),mouse.x,mouse.y)){ offset_fix_x=mouse.x-ball.x; offset_fix_y=mouse.y-ball.y; canvas.addEventListener("mousemove",onMouseMove,false); canvas.addEventListener("mouseup",onMouseUP,false); } },false); //鼠标按键释放时的操作 function onMouseUP(){ canvas.removeEventListener("mouseup",onMouseUP,false); canvas.removeEventListener("mousemove",onMouseMove,false); } //鼠标移动时小球跟随鼠标 function onMouseMove(event){ ball.x=mouse.x-offset_fix_x; ball.y=mouse.y-offset_fix_y; } (function drawFrame(){ window.requestAnimFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height); ball.draw(context); })(); };
很容易就实现了小球移动的功能。注意,offset_x与offset_y是为了用来处理在小球内部我们快速点击小球边缘产生的小球跳动问题。通过记录鼠标按下时鼠标与小球中心的偏差距离,在鼠标移动时固定处理这个偏差,就能避免跳动。
6.3 拖动移动中的对象
如果需要对正在移动中的对象进行拖拽动作,原理和前面介绍的静止的对象拖拽一样,但需要注意,我们必须处理小球在鼠标点击后的状态,将此时小球的速度置0,否则我们鼠标在点住小球后,小球会继续沿其之前的速度运动,这样很难进行拖拽操作。如下代码:
window.onload=function(){ var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); var mouse=utils.captureMouse(canvas); var left=0,top=0,right=canvas.width,bottom=canvas.height,isMouseDown=false; var ball=new Ball(40); //跳动偏差处理 var fix_offset_jump_x=fix_offset_jump_y=0; //小球移动状态初始化 ball.x=canvas.width/2; ball.y=canvas.height/2; ball.vx=Math.random()*10-5; ball.vy=-10; bounce=-0.7; gravity=0.2; //鼠标按下时检测是否位于小球内部,如果位于,则注册移动事件处理函数 canvas.addEventListener("mousedown",function(){ if(utils.containsPoint(ball.getBounds(),mouse.x,mouse.y)){ isMouseDown=true; //如果鼠标在小球内部,则使得小球静止 ball.vx=0; ball.vy=0; fix_offset_jump_x=mouse.x-ball.x; fix_offset_jump_y=mouse.y-ball.y; canvas.addEventListener("mousemove",onMouseMove,false); canvas.addEventListener("mouseup",onMouseUP,false); } },false); function onMouseUP(){ isMouseDown=false; canvas.removeEventListener("mousemove",onMouseMove,false); canvas.removeEventListener("mouseup",onMouseUP,false); } function onMouseMove(){ ball.x=mouse.x-fix_offset_jump_x; ball.y=mouse.y-fix_offset_jump_y; } //边缘检测,碰撞处理 function checkBoundary(){ ball.vy+=gravity; ball.x+=ball.vx; ball.y+=ball.vy; if(ball.y-ball.radius<top){ ball.y=ball.radius+top; ball.vy*=bounce; console.log(ball.vy); }else if(ball.y+ball.radius>bottom){ ball.y=bottom-ball.radius; ball.vy*=bounce; } if(ball.x-ball.radius<left){ ball.x=ball.radius+left; ball.vx*=bounce; }else if(ball.x+ball.radius>right){ ball.x=right-ball.radius; ball.vx*=bounce; } } (function drawFrame(){ window.requestAnimFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height); if(!isMouseDown){ checkBoundary(); } ball.draw(context); })(); };
6.4 投掷对象
对于对象的投掷动作看似复杂,其实结合之前的拖拽动作,它的实现就非常简单。假设我们把一个静止的小球在一帧中从原始位置水平移动了10像素后松开鼠标,即实现了扔的动作,那么我们就认为此时小球被以10像素/ 帧的速度水平投掷出来。即
ball.vx=ball.x-lastX; ball.vy=ball.y-lastY;
于是,我们对移动中的小球进行投掷动作,代码如下:
window.onload=function(){ var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); var mouse=utils.captureMouse(canvas); //定义系统环境变量 var top=0,left=0,right=canvas.width,left=0,bottom=canvas.height; var fix_mouse_drag_offset_x=0; var fix_mouse_drag_offset_y=0; var bounce=-0.7; var gravity=0.2; var isMouseDown=false; var oldX=oldY=0; //初始化小球 var ball=new Ball(40); ball.x=canvas.width/2; ball.y=canvas.height/2; ball.vx=Math.random()*10-5; ball.vy=-10; //鼠标按下时检测鼠标是否位于小球内部 canvas.addEventListener("mousedown",function(){ if(utils.containsPoint(ball.getBounds(),mouse.x,mouse.y)){ isMouseDown=true; //小球跳动处理 fix_mouse_drag_offset_x=mouse.x-ball.x; fix_mouse_drag_offset_y=mouse.y-ball.y; //将小球置于静止状态 oldX=ball.x; oldY=ball.y; mouse.vx=mouse.vy=0; canvas.addEventListener("mousemove",onMouseMove,false); canvas.addEventListener("mouseup",onMouseUp,false); } },false); function onMouseMove(){ ball.x=mouse.x-fix_mouse_drag_offset_x; ball.y=mouse.y-fix_mouse_drag_offset_x; } function onMouseUp(){ isMouseDown=false; canvas.removeEventListener("mousemove",onMouseMove,false); canvas.removeEventListener("mouseup",onMouseUp,false); } //计算小球被投掷后的速度 function trackVelocity(){ ball.vx=ball.x-oldX; ball.vy=ball.y-oldY; oldX=ball.x; oldY=ball.y; } //边缘检测,碰撞出理 function checkBoundary(){ ball.vy+=gravity; ball.x+=ball.vx; ball.y+=ball.vy; if(ball.x-ball.radius<left){ ball.x=left+ball.radius; ball.vx*=bounce; }else if(ball.x+ball.radius>right){ ball.x=right-ball.radius; ball.vx*=bounce; } if(ball.y-ball.radius<top){ ball.y=top+ball.radius; ball.vy*=bounce; }else if(ball.y+ball.radius>bottom){ ball.y=bottom-ball.radius; ball.vy*=bounce; } } (function drawFrame(){ window.requestAnimFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height); //鼠标按下时,进行投掷处理,否则进行边缘检测及碰撞处理 if(!isMouseDown){ checkBoundary(); }else{ trackVelocity(); } ball.draw(context); })(); };
评论
代码都在当年系列的文章里面
但是这篇错误好多。。 望改正。。
顺便问一下 想继续研究canvas做游戏 有推荐的书/教程么 中文优先。。
什么错误呀?代码都跑过的呀
但是这篇错误好多。。 望改正。。
顺便问一下 想继续研究canvas做游戏 有推荐的书/教程么 中文优先。。
发表评论
-
HTML5 WebGame开源工具之impactjs
2012-08-28 09:36 3998随着浏览器(PC/Mobile)功能的不断增强 ... -
Canvas做游戏实践分享(十一)
2012-03-19 14:59 23487 缓冲和弹跳 下面我们来介绍一下很常用的 ... -
Canvas做游戏实践分享(九)
2012-02-16 00:38 1876反弹 反弹的 ... -
Canvas做游戏实践分享(八)
2012-02-14 23:57 18805.边界控制与摩擦力 在大多数的游戏设计中,会有 ... -
Canvas做游戏实践分享(七)
2012-02-13 23:08 21404.2 加速度 加速度是改变速度大小及方向的一个属性 ... -
Canvas做游戏实践分享(六)
2012-02-13 07:37 30204.1速度 运动最基本的属性就是速度。注意这里的 ... -
Canvas做游戏实践分享(五)
2012-02-12 11:44 23653.5 渐变 ... -
Canvas做游戏实践分享(四)
2012-02-12 09:03 31253.4 使用quadraticCurveTo绘制二次贝赛尔曲线 ... -
Canvas做游戏实践分享(三)
2012-02-11 20:58 22543. Canvas 常见用法 3.1 canvas中的色彩 ... -
Canvas做游戏实践分享(二)
2012-02-08 23:21 49942.游戏中的数学知识 在游戏的开发中,数学知识特别 ... -
Canvas做游戏实践分享(一)
2012-02-08 21:23 7946近期看了几本老外的书 ...
相关推荐
canvas拼图游戏,基于html + canvas画布实现
H5 canvas 实现小游戏 H5 canvas 实现小游戏 H5 canvas 实现小游戏 H5 canvas 实现小游戏
HTML5 Canvas 赛车游戏动画DEMO演示 键盘控制车的方向
利用canvas画布,进行撞击,消除操作的小游戏
canvas端午节小游戏
canvas拼图小游戏
html5 开发技术 游戏.很好玩的html5+canvas技术实现的拼图游戏
试验性质的一个微信小程序,用canvas做的一个类似flappy-bird的小游戏。 包含一些基本的功能:躲避障碍物、计分、排行榜等等。后端的工程也一并上传了,在java目录中,很简单的一个SpringMVC工程。 游戏原型见这里。...
通过一个简单的例子,讲解如何在HTML5 canvas中开发游戏,主要是定时器的用法值得大家借鉴
canvas端午节吃粽子小游戏,兼容移动端
canvas 飞机大战小游戏
HTML5 Canvas赛车游戏动画,赛车游戏动画演示。
canvas 实现2d 简单小游戏,点击出现蓝色攻击方块,攻击黑色方块得分,触碰红色方块游戏结束,黑色方块想灭完,游戏等级提升
canvas-弹珠游戏
HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战
HTML 5 CANVAS游戏开发实战
canvas打砖块小游戏
1.open-type=“share”,onShareAppMessage实现分享微信功能。2.canvas绘制分享海报。
HTML5+CANVAS游戏开发实战,很值得学习,就算不是做游戏,但是对js的进阶也很有好处。
canvas版的2048小游戏,canvas版的2048小游戏,canvas版的2048小游戏,canvas版的2048小游戏,canvas版的2048小游戏