processing实现canvas万圣节鬼屋跳跃射击闯关类游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：processing实现canvas万圣节鬼屋跳跃射击闯关类游戏代码，使用箭头键向左、向右和跳跃，按A和D键射击，将敌人从左、右、上方和下方击退，您只有有限数量的子弹，要重新装弹，请确保收集更多的弹药，每个级别都有一定数量的怪物需要摧毁，然后才能移动到下一级别，如果您想玩特定级别，您始终可以直接转到级别页面中的每个级别。
代码标签： processing canvas 万圣节鬼屋跳跃射击游戏闯关代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

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

body {
  background: #222;
  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();
    
{
    /**/// // Do not remove this line
    angleMode = "radians";
    
    textAlign(CENTER, CENTER);
    textFont(createFont("Verdana"));
    
    var game, player;
} //Globals

{
    //Key|Button stuff
    var clicked = false, 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.x || 0;
        this.y = config.y || 0;
        this.size = config.size || 100;
        this.content = config.content || "Home";
        this.page = config.page || "home";
        this.level = config.level || 0;
        this.textSize = config.textSize || this.size * 0.2;
        this.borderColor = color(119, 22, 22, 30);
        this.backColor = color(119, 22, 22, 200);
        this.textColor = color(245, 242, 242, 150);
        this.backColorHover = color(50, 50, 50, 200);
        this.textColorHover = color(200, 200, 200, 200);
        this.growth = 0;
    };
    
    Button.prototype.draw = function () {
        textSize(this.textSize + (this.growth * 0.1));
        noStroke();

        //circles
        if (dist(mouseX, mouseY, this.x, this.y) <= this.size / 2) { //hover
            this.growth = constrain(this.growth + 0.5, 0, 10);
            if(clicked) {
                game.page = this.page;
                if(this.page === "level") {
                    game.level = this.level;
                }
                game.reset();
            }
            pushStyle();
                textAlign(CENTER, CENTER);
                fill(this.backColorHover);
                stroke(this.borderColor);
                strokeWeight(this.size * 0.1);
                ellipse(this.x, this.y, this.size + this.growth, this.size + this.growth);
                fill(this.textColorHover);
                text(this.content, this.x, this.y);
            popStyle();
        }
        else { //not hover
            this.growth = constrain(this.growth - 0.5, 0, 10);
            pushStyle();
                textAlign(CENTER, CENTER);
                fill(this.backColor);
                stroke(this.borderColor);
                strokeWeight(2);
                noStroke();
                ellipse(this.x, this.y, this.size + this.growth, this.size + this.growth);
                fill(this.textColor);
                text(this.content, this.x, this.y);
            popStyle();
        }
    };
} //Buttons

{
    //Coin object
    var Coin = function(x, y, w, h, timeToLive) {
        this.pos = new PVector(x, y);
        this.w = w || 5;
        this.h = h || 5;
        this.timeToLive = timeToLive || 200;
    };
    
    Coin.prototype.update = function() {
        this.timeToLive--;
    };
    
    //Bone Object - Inherits from Coin
    var Bone = function(x, y) {
        this.w = 15;
        this.h = 3;
        this.timeToLive = 200;
        Coin.call(this, x, y, this.w, this.h, this.timeToLive);
    };
    
    Bone.prototype = Object.create(Coin.prototype);
    
    Bone.prototype.display = function() {
        fill(200, 200, 200, 200);
        rect(this.pos.x, this.pos.y, this.w, this.h, 5);
        ellipse(this.pos.x, this.pos.y+this.h/2, 5, 6);
        ellipse(this.pos.x, this.pos.y-this.h/2, 6, 5);
        
        ellipse(this.pos.x + this.w, this.pos.y+this.h/2, 6, 5);
        ellipse(this.pos.x + this.w, this.pos.y-this.h/2, 5, 6);
    };
    
    Bone.prototype.run = function() {
        this.update();
        this.display();
    };
} //Coins

{
    //Ammo Object
    var Ammo = function(x, y) {
        this.pos = new PVector(x, y);
        this.w = 36;
        this.h = 30;
        this.timeToLive = 200;
    };
    
    Ammo.prototype.update = function() {
        this.pos.y = constrain(this.pos.y + 3, -50, 470);
        if(this.pos.y === 470) {
            this.timeToLive--;
        }
    };
    
    Ammo.prototype.display = function() {
        noStroke();
        strokeWeight(1);
        stroke(222, 222, 222, 30);
        fill(20, 19, 19, 200);
        rect(this.pos.x, this.pos.y, this.w, this.h, 2);
        fill(240, 240, 240);
        textSize(8);
        textAlign(CENTER, CENTER);
        text("AMMO", this.pos.x + this.w/2, this.pos.y + this.h/2);
    };
    
    Ammo.prototype.run = function() {
        this.update();
        this.display();
    };
} //Ammo

{
    var Cross = function(config) {
        this.pos = config.pos || new PVector(0, 0);
        this.scale = config.scale || new PVector(1, 1);
        this.angle = config.angle || 0;
        this.lightColor = color(92, 94, 92);
        this.darkColor = color(87, 89, 87);
    };
    
    Cross.prototype.display = function() {
        noStroke();
        fill(this.lightColor);
        pushMatrix();
            translate(this.pos.x, this.pos.y);
            scale(this.scale.x, this.scale.y);
            rotate(radians(this.angle));
            rect(-10, 0, 20, 100);
            rect(-30, 20, 60, 20);
            
            fill(this.darkColor);
            rect(0, 0, 10, 100);
            rect(0, 20, 30, 20);
        popMatrix();
    };
} //Cross

{
    var GraveStone = function(config) {
        this.pos = config.pos || new PVector(0, 0);
        this.scale = config.scale || new PVector(1, 1);
        this.angle = config.angle || 0;
        this.lightColor = color(132, 135, 132);
        this.darkColor = color(123, 128, 123);
    };
    
    GraveStone.prototype.display = function() {
        noStroke();
        fill(this.lightColor);
        pushMatrix();
            translate(this.pos.x, this.pos.y);
            scale(this.scale.x, this.scale.y);
            rotate(radians(this.angle));
            arc(0, 0, 150, 120, 181, 360);
            rect(-75, 0, 150, 100);
            
            fill(this.darkColor);
            arc(0, 0, 150, 120, 271, 360);
            rect(0, 0, 75, 100);
            
            pushStyle();
                textSize(40);
                fill(59, 57, 57);
                textAlign(CENTER, CENTER);
                text("R.I.P", 0, 0);
            popStyle();
        popMatrix();
    };
} //Gravestone

{
    //Spider Web Object
    var SpiderWeb = function(config) {
        this.pos = config.pos || new PVector(0, 0);
        this.scale = config.scale || new PVector(1, 1);
        this.webColor = color(255, 255, 255, 50);
    };
    
    SpiderWeb.prototype.display = function() {
        noFill();
        strokeWeight(2);
        stroke(this.webColor);
        
        pushMatrix();
        translate(this.pos.x, this.pos.y);
        scale(this.scale.x, this.scale.y);
        
        beginShape();
        vertex(320, 80);
        bezierVertex(280, 53, 270, 53, 220, 0);
        endShape();
        
        beginShape();
        vertex(320, 80);
        bezierVertex(320, 63, 300, 53, 290, 0);
        endShape();
        
        beginShape();
        vertex(320, 80);
        bezierVertex(330, 63, 320, 55, 350, 0);
        endShape();
        
        beginShape();
        vertex(320, 80);
        bezierVertex(340, 78, 345, 72, 400, 42);
        endShape();
        
        beginShape();
        vertex(320, 80);
        bezierVertex(345, 98, 355, 98, 400, 110);
        endShape();
        
        beginShape();
        vertex(320, 80);
        bezierVertex(335, 118, 345, 128, 400, 190);
        endShape();
        
        //first row
        beginShape();
        vertex(287, 58);
        bezierVertex(298, 56, 300, 56, 305, 46);
        endShape();
        beginShape();
        vertex(305, 46);
        bezierVertex(312, 56, 320, 56, 329, 50);
        endShape();
        beginShape();
        vertex(329, 50);
        bezierVertex(335, 66, 335, 66, 344, 73);
        endShape();
        beginShape();
        vertex(344, 73);
        bezierVertex(340, 76, 340, 80, 346, 95);
        endShape();
        beginShape();
        vertex(346, 95);
        bezierVertex(338, 104, 338, 97, 339, 116);
        endShape();
        
        //second row
        beginShape();
        vertex(260, 38);
        bezierVertex(280, 37, 285, 35, 296, 23);
        endShape();
        beginShape();
        vertex(296, 23);
        bezierVertex(310, 35, 320, 33, 338, 26);
        endShape();
        beginShape();
        vertex(338, 26);
        bezierVertex(340, 45, 350, 52, 368, 61);
        endShape();
        beginShape();
        vertex(368, 61);
        bezierVertex(355, 80, 360, 82, 371, 102);
        endShape();
        beginShape();
        vertex(371, 102);
        bezierVertex(355, 120, 360, 122, 357, 139);
        endShape();
        
        //third row
        beginShape();
        vertex(235, 16);
        bezierVertex(270, 17, 280, 15, 290, 0);
        endShape();
        beginShape();
        vertex(290, 0);
        bezierVertex(315, 17, 330, 15, 347, 5);
        endShape();
        beginShape();
        vertex(347, 5);
        bezierVertex(360, 37, 350, 35, 392, 47);
        endShape();
        beginShape();
        vertex(392, 47);
        bezierVertex(380, 67, 370, 90, 395, 108);
        endShape();
        beginShape();
        vertex(395, 108);
        bezierVertex(380, 117, 370, 140, 378, 165);
        endShape();
        
        //forth row
        beginShape();
        vertex(372, 0);
        bezierVertex(380, 27, 385, 25, 400, 26);
        endShape();
        beginShape();
        vertex(400, 137);
        bezierVertex(384, 163, 392, 175, 393, 182);
        endShape();
        
        popMatrix();
    };
} //Spiderweb

{
    var Tree = function(config) {
        this.x = config.x || width/2;
        this.y = config.y || height;
        this.length = config.length || 60;
        this.depth = config.depth || 4;
        this.weight = config.weight || 6;
        this.baseColor = config.baseColor || color(20);
    };

    Tree.prototype.branch = function(length, depth, weight) {
        strokeWeight(weight);
        stroke(this.baseColor);
        
        line(0, 0, 0, -length);
        translate(0, -length);
        
        if (depth > 0) {
            depth--;
            for(var i = 0; i < random(2, 4); i++) {
                var dir = random() < 0.5 ? 1 : -1;
                pushMatrix();
                    rotate(radians(random(10, 40) * dir));
                    this.branch(length * random(0.65, 0.75), depth, weight * 0.65);
                popMatrix();
            }
        }
    };
    
    Tree.prototype.display = function() {
        pushMatrix();
        translate(this.x, this.y);
        this.branch(this.length, this.depth, this.weight);
        popMatrix();
    };
} //Tree

{
    //Lightning object
    var Lightning = function(config) {    
        this.minx = config.minx || width/3;
        this.maxx = config.maxx || width-width/3;
        this.y = config.y || 0;
        this.length = config.length || 30;
        this.depth = config.depth || 18;
        this.weight = config.weight || 3;
        this.angleRange = config.angleRange || 60; //should always be less than 90 so forks always move down
        this.forkColor = config.forkColor || color(255);
        this.flashColor = config.flashColor || color(75);
    };

    //Recursive function for displaying the lightning forks
    Lightning.prototype.fork = function(length, depth, weight, maxAngle) {
        var angle = 0;
        var valid = false;

        while(!valid) {
            angle = random(-30, 30);
            if(maxAngle + angle > -this.angleRange && maxAngle + angle < this.angleRange) { //ensure forks only ever within n degree area (moving downwards)
                valid = true;
            }
        }
        
        maxAngle+= angle; //Store the total angle
        depth--;

        strokeWeight(weight);
        stroke(this.forkColor);
        line(0, 0, 0, length);
        translate(0, length);
        
        //Only generate more forks for given depth
        if (depth >= 0) {
            pushMatrix();
            if(angleMode === "radians") {rotate(radians(angle));} else {rotate(angle);} //rotate based on current angleMode
            this.fork(length, depth, weight*0.75, maxAngle);
            popMatrix();

            //Randomly add a new fork
            if(random() < 0.1) {
                angle = random(-30, 30);
                pushMatrix();
                if(angleMode === "radians") {rotate(radians(angle));} else {rotate(angle);} //rotate based on current angleMode
                this.fork(length*0.85, depth, weight*0.5, angle);
                popMatrix();
            }
        }
    };

    //Display the lightning
    Lightning.prototype.display = function() {
        background(this.flashColor);
        pushMatrix();
        translate(random(this.minx, this.maxx), this.y);
        this.fork(this.length, this.depth, this.weight, 0);
        popMatrix();
    };

    
} //Lightening
    
//Lightning object (fractal)
var Lightning = (function() {
    Lightning = function(args) {    
        this.min = args.min || width/6;
        this.max = args.max || width-width/6;
        this.y = args.y || 0;
        this.length = args.length || ~~(height / 11);
        this.depth = constrain(args.depth || ~~(height / 32), 5, 25);
        this.weight = constrain(args.weight || 4, 2, 8);
        this.forkColor = args.forkColor || color(255);
        this.flashColor = args.flashColor || color(200);
        this.angleRange = constrain(args.angleRange || 60, 40, 80);
        this.arr = [];
    };
    Lightning.prototype = {
        //recursive function generate the random lightning
        fork: function(length, depth, weight, px, py) {
            var angle = random(-this.angleRange, this.angleRange);
            
            //decrease the depth so can exit the recursive function
            depth--;
            
            //calculate the next x/y coordinate for the fork
            var x = px + cos(radians(angle - 90)) * length;
            var y = py + sin(radians(angle + 90)) * length;
            
            //add fork to the start of the array
            this.arr.unshift({
                weight: weight,
                stroke: this.forkColor,
                px: px,
                py: py,
                x: x,
                y: y,
                length: length,
                opacity: 255,
                angle: angle
            });
        
            //Only generate more forks for given depth
            if (depth >= 0) {
                this.fork(length, depth, weight*0.8, x, y);
        
                //Randomly add a new fork
                if(random() < 0.15) {
                    angle = random(-this.angleRange, this.angleRange);
                    this.fork(length*0.85, depth, weight*0.5, x, y);
                }
            }
        },
        draw: function() {
            //draw the lightning
            pushStyle();
                for(var i = this.arr.length - 1; i >= 0; i--) {
                    strokeWeight(this.arr[i].weight);
                    stroke(this.arr[i].stroke, this.arr[i].opacity);
                    line(this.arr[i].px, this.arr[i].py+this.arr[i].weight, this.arr[i].x, this.arr[i].y);
                    this.arr[i].opacity-=10;
                    if(this.arr[i].opacity <= 0) {
                        this.arr.splice(i, 1);
                    }
                }
            popStyle();
        },
        generate: function() {
            //initiates a new lightning strike
            this.fork(
                this.length, //length of each strike
                this.depth, //how deep you want to recurse
                this.weight, //starting weight of the strike
                random(this.min, this.max), //starting (previous) x pos
                this.y //starting (previous) y pos
            );
        }
    };
    return Lightning;
})();

{
    var RedBack = function(config) {
        this.pos = config.pos || new PVector(0, 0);
        this.webY = config.webY || this.pos.y - 50;
        this.w = 55;
        this.h = 70;
        this.scale = config.scale || 1;
        this.bodyColor = config.bakColor || color(0);
        this.stripeColor = config.stripeColor || color(201, 26, 26, 200);
        this.webColor = config.webColor || color(255, 255, 255, 50);
        this.yOffset = config.yOffset || 0;
        this.yDir = config.yDir || 1;
        this.img = this.getImage();
    };
    
    RedBack.prototype.getImage = function() {
        background(0, 0, 0, 0);
    
        pushMatrix();
        translate(0, 0);
        
        noStroke();
        fill(this.bodyColor);
        
        //body
        ellipse(350, 220, 20, 25);
        //head
        ellipse(350, 237, 10, 10);
        
        //stripe
        noFill();
        stroke(this.stripeColor);
        strokeWeight(3);
        ellipse(350, 216, 3, 8);
        ellipse(350, 223, 2, 2);
        
        noFill();
        stroke(this.bodyColor);
        strokeWeight(2);
        
        //eyes
        line(348, 240, 348, 242);
        line(352, 240, 352, 242);
        
        strokeWeight(1);
        
        //back legs
        beginShape();
        vertex(340, 220);
        bezierVertex(325, 210, 326, 206, 326, 199);
        endShape();
        beginShape();
        vertex(360, 220);
        bezierVertex(375, 210, 374, 206, 374, 199);
        endShape();
        
        beginShape();
        vertex(341, 212);
        bezierVertex(327, 202, 334, 196, 333, 190);
        endShape();
        beginShape();
        vertex(359, 212);
        bezierVertex(373, 202, 366, 196, 367, 190);
        endShape();
        
        //front legs
        beginShape();
        vertex(340, 223);
        bezierVertex(336, 225, 336, 228, 328, 230);
        endShape();
        beginShape();
        vertex(328, 230);
        bezierVertex(332, 250, 332, 248, 334, 250);
        endShape();
        
        beginShape();
        vertex(360, 223);
        bezierVertex(364, 225, 364, 228, 372, 230);
        endShape();
        beginShape();
        vertex(372, 230);
        bezierVertex(368, 250, 368, 248, 366, 250);
        endShape();
        
        beginShape();
        vertex(342, 227);
        bezierVertex(340, 229, 340, 232, 334, 234);
        endShape();
        beginShape();
        vertex(334, 234);
        bezierVertex(338, 254, 343, 252, 342, 255);
        endShape();
        
        beginShape();
        vertex(358, 227);
        bezierVertex(360, 229, 360, 232, 366, 234);
        endShape();
        beginShape();
        vertex(366, 234);
        bezierVertex(362, 254, 357, 252, 358, 255);
        endShape();
        
        popMatrix();
        
        return get(321, 185, this.w, this.h);
    };
    
    RedBack.prototype.display = function() {
        pushMatrix();
        scale(this.scale);
        strokeWeight(1);
        stroke(this.webColor);
        line(this.pos.x + this.w * 0.5, this.webY, this.pos.x + this.w * 0.5, this.pos.y + this.yOffset + this.h * 0.5);
        image(this.img, this.pos.x, this.pos.y + this.yOffset);
        popMatrix();
    };
    
    RedBack.prototype.update = function() {
        this.yOffset+= 0.6 * this.yDir;
        if(this.yOffset > 60 || this.yOffset < 0)
        {
            this.yDir*= -1;
        }
    };
    
    RedBack.prototype.run = function() {
        this.update();
        this.display();
    };.........完整代码请登录后点击上方下载按钮下载查看