js实现一个闯关类跳跃射击怪物小游戏代码
代码语言: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('monospace'));
textSize(40);
fill(59, 57, 57);
textAlign(CENTER, CENTER);
text("R.I.P", 0, 0);
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(info) {
this.x = info.x || width/2;
this.y = info.y || height;
this.length = info.length || 60;
this.depth = info.depth || 4;
this.weight = info.weight || 6;
this.baseColor = info.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
{
//Enemy Object
var Enemy = function(pos) {
this.pos = pos || new PVector(0, 360); //default location is on the ground
this.w = 40;
this.h = 40;
this.speed = 3;
this.dir = random() < 0.5 ? 1 : -1;
if(this.dir === 1) {
this.pos.x = floor(random(-250, -50));
}
else {
this.pos.x = floor(random(650, 850));
}
};
//Zombie Object - Inherits from Enemy
var Zombie = function(pos) {
Enemy.call(this, pos);
this.skinColor = random() < 0.5 ? color(60, 99, 36) : color(79, 53, 110);
this.shirtColor = random() < 0.5 ? color(10, 10, 9) : color(18, 33, 38);
this.hairColor = color(33, 30, 29);
};
Zombie.prototype = Object.create(Enemy.prototype);
Zombie.prototype.display = function() {
pushMatrix();
translate(this.pos.x, this.pos.y);
if(this.dir === -1) {
scale(-1, 1);
translate(-this.w, 0);
}
//back arm
stroke(this.skinColor);
strokeWeight(3);
line(this.w, this.h/1.5, this.w+this.w/3, this.h/1.8);
//fingers
strokeWeight(2);
line(this.w+this.w/3, this.h/1.8, this.w+this.w/2, this.h/1.4);
line(this.w+this.w/3, this.h/1.8, this.w+this.w/2.5, this.h/1.3);
line(this.w+this.w/3, this.h/1.8, this.w+this.w/3.5, this.h/1.3);
//body
noStroke();
fill(this.skinColor);
rect(0, 0, this.w, this.h, 3);
//shirt
fill(this.shirtColor);
rect(0, this.h/2, this.w, this.h/2);
//front arm
stroke(this.skinColor);
strokeWeight(3);
line(this.w/2, this.h/1.5, this.w, this.h/1.4);
//fingers
strokeWeight(2);
line(this.w, this.h/1.4, this.w+this.w/8, this.h/1.2);
line(this.w, this.h/1.4, this.w+this.w/20, this.h/1.1);
line(this.w, this.h/1.4, this.w-this.w/10, this.h/1.1);
//hair
stroke(this.hairColor);
strokeWeight(4);
line(2, 0, this.w-2, 0);
//fill(68, 112, 53);
noStroke();
//eyes
fill(251, 249, 166);
ellipse(this.w/3 + 5, this.h/3.5, 10, 10);
ellipse(this.w - this.w/3 + 5, this.h/3.5, 10, 10);
fill(43, 40, 40);
ellipse(this.w/3 + 7, this.h/3.1, 2, 2);
ellipse(this.w - this.w/3 + 7, this.h/3.9, 2, 2);
popMatrix();
noStroke();
};
Zombie.prototype.update = function() {
this.pos.x += this.speed * this.dir;
if(random() < 0.005) {
game.coins.push(new Bone(this.pos.x, 395));
}
};
Zombie.prototype.run = function() {
this.update();
this.display();
};
//ZamikazeZombie - Inhertis from Zombie > Enemy
var KamikazeZombie = function(pos) {
Zombie.call(this);
this.timeToFall = random(200, 500);
this.pos = pos;
this.dropSpeed = 7;
this.isOnGround = false;
};
KamikazeZombie.prototype = Object.create(Zombie.prototype);
KamikazeZombie.prototype.drop = function() {
if(!this.isOnGround) {
this.timeToFall--;
if(this.timeToFall < 0) {
this.pos.y += this.dropSpeed;
if(this.pos.y >= 360) {
this.isOnGround = true;
}
}
}
this.display();
};
//Spider Object - Inherits from Enemy
var Spider = function(pos) {
Enemy.call(this, pos);
this.headColor = color(31, 29, 28);
this.bodyColor = random() < 0.5 ? color(115, 60, 11) : color(3, 3, 3);
this.eyeColor = color(180, 180, 180);
this.legColor = color(8, 8, 8);
};
Spider.prototype = Object.create(Enemy.prototype);
Spider.prototype.display = function() {
pushMatrix();
translate(this.pos.x, this.pos.y);
if(this.dir === -1) {
scale(-1, 1);
translate(-this.w, 0);
}
//legs - eight of them :)
strokeWeight(1);
stroke(this.legColor);
for(var i = 0; i < 4; i++) {
//left leg
line(0, this.h * 0.2 + this.h/7*i, -this.w/8, this.h * 0.2 + this.h/7*i);
line(-this.w/8, this.h * 0.2 + this.h/7*i, -this.w/4, this.h * 0.5 + this.h/6*i);
//right leg
line(this.w, this.h * 0.2 + this.h/7*i, this.w + this.w/8, this.h * 0.2 + this.h/7*i);
line(this.w + this.w/8, this.h * 0.2 + this.h/7*i, this.w + this.w/4, this.h * 0.5 + this.h/6*i);
}
//body
noStroke();
fill(this.headColor);
rect(0, 0, this.w, this.h/2, 8, 8, 0, 0);
fill(this.bodyColor);
rect(0, this.h/2, this.w, this.h/2.5, 0, 0, 8, 8);
//eyes - eight of them :)
fill(this.eyeColor);
for(var i = 1; i <= 4; i++) {
ellipse(this.w/5 * i + this.speed/2, this.h/6, 3, 3);
ellipse(this.w/5 * i + this.speed/2, this.h/2.7, 3, 3);
}
//fangs
triangle(this.w * 0.4, this.h/2, this.w * 0.5, this.h * 0.75, this.w * 0.55, this.h/2);
triangle(this.w * 0.65, this.h/2, this.w * 0.7, this.h * 0.75, this.w * 0.8, this.h/2);
popMatrix();
noStroke();
};
Spider.prototype.update = function() {
this.pos.x += this.speed * this.dir;
if(random() < 0.005) {
game.coins.push(new Bone(this.pos.x, 395));
}
};
Spider.prototype.run = function() {
this.update();
this.display();
};
//ZamikazeSpider - Inhertis from Spider > Enemy
var KamikazeSpider = function(pos) {
Spider.call(this);
this.timeToFall = random(200, 700);
this.pos = pos;
this.dropSpeed = 7;
this.yDir = 1;
this.isOnGround = false;
};
KamikazeSpider.prototype = Object.create(Spider.prototype);
KamikazeSpider.prototype.drop = function() {
if(!this.isOnGround) {
this.timeToFall--;
if(this.timeToFall < 0) {
this.pos.y += this.dropSpeed;
if(this.pos.y >= 360) {
this.isOnGround = true;
}
}
}
this.display();
};
//Ghost Object - Inhertis from Enemy
var Ghost = function(pos) {
Enemy.call(this, pos);
this.bodyColor = color(240, 237, 235, 200);
this.eyeColor = color(38, 38, 38);
this.theta = 0.0;
this.amplitude = 20.0;
this.dy = 0.0;
this.ybase = this.pos.y;
};
Ghost.prototype = Object.create(Enemy.prototype);
Ghost.prototype.display = function() {
pushMatrix();
translate(this.pos.x, this.pos.y);
if(this.dir === -1) {
scale(-1, 1);
translate(-this.w, 0);
}
//body
noStroke();
fill(this.bodyColor);
rect(0, 0, this.w, this.h*0.75, 8, 8, 0, 0);
arc(this.w/6, this.h*0.75, this.w/3, this.h/2, 0, radians(180));
arc(this.w/2, this.h*0.75, this.w/3, this.h/2, 0, radians(180));
arc(this.w - this.w/6, this.h*0.75, this.w/3, this.h/2, 0, radians(180));
//eyes
fill(this.eyeColor);
ellipse(this.w/3 + this.speed, this.h/3.5, 4, 4);
ellipse(this.w - this.w/3 + this.speed, this.h/3.5, 4, 4);
popMatrix();
noStroke();
};
Ghost.prototype.update = function() {
this.theta += 3;
this.dy = sin(radians(this.theta)) * this.amplitude;
this.pos.x += this.speed * this.dir;
this.pos.y = this.ybase + this.dy;
if(random() < 0.005) {
game.coins.push(new Bone(this.pos.x, 395));
}
};
Ghost.prototype.run = function() {
this.update();
this.display();
};
//ZamikazeGhost - Inhertis from Ghost > Enemy
var KamikazeGhost = function(pos) {
Ghost.call(this);
this.timeToFall = random(200, 700);
this.pos = pos;
this.dropSpeed = 5;
this.isOnGround = false;
this.amplitude = 30.0;
this.ybase = this.pos.y;
};
KamikazeGhost.prototype = Object.create(Ghost.prototype);
KamikazeGhost.prototype.drop = function() {
if(!this.isOnGround) {
this.timeToFall--;
if(this.timeToFall < 0) {
this.pos.y += this.dropSpeed;
if(this.pos.y >= 360) {
this.isOnGround = true;
}
}
}
this.display();
};
//Vampire Object - Inhertis from Enemy
var Vampire = function(pos) {
Enemy.call(this, pos);
this.headColor = color(214, 213, 171);
// this.bodyColor = random() < 0.5 ? color(115, 13, 13) : color(12, 12, 12);
this.bodyColor = color(12, 12, 12);
this.hairColor = color(22, 22, 22);
this.eyeColor = color(38, 38, 38);
this.fangColor = color(245, 242, 242);
this.capeColor = random() < 0.5 ? color(115, 13, 13) : color(12, 12, 12);
this.batColor = color(0);
this.isBat = false;
this.theta = 0.0;
this.amplitude = 20.0;
this.dy = 0.0;
this.ybase = this.pos.y;
};
Vampire.prototype = Object.create(Enemy.prototype);
Vampire.prototype.display = function() {
pushMatrix();
translate(this.pos.x, this.pos.y);
if(this.dir === -1) {
scale(-1, 1);
translate(-this.w, 0);
}
if(this.isBat) {
fill(this.batColor);
//wings
noStroke();
pushMatrix();
translate(0, 0);
rotate(radians(this.dy*1.5));
beginShape();
vertex(0, 3);
vertex(-30, 3);
bezierVertex(-29, 6, -26, 9, -27, 12);
bezierVertex(-24, 8, -19, 8, -13, 10);
bezierVertex(-10, 7, 5, 7, 0, 6);
vertex(0, 3);
endShape();
popMatrix();
pushMatrix();
translate(15, 0);
rotate(radians(-this.dy*1.5));
beginShape();
vertex(0, 3);
vertex(30, 3);
bezierVertex(29, 6, 26, 9, 27, 12);
bezierVertex(24, 8, 19, 8, 13, 10);
bezierVertex(10, 7, -5, 7, 0, 6);
vertex(0, 3);
endShape();
popMatrix();
//body
noStroke();
fill(this.batColor);
rect(0, 0, 15, 15, 3);
//ears
triangle(2, 0, 5, -6, 8, 0);
triangle(this.w-2, 0, this.w-5, -6, this.w-8, 0);
//eyes
fill(255);
ellipse(5, 4, 3, 3);
ellipse(this.w-5, 4, 3, 3);
}
else { //vampire
//body
noStroke();
fill(this.headColor);
rect(0, 0, this.w, this.h, 3);
fill(this.bodyColor);
rect(0, this.h/2, this.w, this.h/2);
//cape
fill(this.capeColor);
triangle(0, this.h/4, 0, this.h*0.6, -this.w/6, this.h/4);
triangle(this.w, this.h/4, this.w, this.h*0.6, this.w + this.w/6, this.h/4);
//fangs
fill(this.fangColor);
triangle(this.w * 0.3, this.h/2, this.w * 0.4, this.h * 0.75, this.w * 0.45, this.h/2);
triangle(this.w * 0.75, this.h/2, this.w * 0.8, this.h * 0.75, this.w * 0.9, this.h/2);
triangle(this.w * 0.45, this.h/2, this.w * 0.5, this.h * 0.65, this.w * 0.55, this.h/2);
triangle(this.w * 0.65, this.h/2, this.w * 0.7, this.h * 0.65, this.w * 0.75, this.h/2);
triangle(this.w * 0.55, this.h/2, this.w * 0.6, this.h * 0.65, this.w * 0.65, this.h/2);
//eyes
fill(this.eyeColor);
ellipse(this.w/3 + this.w/6, this.h/3.5, 4, 4);
ellipse(this.w - this.w/3 + this.w/6, this.h/3.5, 4, 4);
//hair
stroke(this.hairColor);
strokeWeight(4);
line(0, 0, this.w-1, 0);
}
popMatrix();
noStroke();
};
Vampire.prototype.update = function() {
this.pos.x += this.speed * this.dir;
if(random() < 0.005) {
game.coins.push(new Bone(this.pos.x, 395));
}
};
Vampire.prototype.run = function() {
this.update();
this.display();
};
//ZamikazeVampire - Inhertis from Vampire > Enemy
var KamikazeVampire = function(pos) {
Vampire.call(this);
this.timeToFall = random(200, 700);
this.pos = pos;
this.dropSpeed = 5;
this.isOnGround = false;
this.amplitude = 20.0;
this.ybase = this.pos.y;
this.isBat = true;
this.w = 15;
this.h = 15;
this.flyUp = 0;
};
KamikazeVampire.prototype = Object.create(Vampire.prototype);
KamikazeVampire.prototype.drop = function().........完整代码请登录后点击上方下载按钮下载查看
网友评论0