canvas+processing实现往上冲小游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：canvas+processing实现往上冲小游戏代码，疯狂点击鼠标左键往上走，单击一次向上冲，有重力会落下，落到水里就输了，不能碰到电子围栏和炸弹。
下面为部分代码预览，完整代码请点击下载或在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.1.4.8.js"></script>
  
      <script  >
var sketchProc = function(processingInstance) {
  with (processingInstance) {
    size(600, 600); 
    frameRate(60);    
    smooth();
    
textFont(createFont('Trebuchet MS'));

var app;

//manages the key/mouse states
var pressed = false, clicked = false, hover = false, keys = [];
mouseClicked = function() {
    clicked = true;
};
mousePressed = function () {
    pressed = true;
};
keyPressed = function() {
    keys[keyCode] = true;
};
keyReleased = function () {
    keys[keyCode] = false;
};

//Button object
var Button = (function() {
    var Button = function(args) {
        this.x = args.x;
        this.y = args.y;
        this.diameter = args.diameter || 120;
        this.content = args.content;
        this.textSize = args.textSize || this.diameter * 0.13;
        this.hover = false;
        this.action = args.action;
        this.backColor = args.backColor || color(242, 242, 242);
        this.textColor = args.textColor || color(242, 239, 242);
    };
    Button.prototype = {
        over: function() {
            //check if the mouse is over the button
            return (dist(mouseX, mouseY, this.x, this.y) < this.diameter / 2);
        },
        draw: function() {
            //set hover based on mouse over the button
            this.hover = this.over();

            if(this.hover) {
                hover = true;
            }
            
            pushMatrix();
                translate(this.x, this.y);

                fill(this.backColor, (this.hover ? 200 : 255));
                noStroke();
                ellipse(0, 0, this.diameter, this.diameter);
                fill(app.colors.stroke);
                switch(this.content) {
                    case "play":
                        triangle(this.diameter*0.25, 0, -this.diameter*0.15, -this.diameter*0.25, -this.diameter*0.15, this.diameter*0.25);
                        break;
                    case "sound":
                        pushStyle();
                            noStroke();
                            fill(app.colors.stroke);
                            triangle(0, -this.diameter * 0.3, 0, this.diameter * 0.3, -this.diameter * 0.3, 0);
                            rect(-this.diameter * 0.3, -this.diameter * 0.1, this.diameter * 0.3, this.diameter * 0.2);
                            if(app.sound) {
                                noFill();
                                stroke(app.colors.stroke);
                                strokeWeight(this.diameter/20);
                                arc(this.diameter * 0.1, 0, this.diameter * 0.2, this.diameter * 0.2, radians(-91), radians(90));
                                arc(this.diameter * 0.1, 0, this.diameter * 0.4, this.diameter * 0.4, radians(-81), radians(80));
                            }
                            else {
                                noFill();
                                stroke(app.colors.stroke);
                                strokeWeight(this.diameter/20);
                                line(this.diameter * 0.1, -this.diameter * 0.1, this.diameter * 0.25, this.diameter * 0.1);
                                line(this.diameter * 0.1, this.diameter * 0.1, this.diameter * 0.25, -this.diameter * 0.1);
                            }
                        popStyle();
                        break;
                    case "leaders":
                        pushStyle();
                            noFill();
                            stroke(app.colors.stroke);
                            strokeWeight(this.diameter * 0.14);
                            strokeCap(SQUARE);
                            line(0, this.diameter * 0.25, 0, -this.diameter * 0.3);
                            line(-this.diameter * 0.2, this.diameter * 0.25, -this.diameter * 0.2, -this.diameter * 0.1);
                            line(this.diameter * 0.2, this.diameter * 0.25, this.diameter * 0.2, -this.diameter * 0.2);
                        popStyle();
                        break;
                    case "shop":
                        pushStyle();
                            noStroke();
                            fill(app.colors.stroke);
                            rect(-this.diameter * 0.25, -this.diameter * 0.25, this.diameter * 0.5, this.diameter * 0.5);
                            fill(255, 100);
                            rect(-this.diameter * 0.15, -this.diameter * 0.15, this.diameter * 0.1, this.diameter * 0.15);
                            rect(this.diameter * 0.05, -this.diameter * 0.15, this.diameter * 0.1, this.diameter * 0.15);
                        popStyle();
                        break;
                    case "home":
                        pushStyle();
                            beginShape();
                                vertex(this.diameter*0.25, 0); //1
                                vertex(this.diameter*0.25, this.diameter*0.25); //2
                                vertex(this.diameter*0.07, this.diameter*0.25); //3
                                vertex(this.diameter*0.07, this.diameter*0.12); //4
                                vertex(-this.diameter*0.07, this.diameter*0.12); //5
                                vertex(-this.diameter*0.07, this.diameter*0.25); //6
                                vertex(-this.diameter*0.25, this.diameter*0.25); //7
                                vertex(-this.diameter*0.25, 0); //8
                                vertex(0, -this.diameter*0.2); //9
                                vertex(this.diameter*0.25, 0); //10
                            endShape();
                            noFill();
                            stroke(app.colors.stroke);
                            strokeWeight(this.diameter*0.05);
                            line(-this.diameter*0.27, -this.diameter*0.05, 0, -this.diameter*0.27);
                            line(this.diameter*0.27, -this.diameter*0.05, 0, -this.diameter*0.27);
                            line(this.diameter*0.15, -this.diameter*0.19, this.diameter*0.15, -this.diameter*0.25);
                        popStyle();
                        break;
                    case "replay":
                        pushStyle();
                            noFill();
                            stroke(app.colors.stroke);
                            strokeWeight(5);
                            pushMatrix();
                                rotate(radians(frameCount * 3));
                                arc(0, 0, this.diameter * 0.6, this.diameter * 0.6, 0, radians(275));
                                noStroke();
                                fill(app.colors.stroke);
                                translate(this.diameter * 0.30, -this.diameter * 0.18);
                                rotate(radians(-70));
                                triangle(0, -this.diameter * 0.1, -this.diameter * 0.14, -this.diameter * 0.3, this.diameter * 0.14, -this.diameter * 0.3);
                            popMatrix();
                        popStyle();
                        break;
                    case "how":
                        pushStyle();
                            textAlign(CENTER, CENTER);
                            textFont(createFont('Trebuchet MS Bold'), this.diameter * 0.7);
                            text("?", 0, 0);
                        popStyle();
                        break;
                    default:
                        pushStyle();
                            textAlign(CENTER, CENTER);
                            text(this.content, 0, 0);
                        popStyle();
                    }
            popMatrix();
    
            //if button is clicked then run the function argument
            if(clicked && this.hover) {
                this.action();
            }
        }
    };
    return Button;
})();

//Player object
var Player = (function() {
    var Player = function() {
        this.x = 275;
        this.y = 400;
        this.px = 275;
        this.py = 400;
        this.w = 40;
        this.h = 40;
        this.color = color(227, 211, 134);
        this.state = 0; //0 = normal, 1 = lava
        this.mouth = {
            value: 0,
            max: 3
        };
        this.eyes = {
            value: 0,
            max: 3
        };
        this.vx = 0;
        this.vy = 0;
        this.dir = random() < 0.5 ? 1 : -1;
        this.gravity = 0.1;
        this.ymin = 400;
        this.angle = 0;
    };
    Player.prototype = {
        draw: function() {
            switch(this.state) {
                case 1: //hit lava state
                    fill(50);
                    break;
                default:
                fill(this.color);
            }
            pushStyle();
                noStroke();
                strokeWeight(1);
                stroke(250, 200);
                noStroke();
                //tenticles
                ellipse(this.x + this.w * 0.25, this.y + this.h * 0.9, this.w * 0.25, this.h * 0.5);
                ellipse(this.x + this.w * 0.5, this.y + this.h * 0.9, this.w * 0.25, this.h * 0.5);
                ellipse(this.x + this.w * 0.75, this.y + this.h * 0.9, this.w * 0.25, this.h * 0.5);
                
                //body
                strokeWeight(1);
                stroke(250, 200);
                rect(this.x, this.y, this.w, this.h, 8, 8, 5, 5);
                
                //eyes
                switch(this.eyes.value) {
                    case 0:
                        noStroke();
                        fill(255);
                        ellipse(this.x + this.w * 0.3, this.y + this.h * 0.35, this.w * 0.35, this.w * 0.35);
                        ellipse(this.x + this.w * 0.7, this.y + this.h * 0.35, this.w * 0.35, this.w * 0.35);
                        fill(40);
                        ellipse(this.x + this.w * 0.31, this.y + this.h * 0.34, this.w * 0.17, this.w * 0.19);
                        ellipse(this.x + this.w * 0.69, this.y + this.h * 0.34, this.w * 0.17, this.w * 0.19);
                        break;
                    case 1:
                        noFill();
                        stroke(50, 200);
                        strokeWeight(3);
                        arc(this.x + this.w * 0.3, this.y + this.h * 0.41, this.w * 0.25, this.w * 0.30, radians(180), radians(360));
                        arc(this.x + this.w * 0.7, this.y + this.h * 0.41, this.w * 0.25, this.w * 0.30, radians(180), radians(360));
                        break;
                    case 2:
                        noFill();
                        stroke(50, 200);
                        strokeWeight(4);
                        line(this.x + this.w * 0.33, this.y + this.h * 0.25, this.x + this.w * 0.33, this.y + this.h * 0.45);
                        line(this.x + this.w * 0.67, this.y + this.h * 0.25, this.x + this.w * 0.67, this.y + this.h * 0.45);
                        break;
                    case 3:
                        //dead eyes
                        noFill();
                        stroke(50, 200);
                        strokeWeight(2);
                        line(this.x + this.w * 0.30, this.y + this.h * 0.27, this.x + this.w * 0.40, this.y + this.h * 0.43);
                        line(this.x + this.w * 0.40, this.y + this.h * 0.27, this.x + this.w * 0.30, this.y + this.h * 0.43);
                        line(this.x + this.w * 0.57, this.y + this.h * 0.27, this.x + this.w * 0.67, this.y + this.h * 0.43);
                        line(this.x + this.w * 0.67, this.y + this.h * 0.27, this.x + this.w * 0.57, this.y + this.h * 0.43);
                        break;
                }

                //mouth
                switch(this.mouth.value) {
                    case 0:
                        strokeWeight(3);
                        stroke(50, 200);
                        line(this.x + this.w * 0.35, this.y + this.h * 0.75, this.x + this.w * 0.65, this.y + this.h * 0.75);
                        break;
                    case 1:
                        noStroke();
                        fill(50, 200);
                        ellipse(this.x + this.w / 2, this.y + this.h * 0.75, this.w * 0.20, this.w * 0.20);
                        break;
                    case 2:
                        noStroke();
                        fill(50, 200);
                        arc(this.x + this.w / 2, this.y + this.h * 0.70, this.w * 0.30, this.w * 0.25, 0, radians(180));
                        break;
                }
            popStyle();
        },
        update: function() {
            //not implemented within the player prototype
        },
        run: function() {
            this.update();
            this.draw();
        }
    };
    return Player;
})();

//Transition object
var Transition = function() {
    this.h = 0;
    this.vy = 15;
    this.active =  false;
    this.scene = "home";
    this.reset = function() {
        this.h = 0;
        this.vy = 15;
    };
    this.draw = function() {
        pushStyle();
            stroke(app.colors.stroke, 250);
            strokeWeight(30);
            fill(app.colors.blockColor[0]);
            
            rect(-20, -20, width + 40, this.h);
            rect(-20, height-this.h, width + 40, this.h + 20);
            strokeWeight(1);
        popStyle();
    };
    this.update = function() {
        this.h+= this.vy;
        
        //if halfway down the screen then change the scene
        if(this.h >= height/2) {
            app.scene = this.scene;
            
            if(this.scene === "play") {
                app.reset();
            }
            this.vy*= -1;
        }
        //else if it's completely off the screen reset it and set to inactive
        else if(this.h < 0) {
            this.reset();
            this.active = false;
        }
    };
    this.run = function() {
        if(this.active) {
            this.draw();
            this.update();
        }
    };
};

//App object (runs the game)
var App = (function() {
    var App = function() {
        this.scene = "load";
        this.start = false;
        this.player = new Player();
        this.transition = new Transition();
        this.highscores = [
            {
                name: "Could be you",
 .........完整代码请登录后点击上方下载按钮下载查看