基于HTML5canvars的小游戏,html5--用cavas做一个小游戏

无标题文档

开始游戏

// JavaScript Documentvar canvas;

var context;

var speedX=5;

var speedY=5;

var x;

var y;

var flag;

function window_start()

{

canvas=document.getElementById("canvas");

context=canvas.getContext('2d');

context.save();

context.fillStyle="#999999";

context.fillRect(0,0,500,300);

context.restore();

document.getElementById("canvas").οnmοuseup=canvas_mouseup;//注册鼠标事件

}

function btn_click()

{

x=Math.random()*(500-10);

y=Math.random()*(300-10);

flag=setInterval("draw()",100);//画小球

}

function draw()

{

context.clearRect(0,0,canvas.width,canvas.height);

context.fillStyle="#999999";

context.fillRect(0,0,500,300);

x+=speedX;

y+=speedY;

context.save();

context.beginPath();

context.fillStyle="#3300FF";

context.arc(x,y,5,0,2*Math.PI,0);

if(x<10)

{

x=10;

speedX=-speedX;

}

if(x>490)

{

x=490;

speedX=-speedX;

}

if(y>290)

{

y=290;

speedY=-speedY;

}

if(y<10)

{

y=10;

speedY=-speedY;

}

context.fill();

context.closePath();

context.restore();

}

function canvas_mouseup(ev)

{

var dx;

var dy;

dx=ev.pageX-document.getElementById("canvas").offsetLeft-x;

dy=ev.pageY-document.getElementById("canvas").offsetTop-y;

if(dx<=5&&dx>=-5)

if(dy<=5&&dy>=-5)

{

alert("是在下输了！");

}

} 最后再说两句： a.parseInt(): 是用来解析字符串，返回值是整数。有几个特点： 1.    无视被解析字符串最前和最后的空格，即：" 111 "和"111"是一样的   2.  正规格式是parseInt(string,radix)。radix可以省略，为0或者2-36之间的整数，用来表示被解析数值的进制。(注意不是解析返回结果的进制)。如果radix不在此范围内，返回NaN    3. 如果radix 省略或者为0，则按默认进制对string进行解析。     4.string的首字符为0,则默认解析为8进制。string首字符为0x则默认解析为16进制。其他情况默认为10进制。    5. 解析从第一个可以解析的字符开始，到第一个不能解析的字符(如空格，标点符号等)结束。后面的字符不再解析。     6.如果第一个字符不可以解析，则返回NaN。如"a8989"(拓展阅读http://www.51testing.com/html/49/145949-853768.html) b.关于这句ev.pageX-document.getElementById("canvas").offsetLeft-BallX 获取鼠标中点与小球的偏移 pageX获取鼠标位置(关于这点，拓展阅读http://jo2.org/javascript-get-mouse-coordinates/) offsetLeft是dom对象的共有属性返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。