html5 动画Ilove送给他（她）

来源：互联网发布：织梦模板新闻门户编辑：程序博客网时间：2024/04/29 02:47

代码很乱很乱，时间关系也没整理，不是特别好看 - - 见谅~~

<!DOCTYPE html PUBLIC "--//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1--transitional.dtd">
<html xmlns="http;//www.w3.org/1999/xhtml">
<head>
<title>啊干牌弹弹球</title>
<meta http--equiv="Content--Type" content="text/html;charset=gb2312">
<script language = "JavaScript">
<!--
var img = new Image();
img.src = "IMAG0742(2).jpg";
var ballr = 10; //球的半径
var recwidth = 400;
var recheight = 400;
var ballx = 100; //球心的横坐标
var bally = 100; //球心的纵坐标
var ballvx = 50; //水平速度
var ballvy = 0; //垂直速度
var time1;
var check = 0;
var number = 1;
var cons = Math.PI/360;
var times = 0;
function myinit()
{
var context = document.getElementById('mycanvas').getContext('2d');
context.fillStylr = "#123456"
context.arc(ballx,bally,ballr,0,Math.PI*2,true);
context.fill();
time1 = setInterval(moveball,100);
}
function moveball()
{
var context = document.getElementById('mycanvas').getContext('2d');

if(ballx == 150 && bally == 100){ballvx = 0; ballvy =50;ballx = 125;bally = 100;}
if(ballx == 125 && bally == 300 && check == 0){ballvx = 50; ballvy =0;ballx = 100;check = 1;}
if(ballx == 150 && bally == 300 && check ==1){ballx = 200;bally = 100;ballvx = 0 ; ballvy = 50;number=2;}
if(ballx == 200 && bally == 300){ballvx = 50 ; ballvy = 0;};
if(ballx == 300 && bally == 300){number = 3;}
if(times == 720){ballx = 500;bally = 300;ballvx = -20 ; ballvy = -40;times = 0;}
if(ballx == 400 && bally == 100){ballx =500;bally = 300;ballvx = 20;ballvy = -40;}
if(ballx == 600 && bally == 100){bally = 200;ballvx = 50;ballvy=0;}
if(ballx == 700){number =5;}

if(number == 5 )
{
ballx = 650+50*Math.cos(times*cons);
bally = 200+50*Math.sin(times*cons);
times+=10;
if(times == 720){number = 6;context.drawImage(img,800,100,200,200);}
context.fillStyle = "#00CC99";
context.beginPath();
context.arc(ballx,bally,ballr,0,Math.PI*2,false);
context.closePath();
context.fill();
return;
}
if(number == 3)
{
ballx = 350+50*Math.cos(times*cons);
bally = 200+50*Math.sin(times*cons);
times+=10;
if(times == 720)number = 4;
context.fillStyle = "#CC0099";
context.beginPath();
context.arc(ballx,bally,ballr,0,Math.PI*2,false);
context.closePath();
context.fill();
return;
}

ballx = ballx + 0.1*ballvx;
bally = bally + 0.1*ballvy;
if(number == 2)context.fillStyle = "#2233CC";
if(number == 4)context.fillStyle = "#FF33CC";
if(number == 5)context.fillStyle = "#99CCCC";
context.beginPath();
context.arc(ballx,bally,ballr,0,Math.PI*2,true);
context.closePath();
context.fill();
}

//-->
</script>
<body onload = "myinit();">
<canvas id = "mycanvas" name = "mycanvas" width = "1000" height = "500">
</canvas>
</body>
</html>