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