飞机大战
飞机大战分为五个阶段来完成
主要思路如下：
1. 游戏开始阶段
1.2绘图游戏logo
2.游戏运行前的动画阶段阶段
2.1动画的绘制
2.2动画的运行
3.游戏运行阶段
3.1我方飞机的绘制
3.2我方飞机的运动
3.3 我方飞机的射击方法
3.4绘制子弹
3.5绘制子弹的运动
3.6删除子弹
3.7创建敌方飞机
3.8绘制敌方飞机
3.9 绘制敌方飞机的运动
3.10 敌方飞机的删除
3.11 是否撞击
3.12 绘制文字
4.游戏暂停阶段
4.1我方飞机的绘制
4.2绘制子弹
4.3绘制敌方飞机
4.4绘制文字
4.5绘制暂停的图片
5.游戏结束阶段
5.1我方飞机的绘制
5.2绘制子弹
5.3绘制敌方飞机
5.4绘制文字
5.5绘制暂停的图片
运行截图
主要代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>飞机大战</title>
<style>
canvas{
display:block;
margin:100px auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="480px" height="650px"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//游戏初始化
var START=0;//第一个阶段,游戏开始阶段
var STARTING=1;//第二个阶段,游戏运行前的动画阶段
var RUNNING=2;//第三阶段，游戏运行阶段
var PAUSE=3;//第四阶段，游戏暂停阶段
var GAMEOVER=4;//第五个阶段，游戏结束阶段
//定义自己的状态
var state=START;
//定义画布的宽高
var WIDTH=canvas.width;
var HEIGHT=canvas.height;
//定义得分
var score=0;
//定义生命值
var life=3;
//1.游戏背景加载
//创建背景图片的对象
var bg=new Image();
bg.src="img/background.png";
//初始化背景图片的信息
var BG= {
imgs:bg,
width:480,
height:852
}
//创建背景图片的构造器
function Bg(config){
this.imgs=config.imgs;
this.width=config.width;
this.height=config.height;
this.x1=0;
this.y1=0;
this.x2=0;
this.y2=-this.height;
//定义背景图片的绘制方法
this.paint=function(){
context.drawImage(this.imgs,this.x1,this.y1);
context.drawImage(this.imgs,this.x2,this.y2);
}
//定义背景图片运动的方法
this.step=function(){
this.y1++;
this.y2++;
//判断图片的临界点
if(this.y1==this.height){
this.y1=-this.height;
}
if(this.y2==this.height){
this.y2=-this.height;
}
}
}
var sky=new Bg(BG);
var logo=new Image();
logo.src="img/start.png";
//2.游戏运行前的动画阶段；
//加载动画所需图片
var loadings=[];
loadings[0]=new Image();
loadings[0].src="img/game_loading1.png";
loadings[1]=new Image();
loadings[1].src="img/game_loading2.png";
loadings[2]=new Image();
loadings[2].src="img/game_loading3.png";
loadings[3]=new Image();
loadings[3].src="img/game_loading4.png";
//初始化图片的数据
var LOADINGS={
imgs:loadings,
length:loadings.length,
width:186,
height:38
}
//定义动画构造器
function Loading(config){
this.imgs=config.imgs;
this.length=config.length;
this.width=config.width;
this.height=config.height;
// 定义索引,判断显示所对应的图片
this.startIndex=0;
//定义绘制方法
this.paint=function(){
context.drawImage(this.imgs[this.startIndex],0,HEIGHT-this.height);
}
//定义运动的方法
this.time=0;
this.step=function(){
//
this.time++;
if(this.time%3==0){
this.startIndex++;
}
if(this.startIndex==this.length){
state=RUNNING;
}
}
}
// 3.游戏运行阶段
//绘制我方飞机
//加载我方飞机的图片
var heros=[];
heros[0]=new Image();
heros[0].src="img/hero1.png";
heros[1]=new Image();
heros[1].src="img/hero2.png";
heros[2]=new Image();
heros[2].src="img/hero_blowup_n1.png";
heros[3]=new Image();
heros[3].src="img/hero_blowup_n2.png";
heros[4]=new Image();
heros[4].src="img/hero_blowup_n2.png";
heros[5]=new Image();
heros[5].src="img/hero_blowup_n2.png";
//初始化我方飞机的数据
var HEROS={
imgs:heros,
length:heros.length,
width:99,
height:124,
frame:2//我方飞机的两种状态
}
//我方飞机的构造器
function Hero(config){
this.imgs=config.imgs;
this.length=config.length;
this.width=config.width;
this.height=config.height;
this.frame=config.frame;
//定义索引值
this.startIndex=0;
//定义飞机的位置
this.x=WIDTH/2-this.width/2;
this.y=HEIGHT-this.height;
//定义碰撞属性
this.down=false;//false表示没撞
//定义状态看是否爆破完成
this.candel=false;
//绘制方法
this.paint=function(){
context.drawImage(this.imgs[this.startIndex],this.x,this.y);
}
//定义运动的方法
this.step=function(){
if(!this.down){
//没有撞击时，角标在0和1之间切换
if(this.startIndex==0){
this.startIndex=1;
}else{
this.startIndex=0;
}
}else{
//撞击以后，角标不停增加，模拟出动画
this.startIndex++;
if(this.startIndex==this.length){
life--;
if(life==0){
state=GAMEOVER;
//如果死亡,让动画留在最后一张的爆破图
this.startIndex=this.length-1;
}else{
//撞击以后，所有属性全部重置，最简单是直接new
hero=new Hero(HEROS);
}
}
}
}
//飞机的碰撞方法
this.bang=function(){
this.down=true;
}
//增加射击的方法
this.time=0;
this.shoot=function(){
// this.time++;
// if(this.time%3==0){
bullets.push(new Bullet(BULLET));
// }
}
//增加子弹的碰撞方法
}
var hero=new Hero(HEROS);
canvas.onmousemove=function(event){
var event=event||window.event;
if(state==RUNNING){
hero.x=event.offsetX-hero.width/2;
hero.y=event.offsetY-hero.height/2;
}
}
//绘制子弹
//创建子弹的图片
var bullet=new Image();
bullet.src="img/bullet1.png";
var BULLET = {
imgs: bullet,
width: 9,
height: 21
}
function Bullet(config){
this.imgs=config.imgs;
this.width=config.width;
this.height=config.height;
this.x=hero.x+hero.width/2-this.width/2;
this.y=hero.y-this.height;
this.paint=function(){
context.drawImage(this.imgs,this.x,this.y);
}
this.step=function(){
this.y-=10;
}
this.candel=false;
this.bang=function(){
this.candel=true;
}
}
var bullets=[];
//遍历绘制子弹
function bulletsPaint(){
for(var i=0;i<bullets.length;i++){
bullets[i].paint();
}
}
//遍历子弹的运动
function bulletsStep(){
for(var i=0;i<bullets.length;i++){
bullets[i].step();
}
}
//子弹的删除
function bulletsDel(){
for (var i=0;i<bullets.length;i++){
if(bullets[i].candel||bullets[i].y<-bullets[i].height) {
bullets.splice(i,1);
}
}
}
//3.1绘制敌方飞机
// 加载敌方飞机的图片
var enemy1=[];
enemy1[0]=new Image();
enemy1[0].src="img/enemy1.png";
enemy1[1]=new Image();
enemy1[1].src="img/enemy1_down1.png";
enemy1[2]=new Image();
enemy1[2].src="img/enemy1_down2.png";
enemy1[3]=new Image();
enemy1[3].src="img/enemy1_down3.png";
enemy1[4]=new Image();
enemy1[4].src="img/enemy1_down4.png";
var enemy2=[];
enemy2[0]=new Image();
enemy2[0].src="img/enemy2.png";
enemy2[1]=new Image();
enemy2[1].src="img/enemy2_down1.png";
enemy2[2]=new Image();
enemy2[2].src="img/enemy2_down2.png";
enemy2[3]=new Image();
enemy2[3].src="img/enemy2_down3.png";
enemy2[4]=new Image();
enemy2[4].src="img/enemy2_down4.png";
var enemy3=[];
enemy3[0]=new Image();
enemy3[0].src="img/enemy3_n1.png";
enemy3[1]=new Image();
enemy3[1].src="img/enemy3_n2.png";
enemy3[2]=new Image();
enemy3[2].src="img/enemy3_down1.png";
enemy3[3]=new Image();
enemy3[3].src="img/enemy3_down2.png";
enemy3[4]=new Image();
enemy3[4].src="img/enemy3_down3.png";
enemy3[5]=new Image();
enemy3[5].src="img/enemy3_down4.png";
enemy3[6]=new Image();
enemy3[6].src="img/enemy3_down5.png";
enemy3[7]=new Image();
enemy3[7].src="img/enemy3_down6.png";
var ENEMY1={
imgs:enemy1,
length:enemy1.length,
width:57,
height:51,
type:1,
frame:1,
life:1,
score:1
}
var ENEMY2={
imgs:enemy2,
length:enemy2.length,
width:69,
height:95,
type:2,
frame:1,
life:5,
score:5
}
var ENEMY3={
imgs:enemy3,
length:enemy3.length,
width:165,
height:261,
type:3,
frame:2,
life:15,
score:20
}
function Enemy(config){
this.imgs=config.imgs;
this.length=config.length;
this.width=config.width;
this.height=config.height;
this.type=config.type;
this.frame=config.frame;
this.life=config.life;
this.score=config.score;
//定义坐标
this.x=Math.random()*(WIDTH-this.width);
this.y=-this.height;
//定义下标
this.startIndex=0;
this.down=false;
this.candel=false;
this.paint=function() {
context.drawImage(this.imgs[this.startIndex], this.x, this.y);
}
this.step=function() {
if (!this.down) {//飞机处于正常状态
//小飞机、中飞机的坐标始终为0
this.startIndex++;
//大飞机的坐标是在0和1之间切换
this.startIndex = this.startIndex % this.frame;
this.y += 2;
} else {//飞机发生碰撞以后
this.startIndex++;
if (this.startIndex == this.length) {
this.candel = true;
this.startIndex = this.length - 1;
}
}
}
//是否被撞击的方法
this.checkHit=function(wo){//碰撞的时候，可能是我方飞机或者子弹
return wo.y+wo.height>this.x&&
wo.x+wo.width>this.y&&
wo.y<this.y+this.height&&
wo.x<this.x+this.width
}
this.bang=function(){
this.life--;
if(this.life==0){
this.down=true;
score+=this.score;
}
}
}
//创建数组，存储敌方飞机
var enemies=[];
function enterEnemise(){
//大飞机有且只有一个
var rand=Math.floor(Math.random()*100);
if(rand<10){
enemies.push(new Enemy(ENEMY1));
}else if(rand<55&&rand>50) {
enemies.push(new Enemy(ENEMY2));
}else if(rand==88){
if(enemies[0].type!=3&&enemies.length>0){
enemies.splice(0,0,new Enemy(ENEMY3));
}
}
console.log("111");
}
function paintEnemise(){
for(var i=0;i<enemies.length;i++){
enemies[i].paint();
}
}
function stepEnemise(){
for(var i=0;i<enemies.length;i++){
enemies[i].step();
}
}
//删除飞机
function delEnemise(){
for(var i=0;i<enemies.length;i++){
if(enemies[i].y>HEIGHT||enemies[i].candel){
enemies.splice(i,1);
}
}
}
//绘制碰撞函数
function hitEnemise(){
for(var i=0;i<enemies.length;i++){
if(enemies[i].checkHit(hero)){
//处理敌方飞机的碰撞以后的逻辑
enemies[i].bang();
hero.bang();
}
for(var j=0;j<bullets.length;j++){
if(enemies[i].checkHit(bullets[j])){
enemies[i].bang();
bullets[j].bang();
}
}
}
}
// 绘制得分和我方生命值
function paintText(){
context.font="bold 30px 微软雅黑"
context.fillText("SCORE"+score,0,30);
context.fillText("LIFE"+life,380,30);
}
canvas.onmouseover=function(){
if(state==PAUSE){
state=RUNNING;
}
}
canvas.onmouseover=function() {
if (state==RUNNING){
state=PAUSE;
}
}
var pause=new Image();
pause.src="img/game_pause_nor.png";
function paintOver(){
context.font="bold 50px 微软雅黑";
context.fillText("GAME OVER!!!",70,300);
}
//创建游戏运行前动画的对象
var loading=new Loading(LOADINGS);
canvas.onclick=function(){
if(state==START){
state=STARTING;
}
}
setInterval(function(){
sky.paint();
sky.step();
if(state==START){
context.drawImage(logo,30,0);
}else if(state==STARTING) {
loading.paint();
loading.step();
}else if(state==RUNNING){
hero.paint();
hero.step();
hero.shoot();
bulletsPaint();
bulletsStep();
bulletsDel();
enterEnemise();
paintEnemise();
stepEnemise();
delEnemise();
hitEnemise();
paintText();
}else if(state==PAUSE){
hero.paint();
bulletsPaint();
paintEnemise();
paintText();
context.drawImage(pause,200,200)
}else if(state==GAMEOVER){
hero.paint();
bulletsPaint();
paintEnemise();
paintText();
paintOver();
}
},100);
</script>
</body>
</html>
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
