<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>捕鱼达人</title>
</head>
<body>
<div id="container">
<div id="main" >
<div id="stage" style="margin: 0 auto; width: 800px; height: 480px; text-align: center; vertical-align: middle" >
<canvas id="canvas" width="800" height="480">
不支持画板对象时能看到
</canvas>
</div>
</div>
</div>
<script type="text/javascript">
/*
*/
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var bg = new Image();
bg.src = "images/bg.jpg";
var allFish=[];
var score=0;
var money=5;
var net=new Net();
var p="PAUSE......";
var t;
var A=1;
var O=2;
t=A;
canvas.onclick=function(){
if(t==A){
money-=3;
for(var i=0;i<allFish.length;i++){
switchNetCatch(i);
}
bynetType(score);
}
}
function netCatch(i,n){
if((allFish[i].x>(net.x-50)&&allFish[i].x<(net.x+160))
&&(allFish[i].y>(net.y-48)&&allFish[i].y<(net.y+160))
&&Math.random()<n){
score=score+allFish[i].score;
remove(i);
money+=allFish[i].money;
}
}
function bynetType(score){
if(score>0){
nettype=1;
}else if(score>200){
nettype=2;
}else if(score>400){
nettype=3;
}
}
function switchNetCatch(i){
var n;
if(allFish[i].p<=5){
n=0.7;
netCatch(i,n);
}else if(allFish[i].p<=9){
n=0.5;
netCatch(i,n);
}else if(allFish[i].p==10){
n=0.1;
netCatch(i,n);
}else{
n=0.35;
netCatch(i,n);
}
}
canvas.onmouseout = function() {
if(t==A&&money!=0){
t=3;
};
};
canvas.onmouseover = function() {
if(t==3){
t=A;
};
}
setInterval(function() {
if(t==A){
w();
ctx.drawImage(bg,0,0);
for(var i=0;i<allFish.length;i++){
allFish[i].paint(ctx);
}
fillText(ctx,"red","SCORE:",score,10,20);
fillText(ctx,"red","MONEY:",money,650,20);
for(var i=0;i<allFish.length;i++){
allFish[i].step();
allFish[i].hit(i);
}
fishCount();
net.paint(ctx);
}else if(t==O){
ctx.drawImage(bg,0,0);
for(var i=0;i<allFish.length;i++){
allFish[i].paint(ctx);
}
fillText(ctx,"red","SCORE:",score,10,20);
fillText(ctx,"red","MONEY:",money,650,20);
for(var i=0;i<allFish.length;i++){
allFish[i].step();
}
fishCount();
ctx.font="70px Verdana";
ctx.fillStyle="red";
ctx.fillText("GAME OVER",180,300);
x();
}else{
ctx.drawImage(bg,0,0);
for(var i=0;i<allFish.length;i++){
allFish[i].paint(ctx);allFish[i].hit(i);
}
fillText(ctx,"red","SCORE:",score,10,20);
fillText(ctx,"red","MONEY:",money,650,20);
ctx.font="70px Verdana";
ctx.fillStyle="red";
ctx.fillText(p,180,300);
}
fillText(ctx,"red","FISHCOUNT:",allFish.length,10,40);
}, 10);
function w(){
if(money<1){
t=O;
money=0;
}
}
function remove(i){
allFish.splice(i,1);
}
function isActionTime(lastTime, interval) {
if (lastTime == 0) {
return true;
}
var currentTime = new Date().getTime();
return currentTime - lastTime >= interval;
}
function getPointOnCanvas(x, y) {
var bbox = canvas.getBoundingClientRect();
return {
x : x - bbox.left,
y : y - bbox.top
};
}
canvas.onmousemove = function(e) {
var mpoint = getPointOnCanvas(e.x, e.y);
net.x = mpoint.x - 80;
net.y = mpoint.y - 80;
};
var Time=0;
var interval=800;
function fishCount(){
if(!isActionTime(Time, interval)){
return
}
Time = new Date().getTime();
allFish[allFish.length]=new Fish();
}
function fillText(ctx,color,Text,so,x,y){
ctx.font="20px Verdana";
ctx.fillText(Text+so,x,y);
}
function Fish(){
this.x=800;
this.life=0;
this.y=Math.random()*(480-100);
var randomFish=parseInt(Math.random()*11+1);
this.p=randomFish;
if(randomFish != 11){
this.money=randomFish%11;
this.score=randomFish%11;
}else{
this.money=randomFish-1;
this.score=randomFish-1;
}
var fish=[];
for(var i=0;i<10;i++){
var fishImage=new Image();
fishImage.src="images/fish"+randomFish+"_"+i+".png";
fish[i]=fishImage;
};
this.frame=fish[0];
var interval = 70;
var lastTime = 0;
function timeOut() {
var current = new Date().getTime();
var t = current - lastTime;
if (t >= interval) {
lastTime = current;
return false;
}
return true;
};
var index=0;
this.step=function(){
if(!timeOut()){
this.x=this.x-2;
this.frame=fish[index%10];
index=index+1;
}
}
this.paint=function(ctx){
ctx.drawImage(this.frame,this.x,this.y);
}
this.hit=function(i){
if(this.x<-950){
allFish[i].splice(0,1);
}
}
}
function Net(){
var n=new Image();
n.src="images/net.png";
this.x=0;
this.y=0;
this.paint=function(ctx){
ctx.drawImage(n,this.x,this.y);
}
}
</script>
</body>
</html>
[复制链接]
3258 鱼币
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-3-11 10:34:49
显身卡
发表于 2019-3-15 16:50:38
