- 写出canvas画布
<canvas id="canvas" width="480" height="650"></canvas>
准备阶段：
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//0.准备阶段
//定义游戏的五个阶段
const START = 0;
const LOADING = 1;
const RUNNING = 2;
const PAUSE = 3;
const GAMEOVER = 4;
//定义游戏得分
var score = 0;
//定义我方飞机 生命值
var life = 3;
//定义游戏开关
var state = START;
//定义当前画布的宽高
var WIDTH = 480;
var HEIGHT = 650;
- 第一阶段开始:游戏欢迎阶段
var bg = new Image();
bg.src = "images/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(config.imgs,this.x1,this.y1);
context.drawImage(config.imgs,this.x2,this.y2);
}
//定义背景图片动起来的方法
this.step = function(){
//y值改变动起来
this.y1++;
this.y2++;
//判断两张图片的循环
if(this.y1 == this.height){
this.y1 = -this.height;
}
if(this.y2 == this.height){
this.y2 = -this.height;
}
}
}
var _bg = new Bg(BG);
var logo = new Image();
logo.src="images/start.png";
- 游戏界面进入阶段
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 LOADINGS = {
imgs : loadings,
width : 186,
height : 38,
length : loadings.length
}
function Loading(config){
this.startIndex = 0;
//加载效果图片
this.paint = function(){
context.drawImage(config.imgs[this.startIndex],(WIDTH-config.width)/2,HEIGHT-config.height);
}
//定义速度
this.time = 0;
//定义动画的方法
this.step = function(){
this.time++;
if(this.time % 5 == 0){
this.startIndex++;
}
if(this.startIndex == config.length){
state = RUNNING;
}
}
}
var loading = new Loading(LOADINGS);
//控制游戏状态从第一个变为第二个
canvas.onclick = function(){
if(state == START){
state =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 HEROS = {
imgs : heros,
length :heros.length,
width : 99,
height : 124
}
function Hero(config){
this.width = config.width;
this.height = config.height;
this.imgs = config.imgs;
this.length = config.leng;
this.frame = config.frame;
this.x = (WIDTH-config.width)/2;
this.y = HEIGHT - config.height;
this.down = false;//表示是否撞击
this.startIndex = 0;
//绘制加载图片
this.paint = function(){
context.drawImage(config.imgs[this.startIndex],this.x,this.y);
}
this.step = function(){
if(!this.down){
//没有被撞击：startIndex在0和1进行切换
if(this.startIndex == 0){
this.startIndex = 1;
}else{
this.startIndex = 0;
}
}else{
//被撞击
this.startIndex++;
if(this.startIndex == config.length){
//生命减少
life--;
if(life == 0){
state = GAMEOVER;
}else{
hero = new Hero(HEROS);
}
}
}
}
this.time = 0;
this.bang = function(){
this.down = true;
}
//增加一个子弹射击的方法
this.shoot = function(){
this.time++;
if(this.time%4 == 0){
bullets.push(new Bullet(BULLET))
}
}
}
var hero = new Hero(HEROS);
//我方飞机移动
canvas.onmousemove = function(event){
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/8.png";
//初始化子弹的数据
var BULLET = {
imgs : bullet,
width : 40,
height : 13
}
//创建子弹的构造器
function Bullet(config){
this.width = config.width;
this.height = config.height;
//子弹绘制的坐标
this.x = hero.x + hero.width/2 - config.width/2;
this.y = hero.y - config.height;
this.paint = function(){
context.drawImage(config.imgs,this.x,this.y);
}
this.step = function(){
this.y -= 10;
}
this.candel = false;
this.bang = function(){
this.candel = true;
}
}
//创建子弹储存的数组
var bullets = [];
//创建函数用于绘制所有的子弹
function bulletsPanit(){
for(var i =0;i<bullets.length;i++){
bullets[i].paint();
bullets[i].step();
if(bullets[i].y < -bullets[i].height){
bullets.splice(i,1);
}
}
}
function bulletStep(){
for (var i=0;i<bullet.length;i++) {
bullet[i].step();
}
}
function bulletDown(){
for (var i=0;i<bullet.length;i++) {
if (bullet[i].down == true||bullet[i].y<-bullet[i].height) {
bullet.splice(i,1);
}
}
}
//创建敌方飞机（三种飞机分别储存）
var enemy1 = [];//小飞机
enemy1[0] = new Image();
enemy1[0].src = "images/enemy1.png";
enemy1[1] = new Image();
enemy1[1].src = "images/enemy1_down1.png";
enemy1[2] = new Image();
enemy1[2].src = "images/enemy1_down2.png";
enemy1[3] = new Image();
enemy1[3].src = "images/enemy1_down3.png";
enemy1[4] = new Image();
enemy1[4].src = "images/enemy1_down4.png";
var enemy2 = [];//中飞机
enemy2[0] = new Image();
enemy2[0].src = "images/enemy2.png";
enemy2[1] = new Image();
enemy2[1].src = "images/enemy2_down1.png";
enemy2[2] = new Image();
enemy2[2].src = "images/enemy2_down2.png";
enemy2[3] = new Image();
enemy2[3].src = "images/enemy2_down3.png";
enemy2[4] = new Image();
enemy2[4].src = "images/enemy2_down4.png";
var enemy3 = [];//大飞机
enemy3[0] = new Image();
enemy3[0].src = "images/enemy3_n1.png";
enemy3[1] = new Image();
enemy3[1].src = "images/enemy3_n2.png";
enemy3[2] = new Image();
enemy3[2].src = "images/enemy3_down1.png";
enemy3[3] = new Image();
enemy3[3].src = "images/enemy3_down2.png";
enemy3[4] = new Image();
enemy3[4].src = "images/enemy3_down3.png";
enemy3[5] = new Image();
enemy3[5].src = "images/enemy3_down4.png";
enemy3[6] = new Image();
enemy3[6].src = "images/enemy3_down5.png";
enemy3[7] = new Image();
enemy3[7].src = "images/enemy3_down6.png";
var ENEMY1 = {
imgs : enemy1,
length : enemy1.length,
width : 57,
height : 51,
type : 1,
life : 1,
score : 1,
frame : 1
}
var ENEMY2 = {
imgs : enemy2,
length : enemy2.length,
width : 69,
height : 95,
type : 2,
life : 3,
score : 3,
frame : 1
}
var ENEMY3 = {
imgs : enemy3,
length : enemy3.length,
width : 165,
height : 261,
type : 3,
life : 10,
score : 10,
frame : 2
}
function Enemy(config){
this.imgs = config.imgs,
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.type = config.type;
this.life = config.life;
this.score = config.score;
this.frame = config.frame;
this.startIndex = 0;
this.x = Math.random()*(WIDTH-this.width);
this.y = -this.height;
this.down = false;//是否被撞击
this.cancel = false;//确定当前动画是否播放完
this.paint = function(){
context.drawImage(this.imgs[this.startIndex],this.x,this.y);
}
this.step = function(){
if (!this.down) {
this.startIndex++;
this.startIndex = this.startIndex % this.frame;
this.y+=10;
if (this.y+this.height > HEIGHT) {//当敌方飞机到达画布底部，还没有被击败，游戏将中止
state = GAMEOVER;
}
} else{
this.startIndex++;
if (this.startIndex == this.length) {
this.cancel = true;
this.startIndex = this.length - 1;
}
}
}
//撞击后的逻辑
this.bang = function(){
this.life--;//当前飞机的生命值减少
if (this.life == 0) {
this.down = true;
score += this.score;
}
}
this.checkHit = function(obj){
console.log(obj.y)
return this.x<obj.x+obj.width
&& this.x+this.width > obj.x
&& this.y < obj.y+obj.height
&& this.y+this.height>obj.y;
}
}
创建地方战机数组
var enemies = [];
function enemiesCreate(){
var ran = Math.floor(Math.random()*100);
if (ran<=5) {
enemies.push(new Enemy(ENEMY1));
}else if (ran == 6) {
enemies.push(new Enemy(ENEMY2));
}else if (ran == 7) {
//判断敌方飞机数组是否有东西
if (enemies[0].type!=3 && enemies.length) {//为了保证画布里只显示一张大飞机，判断敌方飞机数组的第0位是否是大飞机
enemies.splice(0,0,new Enemy(ENEMY3));//插在数组的最前面，是的数组的第一位是大飞机
}
}
}
function enemiesPaint(){
for (var i = 0;i<enemies.length;i++) {
enemies[i].paint();
}
}
function enemiesStep(){
for (var i = 0;i<enemies.length;i++) {
enemies[i].step();
}
}
function enemiesDel(){
for (var i = 0;i<enemies.length;i++) {
if (enemies[i].candel || enemies[i].y>HEIGHT) {
enemies.splice(i,1);//删除当前元素
}
}
}
function checkHitBoth(){//碰撞处理函数
for (var i= 0;i<enemies.length;i++) {
//hero和敌方飞机碰撞
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();
}
}
}
}
var pause = new Image();
pause.src = "images/game_pause_nor.png";
canvas.onmouseover = function(){
if (state == PAUSE) {
state = RUNNING;
}
}
canvas.onmouseout = function(){
if (state == RUNNING) {
state = PAUSE;
}
}
//绘制游戏得分和生命值
function paintText(){
context.font = "bold 24px 微软雅黑";
context.fillText("SCORE:"+score,20,30);
context.fillText("LIFE:"+life,380,30);
}
function paintGameover(){
context.font = "bold 36px 微软雅黑";
context.fillText("GAME OVER",150,300);
}
定义游戏核心控制器
setInterval(function(){
//1.绘制背景图像
_bg.paint();
//2.控制背景运动
_bg.step();
if(state == START){
context.drawImage(logo,40,-2)
}else if(state == LOADING){
loading.paint();
loading.step();
}else if(state == RUNNING){
hero.paint();//我方飞机绘制
hero.step();//我方飞机运动
hero.shoot();//我方飞机射击子弹
bulletsPanit();//遍历子弹，让所有子弹显示
bulletStep();//遍历子弹，让子弹运动
bulletDown();//遍历子弹，击中飞机的子弹或者画布外的子弹自己销毁
enemiesCreate()//创建敌方飞机
enemiesPaint();//遍历敌方飞机数组让敌方飞机显示
enemiesStep();//遍历敌方飞机让所有飞机运动
enemiesDel();//销毁符合条件的敌方飞机
checkHitBoth();
paintText();//绘制得分和生命值
}else if(state == PAUSE){
hero.paint();
bulletsPanit();
enemiesPaint();
context.drawImage(pause,200,300);
paintText();
}else if(state == GAMEOVER){
hero.paint();
bulletsPanit();
enemiesPaint()
paintText();
paintGameover();
}
},50)
</script>
