• 1. CANVAS 游戏制作Make Presentation much more fun@WPS官方微博 @kingsoftwps杭州电子科技大学 王劲 06wj@163.com
  • 2. CANVAS 常用操作操纵像素 putImageData(),getImageData()绘制位图 drawImage()绘制矩形 clearRect(),fillRect()绘制复杂路径 beginPath(),closePath(),fill(),stroke()矩形转换 rotate(),scale(),translate(),transform()
  • 3. 游戏的基本流程 擦除背景画游戏物体1更新游戏数据 2处理键盘,鼠标事件 循 环
  • 4. Sprite 图像精灵(x,y)heightwidthproperty:x,y,width,height,angle,scaleX,scaleY,alpha
  • 5. MovieClip 影片剪辑time++frame++时间轴帧数property:x,y,width,height,frame,totalFrame,fps
  • 6. 物体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;
  • 7. 向量来了function Vector(x, y) { this.x = x || 0; this.y = y || 0; }aba + baba - b
  • 8. 向量来了位置,速度,加速度都可以用向量表示xyava'a + v = a'
  • 9. 向量来了yxcir1cir2cir1 - cir2vv'
  • 10. 碰撞检测矩形碰撞 :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; }
  • 11. 像素级碰撞这可以通过getImageData()来判断第一步:先矩形检测,若碰撞,则再进行第二步,若无碰撞,直接返回false(minx, miny)(maxx, maxy)
  • 12. context.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)
  • 13. context.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,这时就可以通过判断是否所有像素都透明来判断碰撞了
  • 14. 数组地图
  • 15. 键盘控制用一个keyState储存按键状态:var keyState = {}; 在keydown事件中:keyState[e.keyCode] = true; 在keyup事件中:keyState[e.keyCode] = false;有什么好处呢?
  • 16. DEMOS
  • 17. 谢谢观赏@06wj @hdu_06wj