html5实现简易版祖玛小游戏
canvas简介
<canvas></canvas>是html5出现的新标签，像所有的dom对象一样它有自己本身的属性.方法和事件，其中就有绘图的方法，js能够调用它来进行绘图。
基本知识
context:context是一个封装了很多绘图功能的对象，获取这个对象的方法是
var context=canvas.getContext("2d");
但遗憾的事告诉你html5还只是个少女，不提供3d服务.
canvas元素绘制图像的时候有两种方法，分别是
context.fill()//填充
context.stroke()//绘制边框
style:在进行图形绘制前，要设置好绘图的样式
context.fillStyle//填充的样式
context.strokeStyle//边框样式
context.lineWidth//图形边框宽度
绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)
x:矩形起点横坐标（坐标原点为canvas的左上角，当然确切的来说是原始原点）
y:矩形起点纵坐标
width:矩形长度
height:矩形高度
清除矩形区域context.clearRect(x,y,width,height)
x:清除矩形起点横坐标
y:清除矩形起点纵坐标
width:清除矩形长度
height:清除矩形高度
顶部
圆弧context.arc(x,y,radius,starAngle,endAngle,anticlockwise)
x:圆心的x坐标
y:圆心的y坐标
straAngle:开始角度
endAngle:结束角度
anticlockwise:是否逆时针false是顺时针
路径 context.beginPath() context.closePath()
context.fill()的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分
绘制线段 context.moveTo(x,y) context.lineTo(x,y)
x:x坐标
y:y坐标
每次画线都从moveTo的点到lineTo的点
线性渐变 var lg=context.createLinearGradient(xStart,yStart,xEnd,yEnd)
线性渐变颜色lg.addColorStop(offset,color)
xstart:渐变开始点x坐标
ystart:渐变开始点y坐标
yEnd:渐变结束点y坐标
xEnd:渐变结束点x坐标
code:
function draw(id)
{
var canvas=document.getElementById(id);
if(camvas==null)
return false;
var context=canvas.getContext('2d');
var g1=context.createLinearGradient(0,0,0,300);
g1.addColorStop(0,'rgb(255,0,0)');//红
g1.addColorStop(0.5,'rgb(0,255,0)');//绿
g1.addColorStop(1,'rgb(0,0,255)');//蓝
//可以把1g对象理解成GDI中线性brush
context.fillStyle=g1;
context.fillRect(0,0,400,300);www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html
}
小球的碰撞检测
1.碰撞检测
首先，碰撞的检测原理是非常简单的。只要两个球的球心距离小于等于两球的半径之和，则可以认为是发生了碰撞，如图：
同时我们还可以通过三角函数计算出连线与x轴的夹角，这个在处理碰撞时会用到。
设置鼠标移动事件
var iRotate-0;
oC.onmousemove=function(ev){
var ev=ev||window.event;
var x=ev.clientX-oc.offsetLeft;
var y=ev.clientY-oc.offsetTop;
var a=x-300;
var b=y-200;
var c=Math.sqrt(a*a+b*b);
if(a>0)
{
iRotate=Math.asin(a/c);
}
if(a<0&&b>0)
{
iRotate=-(Math.asin(b/c)+90*Math,Pi/100);
}
else if(a<0){
iRotate=Math.asin(a/碰撞c);
}
小球碰撞
//分别设两个小球的坐标为(x1,y1),(x2,y2)
function peng(x1,x2,y1,y2){
var a=x1-x2;
var b=y1-y2;
var c=Math.sqrt(a*a+b*b);
if(c<40){
return true;
}else{
return false;
}
js splice方法
array.splice(index,howmany,item1,itemx);
//小球被删掉
二重遍历,分别遍历小球数组和子弹数组
for(var i=0;i<bullet.length;i++)
for(var j=0;j<ball.length;j++)
{if(peng(bullet[i],x,bullet[i].y,ball[i].x,ball[i].y){
bullet.splice(i,1);
ball.splice(j,1);
break;
}
//设置文字特效
oGC.font='bold 35px 微软雅黑‘
..textBaseline="middle";
..textAlign="center";
oGC.fillText("祖玛游戏",300,300);
