JS 热狗大战

chenyiyun · 发表于 2019-3-15 17:08:34

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>热狗大战</title>
</head>

<body>
<div id="stage" style="margin: 0 auto; width: 1000px; height: 600px; text-align: center; vertical-align: middle" >
<canvas id="canvas" style="border:2px solid black;" width="1000" height="600">
不支持画板对象
</canvas>
</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 hotdog = new Image();
hotdog.src = "images/hotdog.png";
//英雄图片
var h = new Image();
h.src = "images/hero.png";
//游戏结束图片
var end = new Image();
end.src = "images/end.jpg";
//计数板图片
var tip = new Image();
tip.src = "images/bullet_tip.png";
//计时板图片
var time = new Image();
time.src = "images/time_tip.png";
//大便图片
var b = new Image();
b.src = "images/大便.png";

var hero=new Hero(450);
var hds=[];
var Time=60;
var score=0;
var bs=[];

window.onload= function(){
         setInterval(function(){
           componentEnter();
           timeUp(Time);
           paint(ctx);
           step();
           },10);

}

function isActionTime(lastTime, interval) {
if (lastTime == 0) {
return true;
}
var currentTime = new Date().getTime();
return currentTime - lastTime >= interval;
}

var lastTime = 0;
var interval = 800;
var number = 4;
function componentEnter() {
if (! isActionTime(lastTime, interval)) {
return;
}
lastTime = new Date().getTime();
hds[hds.length]=new Hotdog(hotdog);
if(interval >=10){
interval -=10;
}
number++;
if(parseInt(Math.random() * number)==1){
bs[bs.length]=new B(b);
}
};

function step(){
for(var i = 0; i < hds.length;i++){
hds[i].step();
}
for(var i = 0; i < bs.length;i++){
bs[i].step();
}
};

function fillText(ctx,color,Text,so,x,y){
ctx.font="30px Verdana";
ctx.fillStyle=color
ctx.fillText(Text+so,x,y);
}

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);
hero.x = mpoint.x - 80/ 2;
}

function paint(ctx){
ctx.drawImage(bg,0 ,0 );
           if(Time>1){
           for(var i = 0; i<hds.length;i++){
         hds[i].paint(ctx);
         hero.eat(i);
            }
            for(var i = 0; i<bs.length;i++){
            bs[i].paint(ctx);
         hero.oh(i);
            }
            hero.paint(ctx);
           ctx.drawImage(time,25,25);
           ctx.drawImage(tip,800,10);
           fillText(ctx,"red","",Time,37,65);
           fillText(ctx,"red","",score,878,63);
           }else{
           ctx.font="40px Verdana";
           ctx.drawImage(end,0,0);
                 ctx.fillText(score,465,432);
           }

}
var lT=0
var i = 1000;
function timeUp(time){
if (!isActionTime(lT, i)) {
return;
};
lT = new Date().getTime();
Time--;
}

function food(img){
this.img=img;
this.x=Math.random()*(800-30);
this.y=-55;
this.paint=function(ctx){
ctx.drawImage(this.img,this.x,this.y);
};
this.step=function(){
this.y+=3;
};
}

function Hotdog(hotdog){
food.call(this,hotdog)
}

function B(b){
food.call(this,b)
}

function Hero(x){
this.x=x;
this.y=450;
this.img=h;
this.paint=function(ctx){
ctx.drawImage(this.img,this.x,this.y);
}
this.move=function(){

}
this.eat=function(i){
if(hds[i].x+30>this.x&&hds[i].x-30<this.x&&
hds[i].y>=this.y&&hds[i].y<=this.y+10){
hds.splice(i,1);
score++;
}
}
this.oh=function(i){
if(bs[i].x+100>this.x&&bs[i].x-100<this.x&&
bs[i].y>=this.y&&bs[i].y<=this.y+20){
bs.splice(i,1);
if(score >= 10){
score-=10;
}else{
score=0;
}

}
}
}
</script>
</body>
</html>

My_A · 发表于 2019-3-16 20:56:15

建议楼主直接做成ZIP文件，好试验

chenyiyun · 发表于 2019-3-16 21:22:49

chenyiyun · 发表于 2019-3-16 21:24:26

JS热狗大战.zip (166.58 KB, 下载次数: 37)

chenyiyun · 发表于 2019-3-16 21:25:04

这是源代码

账号		自动登录	找回密码
密码			立即注册

[作品展示] JS 热狗大战

马上注册，结交更多好友，享用更多功能^_^