canvas多关卡轨道射击类小游戏代码

代码语言:html

所属分类:游戏

代码描述:canvas多关卡轨道射击类小游戏代码

代码标签: canvas 关卡 轨道 射击 游戏

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

 
<meta charset="UTF-8">
 

 
 
 
<style>
* {
 
margin: 0;
 
box-sizing: border-box;
 
overflow: hidden;
}

body
{
 
background: #3F2E88;
 
width: 100%;
 
height: 100vh;
 
display: flex;
 
justify-content: center;
 
align-items: center;
}
body canvas
{
 
box-shadow: 0.2em 0.2em 2em #0008;
 
border: none;
 
outline: none;
}
</style>



</head>

<body >
 
<canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/processing.min.js"></script>


 
     
<script  >
var sketchProc = function(processingInstance) {
  with (processingInstance) {
    size(600, 600);
    frameRate(60);    
    smooth();
   
{
    noStroke();
    angleMode = "degrees";
    //textFont(createFont("ink free", 0));
    textFont(createFont("Verdana", 0));
    var lag = false;
    var game;
    var cannon;
} //Defaults

{
    //Key|Button stuff
    var clicked = false;
    var hover = false;
    var keys = [];
    keyPressed = function () {
        keys[keyCode] = true;
    };
    keyReleased = function () {
        keys[keyCode] = false;
    };
    mouseClicked = function () {
        clicked = true;
    };
} //Keys/Mouse

{
    var Button = function(config) {
        this.x = config.pos.x || 0;
        this.y = config.pos.y || 0;
        this.radius = config.radius || 80;
        this.radiusBase = this.radius;
        this.content = config.content || "Home";
        this.page = config.page || "home";
        this.level = config.level || 0;
        this.amplitude = this.radius * 0.1;
        this.colorLight = config.colorLight || color(255, 161, 25);
        this.colorDark = config.colorDark || color(244, 106, 7);
        this.colorLightAlpha = color(red(this.colorLight), green(this.colorLight), blue(this.colorLight), 100);
        this.colorDarkAlpha = color(red(this.colorDark), green(this.colorDark), blue(this.colorDark), 100);
        this.colorHover = color(red(this.colorLight), green(this.colorLight), blue(this.colorLight), 60);
        this.colorHoverOuter = color(red(this.colorLight), green(this.colorLight), blue(this.colorLight), 40);
       
        this.textColor = config.textColor || color(0, 0, 0, 200);
        this.textSize = config.textSize || 20;
        this.angleBase = floor(random(-30, 30));
        this.angle = this.angleBase;
        this.hover = false;
        this.scale = 1;
    };
   
    Button.prototype.update = function() {
        this.scale = abs(sin(radians(frameCount*1.1)) * 0.1) + 1;
    };
   
    Button.prototype.display = function () {
        textSize(this.textSize);
        strokeWeight(1);
        noStroke();

        //circles
        if (dist(mouseX, mouseY, this.x, this.y) <= this.radius / 2) { //hover
            this.hover = true;
            if(clicked) {
                game.page = this.page;
               
                if(this.page === "level") {
                    game.page = "next";
                    game.level = this.level;
                }
                else {
                    game.reset();
                }
            }
           
            this.drawPlanet();
           
        }
        else { //not hover
            this.hover = false;
            this.drawPlanet();
        }
    };
   
    Button.prototype.drawPlanet = function() {
        this.angle++;
        if(this.hover === true) {
            this.angle++;
           
            pushMatrix();
                translate(this.x, this.y);
                scale(this.scale);
               
                fill(this.colorHover);
                ellipse(0, 0, this.radius*1.2, this.radius*1.2);
                fill(this.colorHoverOuter);
                ellipse(0, 0, this.radius*1.4, this.radius*1.4);

                fill(this.colorLight);
                rotate(radians(-frameCount*2));
                ellipse(0, -this.radius*1.2/2, 5, 5);
                ellipse(0, this.radius*1.2/2, 5, 5);
                ellipse(-this.radius*1.2/2, 0, 5, 5);
                ellipse(this.radius*1.2/2, 0, 5, 5);
                rotate(radians(frameCount*4));
                fill(this.colorDark);
                ellipse(0, -this.radius*1.4/2, 5, 5);
                ellipse(0, this.radius*1.4/2, 5, 5);
                ellipse(-this.radius*1.4/2, 0, 5, 5);
                ellipse(this.radius*1.4/2, 0, 5, 5);
            popMatrix();
           
        }
       
        noStroke();
        fill(this.color);
       
        pushMatrix();
            translate(this.x, this.y);
           
            scale(this.scale);
           
            rotate(radians(this.angle));
            //right
            fill(this.colorLight);
            arc(0, 0, this.radius, this.radius, radians(90), radians(270));
            fill(this.colorDark);
            arc(0, 0, this.radius, this.radius, radians(-89), radians(90));
           
            noFill();
            strokeWeight(8 * (this.radius/this.radiusBase));
            strokeCap(ROUND);
           
            stroke(this.colorDarkAlpha);
            line(-this.radius*0.05, -this.radius*0.4, this.radius*0.2, -this.radius*0.4);
            line(-this.radius*0.3, -this.radius*0.2, this.radius*0.2, -this.radius*0.2);
            line(-this.radius*0.1, 0, this.radius*0.2, 0);
            line(-this.radius*0.2, this.radius*0.2, this.radius*0.2, this.radius*0.2);
            line(-this.radius*0.1, this.radius*0.4, this.radius*0.2, this.radius*0.4);
           
            stroke(this.colorLightAlpha);
            line(-this.radius*0.05, -this.radius*0.3, this.radius*0.1, -this.radius*0.3);
            line(-this.radius*0.3, -this.radius*0.1, this.radius*0.2, -this.radius*0.1);
            line(-this.radius*0.1, this.radius*0.1, this.radius*0.3, this.radius*0.1);
            line(-this.radius*0.3, this.radius*0.3, this.radius*0.2, this.radius*0.3);
           
            stroke(this.colorLight);
            strokeWeight(4 * (this.radius/this.radiusBase));
            ellipse(0, 0, this.radius*0.95, this.radius*0.95);
        popMatrix();
       
        textAlign(CENTER, CENTER);
        fill(this.textColor);
        text(this.content, this.x, this.y);
    };
   
    Button.prototype.run = function() {
        this.update();
        this.display();
    };
} //Buttons

{
    var colors = [
        color(255, 255, 255),
        color(104, 200, 38),
        color(1, 168, 210),
        color(244, 105, 4),
        color(117, 39, 149)
    ];    
} //Colors

{
   
    var Star = function(config) {
        this.pos = config.pos || new PVector(random(0, width), random(0, height));
        this.size = config.size || 10;
        this.velocity = config.velocity || new PVector(0, 0);
        this.color = colors[floor(random(0, colors.length))];
        this.r = red(this.color);
        this.b = blue(this.color);
        this.g = green(this.color);
        this.backColor = color(this.r, this.g, this.b, random(50, 100));
    };
   
    Star.prototype.update = function() {
        this.pos.add(this.velocity);
    };
   
    Star.prototype.display = function() {
        noFill();
        stroke(this.backColor);
        strokeWeight(this.size*0.5);
        strokeCap(ROUND);
        pushMatrix();
            translate(this.pos.x, this.pos.y);
            line(0, -this.size/2, 0, this.size/2);
            line(-this.size/2, 0, this.size/2, 0);
        popMatrix();
    };
   
    Star.prototype.run = function() {
        this.update();
        this.display();
    };
   
} //Star

{
   
    var Barrier = function(config) {
        this.pos = config.pos || new PVector(0, 0);
        this.w = config.w || 100;
        this.h = config.h || 20;
        this.color = config.color || color(255, 0, 0);
        this.color2 = config.color2 || color(255, 255, 0);
        this.theta = config.theta || random(0.7, 1.2);
        this.amplitude = config.amplitude || random(0.3, 0.5);
    };
   
    Barrier.prototype.update = function() {
        this.pos.y += sin(radians(frameCount * this.theta)) * this.amplitude;
    };
   
    Barrier.prototype.display = function() {
        noStroke();
        fill(red(this.color), green(this.color), blue(this.color), 200);
        rect(this.pos.x, this.pos.y, this.w, this.h, 5);
        fill(0, 0, 0, 40);
        rect(this.pos.x, this.pos.y + this.h/2, this.w, this.h/2, 5);
    };
   
    Barrier.prototype.run = function() {
        this.update();
        this.display();
    };
   
    Barrier.prototype.collision = function (missile) {
        if (missile.pos.x + missile.size / 2 > this.pos.x &&
            missile.pos.y + missile.size / 2 > this.pos.y &&
            missile.pos.x - missile.size / 2 < this.pos.x + this.w &&
            missile.pos.y - missile.size / 2 < this.pos.y + this.h) {
            game.addExplosion({
                pos: new PVector(missile.pos.x, missile.pos.y),
                backColor: this.color,
                w: 40,
                h: 40
            });
            return true;
        }
        return false;
    };
   
} //Barrier

{
   
    var Oscillator = function(config) {
        this.origin = config.origin || new PVector(width/2, height/2);
        this.angle = config.angle || new PVector(0, 0);
        this.velocity = config.velocity || new PVector(random(-2, 2), random(-2, 2));
        this.amplitude = config.amplitude || new PVector(random(this.origin.x*0.3, this.origin.x*0.5), random(this.origin.y*0.3, this.origin.y*0.5));
        this.radius = this.amplitude.mag()*0.25;
       
        this.color = config.color || colors[floor(random(1, colors.length))];
        this.r = red(this.color);
        this.g = green(this.color);
        this.b = blue(this.color);
       
        this.pos = config.pos || new PVector(0, 0);
       
        this.w = config.w || this.radius;
        this.h = config.h || this.radius;
        this.thetaX = 0.0;
        this.thetaY = 0.0;
        this.amplitude2 = config.amplitude2 || 5.0;
        this.dx = 0.0;
        this.dy = 0.0;
        this.thetaChangeX = random(3, 12);
        this.thetaChangeY = random(3, 12);
    };
   
    Oscillator.prototype.oscillate = function() {
        this.thetaX += this.thetaChangeX;
        this.thetaY += this.thetaChangeY;
        this.dx = sin(radians(this.thetaX)) * this.amplitude2;
        this.dy = sin(radians(this.thetaY)) * this.amplitude2;
        this.w = this.dx + this.radius;
        this.h = this.dy + this.radius;
       
        this.amplitude.mult(1.001);
        this.amplitude.limit(300);
        this.angle.add(this.velocity);
    };
   
    Oscillator.prototype.display = function() {
        this.pos.x = sin(radians(this.angle.x)) * this.amplitude.x;
        this.pos.y = sin(radians(this.angle.y)) * this.amplitude.y;
     
        var v = new PVector(this.pos.x, this.pos.y);
       
        var opacity = map(v.mag(), 0, this.origin.x, 70, 255);
       
        this.pos.add(this.origin);
   
        pushMatrix();
   
        stroke(200, 200, 200, 30);
        strokeWeight(1);
        line(this.origin.x, this.origin.y, this.pos.x, this.pos.y);
        noStroke();
       
        fill(this.r, this.g, this.b, opacity);
        ellipse(this.pos.x, this.pos.y, this.w, this.h);
       
        fill(0, 0, 0, 20);
        arc(this.pos.x, this.pos.y, this.w, this.h, 0, radians(180));
       
        popMatrix();
    };
   
    Oscillator.prototype.run = function() {
        this.oscillate();
        this.display();
    };
   
    Oscillator.prototype.collision = function(obj) {
        var dx = this.pos.x - obj.pos.x;
        var dy = this.pos.y - obj.pos.y;
        var distance = Math.sqrt(dx * dx + dy * dy);
       
        if (distance < this.radius/2 + obj.size/2) {
            game.addExplosion({
                pos: this.pos,
                backColor: this.color,
                w: 40,
                h: 40
            });
           
            return true;
        }
        return false;
    };
   
    var OscillatorSystem = function(config) {
        this.oscillators = [];
        this.num = config.num || 1;
   
        for(var i = 0; i < this.num; i++) {
            this.oscillators.push(new Oscillator({}));
        }
    };
   
    OscillatorSystem.prototype.run = function() {
        for(var i = 0; i < this.oscillators.length; i++) {
            this.oscillators[i].run();
        }
    };
   
    OscillatorSystem.prototype.add = function(n) {
        for(var i = 0; i < n; i++) {
            this.oscillators.push(new Oscillator({}));
        }
    };
   
} //Oscillator

{
   
    var Wave = function(config) {
        this.xSpacing = config.xSpacing || 16;
        this.theta = config.theta || 0.0;
        this.amplitude = config.amplitude || 25.0;
        this.baseHeight = config.baseHeight || height * 0.8;
        this.radius = config.radius || 25;
        this.points = config.points || new Array(width + this.xSpacing);
        this.colors = [
            color(104, 200, 38, 150),
            color(1, 168, 210, 150),
            color(244, 105, 4, 150),
            color(117, 39, 149, 150)
        ];
    };
   
    Wave.prototype.init = function() {
        this.points = new Array(width + this.xSpacing);
       
        var x = this.theta;
        var c;
        for (var i = 0; i < this.points.length; i++) {
            c = this.colors[floor(random(0, this.colors.length))];
            this.points[i] = {
                y: sin(radians(x)) * this.amplitude,
                color: c,
                shade: color(red(c), green(c), blue(c), 50)
            };
            x += 1;
        }
    };
   
    Wave.prototype.update = function() {
        this.theta += 2;
       
        var x = this.theta;
        for (var i = 0; i < this.points.length; i++) {
            this.points[i].y = sin(radians(x)) * this.amplitude;
            x += 1;
        }
    };
   
    Wave.prototype.display = function() {
        noStroke();
       
        for(var x = 0; x < this.points.length; x+= this.xSpacing * 2) {
            fill(this.points[x].shade);
            rect(x - this.radius/4, this.baseHeight + this.points[x].y + this.radius/2, this.radius/2, height);
            fill(this.points[x].color);
            ellipse(x, this.baseHeight + this.points[x].y, this.radius, this.radius);
            fill(0, 0, 0, 40);
            arc(x, this.baseHeight + this.points[x].y, this.radius, this.radius, 0, radians(180));
        }
    };
   
    Wave.prototype.run = function() {
        this.update();
        this.display();
    };

} //Wave

{
   
    var Spiral = function(config) {
        this.pos = config.pos || new PVector(width/2, height/2);
        this.basePos = new PVector(this.pos.x, this.pos.y);
        this.speed = config.speed || random(3, 6);
        this.radius = config.radius || random(20, 40);
        this.xAmp = 0;
        this.yAmp = 0;
        this.xAmpSpeed = random(0.0007, 0.001);
        this.yAmpSpeed = random(0.0007, 0.001);
        this.dir = config.dir || random() < 0.5 ? 1 : -1;
        this.index = 0;
        this.colors = [
            color(104, 200, 38),
            color(1, 168, 210),
            color(244, 105, 4),
            color(117, 39, 149)
        ];
        this.color = config.color || this.colors[floor(random(this.colors.length))];
        this.r = red(this.color);
        this.g = green(this.color);
        this.b = blue(this.color);
    };
   
    Spiral.prototype.update = function() {
        this.index+= this.speed;
        this.pos = new PVector(sin(radians(this.index*this.dir)) * width * this.xAmp + this.basePos.x, -cos(radians(this.index*this.dir)) * height * this.yAmp + this.basePos.y);
       
        this.xAmp+= this.xAmpSpeed;
        this.yAmp+= this.yAmpSpeed;
    };
   
    Spiral.prototype.display = function() {
        noStroke();
       
        fill(this.r, this.g, this.b, 200);
        ellipse(this.pos.x, this.pos.y, this.radius, this.radius);
       
        fill(0, 0, 0, 20);
        arc(this.pos.x, this.pos.y, this.radius, this.radius, 0, radians(180));
    };
   
    Spiral.prototype.collision = function(obj) {
        var dx = this.pos.x - obj.pos.x;
        var dy = this.pos.y - obj.pos.y;
        var distance = Math.sqrt(dx * dx + dy * dy);
       
        if (distance < this.radius/2 + obj.size/2) {
            game.addExplosion({
                pos: this.pos,
                backColor: this.color,
                w: 40,
                h: 40
            });
           
            return true;
        }
        return false;
    };
   
    Spiral.prototype.run = function() {
        this.update();
        this.display();
    };
   
    var SpiralSystem = function(config) {
        this.spirals = [];
        this.trails = [];
    };
   
    SpiralSystem.prototype.update = function() {
        for(var i = this.trails.length-1; i >= 0; i--) {
            if(this.trails[i].timeToLive-- <= 0) {
                this.trails.splice(i, 1);
            }
        }
    };
   
    SpiralSystem.prototype.display = function() {
        noStroke();
        for(var i = this.trails.length-1; i >= 0; i--) {
            var trail = this.trails[i];
            fill(trail.r, trail.g, trail.b, trail.timeToLive);
            ellipse(trail.pos.x, trail.pos.y, trail.radius, trail.radius);
        }
    };
   
    SpiralSystem.prototype.add = function(n) {
        for(var i = 0; i < n; i++) {
            this.spirals.push(new Spiral({
                pos: new PVector(random(width*0.3, width*0.7), random(height*0.3, height*0.5))
            }));
        }
    };
   
    SpiralSystem.prototype.run = function() {
        var n = 0;
        for(var i = this.spirals.length-1; i >= 0; i--) {
            var spiral = this.spirals[i];
           
            if(spiral.pos.x + spiral.radius * 5 < 0 || spiral.pos.x - spiral.radius * 5 > width || spiral.pos.y - spiral.radius * 5 > height || spiral.pos.y + spiral.radius * 5 < 0) {
                this.spirals.splice(i, 1);
                n++;
            }
            else {
                this.trails.push(
                {
                    timeToLive: floor(random(50, 70)),
                    radius: random(spiral.radius*0.2, spiral.radius*0.4),
                    pos: new PVector(spiral.pos.x, spiral.pos.y),
                    r: spiral.r,
                    g: spiral.g,
                    b: spiral.b
                });
               
                spiral.run();
            }
        }
       
        this.add(n);
       
        this.update();
        this.display();
    };

} //Spiral

{
    var Enemy = function(config) {
        this.pos = config.pos || new PVector(width/2, height/2);
        this.radius = config.radius || 30;
        this.dir = config.dir || new PVector(0, 0);
        this.acceleration = config.acceleration || new PVector(0, 0);
        this.angle = config.angle || 0;
        this.rotate = config.rotate || 5;
        this.color = config.color || color(253, 163, 25, 200);
        this.color2 = config.color2 || color(246, 104, 4, 200);
    };
   
    Enemy.prototype.update = function() {
        this.angle+=this.rotate;
        this.pos.add(this.acceleration);    
    };
   
    Enemy.prototype.display = function() {
        noFill();
        strokeWeight(this.radius*0.2);
        strokeCap(ROUND);
        pushMatrix();
            translate(this.pos.x, this.pos.y);
            rotate(radians(this.angle));
            stroke(this.color);
            line(0, -this.radius/3, 0, this.radius/3);
            stroke(this.color2);
            line(-this.radius/3, 0, this.radius/3, 0);
        popMatrix();
    };
   
    Enemy.prototype.run = function() {
        this.update();
        this.display();
    };
   
    Enemy.prototype.collision = function(missile) {
        if (missile.pos.x + missile.size / 2 > this.pos.x &&
            missile.pos.y + missile.size / 2 > this.pos.y &&
            missile.pos.x - missile.size / 2 < this.pos.x + this.radius/2 &&
            missile.pos.y - missile.size / 2 < this.pos.y + this.radius/2) {
               
            game.addExplosion({
                pos: new PVector(this.pos.x + this.radius / 2, this.pos.y + this.radius / 2),
                w: 40,
                h: 40,
                backColor: this.color
            });
           
            return true;
        }
        return false;
    };
   
} //Enemy

{
    var Boss = function(config) {
        this.pos = config.pos || new PVector(width/2, height/2);
        this.basePos = new PVector(this.pos.x, this.pos.y);
        this.radius = config.radius || 80;
        this.baseRadius = this.radius;
        this.color = config.color || color(253, 163, 25, 200);
        this.colorInner = config.colorInner || color(246, 104, 4);
        this.colorHover = color(red(this.color), green(this.color), blue(this.color), 60);
        this.colorHoverOuter = color(red(this.color), green(this.color), blue(this.color), 40);
        this.enemies = [];
        this.angle = 0;
        this.amplitude = 10;
        this.rotate = config.rotate || 5;
        this.lives = config.lives || 10;
        this.forceField = config.forceField || 10;
        this.oscillators = config.oscillators || 0;
        this.enemyFrequency = config.enemyFrequency || 0.04;
    };
   
    Boss.prototype.update = function() {
        this.pos.y = this.basePos.y + (sin(radians(frameCount*1.5)) * this.amplitude);
        this.angle+=this.rotate;
       
        //add new enemy
        if(this.forceField <= 0) {
            this.enemyFrequency = 0.05;  
        }
       
        if(random() < this.enemyFrequency) {
            var xDir = random() < 0.5 ? 1 : -1;
            var yDir = random() < 0.5 ? 1 : -1;
            this.enemies.push(
                new Enemy({
                    pos: new PVector(this.pos.x, this.pos.y),
                    acceleration: new PVector(random(1, 3) * xDir, random(1, 3) * yDir)
                })
            );
        }
       
        for(var i = 0; i < this.enemies.length; i++) {
            this.enemies[i].run();    
        }
    };
   
    Boss.prototype.display = function() {
        if(this.lives > 0) {

            //Force Field
            if(this.forceField > 0) {
                pushMatrix();
                translate(this.pos.x, this.pos.y);
                noFill();
                stroke(this.colorHover);
                ellipse(0, 0, this.radius*1.2, this.radius*1.2);
                stroke(this.colorHoverOuter);
                ellipse(0, 0, this.radius*1.4, this.radius*1.4);
                noStroke();
                fill(this.colorInner);
                rotate(radians(-frameCount*2));
                ellipse(0, -this.radius*1.2/2, 5, 5);
                ellipse(0, this.radius*1.2/2, 5, 5);
                ellipse(-this.radius*1.2/2, 0, 5, 5);
                ellipse(this.radius*1.2/2, 0, 5, 5);
                rotate(radians(frameCount*4));
                fill(this.color);
                ellipse(0, -this.radius*1.4/2, 5, 5);
                ellipse(0, this.radius*1.4/2, 5, 5);
                ellipse(-this.radius*1.4/2, 0, 5, 5);
                ellipse(this.radius*1.4/2, 0, 5, 5);
                popMatrix();
            }
           
            pushMatrix();
                translate(this.pos.x, this.pos.y);
               
                noStroke();
                fill(this.color);
               
                //right
                fill(255, 161, 25);
                arc(0, 0, this.radius, this.radius, radians(90), radians(270));
                fill(244, 106, 7);
                arc(0, 0, this.radius, this.radius, radians(-89), radians(90));
               
                noFill();
                strokeWeight(8);
                strokeCap(ROUND);
               
                stroke(244, 106, 7, 100);
                line(-this.radius*0.05, -this.radius*0.4, this.radius*0.2, -this.radius*0.4);
                line(-this.radius*0.3, -this.radius*0.2, this.radius*0.2, -this.radius*0.2);
                line(-this.radius*0.1, 0, this.radius*0.2, 0);
                line(-this.radius*0.2, this.radius*0.2, this.radius*0.2, this.radius*0.2);
                line(-this.radius*0.1, this.radius*0.4, this.radius*0.2, this.radius*0.4);
               
                stroke(255, 161, 25, 100);
                line(-this.radius*0.05, -this.radius*0.3, this.radius*0.1, -this.radius*0.3);
                line(-this.radius*0.3, -this.radius*0.1, this.radius*0.2, -this.radius*0.1);
                line(-this.radius*0.1, this.radius*0.1, this.radius*0.3, this.radius*0.1);
                line(-this.radius*0.3, this.radius*0.3, this.radius*0.2, this.radius*0.3);
               
                stroke(255, 161, 25);
                strokeWeight(4);
                ellipse(0, 0, this.radius*0.95, this.radius*0.95);
            popMatrix();
           
            pushMatrix();
                translate(this.pos.x, this.pos.y);
                fill(0, 0, 0, 100);
                textSize(20);
                textAlign(CENTER, CENTER);
                text(this.lives, 0, 0);
            popMatrix();
        }
    };
   
    Boss.prototype.run = function() {
        this.update();
        this.display();
    };
   
    Boss.prototype.collision = function (missile) {
        var dx = this.pos.x - missile.pos.x;
        var dy = this.pos.y - missile.pos.y;
        var distance = Math.sqrt(dx * dx + dy * dy);
       
        if (distance < this.radius/2 + missile.size) {
            if(this.forceField <= 0) {
                this.lives--;
            }
            return true;
        }
        return false;
    };

} //Boss

{
    var Alien = function(config) {
        this.index = config.index || 0;
        this.pos = new PVector(sin(radians(this.index)) * width * 0.46 + width/2, -cos(radians(this.index)) * height * 0.46 + height/2);
        this.w = config.w || random(20, 50);
        this.h = config.h || random(20, 50);
        this.thetaX = 0.0;
        this.thetaY = 0.0;
        this.amplitude = config.amplitude || 5.0;
        this.dx = 0.0;
        this.dy = 0.0;
        this.base = random(30, 50);
        this.thetaChangeX = random(3, 12);
        this.thetaChangeY = random(3, 12);
        this.color = config.color || colors[floor(random(1, colors.length))];
        this.color = color(red(this.color), green(this.color), blue(this.color), random(100, 200));
        this.attack = false;
        this.timeToAttack = config.timeToAttack || floor(random(100, 1000));
        this.dead = false;
        this.attackPos = new PVector(0, 0);
        this.velocity = config.velocity || new PVector(0, 0);
        this.target = config.direction || new PVector(width/2, height/2);
        this.topspeed = 2;
    };
   
    Alien.prototype.setDirection = function() {
        this.acceleration = PVector.sub(this.attackPos, this.target);
        this.acceleration.normalize();
        this.acceleration.mult(2);
    };
   
    Alien.prototype.update = function() {
        this.thetaX += this.thetaChangeX;
        this.thetaY += this.thetaChangeY;
        this.dx = sin(radians(this.thetaX)) * this.amplitude;
        this.dy = sin(radians(this.thetaY)) * this.amplitude;
        this.w = this.dx + this.base;
        this.h = this.dy + this.base;
       
        if(this.attack === true && this.dead === false) {
            this.velocity.add(this.acceleration);
            this.velocity.limit(this.topspeed);
            this.attackPos.sub(this.velocity);  
        }
    };
   
    Alien.prototype.display = function() {
        noStroke();
        if(this.attack === false) {
            fill(this.color);
        }
        else {
            fill(41, 40, 41);
        }
        ellipse(this.pos.x, this.pos.y, this.w, this.h);
        fill(0, 0, 0, 20);
        arc(this.pos.x, this.pos.y, this.w, this.h, 0, radians(180));
       
        if(this.attack === true && this.dead === false) {
            fill(this.color);
            ellipse(this.attackPos.x, this.attackPos.y, this.w, this.h);
            fill(0, 0, 0, 20);
            arc(this.attackPos.x, this.attackPos.y, this.w, this.h, 0, radians(180));
        }
    };
   
    Alien.prototype.run = function() {
        this.update();
        this.display();
    };
   
    Alien.prototype.collision = function (missile) {
        if (missile.pos.x + missile.size / 2 > this.attackPos.x &&
            missile.pos.y + missile.size / 2 > this.attackPos.y &&
            missile.pos.x - missile.size / 2 < this.attackPos.x + this.w &&
            missile.pos.y - missile.size / 2 < this.attackPos.y + this.h) {
            game.addExplosion({
                pos: this.attackPos,
                backColor: this.color,
                w: 40,
                h:40
            });
            return true;
        }
        return false;
    };
   
    var AlienArmy = function(config) {
        this.killed = 0;
        this.diameter = config.diameter || width * 0.95;
        this.color = config.color || color(random(100, 160), random(100, 160), random(100, 160), random(100, 150));
        this.aliens = [];
       
        for(var i = 0; i < 360; i+= 10) {
            this.aliens.push(
                new Alien({
                    index: i
                }));
        }
       
        this.angle = config.angle || 0;
        this.speed = config.speed || 0.5;
    };
   
    AlienArmy.prototype.update = function() {
        for(var i = 0; i < this.aliens.length; i++) {
            var alien = this.aliens[i];
           
            alien.index+= 0.2;
            alien.pos = new PVector(sin(radians(alien.index)) * width * 0.46 + width/2, -cos(radians(alien.index)) * height * 0.46 + height/2);
           
            if(alien.attack === false && alien.timeToAttack <= 0) {
                alien.attack = true;
                alien.attackPos = new PVector(alien.pos.x, alien.pos.y);
                alien.setDirection();
            }
            else {
                alien.timeToAttack-= this.speed;  
            }
        }
    };
   
    AlienArmy.prototype.display = function() {
        for(var i = 0; i < this.aliens.length; i++) {
            this.aliens[i].run();
        }
    };
   
    AlienArmy.prototype.run = function() {
        this.update();
        this.display();
    };
} //Alien

{
    var Blob = function(config) {
        this.pos = config.pos || new PVector(random(width*0.1, width*0.9), -height*0.25);
        this.radius = config.radius || random(15, 30);
        this.amplitude = config.amplitude || 0.2;
        this.color = config.color || colors[floor(random(1, colors.length - 1))];
        this.color = color(red(this.color), green(this.color), blue(this.color), random(100, 200));
       
        this.velocity = config.velocity || new PVector(0, 0);
        this.target = config.target || new PVector(width/2, height/2);
        this.topspeed = config.topspeed || 3;
       
        this.t = PVector.sub(this.target, this.pos);
        this.acceleration = new PVector(this.t.x, this.t.y);
        this.acceleration.normalize();
        this.acceleration.mult(this.topspeed);
    };
   
    Blob.prototype.applyForce = function (force) {
        this.acceleration.add(force);
    };
   
    Blob.prototype.update = function() {
        this.pos.add(this.acceleration);
    };
   
    Blob.prototype.display = function() {
        noStroke();
       
        fill(this.color);
        ellipse(this.pos.x, this.pos.y, this.radius, this.radius);
        fill(0, 0, 0, 20);
        arc(this.pos.x, this.pos.y, this.radius, this.radius, 0, radians(180));
    };
   
    Blob.prototype.run = function() {
        this.update();
        this.display();
    };
   
    Blob.prototype.collision = function (obj) {
        var dx = this.pos.x - obj.pos.x;
        var dy = this.pos.y - obj.pos.y;
        var distance = Math.sqrt(dx * dx + dy * dy);
       
        if (distance < this.radius/2 + obj.size/2) {
            game.addExplosion({
                pos: this.pos,
                backColor: this.color,
                w: 40,
                h: 40
            });
           
            return true;
        }
        return false;
    };
   
    var Blobs = function(config) {
        this.topspeed = config.topspeed || 3;
        this.blobsArray = [];
        this.trails = [];
       
        this.pos = config.pos || new PVector(width/2, height/2);
        this.radius = config.radius || 40;
       
        this.frequency = lag === true ? 3 : 2;
    };
   
    Blobs.prototype.addBlob = function(cannon) {
        this.blobsArray.push(
            new Blob({
                target: new PVector(cannon.pos.x, cannon.pos.y),
                topspeed: this.topspeed,
            })
        );
    };
   
    Blobs.prototype.update = function() {
        for(var i = this.blobsArray.length - 1; i >= 0; i--) {
            var blob = this.blobsArray[i];
           
            //if(blob.pos.y >= blob.target.y) {
            if(blob.pos.y >= height * 1.1) {
                this.blobsArray.sp.........完整代码请登录后点击上方下载按钮下载查看

网友评论0