html5写的射击小游戏

<


script


>


var

cwidth=600

//画布宽



var

cheight=400;

//画布高



var

aimx=300;

//长方体目标物x坐标



var

aimy=100;

//长方体目标物y坐标



var

aimWidth=80;

//长方体目标物的宽



var

aimHeight=200;

//长方体目标物的高



var

groundx=0;

//地面的x坐标



var

groundy=300

//地面的y坐标



var

groundWidth=500;

//地面的宽



var

groundHeight=30;

//地面的高



var

ballx=20;

//小球圆心的x坐标



var

bally=290;

//小球圆心的y坐标



var

ballRadius=10;

//小球的半径



var

horvelocity;

//小球的水平速度



var

verticalvel1;

//小球的竖直方向初速度



var

verticalvel2;

//小球竖直方向末速度



var

addx;

//小球x轴方向的增量



var

addy;

//小球y轴方向的增量



var

gravity=2;

//竖直方向的重力加速度



var

context;


var

everything=[];


var

tid;

//时间监视器



var

shotx=aimx-7;

//被射击小球的x坐标



var

shoty=aimy+ballRadius/2+

Math

.floor(

Math

.random()*aimHeight-ballRadius);

//被射击小球的y坐标



var

score=0;

//记录得分情况



function

CreateBall(bx,by,brad,fillStyle){


this

.bx=bx;


this

.by=by;


this

.brad=brad;


this

.fillStyle=fillStyle;


this

.moveball=moveball;


this

.draw=drawball;

}


function

CreateRect(rx,ry,rw,rh,fillStyle){


this

.rx=rx;


this

.ry=ry;


this

.rw=rw;


this

.rh=rh;


this

.fillStyle=fillStyle;


this

.draw=drawrect;

}


function

drawball(){

context.beginPath();

context.fillStyle=

this

.fillStyle;

context.arc(

this

.bx,

this

.by,

this

.brad,0,

Math

.PI*2,

true

);

context.fill();

}


function

drawrect(){

context.beginPath();

context.fillStyle=

this

.fillStyle;

context.fillRect(

this

.rx,

this

.ry,

this

.rw,

this

.rh);

}


function

moveball(addx,addy){


this

.bx+=addx;


this

.by+=addy;

}


var

ball=

new

CreateBall(ballx,bally,ballRadius,

“rgb(250,0,0)”

);


var

target=

new

CreateRect(aimx,aimy,aimWidth,aimHeight,

“rgb(0,5,90)”

);


var

ground=

new

CreateRect(groundx,groundy,groundWidth,groundHeight,

“rgb(10,250,0)”

);

var

aim=

new

CreateBall(shotx,shoty,ballRadius,

“rgb(30,40,200)”

);

everything.push(ball);

everything.push(target);

everything.push(ground);

everything.push(aim);


function

drawall(){

context.clearRect(0,0,cwidth,cheight);

for(

var

i=0;i<

everything.length;i++)

everything[i].draw();

}


function

init(){


context=document.getElementById(


“canvas”


).getContext(


“2d”


);

drawall();

}


function

fire(){

horvelocity=

Number

(document.getElementById(


“hv”


).value);

verticalvel1=

Number

(document.getElementById(


“vv”


).value);

drawall();

tid=setInterval(change,100);

return


false

;

}


function

distance(x1,y1,x2,y2){



return


Math

.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));

}


function

change(){


addx = horvelocity;

verticalvel2 = verticalvel1 + gravity;

addy = (verticalvel1 + verticalvel2)*.5;

verticalvel1 = verticalvel2;

ball.moveball(addx,addy);


if

(distance(ball.bx,ball.by,aim.bx,aim.by)<

=11){


score++;

document.getElementById(


“score”


).value=score;

aim.by=aimy+ballRadius/2+

Math

.floor(

Math

.random()*aimHeight-ballRadius);

clearInterval(tid);

ball.bx = ballx;

ball.by= bally;

}


else


if

(ball.bx+1

>=target.rx&&ball.by>target.ry){


clearInterval(tid);

ball.bx = ballx;

ball.by= bally;

}


else


if

(ball.by>=ground.ry) {


clearInterval(tid);

ball.bx = ballx;

ball.by= bally;

}

drawall();

}

<

/

script


>

<


body

onLoad=


“init()”

>

<

canvas id=


“canvas”


width=


“600”


height=


“400”

>

Your brower doesn

‘t support canvas.

< /canvas>

< form onSubmit=”return fire();”>

Initial Horizontal Velocity:<input type=”number” id=”hv”  value=”10″   >

Initial Vertical Velocity:<input type=”number” id=”vv” value=”-25″  >

< input type=”submit” value=”fire” >

< p><h2>Geted Scores:<input id=”score” value=””></h2></p>

< /form>

< /body>

< /html>

下面是效果图：