<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="myCanvas" width="480" height="852" style="border:1px solid black"></canvas>
<script>
//1.获取canvas对象
var can = document.getElementById("myCanvas");
//2.获取context对象
var ctx = can.getContext("2d");
//全局变量
var gameScore = 0;
var bg;
var startImg;
var heroImg=[];
var pauseImg;
var enemy1 = [];
var enemy2 = [];
var enemy3 = [];
var m ;
//定义游戏初始化状态
var START = 0;
var STARTING = 1;
var RUNNING = 2;
var PAUSE = 3;
var GAMEOVER = 4;
// 当前的游戏状态
var start = START;
//3.确保所有图片加载完成
//3.0所有图片资源的链接保存到数组中
var imgSrc = [
//起始图片
["background.png","start.png","game_pause_nor.png"],
//敌机1
["enemy1.png","enemy1_down1.png","enemy1_down2.png","enemy1_down3.png","enemy1_down4.png"],
//敌机2
["enemy2.png","enemy2_down1.png","enemy2_down2.png","enemy2_down3.png","enemy2_down4.png"],
//敌机3
["enemy3_n1.png","enemy3_n2.png","enemy3_hit.png","enemy3_down1.png","enemy3_down2.png","enemy3_down3.png","enemy3_down4.png","enemy3_down5.png","enemy3_down6.png"],
//加载界面
["game_loading1","game_loading2","game_loading3","game_loading4"],
//英雄
["hero1.png","hero2.png","hero_blowup_n1.png","hero_blowup_n2.png","hero_blowup_n3.png","hero_blowup_n4.png"],
//子弹
["m.png"]
];
//3.1 加载图片的进度
var progress = 1;
//3.2 图片加载操作
function download(){
//加载图片
bg = nImg(imgSrc[0][0]);
startImg = nImg(imgSrc[0][1]);
pauseImg = nImg(imgSrc[0][2]);
m = nImg(imgSrc[6][0]);
//添加英雄图片
for(var i = 0 ; i <imgSrc[5].length ;i++){
heroImg[i] = nImg(imgSrc[5][i]);
}
//添加敌机图片
for(var i = 0 ; i < imgSrc[1].length ;i++){
enemy1[i] = nImg(imgSrc[1][i]);
}
for(var i = 0 ; i < imgSrc[2].length ;i++){
enemy2[i] = nImg(imgSrc[2][i]);
}
for(var i = 0 ; i < imgSrc[3].length ;i++){
enemy3[i] = nImg(imgSrc[3][i]);
}
}
function nImg(src){
var img = new Image();
img.src = "img/"+src;
img.onload = function(){
//总共需要加载33张图片 每张图片加载成功后，需要提升3的进度
progress += 3;
if(progress >= 87){
//开始游戏环节
// start();
start = STARTING;
//给当前canvas 添加一个点击事件
can.onclick = function(){
start = RUNNING;
hero = new Hero();
}
}
}
return img;
}
download();
//4.绘制背景
var y = 0;
function paintBg(){
ctx.drawImage(bg,0,y);
ctx.drawImage(bg,0,y-852);
y++;
if(y == 852){
y = 0;
}
}
//5.构造英雄对象
var hero = null;
function Hero(){
//设置初始化hero坐标
this.x = (can.width- heroImg[0].width)/2;
this.y = (can.height - heroImg[0].height);
this.index = 0;//用于控制切换图片下标
this.life = 100;//自己的生命状态
this.hCount = 0;//用于控制子弹发射的频率
this.eCount = 0;//用于控制敌机出现的频率
this.count = 0;//用于控制图片切换的频率
this.draw = function(){
//检测是否和敌机发声碰撞
this.hit();
//图片切换的频率
this.count++;
if(this.count%2 == 0&&this.index<=1){
this.index = 0;
count = 0;
}else if(this.index<=1){
this.index = 1;
}else if(this.count%5==0&&this.index<heroImg.length){
this.index++;
}else if(this.index>=heroImg.length){
start = GAMEOVER;
}
ctx.drawImage(heroImg[this.index],this.x,this.y);
ctx.fillText("SCORE:"+gameScore,15,30);
ctx.fillText("LIFE:"+this.life,420,30);
//创建敌机
this.eCount++;
if(this.eCount%22 == 0){
liveEnemy.push(new Enemy());
eCount = 0;
}
//创建子弹
this.hCount++;
if(this.hCount%3 == 0){
hullet.push(new Hullet());
hCount = 0;
}
}
this.hit = function(){//判断自己是否被敌人击中
for(var i = 0 ; i < liveEnemy.length;i++){
var d = liveEnemy[i];
var px = this.x <= d.x ? d.x : this.x;
var py = this.y <= d.y ? d.y : this.y;
if(px >= this.x && px <= this.x+heroImg[0].width && py >= this.y
&& py<=this.y+heroImg[0].height&&px >=d.x && px<=d.x+d.width&&py>d.y&&py<=d.y+d.height){
this.life -= 10;
if(this.life <= 0 ){
this.index = 2;
}
}
}
}
function move(e){
//判断当前的游戏状态
if(start == RUNNING || start == PAUSE){
start = RUNNING;
var offsetX = e.offsetX;
var offsetY = e.offsetY;
//希望鼠标存在的位置为图片的中心位置
var w = heroImg[0].width;
var h = heroImg[0].height;
var hx = offsetX - w/2;
var hy = offsetY - h/2;
//判断鼠标的位置是否超出了边界框
if(hx-w/2<0){
hx = 0;
}
if(hx+w>can.width){
hx = can.width-w;
}
if(hy-h/2<0){
hy = 0;
}
if(hy+h>can.height){
hy = can.height-h;
}
hero.x = hx;
hero.y = hy;
}
}
//添加鼠标移动事件
can.addEventListener("mousemove",move);
//添加鼠标移出事件
can.onmouseout = function(e){
if(start == RUNNING){
start = PAUSE;
}
}
}
//绘制暂停图片
function drawPause(){
ctx.drawImage(pauseImg,(can.width - pauseImg.width)/2,(can.height-pauseImg.height)/2);
}
//构建敌机对象
var liveEnemy = [];//存放敌机的数组
function Enemy(){
this.enemy = null;//保存当前敌机的数组对象
this.speed = 0;//敌机速度
this.life = 1;//敌机的生命值
this.n = Math.random()*50;//控制敌机随机生成种类
if(this.n < 10){//生成大型飞机
this.enemy = enemy3[0];
this.speed = 2;
this.life = 20;
}else if(this.n < 25){//生成中型飞机
this.enemy = enemy2[0];
this.speed = 4;
this.life = 10;
}else{//生成小型飞机
this.enemy = enemy1[0];
this.speed = 6;
}
this.x = Math.floor(Math.random()*(can.width-this.enemy.width));
this.y = -this.enemy.height;
this.width = this.enemy.width;
this.height = this.enemy.height;
this.index = 0 ;//敌机图片切换
this.die = false;//敌机生命状态
this.remove = false;//移除敌机
this.draw = function(){
this.hit();
if(this.die){
if(this.speed == 6){
this.index++;
if(this.index<enemy1.length){
this.enemy = enemy1[this.index];
}else{
//将飞机对象从数组中移除
this.remove = true;
}
}else if(this.speed == 4){
this.index++;
if(this.index<enemy2.length){
this.enemy = enemy2[this.index];
}else{
this.remove = true;
}
}else {
this.index++;
if(this.index<enemy3.length){
this.enemy = enemy3[this.index];
}else{
this.remove = true;
}
}
}
ctx.drawImage(this.enemy,this.x,this.y);
this.y += this.speed;
if(this.y > can.height){
this.remove = true;
}
}
this.hit = function(){
for(var i = 0 ; i < hullet.length ; i++){
var h = hullet[i];
if(this.x+this.width>=h.x&&h.x+h.width>=this.x &&h.y+h.height>=this.y && this.height+this.y >= h.y){
if(--this.life == 0){
this.die = true;//表示当前敌机已经死亡
//记录分数
if(this.speed == 6){
gameScore += 2;
} else if(this.speed == 4){
gameScore += 4;
} else {
gameScore += 10;
}
}
h.remove = true;//当前子弹已经使用过了，可以销毁了
}
}
}
}
//绘制敌机函数
function drawEnemy(){
for(var i = 0 ; i<liveEnemy.length;i++){
if(liveEnemy[i].remove){
liveEnemy.splice(i,1);
}
}
console.log(liveEnemy.length);
for(var i = 0 ; i<liveEnemy.length;i++){
liveEnemy[i].draw();
}
}
//构建子弹对象
var hullet = [];//存储生成的子弹
function Hullet(){
this.x = hero.x + (heroImg[0].width-m.width)/2;
this.y = hero.y - m.height;
this.width = m.width;
this.height = m.height;
this.remove = false;
this.draw = function(){
ctx.drawImage(m,this.x,this.y);
this.y -= this.height;
if(this.y < -this.height){
this.remove = true;
}
}
}
function drawHullet(){
for(var i = 0 ; i < hullet.length ;i++){
if(hullet[i].remove){
hullet.splice(i,1);
}
}
for(var i = 0 ; i < hullet.length;i++){
hullet[i].draw();
}
}
//游戏主引擎
//设置定时器
setInterval(function(){
switch(start){
case START:
console.log("游戏状态为加载状态");
break;
case STARTING:
//等待用户开始背景的绘制
ctx.drawImage(startImg,0,0);
console.log("等待用户开始状态");
break;
case RUNNING:
//绘制运行时背景
paintBg();
//绘制英雄
hero.draw();
//绘制敌机
drawEnemy();
//绘制子弹
drawHullet();
break;
case PAUSE:
drawPause();
break;
case GAMEOVER:
console.log("游戏结束");//将分数绘制到屏幕上
break;
}
},50);
</script>
</body>
</html>
