<!--Authors:
Liu,Xin
Revision history:
Date Author Description
08-21-2012 Liu,Xin Eat Beans
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Eat Beans</title>
</head>
<body>
<div>
Welcome ! <input type="button" value="again" onclick ="drawBeans();"/>
<div>
<div id="log"></div>
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
try{
var bodyX =60;//魚身座標X值
var bodyY = 40;//魚身座標Y值
var bodyRadius = 30;//魚身半徑
var bodyStartAngleRight =1.8;//魚身向右起始弧度
var bodyEndAngleRigth = 0.2 //魚身向右終止弧度。
var bodyStartAngleLeft = 0.8;//魚身向左起始弧度
var bodyEndAngleLeft = 1.2;//魚身向左終止弧度。
var bodyStartAngleDown = 0.3;//魚身向下起始弧度
var bodyEndAngleDown = 0.7;//魚身向下終止弧度
var bodyStartAngleUp = 1.3;
var bodyEndAngleUp = 1.7
var shutUpRigth = true; //正在閉嘴向右
var shutUpLeft = true; //正在閉嘴向左
var shutUpDown = true;//閉嘴向下
var shutUpUp = true;
var isEat = false;
var moveToLeft = true; //正在向左移動，向左或移動時，轉身魚眼的位置是不一樣的
var eyeX = 60;//魚眼座標X
var eyeY =20;//魚眼座標Y
var canvas=document.getElementById("myCanvas");
var context = canvas.getContext('2d');
context.beginPath();
context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleRight,Math.PI*bodyEndAngleRigth,true);
context.lineTo(bodyX,bodyY);
context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleRight,Math.PI*bodyEndAngleRigth,true);
context.fillStyle='#FFCC33';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(eyeX,eyeY);
context.arc(eyeX,eyeY,5,0,Math.PI*2,true);
context.fillStyle='#FF0000';
context.fill();
context.stroke();
context.closePath();
function moveRight(){
moveToLeft =false;
context.beginPath();
context.clearRect(bodyX-bodyRadius-1,bodyY-bodyRadius-1,bodyRadius*2+2, bodyRadius*2+2);
context.save();
if(bodyX <800-bodyRadius-10){
bodyX += 10;
eyeX += 10;
}
if(shutUpRigth){
bodyStartAngleRight += 0.1;
bodyEndAngleRigth -=0.1;
if(bodyStartAngleRight == 2){
shutUpRigth =false;
}
}else{
bodyStartAngleRight -= 0.1;
bodyEndAngleRigth +=0.1;
if(bodyEndAngleRigth == 0.2){
shutUpRigth =true;
}
}
context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleRight,Math.PI*bodyEndAngleRigth,true);
context.lineTo(bodyX,bodyY);
context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleRight,Math.PI*bodyEndAngleRigth,true);
context.fillStyle='#FFCC33';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(eyeX,eyeY);
context.arc(eyeX,eyeY,5,0,Math.PI*2,true);
context.fillStyle='#FF0000';
context.fill();
context.stroke();
context.closePath();
}
function moveLeft(){
moveToLeft = true;
context.beginPath();
context.clearRect(bodyX-bodyRadius-1,bodyY-bodyRadius-1,bodyRadius*2+2, bodyRadius*2+2);
context.save();
if(bodyX >bodyRadius+10){
bodyX -= 10;
eyeX -= 10;
}
if(shutUpLeft){
bodyStartAngleLeft += 0.1;
bodyEndAngleLeft -=0.1;
if(bodyStartAngleLeft == 1){
shutUpLeft =false;
}
}else{
bodyStartAngleLeft -= 0.1;
bodyEndAngleLeft +=0.1;
if(bodyStartAngleLeft == 0.8){
shutUpLeft =true;
}
}
if(bodyStartAngleLeft==1){
context.arc(bodyX,bodyY,bodyRadius,Math.PI*0,Math.PI*2,true);
context.moveTo(bodyX,bodyY);
context.lineTo(bodyX-bodyRadius,bodyY);
}else{
context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleLeft,Math.PI*bodyEndAngleLeft,true);
context.lineTo(bodyX,bodyY);
context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleLeft,Math.PI*bodyEndAngleLeft,true);
}
context.fillStyle='#FFCC33';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(eyeX,eyeY);
context.arc(eyeX,eyeY,5,0,Math.PI*2,true);
context.fillStyle='#FF0000';
context.fill();
context.stroke();
context.closePath();
}
function moveDown(){
context.beginPath();
context.clearRect(bodyX-bodyRadius-1,bodyY-bodyRadius-1,bodyRadius*2+2, bodyRadius*2+2);
context.save();
if(bodyY<600-bodyRadius-10){
bodyY += 10;
eyeY += 10;
}
if(shutUpDown){
bodyStartAngleDown += 0.1;
bodyEndAngleDown -=0.1;
if(bodyStartAngleDown == 0.5){
shutUpDown =false;
}
}else{
bodyStartAngleDown -= 0.1;
bodyEndAngleDown +=0.1;
if(bodyEndAngleDown == 0.7){
shutUpDown =true;
}
}
if(bodyStartAngleDown==0.5){
context.arc(bodyX,bodyY,bodyRadius,Math.PI*0,Math.PI*2,true);
context.moveTo(bodyX,bodyY);
context.lineTo(bodyX,bodyY+bodyRadius);
}else{
context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleDown,Math.PI*bodyEndAngleDown,true);
context.lineTo(bodyX,bodyY);
context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleDown,Math.PI*bodyEndAngleDown,true);
}
context.fillStyle='#FFCC33';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
if(moveToLeft){
context.moveTo(eyeX-20,eyeY+20);
context.arc(eyeX-20,eyeY+20,5,0,Math.PI*2,true);
}else{
context.moveTo(eyeX+20,eyeY+20);
context.arc(eyeX+20,eyeY+20,5,0,Math.PI*2,true);
}
context.fillStyle='#FF0000';
context.fill();
context.stroke();
context.closePath();
}
function moveUp(){
context.beginPath();
context.clearRect(bodyX-bodyRadius-1,bodyY-bodyRadius-1,bodyRadius*2+2, bodyRadius*2+2);
context.save();
if(bodyY>bodyRadius+10){
bodyY -= 10;
eyeY -= 10;
}
if(shutUpUp){
bodyStartAngleUp += 0.1;
bodyEndAngleUp -=0.1;
if(bodyStartAngleUp.toFixed(1) == 1.5){
shutUpUp =false;
}
}else{
bodyStartAngleUp -= 0.1;
bodyEndAngleUp +=0.1;
if(bodyStartAngleUp.toFixed(1) == 1.3){
shutUpUp =true;
}
}
if(bodyStartAngleUp.toFixed(1)==1.5){
context.arc(bodyX,bodyY,bodyRadius,Math.PI*0,Math.PI*2,true);
context.moveTo(bodyX,bodyY);
context.lineTo(bodyX,bodyY-bodyRadius);
}else{
context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleUp,Math.PI*bodyEndAngleUp,true);
context.lineTo(bodyX,bodyY);
context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleUp,Math.PI*bodyEndAngleUp,true);
}
context.fillStyle='#FFCC33';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
if(moveToLeft){
context.moveTo(eyeX-20,eyeY+20);
context.arc(eyeX-20,eyeY+20,5,0,Math.PI*2,true);
}else{
context.moveTo(eyeX+20,eyeY+20);
context.arc(eyeX+20,eyeY+20,5,0,Math.PI*2,true);
}
context.fillStyle='#FF0000';
context.fill();
context.stroke();
context.closePath();
}
function setMove(){
document.onkeydown = keyDown;
}
function keyDown(e){
key = e.which;
if (key == 38 || key == 87){
//up
moveUp();
}
if (key == 40 || key == 83){
//down
moveDown();
}
if (key == 37 || key == 65){
//left
moveLeft();
}
if (key == 39 || key == 68){
//right
moveRight();
}
}
setMove();
function drawWall(){
context.beginPath();
var grd=context.createLinearGradient(0,0,800,9);
grd.addColorStop(0,"#663300");
grd.addColorStop(1,"#99FF00");
context.fillStyle=grd;
context.fillRect(0,0,800,9);
var grd2=context.createLinearGradient(0,0,9,600);
grd2.addColorStop(0,"#99FF00");
grd2.addColorStop(1,"#663300");
context.fillStyle=grd2;
context.fillRect(0,0,9,600);
var grd3=context.createLinearGradient(0,591,800,600);
grd3.addColorStop(0,"#99FF00");
grd3.addColorStop(1,"#663300");
context.fillStyle=grd3;
context.fillRect(0,591,800,600);
var grd4=context.createLinearGradient(791,0,800,600);
grd4.addColorStop(0,"#663300");
grd4.addColorStop(1,"#99FF00");
context.fillStyle=grd4;
context.fillRect(791,0,800,600);
context.stroke();
context.closePath();
}
function drawBeans(){
context.beginPath();
context.arc(400,300,10,Math.PI*0,Math.PI*2,true);
context.fillStyle='#009933';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(200,150,10,Math.PI*0,Math.PI*2,true);
context.fillStyle='#009933';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(460,380,10,Math.PI*0,Math.PI*2,true);
context.fillStyle='#009933';
context.fill();
context.stroke();
context.closePath();
}
drawBeans();
drawWall();
} catch(e){
console.log(e.message);
}
</script>
</body>
</html>