微信打飞机.gif
对象：主机、子弹、敌机
动画：画、动
碰撞：主机碰撞敌机、子弹碰撞敌机（像素碰撞--性能问题）
玩法、声音：（选做）
普通碰撞
图片预加载
var imgArr = {
"bg":"img/background.png",
"herofly":"img/herofly.png",
"bullet1":"img/bullet1.png",
"bullet2":"img/bullet2.png",
"enemy1":"img/enemy1.png",
"enemy2":"img/enemy2.png",
"enemy3":"img/enemy3.png",
"prop":"img/prop.png"
};
var imgLength = 0;
for(var i in imgArr){
imgLength++;
}
var loadArr = {};
var num = 0;
for(let i in imgArr){
var img = new Image();
img.src = imgArr[i];
img.onload = function(){
loadArr[i] = this;
num++;
if(num>=imgLength){
main(loadArr);
}
}
}
function main(loadArr){
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
canvas.width = loadArr.bg.width;
canvas.height = loadArr.bg.height;
var alive = document.querySelector("#progress div");
var aliveStyle =alive.currentStyle ? alive.currentStyle : window.getComputedStyle(alive,null);
var scoreObj = document.querySelector("#score span");
var score = 0;
//主机对象构造函数
function Hero(x,y,blood,obj){
this.x = x;
this.y = y;
this.blood = blood;
this.obj = obj;
this.w = loadArr.herofly.width/5;
this.h = loadArr.herofly.height;
this.index = 0;
this.num = 0;
this.dis = "";
}
Hero.prototype.draw = function(){
this.num++;
//主机爆炸
if(this.blood<=0){
if(this.num%10 == 0){
this.index++;
}
}
context.drawImage(this.obj,(loadArr.herofly.width/5)*this.index,0,this.w,this.h,this.x,this.y,this.w,this.h);
}
Hero.prototype.move = function(){
switch(this.dis){
case "right":
this.x+=3;
if(this.x>=canvas.width-this.w){
this.x = canvas.width-this.w;
}
break;
case "left":
this.x-=3;
if(this.x<=0){
this.x=0;
}
break;
case "up":
this.y-=3;
if(this.y<=0){
this.y = 0;
}
break;
case "down":
this.y+=3;
if(this.y>=canvas.height - this.h){
this.y = canvas.height-this.h;
}
break;
default:
break;
}
}
//子弹对象构造函数
function Bullet(x,y,power,obj,speed){
this.x = x;
this.y = y;
this.power = power;
this.obj = obj;
this.w = obj.width;
this.h = obj.height;
this.speed = speed;
}
Bullet.prototype.draw = function(){
context.drawImage(this.obj,0,0,this.w,this.h,this.x,this.y,this.w,this.h)
}
Bullet.prototype.move = function(){
this.y -= this.speed;
for(var j=0;jenemy[j].x&&this.yenemy[j].y){
var auEnemy = new Audio();
auEnemy.autoplay = "autoplay";
if(enemy[j].count==5){
enemy[j].blood-=30;
auEnemy.src = "audio/enemy1_down.mp3";
}else if(enemy[j].count == 6){
enemy[j].blood -=25;
auEnemy.src = "audio/enemy2_down.mp3";
}else if(enemy[j].count == 10){
enemy[j].blood -= 10;
auEnemy.src = "audio/enemy3_down.mp3";
}
document.getElementsByTagName("body")[0].appendChild(auEnemy);
setTimeout(function(){
auEnemy.remove();
},1000)
if(enemy[j].count>3){
this.y = -this.h;
}
if(enemy[j].index>=enemy[j].count-2&&enemy[j].count>3){
if(enemy[j].count == 5){
score += 10;
}else if(enemy[j].count == 6){
score += 20;
}else if(enemy[j].count == 10){
score += 30;
}
enemy[j].y = canvas.height;
// console.log(scoreObj.innerHTML);
}
}
}
}
//清除子弹
Bullet.prototype.isClear = function(){
if(this.y<=-this.h){
return true;
}else{
return false;
}
}
//敌机对象构造函数
function Enemy(obj,x,y,w,h,speed){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.obj = obj;
this.speed = speed;
this.blood = 100;
this.index = 0;
this.num = 0;
this.count = 0;
}
Enemy.prototype.draw = function(){
this.num++;
if(this.blood<=50&&this.count>3){
if(this.num%3==0){
this.index++;
}
}
context.drawImage(this.obj,this.index*this.w,0,this.w,this.h,this.x,this.y,this.w,this.h);
}
Enemy.prototype.move = function(){
this.y += this.speed;
//敌机与主机碰撞
if(this.xnewHero.x&&this.ynewHero.y){
if(isHero){
if(_this.count>3){
newHero.blood -= 20;
alive.style.width = parseInt(aliveStyle.width) - 30 +"px";
isHero = false;
}else{
if(_this.count == 0){
bulletObj = loadArr.bullet1;
for(var k=0;k=canvas.height){
return true;
}else{
return false;
}
}
//主机实例化
var x = 120;
var y = canvas.height-loadArr.herofly.height;
newHero = new Hero(x,y,100,loadArr.herofly);
console.log(newHero);
newHero.draw();
//键盘控制上下左右
document.onkeydown = function(e){
var ev = window.event || e;
switch(ev.keyCode){
case 37:
newHero.dis = "left";
break;
case 38:
newHero.dis = "up";
break;
case 39:
newHero.dis = "right";
break;
case 40:
newHero.dis = "down";
break;
default:
newHero.dis="";
break;
}
}
document.onkeyup = function(){
newHero.dis = "";
}
//子弹实例化
bulletObj = loadArr.bullet1;
var newBullet = new Bullet(newHero.x+(newHero.w/2)-bulletObj.width/2,y-10,2,loadArr.bullet1,2);
newBullet.draw();
//存放子弹的容器
bullet = [];
enemy = [];
var count = 0;
var bgY = 0;
isHero = true;
function act(){
count++;
//清空画布
context.clearRect(0,0,canvas.width,canvas.height);
//背景
drawBg();
//主机
newHero.draw();
newHero.move();
//敌机
if(count%60==0){
var rand = randNum(0,11);
// console.log(rand);
if(rand<=5){
var enemyW = loadArr.enemy1.width/5;
var enemyX = randNum(0,canvas.width-enemyW+1);
var newEnemy = new Enemy(loadArr.enemy1,enemyX,-loadArr.enemy1.height,enemyW,loadArr.enemy1.height,3);
newEnemy.count = 5;
}else if(rand>5 && rand<8){
var enemyW = loadArr.enemy2.width/6;
var enemyX = randNum(0,canvas.width-enemyW+1);
var newEnemy = new Enemy(loadArr.enemy2,enemyX,-loadArr.enemy2.height,enemyW,loadArr.enemy2.height,2);
newEnemy.count = 6;
}else if(rand==8){
var enemyW = loadArr.enemy3.width/10;
var enemyX = randNum(0,canvas.width-enemyW+1);
var newEnemy = new Enemy(loadArr.enemy3,enemyX,-loadArr.enemy3.height,enemyW,loadArr.enemy3.height,1);
newEnemy.count = 10;
}else{
var rands = randNum(0,3);
var enemyW = loadArr.prop.width/3;
var enemyX = randNum(0,canvas.width-enemyW+1);
var newEnemy = new Enemy(loadArr.prop,enemyX,-loadArr.prop.height,enemyW,loadArr.prop.height,2);
newEnemy.count = rands;
newEnemy.index = rands;
}
enemy.push(newEnemy);
}
for(var i=0;i=4){
cancelAnimationFrame(res);
document.getElementById("mask").style.display = "block";
document.querySelector("#mask audio").autoplay = "autoplay";
document.querySelector("#gameStart").autoplay = "";
document.querySelector("#endScore span").innerHTML = score;
}
}
act();
function drawBg(){
//画背景
bgY++;
if(bgY>canvas.height){
bgY=0;
}
context.drawImage(loadArr.bg,0,bgY);
context.drawImage(loadArr.bg,0,bgY-canvas.height);
}
}
随机函数
function randNum(min,max){
return parseInt(Math.random()*(max-min)+min);
}