html5游戏防止作弊,html5 canvas模拟的小球躲避小游戏

刘泽的canvas游戏咯

var player={

};

var vs={

};

var ball;//只是为了缩短变量访问时间

var H=500;

var W=1000;

var L=0;

var T=0;

var mycanvas=$("canvas");

var ctx=mycanvas.getContext('2d');

function $(a){

return document.getElementById(a);

}

function init(){

var l=W/2-60,t=H/2-30,w=120,h=60;//按钮的左上角，以及宽度和高度

vs={

id : 0 ,//球的号码

ball : [],//保存所有的球对象

num :0

};

player={

x:0,

y:0,

r:30,

score:0

};

ball=vs.ball;

ctx.fillStyle="#fff";

ctx.beginPath();//画开始按钮

ctx.fillRect(l,t,w,h);

ctx.closePath();

//ctx.fillStyle='cyan';

//ctx.fill();

ctx.font="40px Verdana";//写信息

ctx.fillStyle="magenta";

var txt="开始";

ctx.fillText(txt,W/2-ctx.measureText(txt).width/2,H/2+15);

canvas.onmousemove = function (e) {//绑定鼠标事件

player.x = e.pageX; // grab mouse pixel coords

player.y = e.pageY;

player.r = 30;

}

canvas.οnclick= function (e){

var x=e.pageX,y=e.pageY;

if(x<=l+w && x>=l && y<=t+h && y>=t) run();

}

}

function createBall(id){

var ball={

id:id,

x:500,//开始坐标

y:40,

r:30,//半径

vx:20,//初始速度

vy:20,

ax:0,//默认加速度

ay:0

// g:10,//重力加速度

// R:1,//阻力

// d:1//1代表下落 ax=g-r，-1代表上升 ax=g+r(因为速度方向变反了，加速即是减速) 现假设x正方向是下落方向,这里假设的是弹性碰撞，而r是空气的阻力

};

var d=Math.random()>0.5 ? -1 : 1;//随即产生球的方向

ball.vx*=(Math.random(3-1)+1)*d;

ball.vy*=(Math.random(3-1)+1)*d;

return ball;

}

function check(){//检测 碰撞

var x=player.x,y=player.y,r=player.r;

var ball=vs.ball,length=ball.length,b;

for(var i=0;i

b=ball[i];

if((b.r+r)*(b.r+r)>=(b.y-y)*(b.y-y)+(b.x-x)*(b.x-x)) {init();return false}//表示输了

}

return true;

}

function drawPlayer(){

var p=player,

txt=p.score,

x=p.x-ctx.measureText(txt).width/2,

y=p.y+p.r/2;

ctx.beginPath();//画玩家的圆

ctx.arc(p.x,p.y,p.r,0,Math.PI*2);

ctx.closePath();

ctx.fillStyle='cyan';

ctx.fill();

ctx.font="40px Verdana";//写信息

ctx.fillStyle="#000";

ctx.fillText(txt,x,y);

}

function drawBall(b){

ctx.beginPath();//画圆

ctx.arc(b.x,b.y,b.r,0,Math.PI*2);

ctx.closePath();

ctx.fillStyle='#fff';

ctx.fill();

ctx.font="40px Verdana";

// 创建渐变

var gradient=ctx.createLinearGradient(0,0,mycanvas.width,0);//在圆上写字

gradient.addColorStop("0","magenta");

gradient.addColorStop("0.5","green");

gradient.addColorStop("1.0","red");

// 用渐变填色

ctx.fillStyle=gradient;

var txt=b.id;

var x=b.x-ctx.measureText(txt).width/2;

var y=b.y+b.r/2;

ctx.fillText(txt,x,y);

}

function run(){

if(vs.num%10==0){ ball.push(createBall(vs.id++)); player.score++;}//每2秒增加一个球,同时加分

vs.num++;

// ctx.fillStyle='rgba(0,0,0,0.2)';//实现轨迹，更新画布

ctx.fillStyle='rgba(0,0,0,1)';

ctx.fillRect(L,T,W,H);

ctx.fill();

// vs.id= vs.id>12 ? 12 : vs.id;//限制动态产生的球个数

drawPlayer();//画玩家的球

for(var i=0;i

// if(ball[i].d==-1 && ball[i].vx>=0) ball[i].d=1;//弹回来后开始下落

// ball[i].ax= ball[i].d==1 ? ball[i].g-ball[i].R : ball[i].g+ball[i].R;

// if(Math.abs(ball[i].vx)<0.5){ball[i].vx=0;return false;}

ball[i].vx+=ball[i].ax;

ball[i].vy+=ball[i].ay;

ball[i].x+=ball[i].vx;

ball[i].y+=ball[i].vy;

if(ball[i].y<=T+ball[i].r){//检测球的碰撞

ball[i].vy*=-1;

// ball[i].vy*=-1*(Math.random()*4-2); //随即改变y速度

// ball[i].y=2*(T+ball[i].r)-ball[i].y;

ball[i].y=ball[i].r;

}else if(ball[i].y>=H-ball[i].r){

ball[i].vy*=-1;

// ball[i].y=2*(H-ball[i].r)-ball[i].y;

ball[i].y=H-ball[i].r;

}else if(ball[i].x<=L+ball[i].r){

// ball[i].vx*=-1*(Math.random()*4-2);

ball[i].vx*=-1;

// ball[i].x=2*(L+ball[i].r)-ball[i].x;

ball[i].x=L+ball[i].r;

}else if(ball[i].x>=W-ball[i].r){

ball[i].vx*=-1;

// ball[i].x=2*(W-ball[i].r)-ball[i].x;

ball[i].x=W-ball[i].r;

ball[i].d=-ball[i].d;//弹回

}else{}

drawBall(ball[i]);

}

if(check()==false) return false;//判断球是否碰到了

requestAnimFrame(run);

}

window.requestAnimFrame = (function(callback){

return function(callback){

window.setTimeout(callback, 100);

};

})();

init();

//run();

//var o={author:"liuze"};

//alert(o.name);

//var k=clone(o);

//k.name="lz";

//alert(o.name);

//添加声音

//球的碰撞效果

//开始结束

//

//那个球之间的碰撞效果还没有完善，希望各位高手给点建议(模拟球之间碰撞后的轨迹)