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 li.........完整代码请登录后点击上方下载按钮下载查看