这篇博客介绍了一个使用HTML5 Canvas实现的简单吃豆子游戏。通过JavaScript绘制了鱼形角色，并实现了上、下、左、右移动以及闭嘴动画效果。玩家可以控制鱼儿吃掉屏幕上的豆子。游戏界面包括绿色渐变的墙和红色鱼眼。
<!--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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
