本人初学前端技术，在HTML5的背景下，逐渐感受到前端技术的越来越强大与完善。web开发者已经不再是简简单单的制作网页name简单了。
近日看见网络上许多H5小游戏，非常感兴趣，于是临时抱佛脚，学习了有关canvas的知识，制作了一个小游戏。
大家保存图片，复制代码就可以用了。
<!DOCTYPE html>
<html>
<head>
<title>飞机</title>
<meta charset="utf-8">
</head>
<style type="text/css">
*{
margin:0;
padding:0;
}
body,html{
width:100%;
height:100%;
}
#canvas{
position: absolute;
top:0;
left:0;
background-image: url(./img/bg.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>
<body>
<canvas id="canvas">您的浏览器不支持canvas！！！</canvas>
<script type="text/javascript" src="./libs/background.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var mainImg = new Image();
var shellImg = new Image();
var monster1Img = new Image();
var boomImg = new Image();
var gameover = new Image();
var lifeborderImg = new Image();
var lifeImg = new Image();
var logoImg = new Image();
var addLifeImg = new Image();
var windowWidth = document.body.clientWidth;
var windowHeight = document.body.clientHeight;
var ctx = canvas.getContext("2d");
var fen = 0;
var monsterNumber = 1;
var Boom = false;
var monsterspeed = 1;
var run = false;
var def = 0;
var readyShow = true;
var shellsizeX=20;
var shellsizeY=50;
var random = 0;
var randomadd = 0;
mainImg.src = "./img/main.png";
shellImg.src = "./img/shell.png";
monster1Img.src = "./img/monster.png";
boomImg.src = "./img/boom.png";
gameover.src = "./img/over.png";
lifeborderImg.src = "./img/lifeborder.png";
lifeImg.src = "./img/life.png";
logoImg.src = "./img/LOGO.png";
addLifeImg.src = "./img/addlife.png";
if("ontouchstart" in window){
startEvt = "touchstart";
moveEvt = "touchmove";
endEvt = "touchend";
}else{
startEvt = "mousedown";
moveEvt = "mousemove";
endEvt = "mouseup";
}
document.body.addEventListener('touchmove', function (e) {
e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false});
var mouse={
x:0,
y:0
}
canvas.addEventListener(moveEvt,(evt)=>{
console.log(evt);
mouse.x = evt.x;
mouse.y = evt.y;
if(evt.type == "touchmove"){
mouse.x = evt.touches[0].clientX;
mouse.y = evt.touches[0].clientY;
}else{
mouse.x = evt.x;
mouse.y = evt.y;
}
if(game.main.show == true){
game.main.x = mouse.x;
game.main.y = mouse.y;
}
})
var ready = {
x:0,
y:0,
sizeX:windowWidth*0.25,
sizeY:windowWidth*0.3,
show:true,
draw:function(){
this.x = windowWidth*0.375;
this.y = windowHeight-windowWidth*0.3;
this.y = this.y*0.5;
ctx.drawImage(logoImg,this.x,this.y,this.sizeX,this.sizeY);
ctx.font = 'bold '+windowWidth*0.011+'px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.setFillStyle = '#fff';
ctx.strokeText("点击任意位置开始游戏", windowWidth*0.5, windowHeight*0.2);
// ctx.fillText("点击任意位置开始", windowWidth*0.5, windowHeight*0.85);
canvas.addEventListener("mousedown",gamestart.bind(this));
function gamestart(){
if(run == false&&GAMEOVER.show == false){
run = true;
this.show = false;
game.main.show = true;
}
}
}
}
var GAMEOVER = {
x:0,
y:0,
show:false,
sizeX:windowWidth,
sizeY:windowHeight,
draw:function(){
ctx.drawImage(gameover,this.x,this.y,this.sizeX,this.sizeY);
ctx.font = 'bold '+windowWidth*0.1+'px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = '#f33';
ctx.strokeText("GAME OVER", windowWidth*0.5, windowHeight*0.5);
ctx.fillText("GAME OVER", windowWidth*0.5, windowHeight*0.5);
}
}
var addFen = {
x:0,
y:0,
sx:180,
sy:160,
sx1:0,
sy1:160,
draw:function(){
if(Boom){
this.sx1+=4;
}
if(this.sx1>=10&&this.sx1<200){
ctx.drawImage(boomImg,10,600,180,160,this.x,this.y,50,50);
}else if(this.sx1>=200&&this.sx1<400){
ctx.drawImage(boomImg,200,600,180,160,this.x,this.y,50,50);
}else if(this.sx1>=400&&this.sx1<600){
ctx.drawImage(boomImg,400,650,180,160,this.x,this.y,50,50);
}else if(this.sx1>=600&&this.sx1<805){
ctx.drawImage(boomImg,400,700,180,160,this.x,this.y,50,50);
}else if(this.sx1>=805){
Boom = false;
this.sx1=0;
return
};
}
}
var game = {
main:{
x:1/2*windowWidth,
y:1/2*windowHeight,
sizeX:50,
sizeY:50,
life:100,
nowlife:1,
draw:function(){
this.nowlife = this.life/100;
ctx.drawImage(mainImg,this.x-1/2*this.sizeX,this.y-1/2*this.sizeY,this.sizeX,this.sizeY);//主角飞机视图
ctx.drawImage(lifeborderImg,windowWidth-0.3*windowWidth,0.02*windowHeight,0.14*windowWidth,windowHeight*0.035);//血条框视图
ctx.drawImage(lifeImg,0,0,207*this.nowlife,42,windowWidth-0.3*windowWidth,0.02*windowHeight,0.14*windowWidth*this.nowlife,windowHeight*0.035);//血条视图
ctx.font = 'bold '+windowWidth*0.1+'px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = '#f33';
ctx.strokeText(monsterNumber, windowWidth*0.5, windowHeight*0.5);
ctx.fillText(monsterNumber, windowWidth*0.5, windowHeight*0.5);
}
},
shell1:{
x:0,
y:0,
sizeX:shellsizeX,
sizeY:shellsizeY,
speed:-4,
show:true,
HZ:0,
time:true,
draw:function(){
ctx.drawImage(shellImg,this.x,this.y,this.sizeX,this.sizeY);
},
move:function(){
this.y = this.y+this.speed;
if(this.y<=1){
game.shell1.HZ = 0;
this.show = false;
this.time = true;
this.x = this.x = game.main.x - 1/4*this.sizeX;
this.y = game.main.y - 3/2*game.main.sizeY;
return
}
}
},
shell2:{
x:0,
y:0,
sizeX:shellsizeX,
sizeY:shellsizeY,
speed:-4,
show:true,
HZ:0,
time:true,
draw:function(){
ctx.drawImage(shellImg,this.x,this.y,this.sizeX,this.sizeY);
},
move:function(){
this.y = this.y+this.speed;
if(this.y<=1){
game.shell1.HZ = 0;
this.show = false;
this.time = true;
this.x = this.x = game.main.x - 1/4*this.sizeX;
this.y = game.main.y - 3/2*game.main.sizeY;
return
}
}
},
shell3:{
x:0,
y:0,
sizeX:shellsizeX,
sizeY:shellsizeY,
speed:-5,
show:true,
HZ:0,
time:true,
draw:function(){
ctx.drawImage(shellImg,this.x,this.y,this.sizeX,this.sizeY);
},
move:function(){
this.y = this.y+this.speed;
if(this.y<=1){
game.shell1.HZ = 0;
this.show = false;
this.time = true;
this.x = this.x = game.main.x - 1/4*this.sizeX;
this.y = game.main.y - 3/2*game.main.sizeY;
return
}
}
},
monster1:{//怪物1开始
x:-100,
y:-50,
sizeX:45,
sizeY:45,
speed:10,
Random:1,
speedX:0.5,
speedY:0.5,
draw:function(){
if(this.y>windowHeight-50){
this.speedY = Math.random()*monsterspeed;
this.speedY = 0-this.speedY;
}else if(this.y<=0){
this.speedY = Math.random()*monsterspeed;
this.speedY = Math.abs(this.speedY);
}
if(this.x<=0){
this.speedX = Math.random()*monsterspeed;
this.speedX = Math.abs(this.speedX);
}else if(this.x>windowWidth-50){
this.speedX = Math.random()*monsterspeed;
this.speedX = 0-this.speedX;
}
this.x+=this.speedX;
this.y+=this.speedY;
ctx.drawImage(monster1Img,this.x,this.y,this.sizeX,this.sizeY);
},
boom:function(){//怪物1撞击检测
var nearMX = this.x - game.main.x;
var nearMY = this.y + this.sizeY - game.main.y;
nearMX = Math.abs(nearMX);
nearMY = Math.abs(nearMY);
//monster1与主角碰撞检测数据
var nearshell1X = this.x - game.shell1.x;
var nearshell1Y = this.y +this.sizeY - game.shell1.y;
nearshell1X = Math.abs(nearshell1X);
nearshell1Y = Math.abs(nearshell1Y);
//monster1与子弹一击中检测数据
var nearshell2X = this.x - game.shell2.x;
var nearshell2Y = this.y +this.sizeY - game.shell2.y;
nearshell2X = Math.abs(nearshell2X);
nearshell2Y = Math.abs(nearshell2Y);
//monster1与子弹二碰撞数据
var nearshell3X = this.x - game.shell3.x;
var nearshell3Y = this.y +this.sizeY - game.shell3.y;
nearshell3X = Math.abs(nearshell3X);
nearshell3Y = Math.abs(nearshell3Y);
//monster1与子弹三碰撞数据
if(nearMX<=50&&nearMY<=50&&game.main.show == true){//monster1与玩家撞上检测
game.main.life-=1;//玩家生命之减少速率为1
if(game.main.life<=0){
run=false;
GAMEOVER.show = true;
}
}
if(nearshell1X<=50&&nearshell1Y<=4){//monster1与子弹一撞上检测开始
game.shell1.HZ = 0;
game.shell1.show = false;
game.shell1.time = true;
this.y = -50;
this.speedX = 0-this.speedX;
setTimeout(function(){
game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;//子弹重定位
game.shell1.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
monsterNumber+=1;//分数加一
Boom = true;
var a = game.shell1.x;
var b = game.shell1.y;
addFen.x = a;
addFen.y = b-50;
}//与子弹一撞上检测结束
if(nearshell2X<=50&&nearshell2Y<=4){//monster1与子弹二撞上检测开始
game.shell2.HZ = 0;
game.shell2.show = false;
game.shell2.time = true;
this.y = -50;
this.speedX = 0-this.speedX;
setTimeout(function(){
game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;//子弹重定位
game.shell2.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
monsterNumber+=1;//分数加一
Boom = true;
var a = game.shell2.x;
var b = game.shell2.y;
addFen.x = a;
addFen.y = b-50;
}//与子弹二撞上检测结束
if(nearshell3X<=50&&nearshell3Y<=4){//monster1与子弹三撞上检测开始
game.shell3.HZ = 0;
game.shell3.show = false;
game.shell3.time = true;
this.y = -50;
this.speedX = 0-this.speedX;
setTimeout(function(){
game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;//子弹重定位
game.shell3.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
monsterNumber+=1;//分数加一
Boom = true;
var a = game.shell3.x;
var b = game.shell3.y;
addFen.x = a;
addFen.y = b-50;
}//与子弹三撞上检测结束
}
},
monster2:{
x:windowWidth,
y:-50,
sizeX:45,
sizeY:45,
speed:10,
Random:1,
speedX:0.5,
speedY:0.5,
life:2,
draw:function(){
if(this.y>windowHeight-50){
this.speedY = Math.random()*monsterspeed;
this.speedY = 0-this.speedY;
}else if(this.y<=0){
this.speedY = Math.random()*monsterspeed;
this.speedY = Math.abs(this.speedY);
}
if(this.x<=0){
this.speedX = Math.random()*monsterspeed;
this.speedX = Math.abs(this.speedX);
}else if(this.x>windowWidth-50){
this.speedX = Math.random()*monsterspeed;
this.speedX = 0-this.speedX;
}
this.x+=this.speedX;
this.y+=this.speedY;
ctx.drawImage(monster1Img,this.x,this.y,this.sizeX,this.sizeY);
},
boom:function(){//怪物2撞击检测
var nearMX = this.x - game.main.x;
var nearMY = this.y + this.sizeY - game.main.y;
nearMX = Math.abs(nearMX);
nearMY = Math.abs(nearMY);
//主角碰撞数据
var nearshell1X = this.x - game.shell1.x;
var nearshell1Y = this.y +this.sizeY - game.shell1.y;
nearshell1X = Math.abs(nearshell1X);
nearshell1Y = Math.abs(nearshell1Y);
//子弹一碰撞数据
var nearshell2X = this.x - game.shell2.x;
var nearshell2Y = this.y +this.sizeY - game.shell2.y;
nearshell2X = Math.abs(nearshell2X);
nearshell2Y = Math.abs(nearshell2Y);
//子弹二碰撞数据
var nearshell3X = this.x - game.shell3.x;
var nearshell3Y = this.y +this.sizeY - game.shell3.y;
nearshell3X = Math.abs(nearshell3X);
nearshell3Y = Math.abs(nearshell3Y);
//子弹三碰撞数据
if(nearMX<=50&&nearMY<=50&&game.main.show == true){//monster2与玩家撞上检测
game.main.life-=1;//玩家生命之减少速率为1
if(game.main.life<=0){
run=false;
GAMEOVER.show = true;
}
}
if(nearshell1X<=50&&nearshell1Y<=4){//monster2与子弹一撞上检测开始
game.shell1.HZ = 0;
game.shell1.show = false;
game.shell1.time = true;
this.life = this.life-1;//怪物减血速率1
if(this.life<=0){//当血量小于零以后进行的操作
this.y = -50;
this.speedX = 0-this.speedX;
monsterNumber+=1;//分数加一
this.life = 3;
}
setTimeout(function(){
game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;//子弹重定位
game.shell1.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
Boom = true;
var a = game.shell1.x;
var b = game.shell1.y;
addFen.x = a;
addFen.y = b-50;
return
}//与子弹一撞上检测结束
if(nearshell2X<=50&&nearshell2Y<=4){//monster1与子弹二撞上检测开始
game.shell2.HZ = 0;
game.shell2.show = false;
game.shell2.time = true;
this.life = this.life-1;//怪物减血速率1
if(this.life<=0){//当血量小于零以后进行的操作
this.y = -50;
this.speedX = 0-this.speedX;
monsterNumber+=1;//分数加一
this.life = 3;
}
setTimeout(function(){
game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;//子弹重定位
game.shell2.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
Boom = true;
var a = game.shell2.x;
var b = game.shell2.y;
addFen.x = a;
addFen.y = b-50;
}//与子弹二撞上检测结束
if(nearshell3X<=50&&nearshell3Y<=4&&game.main.show == true){//monster1与子弹三撞上检测开始
game.shell3.HZ = 0;
game.shell3.show = false;
game.shell3.time = true;
this.life = this.life-1;//怪物减血速率1
if(this.life<=0){//当血量小于零以后进行的操作
this.y = -50;
this.speedX = 0-this.speedX;
monsterNumber+=1;//分数加一
this.life = 3;
}
setTimeout(function(){
game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;//子弹重定位
game.shell3.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
Boom = true;
var a = game.shell3.x;
var b = game.shell3.y;
addFen.x = a;
addFen.y = b-50;
}//与子弹三撞上检测结束
}
},
monster3:{//怪物3开始
x:windowWidth*0.5,
y:-50,
sizeX:45,
sizeY:45,
speed:10,
Random:1,
speedX:0.5,
speedY:0.5,
draw:function(){
if(this.y>windowHeight-50){
this.speedY = Math.random()*monsterspeed;
this.speedY = 0-this.speedY;
}else if(this.y<=0){
this.speedY = Math.random()*monsterspeed;
this.speedY = Math.abs(this.speedY);
}
if(this.x<=0){
this.speedX = Math.random()*monsterspeed;
this.speedX = Math.abs(this.speedX);
}else if(this.x>windowWidth-50){
this.speedX = Math.random()*monsterspeed;
this.speedX = 0-this.speedX;
}
this.x+=this.speedX;
this.y+=this.speedY;
ctx.drawImage(monster1Img,this.x,this.y,this.sizeX,this.sizeY);
},
boom:function(){//怪物3撞击检测
var nearMX = this.x - game.main.x;
var nearMY = this.y + this.sizeY - game.main.y;
nearMX = Math.abs(nearMX);
nearMY = Math.abs(nearMY);
//monster3与主角碰撞检测数据
var nearshell1X = this.x - game.shell1.x;
var nearshell1Y = this.y +this.sizeY - game.shell1.y;
nearshell1X = Math.abs(nearshell1X);
nearshell1Y = Math.abs(nearshell1Y);
//monster3与子弹一击中检测数据
var nearshell2X = this.x - game.shell2.x;
var nearshell2Y = this.y +this.sizeY - game.shell2.y;
nearshell2X = Math.abs(nearshell2X);
nearshell2Y = Math.abs(nearshell2Y);
//monster3与子弹二碰撞数据
var nearshell3X = this.x - game.shell3.x;
var nearshell3Y = this.y +this.sizeY - game.shell3.y;
nearshell3X = Math.abs(nearshell3X);
nearshell3Y = Math.abs(nearshell3Y);
//monster3与子弹三碰撞数据
if(nearMX<=50&&nearMY<=50){//monster3与玩家撞上检测
game.main.life-=1;//玩家生命之减少速率为1
if(game.main.life<=0){
run=false;
GAMEOVER.show = true;
}
}
if(nearshell1X<=50&&nearshell1Y<=4){//monster3与子弹一撞上检测开始
game.shell1.HZ = 0;
game.shell1.show = false;
game.shell1.time = true;
this.y = -50;
this.speedX = 0-this.speedX;
setTimeout(function(){
game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;//子弹重定位
game.shell1.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
monsterNumber+=1;//分数加一
Boom = true;
var a = game.shell1.x;
var b = game.shell1.y;
addFen.x = a;
addFen.y = b-50;
}//与子弹一撞上检测结束
if(nearshell2X<=50&&nearshell2Y<=4){//monster3与子弹二撞上检测开始
game.shell2.HZ = 0;
game.shell2.show = false;
game.shell2.time = true;
this.y = -50;
this.speedX = 0-this.speedX;
setTimeout(function(){
game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;//子弹重定位
game.shell2.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
monsterNumber+=1;//分数加一
Boom = true;
var a = game.shell2.x;
var b = game.shell2.y;
addFen.x = a;
addFen.y = b-50;
}//与子弹二撞上检测结束
if(nearshell3X<=50&&nearshell3Y<=4){//monster3与子弹三撞上检测开始
game.shell3.HZ = 0;
game.shell3.show = false;
game.shell3.time = true;
this.y = -50;
this.speedX = 0-this.speedX;
setTimeout(function(){
game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;//子弹重定位
game.shell3.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
monsterNumber+=1;//分数加一
Boom = true;
var a = game.shell3.x;
var b = game.shell3.y;
addFen.x = a;
addFen.y = b-50;
}//与子弹三撞上检测结束
}
},
monster4:{//monster4开始
x:windowWidth,
y:-50,
sizeX:45,
sizeY:45,
speed:10,
Random:1,
speedX:0.7,
speedY:0.7,
life:5.5,
draw:function(){
if(this.y>windowHeight-50){
this.speedY = Math.random()*monsterspeed;
this.speedY = 0-this.speedY;
}else if(this.y<=0){
this.speedY = Math.random()*monsterspeed;
this.speedY = Math.abs(this.speedY);
}
if(this.x<=0){
this.speedX = Math.random()*monsterspeed;
this.speedX = Math.abs(this.speedX);
}else if(this.x>windowWidth-50){
this.speedX = Math.random()*monsterspeed;
this.speedX = 0-this.speedX;
}
this.x+=this.speedX;
this.y+=this.speedY;
ctx.drawImage(monster1Img,this.x,this.y,this.sizeX*2,this.sizeY*2);
},
boom:function(){//怪物2撞击检测
var nearMX = this.x - game.main.x;
var nearMY = this.y + this.sizeY - game.main.y;
nearMX = Math.abs(nearMX);
nearMY = Math.abs(nearMY);
//主角碰撞数据
var nearshell1X = this.x - game.shell1.x;
var nearshell1Y = this.y +this.sizeY - game.shell1.y;
nearshell1X = Math.abs(nearshell1X);
nearshell1Y = Math.abs(nearshell1Y);
//子弹一碰撞数据
var nearshell2X = this.x - game.shell2.x;
var nearshell2Y = this.y +this.sizeY - game.shell2.y;
nearshell2X = Math.abs(nearshell2X);
nearshell2Y = Math.abs(nearshell2Y);
//子弹二碰撞数据
var nearshell3X = this.x - game.shell3.x;
var nearshell3Y = this.y +this.sizeY - game.shell3.y;
nearshell3X = Math.abs(nearshell3X);
nearshell3Y = Math.abs(nearshell3Y);
//子弹三碰撞数据
if(nearMX<=50&&nearMY<=50&&game.main.show == true){//monster2与玩家撞上检测
game.main.life-=1.5;//玩家生命之减少速率为1
if(game.main.life<=0){
run=false;
GAMEOVER.show = true;
}
}
if(nearshell1X<=50&&nearshell1Y<=4){//monster2与子弹一撞上检测开始
game.shell1.HZ = 0;
game.shell1.show = false;
game.shell1.time = true;
this.life = this.life-1;//怪物减血速率1
if(this.life<=0){//当血量小于零以后进行的操作
this.y = -50;
this.speedX = 0-this.speedX;
monsterNumber+=1;//分数加一
this.life = 3;
}
setTimeout(function(){
game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;//子弹重定位
game.shell1.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
Boom = true;
var a = game.shell1.x;
var b = game.shell1.y;
addFen.x = a;
addFen.y = b-50;
return
}//与子弹一撞上检测结束
if(nearshell2X<=50&&nearshell2Y<=4){//monster1与子弹二撞上检测开始
game.shell2.HZ = 0;
game.shell2.show = false;
game.shell2.time = true;
this.life = this.life-1;//怪物减血速率1
if(this.life<=0){//当血量小于零以后进行的操作
this.y = -50;
this.speedX = 0-this.speedX;
monsterNumber+=1;//分数加一
this.life = 3;
}
setTimeout(function(){
game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;//子弹重定位
game.shell2.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
Boom = true;
var a = game.shell2.x;
var b = game.shell2.y;
addFen.x = a;
addFen.y = b-50;
}//与子弹二撞上检测结束
if(nearshell3X<=50&&nearshell3Y<=4&&game.main.show == true){//monster1与子弹三撞上检测开始
game.shell3.HZ = 0;
game.shell3.show = false;
game.shell3.time = true;
this.life = this.life-1;//怪物减血速率1
if(this.life<=0){//当血量小于零以后进行的操作
this.y = -50;
this.speedX = 0-this.speedX;
monsterNumber+=1;//分数加一
this.life = 3;
}
setTimeout(function(){
game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;//子弹重定位
game.shell3.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
Boom = true;
var a = game.shell3.x;
var b = game.shell3.y;
addFen.x = a;
addFen.y = b-50;
}//与子弹三撞上检测结束
}
},//monster5
monster5:{
x:windowWidth*Math.random(),
y:-50,
sizeX:45,
sizeY:45,
speed:10,
Random:1,
speedX:0.6,
speedY:0.6,
life:2,
draw:function(){
if(this.y>windowHeight-50){
this.speedY = Math.random()*monsterspeed;
this.speedY = 0-this.speedY;
}else if(this.y<=0){
this.speedY = Math.random()*monsterspeed;
this.speedY = Math.abs(this.speedY);
}
if(this.x<=0){
this.speedX = Math.random()*monsterspeed;
this.speedX = Math.abs(this.speedX);
}else if(this.x>windowWidth-50){
this.speedX = Math.random()*monsterspeed;
this.speedX = 0-this.speedX;
}
this.x+=this.speedX;
this.y+=this.speedY;
ctx.drawImage(monster1Img,this.x,this.y,this.sizeX*0.7,this.sizeY*0.7);
},
boom:function(){//怪物2撞击检测
var nearMX = this.x - game.main.x;
var nearMY = this.y + this.sizeY - game.main.y;
nearMX = Math.abs(nearMX);
nearMY = Math.abs(nearMY);
//主角碰撞数据
var nearshell1X = this.x - game.shell1.x;
var nearshell1Y = this.y +this.sizeY - game.shell1.y;
nearshell1X = Math.abs(nearshell1X);
nearshell1Y = Math.abs(nearshell1Y);
//子弹一碰撞数据
var nearshell2X = this.x - game.shell2.x;
var nearshell2Y = this.y +this.sizeY - game.shell2.y;
nearshell2X = Math.abs(nearshell2X);
nearshell2Y = Math.abs(nearshell2Y);
//子弹二碰撞数据
var nearshell3X = this.x - game.shell3.x;
var nearshell3Y = this.y +this.sizeY - game.shell3.y;
nearshell3X = Math.abs(nearshell3X);
nearshell3Y = Math.abs(nearshell3Y);
//子弹三碰撞数据
if(nearMX<=50&&nearMY<=50&&game.main.show == true){//monster2与玩家撞上检测
game.main.life-=1;//玩家生命之减少速率为1
if(game.main.life<=0){
run=false;
GAMEOVER.show = true;
}
}
if(nearshell1X<=50&&nearshell1Y<=4){//monster2与子弹一撞上检测开始
game.shell1.HZ = 0;
game.shell1.show = false;
game.shell1.time = true;
this.life = this.life-1;//怪物减血速率1
if(this.life<=0){//当血量小于零以后进行的操作
this.y = -50;
this.speedX = 0-this.speedX;
monsterNumber+=1;//分数加一
this.life = 3;
}
setTimeout(function(){
game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;//子弹重定位
game.shell1.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
Boom = true;
var a = game.shell1.x;
var b = game.shell1.y;
addFen.x = a;
addFen.y = b-50;
return
}//与子弹一撞上检测结束
if(nearshell2X<=50&&nearshell2Y<=4){//monster1与子弹二撞上检测开始
game.shell2.HZ = 0;
game.shell2.show = false;
game.shell2.time = true;
this.life = this.life-1;//怪物减血速率1
if(this.life<=0){//当血量小于零以后进行的操作
this.y = -50;
this.speedX = 0-this.speedX;
monsterNumber+=1;//分数加一
this.life = 3;
}
setTimeout(function(){
game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;//子弹重定位
game.shell2.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
Boom = true;
var a = game.shell2.x;
var b = game.shell2.y;
addFen.x = a;
addFen.y = b-50;
}//与子弹二撞上检测结束
if(nearshell3X<=50&&nearshell3Y<=4&&game.main.show == true){//monster1与子弹三撞上检测开始
game.shell3.HZ = 0;
game.shell3.show = false;
game.shell3.time = true;
this.life = this.life-1;//怪物减血速率1
if(this.life<=0){//当血量小于零以后进行的操作
this.y = -50;
this.speedX = 0-this.speedX;
monsterNumber+=1;//分数加一
this.life = 3;
}
setTimeout(function(){
game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;//子弹重定位
game.shell3.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
Boom = true;
var a = game.shell3.x;
var b = game.shell3.y;
addFen.x = a;
addFen.y = b-50;
}//与子弹三撞上检测结束
}
},
//monster6
monster6:{
x:windowWidth*0.5*Math.random(),
y:-50,
sizeX:45,
sizeY:45,
speed:10,
Random:1,
speedX:0.6,
speedY:0.6,
life:10,
draw:function(){
if(this.y>windowHeight-50){
this.speedY = Math.random()*monsterspeed;
this.speedY = 0-this.speedY;
}else if(this.y<=0){
this.speedY = Math.random()*monsterspeed;
this.speedY = Math.abs(this.speedY);
}
if(this.x<=0){
this.speedX = Math.random()*monsterspeed;
this.speedX = Math.abs(this.speedX);
}else if(this.x>windowWidth-50){
this.speedX = Math.random()*monsterspeed;
this.speedX = 0-this.speedX;
}
this.x+=this.speedX;
this.y+=this.speedY;
ctx.drawImage(monster1Img,this.x,this.y,this.sizeX*2.3,this.sizeY*2.3);
},
boom:function(){//怪物2撞击检测
var nearMX = this.x - game.main.x;
var nearMY = this.y + this.sizeY - game.main.y;
nearMX = Math.abs(nearMX);
nearMY = Math.abs(nearMY);
//主角碰撞数据
var nearshell1X = this.x - game.shell1.x;
var nearshell1Y = this.y +this.sizeY - game.shell1.y;
nearshell1X = Math.abs(nearshell1X);
nearshell1Y = Math.abs(nearshell1Y);
//子弹一碰撞数据
var nearshell2X = this.x - game.shell2.x;
var nearshell2Y = this.y +this.sizeY - game.shell2.y;
nearshell2X = Math.abs(nearshell2X);
nearshell2Y = Math.abs(nearshell2Y);
//子弹二碰撞数据
var nearshell3X = this.x - game.shell3.x;
var nearshell3Y = this.y +this.sizeY - game.shell3.y;
nearshell3X = Math.abs(nearshell3X);
nearshell3Y = Math.abs(nearshell3Y);
//子弹三碰撞数据
if(nearMX<=50&&nearMY<=50&&game.main.show == true){//monster2与玩家撞上检测
game.main.life-=6;//玩家生命之减少速率为1
if(game.main.life<=0){
run=false;
GAMEOVER.show = true;
}
}
if(nearshell1X<=50&&nearshell1Y<=4){//monster2与子弹一撞上检测开始
game.shell1.HZ = 0;
game.shell1.show = false;
game.shell1.time = true;
this.life = this.life-1;//怪物减血速率1
if(this.life<=0){//当血量小于零以后进行的操作
this.y = -50;
this.speedX = 0-this.speedX;
monsterNumber+=1;//分数加一
this.life = 3;
}
setTimeout(function(){
game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;//子弹重定位
game.shell1.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
Boom = true;
var a = game.shell1.x;
var b = game.shell1.y;
addFen.x = a;
addFen.y = b-50;
return
}//与子弹一撞上检测结束
if(nearshell2X<=50&&nearshell2Y<=4){//monster1与子弹二撞上检测开始
game.shell2.HZ = 0;
game.shell2.show = false;
game.shell2.time = true;
this.life = this.life-1;//怪物减血速率1
if(this.life<=0){//当血量小于零以后进行的操作
this.y = -50;
this.speedX = 0-this.speedX;
monsterNumber+=1;//分数加一
this.life = 3;
}
setTimeout(function(){
game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;//子弹重定位
game.shell2.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
Boom = true;
var a = game.shell2.x;
var b = game.shell2.y;
addFen.x = a;
addFen.y = b-50;
}//与子弹二撞上检测结束
if(nearshell3X<=50&&nearshell3Y<=4&&game.main.show == true){//monster1与子弹三撞上检测开始
game.shell3.HZ = 0;
game.shell3.show = false;
game.shell3.time = true;
this.life = this.life-1;//怪物减血速率1
if(this.life<=0){//当血量小于零以后进行的操作
this.y = -50;
this.speedX = 0-this.speedX;
monsterNumber+=1;//分数加一
this.life = 3;
}
setTimeout(function(){
game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;//子弹重定位
game.shell3.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
Boom = true;
var a = game.shell3.x;
var b = game.shell3.y;
addFen.x = a;
addFen.y = b-50;
}//与子弹三撞上检测结束
}
},
addlifemonster1:{//addlifemonster1开始
x:windowWidth*0.5,
y:-50,
sizeX:45,
sizeY:45,
speed:10,
Random:1,
speedX:0.5,
speedY:0.5,
show:false,
draw:function(){
if(this.y>windowHeight-50){
this.speedY = Math.random()*monsterspeed;
this.speedY = 0-this.speedY;
}else if(this.y<=0){
this.speedY = Math.random()*monsterspeed;
this.speedY = Math.abs(this.speedY);
}
if(this.x<=0){
this.speedX = Math.random()*monsterspeed;
this.speedX = Math.abs(this.speedX);
}else if(this.x>windowWidth-50){
this.speedX = Math.random()*monsterspeed;
this.speedX = 0-this.speedX;
}
this.x+=this.speedX;
this.y+=this.speedY;
ctx.drawImage(addLifeImg,this.x,this.y,this.sizeX,this.sizeY);
},
boom:function(){//addlifemonster1撞击检测
var nearMX = this.x - game.main.x;
var nearMY = this.y + this.sizeY - game.main.y;
nearMX = Math.abs(nearMX);
nearMY = Math.abs(nearMY);
//addlifemonster1与主角碰撞检测数据
var nearshell1X = this.x - game.shell1.x;
var nearshell1Y = this.y +this.sizeY - game.shell1.y;
nearshell1X = Math.abs(nearshell1X);
nearshell1Y = Math.abs(nearshell1Y);
//addlifemonster1与子弹一击中检测数据
var nearshell2X = this.x - game.shell2.x;
var nearshell2Y = this.y +this.sizeY - game.shell2.y;
nearshell2X = Math.abs(nearshell2X);
nearshell2Y = Math.abs(nearshell2Y);
//addlifemonster1与子弹二碰撞数据
var nearshell3X = this.x - game.shell3.x;
var nearshell3Y = this.y +this.sizeY - game.shell3.y;
nearshell3X = Math.abs(nearshell3X);
nearshell3Y = Math.abs(nearshell3Y);
//addlifemonster1与子弹三碰撞数据
if(nearMX<=50&&nearMY<=50){//addlifemonster1与玩家撞上检测
game.main.life-=0.1;//玩家生命之减少速率为1
if(game.main.life<=0){
run=false;
GAMEOVER.show = true;
}
}
if(nearshell1X<=50&&nearshell1Y<=4){//addlifemonster1与子弹一撞上检测开始
randomadd = 0;
game.shell1.HZ = 0;
game.main.life+=1;
game.shell1.show = false;
game.shell1.time = true;
this.y = -50;
this.speedX = 0-this.speedX;
setTimeout(function(){
game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;//子弹重定位
game.shell1.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
monsterNumber+=1;//分数加一
Boom = true;
var a = game.shell1.x;
var b = game.shell1.y;
addFen.x = a;
addFen.y = b-50;
this.show = false;
}//与子弹一撞上检测结束
if(nearshell2X<=50&&nearshell2Y<=4){//addlifemonster1与子弹二撞上检测开始
randomadd = 0;
game.shell2.HZ = 0;
game.main.life+=1;
game.shell2.show = false;
game.shell2.time = true;
this.y = -50;
this.speedX = 0-this.speedX;
setTimeout(function(){
game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;//子弹重定位
game.shell2.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
monsterNumber+=1;//分数加一
Boom = true;
var a = game.shell2.x;
var b = game.shell2.y;
addFen.x = a;
addFen.y = b-50;
this.show = false;
}//与子弹二撞上检测结束
if(nearshell3X<=50&&nearshell3Y<=4){//addlifemonster1与子弹三撞上检测开始
randomadd = 0;
this.show = false;
game.main.life+=1;
game.shell3.HZ = 0;
game.shell3.show = false;
game.shell3.time = true;
this.y = -50;
this.speedX = 0-this.speedX;
setTimeout(function(){
game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;//子弹重定位
game.shell3.y = game.main.y - 3/2*game.main.sizeY;//子弹重定位
},1)
monsterNumber+=1;//分数加一
Boom = true;
var a = game.shell3.x;
var b = game.shell3.y;
addFen.x = a;
addFen.y = b-50;
}//与子弹三撞上检测结束
}
},
init:function(){
setInterval(()=>{
randomadd+=0.1;
console.log(random);
if(randomadd >= 100){
random= Math.random()*10;
random = Math.floor(random);
randomadd = 0;
console.log(random);
}
ctx.clearRect(0,0,windowWidth,windowHeight);
if(random >= 8&&game.main.nowlife<1){
game.addlifemonster1.show = true;
}
if(game.addlifemonster1.show == true){
game.addlifemonster1.draw();
game.addlifemonster1.boom();
game.monster6.draw();
game.monster6.boom();
}
game.monster1.draw();//第一个怪物加载函数
game.monster1.boom();//第一个怪物运动函数
if(ready.show == true){
ready.draw();
}
if(run == true){
game.main.draw();//主角加载
//子弹一部分开始
if(game.shell1.time == true){
game.shell1.HZ+=1;
}//子弹一发射计时器
if(game.shell1.HZ == 100){
game.shell1.x = game.main.x - 1/4*game.shell1.sizeX;
game.shell1.y = game.main.y - 1/4*game.shell1.sizeY;
game.shell1.show = true;
return
}//子弹一重定位
if(game.shell1.show){
game.shell1.draw();
game.shell1.move();
}//控制子弹一消失与出现的条件
//子弹一部分结束
if(monsterNumber>=2){
game.monster2.draw();
game.monster2.boom();
}//怪物2出场时刻
if(monsterNumber>=10){
game.monster3.draw();
game.monster3.boom();
}//怪物3出场时刻
if(monsterNumber>=30){
game.monster4.draw();
game.monster4.boom();
}//怪物4出场时刻
if(monsterNumber>=40){
game.monster5.draw();
game.monster5.boom();
}//怪物4出场时刻
if(Boom==true){
addFen.draw();
}
//子弹二部分开始
if(monsterNumber>5){
game.shell2.show = true;
game.shell2.time=true;
if(game.shell2.time == true){
game.shell2.HZ = 100;
game.shell2.HZ+=1;
}//子弹二发射计时器
if(game.shell2.HZ == 100){
game.shell2.x = game.main.x - 1/4*game.shell2.sizeX;
game.shell2.y = game.main.y - 1/4*game.shell2.sizeY;
game.shell2.show = true;
}//子弹二重定位
if(game.shell2.show){
game.shell2.draw();
game.shell2.move();
}//控制子弹二消失与出现的条件
}
//子弹二部分结束
//子弹三部分开始
if(monsterNumber>6){
game.shell3.show = true;
game.shell3.HZ = 100;
if(game.shell3.time == true){
game.shell3.HZ+=1;
}//子弹三发射计时器
if(game.shell3.HZ == 100){
game.shell3.x = game.main.x - 1/4*game.shell3.sizeX;
game.shell3.y = game.main.y - 1/4*game.shell3.sizeY;
game.shell3.show = true;
return
}//子弹三重定位
if(game.shell3.show){
game.shell3.draw();
game.shell3.move();
}//控制子弹三消失与出现的条件
}
//子弹三部分结束
if(monsterNumber>=8&&monsterNumber<15){
monsterspeed=1.3;
}else if(monsterNumber>=15&&monsterNumber<20){
monsterspeed=1.5;
}else if(monsterNumber>=20&&monsterNumber<25){
monsterspeed = 1.6;
}else if(monsterNumber>=25&&monsterNumber<30){
monsterspeed = 1.8;
}else if(monsterNumber>=30&&monsterNumber<40){
monsterspeed = 1.9;
}else if(monsterNumber>=5){
monsterspeed = 1.95;
}else if(monsterNumber>=6){
monsterspeed = 2.2;
}
}else if(GAMEOVER.show == true){
GAMEOVER.draw();
}
// game.shell2.draw();
// game.shell2.move();
// game.shell3.draw();
// game.shell3.move();
// game.shell4.draw();
// game.shell4.move();
// game.shell5.draw();
// game.shell5.move();
// game.shell6.draw();
// game.shell6.move();
// game.shell7.draw();
// game.shell7.move();
// game.shell8.draw();
// game.shell8.move();
ctx.strokeRect(this.x,this.y,this.sizeX,this.sizeY);
},0);
}
}
window.onload = function(){
game.init();
}
</script>
</body>
</html>(function(){
var canvas = document.getElementById("canvas");
var width = document.body.clientWidth;
var height = document.body.clientHeight;
canvas.width = width;
canvas.height = height;//本块代码创建一个background.js文件
})()【下面是所需要的图片，大家自行保存】
游戏文件目录
