整体分析飞机大战游戏
游戏存在就会有准备阶段（控制游戏全局属性）：
1. 定义游戏状态
第一阶段：游戏欢迎状态 0 START
第二阶段：游戏加载状态 1 LOADING
第三阶段：游戏运行状态 2 RUNNING
第四阶段：游戏暂停阶段 3 PAUSE
第五阶段：游戏结束阶段 4 GAMEOVER
2. 定义游戏得分 score = 0
3. 定义我方飞机的生命值 life = 3
4. 定义游戏开关：State=0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飞机</title>
<style type="text/css">
body{
text-align: center;
}
canvas{
background-color: #ccc;
}
</style>
</head>
<body>
<canvas id="canvas" width="480" height="850"></canvas>
<script type="text/javascript">
//1. 定义游戏状态 第一阶段：游戏欢迎状态 0 START 第二阶段：游戏加载状态 1 LOADING 第三阶段：游戏运行状态 2 RUNNING 第四阶段：游戏暂停阶段 3 PAUSE 第五阶段：游戏结束阶段 4 GAMEOVER
const START = 0,
LOADING = 1,
RUNNING = 2,
PAUSE = 3,
GAMEOVER = 4;
//2. 定义游戏得分 score = 0
var score = 0,
//3. 定义我方飞机的生命值
life = 3,
//4. 定义游戏开关
State=0 ,
//当前画布的宽高
WIDTH = 480,
HEIGHT = 850;
//1.第一阶段开始：游戏欢迎阶段
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
var myimg = new Image();
myimg.src ="images/background.png";
//定义背景的数据
var obj = {
imgs : myimg,
width:480,
height:850
}
//定义背景对象的构造器
function BG(obj){
//定义绘制背景的坐标
this.x1 = 0;
this.y1 = 0;
this.x2 = 0;
this.y2 = -obj.height;
this.width = obj.width;
this.height = obj.height;
//定义绘制背景图片的方法
this.draw = function(){
cxt.drawImage(obj.imgs,this.x1,this.y1);
cxt.drawImage(obj.imgs,this.x2,this.y2);
}
//判断两张图片的临界值
this.bgrun =function(){
this.y1++;
this.y2++;
if(this.y1 == this.height){
this.y1 = -this.height;
}else if(this.y2 == this.height){
this.y2 = -this.height;
}
}
}
var bg = new BG(obj);
var logo = new Image();
logo.src ="images/start.png";
//控制游戏状态从一个变为第二个
canvas.onclick = function(){
if(State == START){
State = LOADING;
}
}
//2.第二阶段开始
var loadings = [];
loadings[0] = new Image();
loadings[0].src="images/game_loading1.png";
loadings[1] = new Image();
loadings[1].src="images/game_loading2.png";
loadings[2] = new Image();
loadings[2].src="images/game_loading3.png";
loadings[3] = new Image();
loadings[3].src="images/game_loading4.png";
//初始化动态效果的数据
var loading={
imgs:loadings,
width : 186,
height : 38,
length : loadings.length
}
function Loading(obj){
this.startIndex = 0;
//定义绘制加载效果图片的方法
this.endloading = function(){
cxt.drawImage(obj.imgs[this.startIndex],(WIDTH-obj.width)/2,HEIGHT-obj.height)
}
this.time = 0;
//定义动画方法
this.speed = function(){
this.time++;
if(this.time % 5 == 0){
this.startIndex++;
}
if(this.startIndex == obj.length){
State = RUNNING;
}
}
}
var load = new Loading(loading);
// 游戏运行阶段
// 绘制我方灰机
var heros = [];
heros[0] = new Image();
heros[0].src = "images/hero1.png";
heros[1] = new Image();
heros[1].src = "images/hero2.png";
heros[2] = new Image();
heros[2].src = "images/hero_blowup_n1.png";
heros[3] = new Image();
heros[3].src = "images/hero_blowup_n2.png";
heros[4] = new Image();
heros[4].src = "images/hero_blowup_n3.png";
heros[5] = new Image();
heros[5].src = "images/hero_blowup_n4.png";
//初始化我方飞机的数据
var HERO = {
imgs:heros,
length:heros.length,
width:99,
height :124,
frame : 2
}
//我方飞机
function Hero(obj){
this.imgs = obj.imgs;
this.length = obj.length;
this.height=obj.height;
this.width = obj.width;
this.x =(WIDTH-this.width)/2;
this.y = HEIGHT-this.height;
this.frame = obj.frame;
this.startIndex = 0;
this.candel = false;
//新增一个标识--表示是否被撞击，当前没有被撞击
this.down = false;
//绘制图片
this.draw = function(){
cxt.drawImage(this.imgs[this.startIndex],this.x,this.y)
}
this.speed = function(){
if(!this.down){
//没有被撞击：startIndex在0和1进行切换
if(this.startIndex == 0){
this.startIndex = 1
}else{
this.startIndex = 0;
}
}else{
//被撞击
this.startIndex++;
if(this.startIndex == obj.length){
//生命减少1
life--;
if(life == 0){
State = GAMEOVER;
this.startIndex = this.length-1;
}else{
hero = new Hero(HERO)
}
}
}
}
this.time = 0;
//增加子弹射击的方法
//物体运动思想控制敌机和子弹的速度
this.shoot = function(){
this.time++;
if(this.time% 5 == 0){
bullets.push(new Bullet(BULLET));
}
if(this.time% 13== 0){
shootenemys.push(new Enemy(ENEMY));
}
if(this.time% 120== 0){
shootenemys.push(new Enemy(ENEMYM));
}
if(this.time% 310== 0){
shootenemys.push(new Enemy(ENEMYL));
}
}
this.bang = function(){
this.down = true;
}
}
var hero = new Hero(HERO);
canvas.onmousemove = function(event){
// var event = event || e || arguments[0];
if(State == RUNNING){
var x = event.offsetX;
var y = event.offsetY;
hero.x = x-hero.width/2;
hero.y = y-hero.height/2;
}
}
//制造子弹
var bullet = new Image();
bullet.src = "images/bullet1.png";
//初始化子弹的构造器
var BULLET ={
imgs : bullet,
width : 9,
height : 21
}
function Bullet(obj){
this.imgs = obj.imgs;
this.width = obj.width;
this.height = obj.height;
//子弹绘制的坐标
this.x = hero.x + hero.width/2-this.width/2;
this.y = hero.y-this.height-10;
this.draw = function(){
cxt.drawImage(this.imgs,this.x,this.y);
}
this.speed = function(){
this.y -=4;
}
this.candel = false;
this.bang = function(){
this.candel = true;
}
}
//创建存储子弹的数组
var bullets = [];
//创建函数，用于绘制所有的子弹
// function bulletsPanit(){
// for(var i=0;i<bullets.length;i++){
// bullets[i].draw();
// bullets[i].speed();
// if(bullets[i].y < -bullets[i].height || bullets[i].candel){
// bullets.splice(i,1);
// }
// }
// }
// 绘制子弹
function drawBullets(){
for(var i=0;i<bullets.length;i++){
bullets[i].draw();
}
}
//子弹运动
function speedBullets(){
for(var i=0;i<bullets.length;i++){
bullets[i].speed();
}// 绘制子弹
//子弹运动
//删除击中和越界的子弹
}
//删除击中和越界的子弹
function delBullets(){
for(var i=0;i<bullets.length;i++){
if(bullets[i].y < -bullets[i].height || bullets[i].candel){
bullets.splice(i,1);
}
}
}
//敌机小号
var enemys = [];
enemys[0] = new Image();
enemys[0].src="images/enemy1.png";
enemys[1] = new Image();
enemys[1].src="images/enemy1_down1.png";
enemys[2] = new Image();
enemys[2].src="images/enemy1_down2.png";
enemys[3] = new Image();
enemys[3].src="images/enemy1_down3.png";
enemys[4] = new Image();
enemys[4].src="images/enemy1_down4.png";
var ENEMY = {
length : enemys.length,
imgs : enemys,
width : 57,
height : 51,
type : 1,
life : 1,
score : 1 ,
frame : 1
}
//敌机构造
function Enemy(obj){
this.type = obj.type;
this.imgs = obj.imgs;
this.life = obj.life;
this.width = obj.width;
this.height = obj.height;
this.length = obj.length;
this.x = Math.floor(Math.random()*(WIDTH-this.width));
this.y = -this.height;
//当前没被撞击
this.down = false;
this.startIndex = 0;
//确定动画是否播完
this.cancel = false;
//分数
this.score = obj.score;
//
this.frame = obj.frame;
this.draw = function(){
cxt.drawImage(this.imgs[this.startIndex],this.x,this.y);
}
this.speed =function(){
if(!this.down){
this.y+=5;
this.startIndex++;
this.startIndex = this.startIndex%this.frame;
}else{
this.startIndex++;
if(this.startIndex == this.length){
this.cancel = true;
this.startindex = this.length-1;
}
}
}
//碰撞
this.collision = function(obj){
return obj.y + obj.height > this.y
&& obj.x + obj.width > this.x
&& obj.y < this.y + this.height
&& obj.x < this.x + this.width;
}
this.bang = function(){
this.life--;
if(this.life == 0){
this.down = true;
score += this.score;
}
}
}
var shootenemys = [];
// function shootenemy(){
// for(var i=0;i<shootenemys.length;i++){
// shootenemys[i].draw();
// shootenemys[i].speed();
// if( shootenemys[i].cancel||shootenemys[i].y > (HEIGHT+shootenemys[i].height) ){
// shootenemys.splice(i,1);
// }
// }
// }
// 绘制敌机
function drawEnemies(){
for(var i=0;i<shootenemys.length;i++){
shootenemys[i].draw();
}
}
//敌机运动
function speedEnemies(){
for(var i=0;i<shootenemys.length;i++){
shootenemys[i].speed();
}
}
//删除击中和越界的敌机
function delEnemies(){
for(var i=0;i<shootenemys.length;i++){
if( shootenemys[i].cancel||shootenemys[i].y > (HEIGHT+shootenemys[i].height) ){
shootenemys.splice(i,1);
}
}
}
function hit(){
for(var i=0;i<shootenemys.length;i++){
// 我方飞机撞击敌方飞机
if(shootenemys[i].collision(hero)){
// 处理敌方飞机撞击后的逻辑
shootenemys[i].bang();
// 处理我方飞机撞击后的逻辑
hero.bang();
}
// 子弹撞击敌方飞机bullets
for(var j=0;j<bullets.length;j++){
if(shootenemys[i].collision(bullets[j])){
// 处理敌方飞机撞击后的逻辑
shootenemys[i].bang();
// 处理子弹撞击后的逻辑
bullets[j].bang();
}
}
}
}
//敌机中号
var enemym = [];
enemym[0] = new Image();
enemym[0].src="images/enemy2.png";
enemym[1] = new Image();
enemym[1].src="images/enemy2_down1.png";
enemym[2] = new Image();
enemym[2].src="images/enemy2_down2.png";
enemym[3] = new Image();
enemym[3].src="images/enemy2_down3.png";
enemym[4] = new Image();
enemym[4].src="images/enemy2_down4.png";
var ENEMYM = {
length : enemym.length,
imgs : enemym,
width : 69,
height : 95,
type : 1,
life : 3,
score : 4 ,
frame : 1
}
// 敌机大号
var enemyl = [];
enemyl[0] = new Image();
enemyl[0].src="images/enemy3_n2.png";
enemyl[1] = new Image();
enemyl[1].src="images/enemy3_n1.png";
enemyl[2] = new Image();
enemyl[2].src="images/enemy3_down1.png";
enemyl[3] = new Image();
enemyl[3].src="images/enemy3_down2.png";
enemyl[4] = new Image();
enemyl[4].src="images/enemy3_down3.png";
enemyl[5] = new Image();
enemyl[5].src="images/enemy3_down4.png";
enemyl[6] = new Image();
enemyl[6].src="images/enemy3_down5.png";
enemyl[7] = new Image();
enemyl[7].src="images/enemy3_down6.png";
var ENEMYL = {
length : enemyl.length,
imgs : enemyl,
width : 165,
height : 261,
type : 1,
life : 20,
score : 10 ,
frame : 2
}
//绘制分数和生命
function text(){
cxt.font = "bold 26px 宋体"
cxt.fillText(`score:${score}`,10,30)
cxt.fillText("LIFE"+life,WIDTH-80,30);
}
//鼠标移入
canvas.onmouseover =function(){
if(State == PAUSE){
State = RUNNING;
}
}
//鼠标移出
canvas.onmouseout =function(){
if(State == RUNNING){
State = PAUSE;
}
}
//暂停
var pause = new Image();
pause.src = "images/game_pause_nor.png";
function over(){
cxt.font = "bold 48px 宋体";
cxt.fillText("GAME OVER",150,400);
}
//游戏核心控制器
setInterval(function(){
bg.draw();
//控制背景运动
bg.bgrun();
if(State == START){
cxt.drawImage(logo,40,20);
}else if(State == LOADING){
load.endloading();
load.speed();
}else if(State == RUNNING){
//我方飞机
hero.draw();
//我方飞机运动
hero.speed();
//绘制分数和生命
text();
//我方飞机射击
hero.shoot();
// bulletsPanit();
// 检查碰撞
hit()
//绘制敌机
drawEnemies()
//绘制敌机运动
speedEnemies()
//判断删除敌机
delEnemies()
//绘制子弹
drawBullets()
//绘制子弹运动
speedBullets()
//判断删除子弹
delBullets()
}else if(State == PAUSE){
//暂停状态时保存画面除去运动
text()
//绘制暂停图标
cxt.drawImage(pause,200,400);
drawEnemies()
drawBullets()
hero.draw();
}else if(State == GAMEOVER){
//游戏结束
drawEnemies()
drawBullets()
delEnemies()
text()
over()
hero.draw();
}
},100);
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
