JS 热狗大战
<!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=new Hotdog(hotdog);
if(interval >=10){
interval -=10;
}
number++;
if(parseInt(Math.random() * number)==1){
bs=new B(b);
}
};
function step(){
for(var i = 0; i < hds.length;i++){
hds.step();
}
for(var i = 0; i < bs.length;i++){
bs.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.paint(ctx);
hero.eat(i);
}
for(var i = 0; i<bs.length;i++){
bs.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.x+30>this.x&&hds.x-30<this.x&&
hds.y>=this.y&&hds.y<=this.y+10){
hds.splice(i,1);
score++;
}
}
this.oh=function(i){
if(bs.x+100>this.x&&bs.x-100<this.x&&
bs.y>=this.y&&bs.y<=this.y+20){
bs.splice(i,1);
if(score >= 10){
score-=10;
}else{
score=0;
}
}
}
}
</script>
</body>
</html>
建议楼主直接做成ZIP文件，好试验 哦 这是源代码
页:
[1]