processing实现带音效小动物加农炮发射距离比拼小游戏代码

代码语言:html

所属分类:游戏

代码描述:processing实现带音效小动物加农炮发射距离比拼小游戏代码,左右键控制大炮发射角度,空格键发射。还可以选择不同的小动物,看看谁飞的更远。

代码标签: processing 音效 小动物 加农炮 发射 距离 比拼 小游戏 代码

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

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

<head>
  <meta charset="UTF-8">
  

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

body {
  background: #367396;
  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 translate="no">
  <canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/processing.1.4.8.js"></script>
<audio id="explosive" src="//repo.bfw.wiki/bfwrepo/sound/66d12ba103e33.mp3" preload="auto"></audio>
<audio id="bomb" src="//repo.bfw.wiki/bfwrepo/sound/66d12bc052e2d.mp3" preload="auto"></audio>
<audio id="trampoline" src="//repo.bfw.wiki/bfwrepo/sound/66d12beddd4aa.mp3" preload="auto"></audio>
<audio id="mud" src="//repo.bfw.wiki/bfwrepo/sound/66d12c0b1fae4.mp3" preload="auto"></audio>
<audio id="flytrap" src="//repo.bfw.wiki/bfwrepo/sound/66d12c51e76a0.mp3" preload="auto"></audio>
<audio id="fire" src="//repo.bfw.wiki/bfwrepo/sound/66d12b86d190c.mp3" preload="auto"></audio>
<audio id="ground" src="//repo.bfw.wiki/bfwrepo/sound/66d12b76b704b.mp3" preload="auto"></audio>
  
      <script>


var sketchProc = function(processingInstance) {
  with (processingInstance) {
    size(900, 600); 
    frameRate(60);    
    smooth();

    textFont(createFont("Trebuchet MS"));

    var game;

    var Button = function(args) {
        this.x = args.x;
        this.y = args.y;
        this.w = args.w || 120;
        this.h = args.h || 50;
        this.content = args.content;
        this.func = args.func;
        this.enabled = args.enabled || false;
    };
    Button.prototype = {
        over: function() {
            return (mouseX > this.x && 
                    mouseX < this.x + this.w && 
                    mouseY > this.y && 
                    mouseY < this.y + this.h);
        },
        draw: function() {
            noStroke();

            if(this.enabled && this.over()) {
                game.hover = true;
                fill(69, 66, 69);
            }
            else {
                fill(46, 47, 48);
            }

            //Draw the button
            rect(this.x, this.y, this.w, this.h);

            //Draw the text on the button
            pushStyle();
                textAlign(CENTER, CENTER);
                textSize(18);
                fill(255);
                text(this.content, this.x + this.w / 2, this.y + this.h / 2);
            popStyle();

            //If the mouse was clicked and the mouse was over the button
            if(this.enabled && game.clicked && this.over()) {
                //Run the function
                this.func();
            }
        }
    };

    //Transition object (between scenes)
    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() {
            if(this.active) {
                pushStyle();
                    fill(64, 57, 59);
                    rect(-20, -20, width + 40, this.h);
                    rect(-20, height-this.h, width + 40, this.h + 20);
                popStyle();
            }
        };
        this.update = function() {
            if(this.active) {
                this.h+= this.vy;

                //if halfway across the screen then change the scene
                if(this.h >= 300) {
                    game.scene = this.scene;
                    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() {
            this.draw();
            this.update();
        };
    };

    var Block = function(args) {
        this.x = args.x  || 0;
        this.y = args.y || 0;
        this.w = args.w || 100;
        this.h = args.h || this.w;
        this.vx = args.vx || 0;
        this.vy = args.vy || 0;
    };
    Block.new = function(args) {
        var obj = Object.create(Block.prototype);
        Block.apply(obj, arguments);
        return obj;
    };
    Block.prototype = {
        move: function() {
            this.x += this.vx;
            this.y += this.vy;
        },
        draw: function() {
            pushStyle();
                noStroke();
                fill(194, 91, 81);
                rect(this.x, this.y, this.w, this.h);
            popStyle();
        },
        go: function() {
            this.draw();
            this.move();
        }
    };

    var Trampoline = function(args) {
        this.x = args.x  || 0;
        this.y = args.y || 0;
        this.w = args.w || 100;
        this.h = args.h || this.w;
        // this.vx = args.vx || 0;
        // this.vy = args.vy || 0;
        this.dead = false;
    };
    Trampoline.new = function(args) {
        var obj = Object.create(Trampoline.prototype);
        Trampoline.apply(obj, arguments);
        return obj;
    };
    Trampoline.prototype = {
        draw: function() {
            pushStyle();
                noStroke();
                fill(194, 91, 81);
                //legs
                //front left
                rect(this.x + this.w * 0.12, this.y + this.h * 0.8, this.w * 0.08, this.h * 0.8);
                //front right
                rect(this.x + this.w * 0.8, this.y + this.h * 0.8, this.w * 0.08, this.h * 0.8);
                //back left
                rect(this.x + this.w * 0.01, this.y + this.h * 0.6, this.w * 0.08, this.h * 0.8);
                //back right
                rect(this.x + this.w * 0.91, this.y + this.h * 0.6, this.w * 0.08, this.h * 0.8);
                //main body
                fill(80, 222, 201);
                ellipse(this.x + this.w * 0.5, this.y + this.h * 0.5, this.w * 1.1, this.h * 1.1);
                fill(79, 82, 82);
                ellipse(this.x + this.w * 0.5, this.y + this.h * 0.40, this.w * 0.90, this.h * 0.55);

                // noFill();
                // stroke(0);
                // rect(this.x, this.y, this.w, this.h);
            popStyle();
        },
        update: function() {
            // this.x += this.vx;
            // this.y += this.vy;
        },
        go: function() {
            this.draw();
            this.update();
        }
    };

    var Mud = function(args) {
        this.x = args.x  || 0;
        this.y = args.y || 0;
        this.w = args.w || 100;
        this.h = args.h || this.w;
        this.dead = false;
    };
    Mud.new = function(args) {
        var obj = Object.create(Mud.prototype);
        Mud.apply(obj, arguments);
        return obj;
    };
    Mud.prototype = {
        draw: function() {
            pushMatrix();
                translate(this.x, this.y);

                pushStyle();
                    noStroke();

                    // fill(120, 96, 60);
                    // ellipse(this.w * 1.2, this.h * 1.2, this.w * 0.4, this.h * 0.7);
                    // ellipse(-this.w * 0.3, this.h * 1.3, this.w * 0.4, this.h * 0.6);
                    // ellipse(this.w * 0.2, this.h * 2.0, this.w * 0.4, this.h * 0.6);

                    fill(97, 72, 26);
                    ellipse(this.w * 0.5, this.h * 0.8, this.w * 1.6, this.h * 1.8);

                    fill(120, 106, 44);
                    ellipse(this.w * 0.5, this.h * 0.7, this.w * 1.4, this.h * 1.4);

                    fill(102, 80, 45);
                    ellipse(this.w * 0.5, this.h * 0.7, this.w * 1, this.h * 1);

                    fill(120, 106, 44);
                    ellipse(this.w * 0.4, this.h * 0.6, this.w * 0.4, this.h * 0.5);
                popStyle();
            popMatrix();
        },
        update: function() {
            // this.x += this.vx;
            // this.y += this.vy;
        },
        go: function() {
            this.draw();
            this.update();
        }
    };

    var Bomb = function(args) {
        this.x = args.x  || 0;
        this.y = args.y || 0;
        this.w = args.w || 100;
        this.h = args.h || this.w;
        this.dead = false;
    };
    Bomb.new = function(args) {
        var obj = Object.create(Bomb.prototype);
        Bomb.apply(obj, arguments);
        return obj;
    };
    Bomb.prototype = {
        draw: function() {
            pushMatrix();
                translate(this.x, this.y);

                pushStyle();
                    //balloon
                    stroke(50);
                    strokeWeight(1);
                    fill(227, 93, 88);
                    ellipse(0, -this.h * 1.5, this.w, this.h * 1.1);

                    //shadow on balloon
                    pushMatrix();
                        translate(-this.w * 0.25, -this.h * 1.7);

                        rotate(radians(35));
                        noStroke();
                        fill(242, 242, 242, 200);
                        ellipse(0, 0, this.w * 0.2, this.h * 0.3);
                    popMatrix();

                    //string connecting the bomb to the balloon
                    stroke(50);
                    line(0, -this.h, 0, 0);

                    //bomb
                    pushMatrix();
                        rotate(radians(-25));

                        fill(148, 145, 148);
                        beginShape();
                            vertex(-this.w * 0.4, -this.h * 0.2);
                            vertex( this.w * 0.3, -this.h * 0.2);
                            vertex( this.w * 0.4, -this.h * 0.1);
                            vertex( this.w * 0.5, -this.h * 0.2);
                            vertex( this.w * 0.6, -this.h * 0.2);
                            vertex( this.w * 0.6,  this.h * 0.2);
                            vertex( this.w * 0.5,  this.h * 0.2);
                            vertex( this.w * 0.4,  this.h * 0.1);
                            vertex( this.w * 0.3,  this.h * 0.2);
                            vertex(-this.w * 0.4,  this.h * 0.2);
                            bezierVertex(-this.w * 0.55, this.h * 0.1, -this.w * 0.55, -this.h * 0.1, -this.w * 0.4, -this.h * 0.2);
                        endShape();

                        //string around bomb
                        line(this.w * 0.1, -this.h * 0.2, this.w * 0.05, this.h * 0.2);

                        //words on bomb
                        textSize(12);
                        fill(0);
                        text("BOMB", -this.w * 0.34, this.h * 0.09);
                    popMatrix();
                popStyle();
            popMatrix();
        },
        update: function() {
            // this.x += this.vx;
            this.y += game.sin(radians(frameCount * 2)) * 0.4;
        },
        go: function() {
            this.draw();
            this.update();
        }
    };

    var Explosive = function(args) {
        this.x = args.x  || 0;
        this.y = args.y || 0;
        this.w = args.w || 100;
        this.h = args.h || this.w;
        this.dead = false;
    };
    Explosive.new = function(args) {
        var obj = Object.create(Explosive.prototype);
        Explosive.apply(obj, arguments);
        return obj;
    };
    Explosive.prototype = {
        draw: function() {
            pushMatrix();
                translate(this.x, this.y);

                pushStyle();
                    //barrel
                    stroke(38, 38, 38);
                    strokeWeight(1);
                    fill(120, 119, 120);
                    beginShape();
                        vertex(0, 0);
                        vertex(this.w * 0.5, 0);
                        vertex(this.w * 0.5, this.h);
                        bezierVertex(this.w * 0.3, this.h * 1.1, this.w * 0.2, this.h * 1.1, 0, this.h);
                    endShape(CLOSE);
                    ellipse(this.w * 0.25, 0, this.w * 0.5, this.h * 0.15);
                    bezier(0, this.h * 0.3, this.w * 0.15, this.h * 0.41, this.w * 0.35, this.h * 0.41, this.w * 0.5, this.h * 0.3);
                    bezier(0, this.h * 0.7, this.w * 0.15, this.h * 0.81, this.w * 0.35, this.h * 0.81, this.w * 0.5, this.h * 0.7);
                    //hole in top of barrel
                    noStroke();
                    fill(41, 40, 41);
                    ellipse(this.w * 0.15, 0, this.w * 0.15, this.h * 0.05);

                    //skull and cross bones on barrel
                    stroke(66, 63, 63);
                    strokeWeight(3);
                    line(this.w * 0.1, this.h * 0.5, this.w * 0.4, this.h * 0.75);
                    line(this.w * 0.1, this.h * 0.75, this.w * 0.4, this.h * 0.5);
                    strokeWeight(1);
                    noStroke();
                    ellipse(this.w * 0.1, this.h * 0.5, 5, 7);
                    ellipse(this.w * 0.4, this.h * 0.75, 5, 7);
                    ellipse(this.w * 0.1, this.h * 0.75, 5, 7);
                    ellipse(this.w * 0.4, this.h * 0.5, 5, 7);
                    ellipse(this.w * 0.25, this.h * 0.3, this.w * 0.3, this.h * 0.3);
                    ellipse(this.w * 0.25, this.h * 0.4, this.w * 0.2, this.h * 0.3);
                    fill(156, 153, 156);
                    ellipse(this.w * 0.2, this.h * 0.3, this.w * 0.06, this.h * 0.10);
                    ellipse(this.w * 0.3, this.h * 0.3, this.w * 0.06, this.h * 0.10);

                    //TNT
                    randomSeed(100);
                    stroke(40);
                    fill(219, 89, 57);
                    for(var i = 0; i < 10; i++) {
                        pushMatrix();
                            rotate(radians(random(-5, 5)));
                            rect(random(this.w * 0.5, this.w * 0.9), random(-this.h * 0.1, this.h * 0.05), this.w * 0.08, this.h * 0.4);
                        popMatrix();
                    }

                    //TNT box
                    stroke(40);
                    fill(200, 140, 115);
                    rect(this.w * 0.5, this.h * 0.3, this.w * 0.5, this.h * 0.7);
                    line(this.w * 0.5, this.h * 0.65, this.w, this.h * 0.65);
                    fill(36, 35, 36);
                    textSize(14);
                    textAlign(CENTER);
                    text("TNT", this.w * 0.75, this.h * 0.6);
                    text("TNT", this.w * 0.75, this.h * 0.95);
                popStyle();
            popMatrix();
        },
        update: function() {
            // this.x += this.vx;
            // this.y += this.vy;
        },
        go: function() {
            this.draw();
            this.update();
        }
    };

    var FlyTrap = function(args) {
        this.x = args.x  || 0;
        this.y = args.y || 0;
        this.w = args.w || 100;
        this.h = args.h || this.w;
        this.angle = 20;
        this.eat = false;
        this.dead = false;
        this.color = color(108, 158, 27);
    };
    FlyTrap.new = function(args) {
        var obj = Object.create(FlyTrap.prototype);
        FlyTrap.apply(obj, arguments);
        return obj;
    };
    FlyTrap.prototype = {
        draw: function() {
            pushMatrix();
                translate(this.x, this.y);

                pushStyle();

                    //main stem
                    strokeWeight(7);
                    stroke(50);
                    bezier(0, this.h * 0.48, this.w * 0.25, this.h * 0.7, -this.w * 0.25, this.h * 0.8, 0, this.h * 1.1);

                    strokeWeight(5);
                    stroke(108, 158, 27);
                    bezier(0, this.h * 0.48, this.w * 0.25, this.h * 0.7, -this.w * 0.25, this.h * 0.8, 0, this.h * 1.1);

                    //branches
                    fill(108, 158, 27);
                    strokeWeight(3);
                    stroke(50);
                    bezier(0, this.h * 0.7, -this.w * 0.2, this.h * 0.7, -this.w * 0.4, this.h * 0.7, -this.w * 0.5, this.h * 0.9);
                    bezier(0, this.h * 0.8,  this.w * 0.2, this.h * 0.8,  this.w * 0.4, this.h * 0.7,  this.w * 0.5, this.h * 0.95);

                    fill(108, 158, 27);
                    strokeWeight(2);
                    stroke(108, 158, 27);
                    bezier(0, this.h * 0.7, -this.w * 0.2, this.h * 0.7, -this.w * 0.4, this.h * 0.7, -this.w * 0.5, this.h * 0.9);
                    bezier(0, this.h * 0.8,  this.w * 0.2, this.h * 0.8,  this.w * 0.4, this.h * 0.7,  this.w * 0.5, this.h * 0.95);

                    //head
                    stroke(50);
                    strokeWeight(1);
                    fill(108, 158, 27);
                    //left
                    pushMatrix();
                        translate(0, this.h * 0.5);
                        rotate(radians(-this.angle));

                        beginShape();
                            vertex(0, 0);
                            vertex(-this.w * 0.1, -this.h * 0.2);
                            vertex( this.w * 0.1, -this.h * 0.4);
                            vertex(-this.w * 0.1, -this.h * 0.6);
                            vertex( this.w * 0.1, -this.h * 0.8);
                            vertex(0, -this.h);
                            bezierVertex(-this.w * 0.65, -this.h * 0.9, -this.w * 0.65, -this.h * 0.1, 0, 0);
                        endShape();
                    popMatrix();
                    //right
                    pushMatrix();
                        translate(0, this.h * 0.5);
                        rotate(radians(this.angle));

                        beginShape();
                            vertex(0, 0);
                            vertex(-this.w * 0.1, -this.h * 0.2);
                            vertex( this.w * 0.1, -this.h * 0.4);
                            vertex(-this.w * 0.1, -this.h * 0.6);
                            vertex( this.w * 0.1, -this.h * 0.8);
                            vertex(0, -this.h);
                            bezierVertex(this.w * 0.65, -this.h * 0.9, this.w * 0.65, -this.h * 0.1, 0, 0);
                        endShape();
                    popMatrix();

                    //pot
                    strokeWeight(1);
                    stroke(50);
                    fill(219, 165, 57);
                    beginShape();
                        vertex(-this.w * 0.5, this.h * 1.1);
                        vertex( this.w * 0.5, this.h * 1.1);
                        vertex( this.w * 0.4, this.h * 2);
                        vertex(-this.w * 0.4, this.h * 2);
                    endShape(CLOSE);
                    fill(176, 130, 39);
                    beginShape();
                        vertex(-this.w * 0.55, this.h * 1.1);
                        vertex( this.w * 0.55, this.h * 1.1);
                        vertex( this.w * 0.55, this.h * 1.3);
                        vertex(-this.w * 0.55, this.h * 1.3);
                    endShape(CLOSE);
                popStyle();
            popMatrix();
        },
        update: function() {
            if(this.eat) {
                this.angle = lerp(this.angle, 0, 0.08);
            }
        },
        go: function() {
            this.draw();
            this.update();
        }
    };

    var Player = function(args) {
        this.x = args.x;
        this.y = args.y;
        this.vx = args.vx || 0;
        this.vy = args.vy || 0;
        this.diameter = args.diameter || 100;
        this.scale = this.diameter / 300;
        this.radius = this.diameter / 2;
        this.circumference = 2 * PI * this.radius;
        this.vymax = ~~this.diameter * 0.65;
        this.vxmax = ~~this.diameter * 0.5;
        this.gravity = args.gravity || 0.2;
        this.friction = args.friction || 0;// || 0.02;
        this.angle = args.angle || 0;
        this.rot = args.rot || 0;
        this.color = args.color || color(204, 192, 55);
        this.eaten = false;
        this.type = args.type || "cat";
    };
    Player.new = function(args) {
        var obj = Object.create(Player.prototype);
        Player.apply(obj, arguments);
        return obj;
    };
    Player.prototype = {
        draw: function() {
            pushMatrix();
                translate(this.x, this.y);
                rotate(radians(this.angle));
                scale(this.scale);

                switch(this.type) {
                    case "cat":
                        pushStyle();
                            imageMode(CENTER);
                            image(game.images.cat, 0, 0);
                            imageMode(CORNER);
                        popStyle();
                        break;
                    case "dog":
                        pushStyle();
                            imageMode(CENTER);
                            image(game.images.dog, 0, 0);
                            imageMode(CORNER);
                        popStyle();
                        break;
                    case "sheep":
                        pushStyle();
                            imageMode(CENTER);
                            image(game.images.sheep, 0, 0);
                            imageMode(CORNER);
                        popStyle();
                        break;
                    case "pig":
                        pushStyle();
                            imageMode(CENTER);
                            image(game.images.pig, 0, 0);
                            imageMode(CORNER);
                        popStyle();
                        break;
                    case "cow":
                        pushStyle();
                            imageMode(CENTER);
                            image(game.images.cow, 0, 0);
                            imageMode(CORNER);
                        popStyle();
                        break;
                    case "mouse":
                        pushStyle();
                            imageMode(CENTER);
                            image(game.images.mouse, 0, 0);
      .........完整代码请登录后点击上方下载按钮下载查看

网友评论0