运行图片
飞机背景素材：https://www.aigei.com/view/64573.html
代码如下
//获取画笔和画布
var huabu = document.getElementsByTagName("canvas")[0]
var ctx = huabu.getContext("2d")
//定义初始化状态，首页的运动背景还有logo
var strat = 0;//开始阶段
var strating = 1;//正式开始阶段
var running = 2;//运动阶段
var stop = 3;//暂停阶段
var gameover = 4; //结束阶段
var fs=0;/获得的分数
var sm=100;/生命值
var state = strat;
var width = huabu.width;//画布的宽度
var height = huabu.height;//高度
//创建背景图片 定义图片所需要的属性还有方法
var bg = new Image();
bg.src = "img/background.png"
var bgData = {
img: bg,
width: 450,
height: 600,
}
function Bg(params) {
this.img = params.img;
this.width = params.width;
this.height = params.height;
this.x = 0;
this.y = 0;
this.y1 = -this.height;
//绘制出场图片
this.paint = function () {
ctx.drawImage(this.img, this.x, this.y);
ctx.drawImage(this.img, this.x, this.y1);
}
//背景运动
this.sprot = function () {
this.y++;
this.y1++;
if (this.y == this.height) {
this.y = -this.height
}
if (this.y1 == this.height) {
this.y1 = -this.height;
}
}
}
//定义小飞机加载的属性和方法
var bg1 = new Bg(bgData);
var bg2 = new Image()
bg2.src = "img/start.png"
//小飞机加载状态 将出场的图片地址存入数组
var arr = ["img/game_loading1.png", "img/game_loading2.png", "img/game_loading3.png", "img/game_loading4.png"]
var imgArr = []
for (var i = 0; i < arr.length; i++) {
imgArr[i] = new Image();
imgArr[i].src = arr[i];
}
var myfly = {
imgs: imgArr,
width: 135,
height: 131,
length: imgArr.length
}
function Fly(params) {
this.imgs = params.imgs;
this.width = params.width;
this.height = params.height;
this.length = params.length;
this.index = 0;
this.time = 0;
this.paint = function () {
ctx.drawImage(this.imgs[this.index],0, height - this.height);
}
this.sprot = function () {
this.time++;
if (this.time % 8 == 0) {
this.index++;
if(this.index==3){
state = 2;//当加载完毕后改变飞机进入游戏的状态
}
}
}
}
var a1 = new Fly(myfly)
//点击改变进入游戏的状态
huabu.onclick = function () {
if (state == 0) {
state = 1;
}
console.log(state)
}
//我方飞机
var hero = new Image();
hero.src = "zdj.png"
var hero1 = {
width: 135,
height: 131,
imgs: hero,
}
function Hero(parmes) {
this.imgs = parmes.imgs;
this.width = parmes.width;
this.height = parmes.height;
this.length = parmes.length;
this.x = (width - this.width) / 2;
this.y = height - this.height;
this.time = 0;
this.paint = function () {
ctx.drawImage(this.imgs, this.x, this.y);
}
this.shoot = function () {
if (this.time % 5 == 0) {
bullets.push(new Bullet(bulletObj));
}
}
}
var myHero = new Hero(hero1)
//移动
huabu.onmousemove = function (e) {
if (state == 2) {
var x = e.offsetX;
var y = e.offsetY;
myHero.x = x - myHero.width / 2;
myHero.y = y - myHero.height / 2;
}
}
//子弹
var bullet = new Image();
bullet.src = "zidan.png"
var bulletObj = {
imgs: bullet,
width: 128,
height: 128,
}
function Bullet(parmes) {
this.imgs = parmes.imgs;
this.width = parmes.width;
this.height = parmes.height;
this.x = myHero.x + myHero.width / 2 - this.width / 2;
this.y = myHero.y - this.height;
this.down = false;
this.paint = function () {
ctx.drawImage(this.imgs, this.x, this.y);
}
this.sprot = function () {
this.y -= 5;
}
}
var myBullet = new Bullet(bulletObj);
//子弹放入弹夹
var bullets = [];
function myshoot1() {
for (var i = 0; i < bullets.length; i++) {
bullets[i].paint();
}
}
function myshoot2() {
for (var i = 0; i < bullets.length; i++) {
bullets[i].sprot();
}
}
// 敌方飞机
//小敌人飞机
var drfj = [];
var dr = ["dr.png", "img/enemy1_down3.png", "img/enemy1_down4.png"]
for (var i = 0; i < dr.length; i++) {
drfj[i] = new Image();
drfj[i].src = dr[i];
}
var drObj = {
imgs: drfj,
width: 50,
height: 70,
length:drfj.length,
}
function Dffj(parmes) {
this.imgs = parmes.imgs;
this.width = parmes.width;
this.height = parmes.height;
this.length = parmes.length;
this.x = Math.random() * (width - this.width);
this.y = -this.height;
this.index = 0;
this.down = false;
this.over = false;
this.paint = function () {
ctx.drawImage(this.imgs[this.index], this.x, this.y)
}
this.sprot = function () {
this.y++;
if (this.down) {
this.index++;
if (this.index == this.length) {
this.index = this.index - 1;
this.over = true;
}
}
}
this.boom = function(obj) {
return this.x <= obj.x && this.x + this.width >= obj.x && this.y + this.height >= obj.y
}
}
//敌人大飞机
var drdfj = [];
var drDAll = ["dfj.png", "img/enemy1_down3.png", "img/enemy1_down4.png"];
for (var i = 0; i < drDAll.length; i++) {
drdfj[i] = new Image();
drdfj[i].src = drDAll[i];
}
var drBObj = {
imgs: drdfj,
width: 234,
height: 187,
length:drfj.length,
}
function DDfj(parmes) {
this.imgs = parmes.imgs;
this.width = parmes.width;
this.height = parmes.height;
this.length = parmes.length;
this.x = Math.random() * (width - this.width);
this.y = -this.height;
this.index = 0;
this.down = false;
this.over = false;
this.paint = function () {
ctx.drawImage(this.imgs[this.index], this.x, this.y)
}
this.sprot = function () {
this.y++;
if (this.down) {
this.index++;
if (this.index == this.length) {
this.index = this.index - 1;
this.over = true;
}
}
}
this.boom = function(obj) {
return this.x <= obj.x && this.x + this.width >= obj.x && this.y + this.height >= obj.y
}
}
//敌人中飞机
var drzfj=[];
var drzfjAll=["zfj.png","img/enemy1_down3.png", "img/enemy1_down4.png"]
for (var i = 0; i < drzfjAll.length; i++) {
drzfj[i] = new Image();
drzfj[i].src = drzfjAll[i];
}
var drZObj = {
imgs: drzfj,
width: 194,
height: 134,
length:drzfj.length,
}
function DZfj(parmes) {
this.imgs = parmes.imgs;
this.width = parmes.width;
this.height = parmes.height;
this.length = parmes.length;
this.x = Math.random() * (width - this.width);
this.y = -this.height;
this.index = 0;
this.down = false;
this.over = false;
this.paint = function () {
ctx.drawImage(this.imgs[this.index],this.x, this.y)
}
this.sprot = function () {
this.y++;
if (this.down) {
this.index++;
if (this.index == this.length) {
this.index = this.index - 1;
this.over = true;
}
}
}
this.boom = function(obj) {
return this.x <= obj.x && this.x + this.width >= obj.x && this.y + this.height >= obj.y
}
}
var drzfjAll=[];
var drAll=[];
var drDAll=[];
function pushDr() {
var i = (Math.random()*10).toFixed(1);
if (i ==1.1) {
drAll.push(new Dffj(drObj));
} else if (i==4.1) {
drDAll.push(new DDfj(drBObj))
} else if(i==9.1){
drzfjAll.push(new DZfj(drZObj))
}
}
function drDPaint() {
for (var i = 0; i < drDAll.length; i++) {
drDAll[i].paint();
}
}
function drDSport() {
for (var i = 0; i < drDAll.length; i++) {
drDAll[i].sprot();
}
}
function drZPaint() {
for (var i = 0; i < drzfjAll.length; i++) {
drzfjAll[i].paint();
}
}
function drZSport() {
for (var i = 0; i < drzfjAll.length; i++) {
drzfjAll[i].sprot();
}
}
function drPaint() {
for (var i = 0; i < drAll.length; i++) {
drAll[i].paint();
}
}
function drSport() {
for (var i = 0; i < drAll.length; i++) {
drAll[i].sprot();
}
}
//zanting
huabu.onmouseleave = function () {
if (state == 2) {
state = 3;
}
}
huabu.onmouseenter = function () {
if (state == 3) {
state = 2;
}
}
var pause = new Image();
pause.src = "img/game_pause_nor.png";
function DcheckHit() {
for (var i = 0; i < drDAll.length; i++) {
var flag = drDAll[i].boom(myHero);
if (flag) {
drDAll[i].down = true;
}
for (var j = 0; j < bullets.length; j++) {
var flag1 = drDAll[i].boom(bullets[j]);
if (flag1) {
drDAll[i].down = true;
bullets[j].down = true;
}
}
}
}
function drdDelet(){
for(var i=0;i<drDAll.length;i++){
if(drDAll[i].over||drDAll[i].y==height){
drDAll.splice(i,1);
}
}
}
function ZcheckHit() {
for (var i = 0; i < drzfjAll.length; i++) {
var flag = drzfjAll[i].boom(myHero);
if (flag) {
drzfjAll[i].down = true;
}
for (var j = 0; j < bullets.length; j++) {
var flag1 = drzfjAll[i].boom(bullets[j]);
if (flag1) {
drzfjAll[i].down = true;
bullets[j].down = true;
}
}
}
}
function Zdrdelet(){
for(var i=0;i<drzfjAll.length;i++){
if(drzfjAll[i].over||drzfjAll[i].y==height){
drzfjAll.splice(i,1);
}
}
}
function checkHit() {
for (var i = 0; i < drAll.length; i++) {
var flag = drAll[i].boom(myHero);
if (flag) {
drAll[i].down = true;
}
for (var j = 0; j < bullets.length; j++) {
var flag1 = drAll[i].boom(bullets[j]);
if (flag1) {
drAll[i].down = true;
bullets[j].down = true;
}
}
}
}
//分数
function fenshu(){
ctx.font="30px 微软雅黑";
ctx.fillText("分数:"+fs,0,100)
}
//生命值
function text(){
ctx.font="30px 微软雅黑";
ctx.fillText("生命:"+sm,0,125)
}
function drdelet(){
for(var i=0;i<drAll.length;i++){
if(drAll[i].over||drAll[i].y==height){
drAll.splice(i,1);
fs+=5;
}
}
}
function pengboom(){
for(var i=0;i<drAll.length;i++){
var flag1=drAll[i].boom(myHero);
if(flag1){
sm-=1;
if(sm==0){
state=4
}
}
}
}
//子弹删除
function bulletdelet(){
for(var i=0;i<bullets.length;i++){
if(bullets[i].down||bullets[i].y==-bullets[i].height){
bullets.splice(i,1);
}
}
}
setInterval(function () {
ctx.clearRect(0, 0, width, height)
bg1.paint();
bg1.sprot();
if (state == 0) {
ctx.drawImage(bg2, 30, 30)
}
else if (state == 1) {
a1.sprot();
a1.paint();
} else if (state == 2) {
myHero.paint();
myHero.paint();
myHero.shoot();
myshoot1();
myshoot2();
bulletdelet();
pushDr();
drPaint();
drSport();
drdelet();
checkHit();
pushDr();
drDPaint();
drDSport();
DcheckHit();
drdDelet();
pushDr();
drZPaint();
drZSport();
ZcheckHit();
Zdrdelet();
text();
fenshu();
pengboom()
}else if(state==3){
myHero.paint();
myshoot1();
drSport();
ctx.drawImage(pause,210,375)
}
else if(state==4){
// myHero.paint();
myshoot1();
drSport();
ctx.fillStyle="black"
ctx.fillText("GAME OVER !!!",150,300)
ctx.fillStyle="red"
ctx.fillText("请刷新后再开始哦~",100,350)
}
}, 30)
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
