弹弓游戏2

来源：互联网发布：淘宝五星好评100字评语编辑：程序博客网时间：2024/05/01 02:15

<html>
<head>
<title>Slingshot pulling back</title>
<script type="text/javascript">
var cwidth=1200;//设置画布宽度，用于清除
var cheight=600;//设置画布高度，用于清除
var ctx;//保存画布上下文的变量
var canvas1;
var everything=[];//这个数组包含所要绘制的对象
var tid;//保存定时事件的标识符
var startrockx=100; //开始位置x
var startrocky=240;
var ballx=startrockx;
var bally=startrocky;
var ballrad=10;
var ballradsq=ballrad*ballrad;
var inmotion=false; //运动状态
var horvelocity;//水平速度
var verticalvel1;//开始时的垂直位移
var verticalvel2;//结束时的垂直位移
var gravity=2;//垂直位移的改变两
var chicken=new Image();
chicken.src="t.jpg";
var feathers=new Image();
feathers.src="r.jpg";

function Sling(bx,by,s1x,s1y,s2x,s2y,s3x,s3y,stylestring){
this.bx=bx;
this.by=by;
this.s1x=s1x;
this.s1y=s1y;
this.s2x=s2x;
this.s2y=s2y;
this.s3x=s3x;
this.s3y=s3y;
this.strokeStyle=stylestring;
this.draw=drawsling;
this.moveit=movesling;
}

function drawsling(){
ctx.strokeStyle=this.strokeStyle;
ctx.lineWidth=4;
ctx.beginPath();
ctx.moveTo(this.bx,this.by);
ctx.lineTo(this.s1x,this.s1y);
ctx.moveTo(this.bx,this.by);
ctx.lineTo(this.s2x,this.s2y);
ctx.moveTo(this.s1x,this.s1y);
ctx.lineTo(this.s2x,this.s2y);
ctx.lineTo(this.s3x,this.s3y);
ctx.stroke();
}

function movesling(dx,dy){
this.bx+=dx;
this.by+=dy;
this.s1x+=dx;
this.s1y+=dy;
this.s2x+=dx;
this.s2y+=dy;
this.s3x+=dx;
this.s3y+=dy;
}

var mysling=new Sling(startrockx,startrocky,startrockx+80,startrocky-10,startrockx+80,startrocky+10,
startrockx+70,startrocky+130,"rgb(120,20,10)"); //弹弓形状

function Ball(sx,sy,rad,stylestring){
this.sx=sx;
this.sy=sy;
this.rad=rad;
this.draw=drawball;
this.moveit=moveball;
this.fillstyle=stylestring;
}

function drawball(){
ctx.fillStyle=this.fillstyle;
ctx.beginPath();
ctx.arc(this.sx,this.sy,this.rad,0,Math.PI*2,true);
ctx.fill();
}

function moveball(dx,dy){
this.sx+=dx;
this.sy+=dy;
}

var cball=new Ball(startrockx,startrocky,ballrad,"rgb(250,0,0)");//创建一个新的Ball对象

function myrectangle(sx,sy,swidth,sheight,stylestring){
this.sx=sx;
this.sy=sy;
this.swidth=swidth;
this.sheight=sheight;
this.fillstyle=stylestring;
this.draw=drawrects;
this.moveit=moveball;
}

function drawrects(){
ctx.fillStyle=this.fillstyle;
ctx.fillRect(this.sx,this.sy,this.swidth,this.sheight);
}

function Picture(sx,sy,swidth,sheight,imga){
this.sx=sx;
this.sy=sy;
this.img=imga;
this.swidth=swidth;
this.sheight=sheight;
this.draw=drawAnImage;
this.moveit=moveball;
}

function drawAnImage(){
ctx.drawImage(this.img,this.sx,this.sy,this.swidth,this.sheight);
}

var target=new Picture(700,210,209,179,chicken);
var ground=new myrectangle(0,370,1200,30,"rgb(10,250,0)");
everything.push(target);
everything.push(ground);
everything.push(mysling);
everything.push(cball);

function init(){
ctx=document.getElementById('canvas').getContext('2d');
canvas1=document.getElementById('canvas');
canvas1.addEventListener('mousedown',findball,false);
canvas1.addEventListener('mousemove',moveit,false);
canvas1.addEventListener('mouseup',finish,false);
drawall();//绘制所有对象
}

function findball(ev){
var mx;//保存鼠标的x变量
var my;//保存鼠标的y变量
if (ev.layerX || ev.layerX==0){
mx=ev.layerX;
my=ev.layerY;
}
else if(ev.offsetX || ev.offsetX==0){
mx=ev.offsetX;
my=ev.offsetY;
}
if(distsq(mx,my,cball.sx,cball.sy)<ballradsq){//如果鼠标位于子弹上
inmotion=true;
drawall();
}
}

function distsq(x1,y1,x2,y2){
return(x1-x2)*(x1-x2)+(y1-y2)*(y1-y2);
}

function moveit(ev){
var mx;
var my;
if(inmotion){
if(ev.layerX || ev.layerX==0){
mx=ev.layerX;
my=ev.layerY;
}
else if(ev.offsetX || ev.offsetX==0){
mx=ev.offsetX;
my=ev.offsetY;
}
cball.sx=mx;
cball.sy=my;
mysling.bx=mx;
mysling.by=my;
drawall();
}
}

function finish(ev){
if(inmotion){
inmotion=false;
var outofcannon=distsq(mysling.bx,mysling.by,mysling.s1x,mysling.s1y)/700;
var angleradians=-Math.atan2(mysling.s1y-mysling.by,mysling.s1x-mysling.bx);
horvelocity=outofcannon*Math.cos(angleradians);
verticalvel1=-outofcannon*Math.sin(angleradians);
drawall();
tid=setInterval(change,100);
}
}

function drawall(){
ctx.clearRect(0,0,cwidth,cheight);
var i;
for(i=0;i<everything.length;i++)
{
everything[i].draw();
}
}

function change(){
var dx=horvelocity;
verticalvel2=verticalvel1+gravity;
var dy=(verticalvel1+verticalvel2)*.5;
cball.moveit(dx,dy);//按计算的量移动
var bx=cball.sx;
var by=cball.sy;
if((bx>=target.sx+40) && (bx<=(target.sx+target.swidth-40)) && (by>=target.sy+40) && (by<=(target.sy+target.sheight-40))){
target.img=feathers; //如果击中目标的中间位置，才变换图片
}
if(by>=ground.sy){
clearInterval(tid);//如果子弹超出地面，停止运动
}
drawall();
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="1200" height="600">
Your Browser doesn't support the HTML5 element canvas.
</canvas>
</body>
</html>

0 0