canvas游戏开发

nullnullCANVAS 游戏制作Make Presentation much more fun@WPS官方微博 @kingsoftwps杭州电子科技大学 王劲 06wj@163.comnullCANVAS 常用操作操纵像素 putImageData(),getImageData()绘制位图 drawImage()绘制矩形 clearRect(),fillRect()绘制复杂路径 beginPath(),closePath(),fill(),stroke()矩形转换 rotate(),scale(),translate(),transform()null游戏的基本 擦除背景画游戏物体1更新游戏数据 2处理键盘，鼠标事件 循 环nullSprite 图像精灵(x,y)heightwidthproperty：x,y,width,height,angle,scaleX,scaleY,alphanullMovieClip 影片剪辑time++frame++时间轴帧数property：x,y,width,height,frame,totalFrame,fpsnull物体de移动基本方式 ：sprite.x += sprite.speedX; sprite.y += sprite.speedY;更进一步 : sprite.speedX += sprite.ax; sprite.x += sprite.speedX; sprite.speedY += sprite.ay; sprite.y += sprite.speedY; null向量来了function Vector(x, y) { this.x = x || 0; this.y = y || 0; }aba + baba - bnull向量来了位置，速度，加速度都可以用向量示xyava'a + v = a'null向量来了yxcir1cir2cir1 - cir2vv'null碰撞检测矩形碰撞 ：function hitRect(x0,y0,w0,h0,x1,y1,w1,h1) { var w =Math.abs( x0 - (x1 + w1)); var h = Math.abs(y0 - (y1 + h1)); return w < ((w0 + w1) && h < (h0 + h1)) }圆形碰撞:function hitCircle(x0,y0,r0,x1,y1,r1) { return (x0 - y0)*(x0 - y0)+(x1 - y1)*(x1 - y1) < r1*r1 + r2 * r2; }null像素级碰撞这可以通过getImageData()来判断第一步：先矩形检测，若碰撞，则再进行第二步，若无碰撞，直接返回false(minx, miny)(maxx, maxy)nullcontext.drawImage(this.img, this.x, this.y); var data1 = context.getImageData(minx, miny, maxx - minx, maxy - miny).data; context.clearRect(0, 0, 550, 400); context.drawImage(sprite.img, sprite.x, sprite.y); var data2 = context.getImageData(minx, miny, maxx - minx, maxy - miny).data; for(var i = 3; i < data1.length; i += 4) { if(data1[i] > 0 && data2[i] > 0) return true; } return false;第二步：有两种方法第一种：同时检测两图在红色矩形内的像素，若存在一点在两个图上的alpha值不为0，则发生碰撞(minx,miny)(maxx,maxy)nullcontext.drawImage(this.img, this.x, this.y); context.globalCompositeOperation = 'source-in'; context.drawImage(sprite.img, sprite.x, sprite.y); var data = context.getImageData(minx, miny, maxx - minx, maxy - miny).data; context.globalCompositeOperation = 'source-over'; for(var i = 3; i < data.length; i += 4) { if(data[i] > 0 ) return true; } return false;第二步：有两种方法(minx,miny)(maxx,maxy)第二种：先画一张图，然后将混合模式改为source-in，这时再画图，新图片会仅仅出现与原有内容重叠的地方，其他地方透明度变为0，这时就可以通过判断是否所有像素都透明来判断碰撞了null数组地图null键盘控制用一个keyState储存按键状态：var keyState = {}; 在keydown事件中：keyState[e.keyCode] = true; 在keyup事件中：keyState[e.keyCode] = false;有什么好处呢？nullDEMOSnull谢谢观赏@06wj @hdu_06wj