js实现一个闯关类跳跃射击怪物小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现一个闯关类跳跃射击怪物小游戏代码，按住键盘上下左右键控制小人，按键盘a与d键进行射击、避免触碰怪物，收集更多的方块。

下面为部分代码预览，完整代码请点击下载或在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, 500); 
    frameRate(60);    
    smooth();

    {
        /**/// // Do not remove this line
        angleMode = "degrees";

        textAlign(CENTER, CENTER);
        textFont(createFont('monospace'));

        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.width = config.width || 100;
            this.height = config.height || 100;
            this.content = config.content || "Home";
            this.page = config.page || "home";
            this.level = config.level || 0;
            this.textSize = config.textSize || this.width/4;

            //Normal
            this.borderColor = config.borderColor || color(130, 135, 135, 100);
            this.backColor = config.backColor || color(10, 10, 10, 200);
            this.contentColor = config.contentColor || color(222, 222, 222);
            //Hover
            this.borderColorHover = config.borderColorHover || color(130, 135, 135, 50);
            this.backColorHover = config.bakColorHover || color(29, 29, 29, 200);
            this.contentColorHover = config.contentColorHover || color(222, 222, 222, 200);
        };

        //Draw the button
        Button.prototype.draw = function() {
            strokeWeight(2);
            if(this.isMouseInside()) {
                hover = true;

                if(clicked) {
                    game.page = this.page;
                    if(this.page === "level") {
                        game.level = this.level;
                    }
                    game.reset();
                }

                fill(this.backColorHover);
                stroke(this.borderColor);
                rect(this.x, this.y, this.width, this.height, 8);

                fill(this.contentColorHover);
                textSize(this.textSize);
                textAlign(CENTER, CENTER);
                text(this.content, this.x + this.width/2, this.y + this.height/2);
            }
            else {
                fill(this.backColor);
                stroke(this.borderColor);
                rect(this.x, this.y, this.width, this.height, 8);

                fill(this.contentColor);
                textSize(this.textSize);
                textAlign(CENTER, CENTER);
                text(this.content, this.x + this.width/2, this.y + this.height/2);
            }
        };

        //Checks if the mouse it over the button
        Button.prototype.isMouseInside = function() {
            return  mouseX > this.x &&
                    mouseX < this.x + this.width &&
                    mouseY > this.y &&
                    mouseY < this.y + this.height;
        };

        //Handles the hover animation
        Button.prototype.hover = function(){
            if(this.isMouseInside())
            {
                fill(this.backColorHover);
                rect(this.x-5, this.y-5, this.width + 10, this.height + 10, 8);
            }
        };
    } //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, 370);
            if(this.pos.y === 370) {
                this.timeToLive--;
            }
        };

        Ammo.prototype.display = function() {
            fill(84, 90, 100);
            fill(20, 19, 19);
            rect(this.pos.x, this.pos.y, this.w, this.h);
            fill(90, 95, 104);
            fill(28, 26, 26);
            rect(this.pos.x+this.w/2, this.pos.y, this.w/2, this.h);
            beginShape();
                vertex(this.pos.x, this.pos.y);
                vertex(this.pos.x-3, this.pos.y+8);
                vertex(this.pos.x+this.w+3, this.pos.y+8);
                vertex(this.pos.x+this.w, this.pos.y);
                vertex(this.pos.x, this.pos.y);
            endShape();
            noStroke();
            fill(30, 38, 52);
            fill(240);
            textSize(9);
            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, radians(181), radians(360));
                rect(-75, 0, 150, 100);

                fill(this.darkColor);
                arc(0, 0, 150, 120, radians(271), radians(360));
                rect(0, 0, 75, 100);

                textFont(createFont('m.........完整代码请登录后点击上方下载按钮下载查看