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() {
if(!this.isOnGround) {
this.timeToFall--;
if(this.timeToFall < 0) {
this.pos.y += this.dropSpeed;
if(this.pos.y >= 360) {
this.isOnGround = true;
}
}
}
this.display();
};
//Skeleton Object
var Skeleton = function(pos) {
Enemy.call(this, pos);
this.headColor = color(31, 29, 28);
this.bodyColor = color(3, 3, 3);
this.eyeColor = color(180, 180, 180);
this.legColor = color(8, 8, 8);
};
Skeleton.prototype = Object.create(Enemy.prototype);
Skeleton.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(222, 222, 222);
rect(0, 0, this.w, this.h/2, 3);
stroke(222, 222, 222);
strokeWeight(1);
noFill();
//spine
line(this.w/2, this.h/2, this.w/2, this.h);
//ribs
line(this.w/8, this.h * 0.65, this.w - this.w/8, this.h * 0.65);
line(this.w/8, this.h * 0.8, this.w - this.w/8, this.h * 0.8);
line(this.w/8, this.h * 0.95, this.w - this.w/8, this.h * 0.95);
//arms
line(this.w/8, this.h * 0.65, -this.w/75, this.h * 0.9);
line(this.w - this.w/8, this.h * 0.65, this.w + this.w/75, this.h * 0.9);
noStroke();
//eyes
fill(38, 38, 38);
var dir = -0;
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();
};
Skeleton.prototype.update = function() {
this.pos.x += this.speed * this.dir;
if(random() < 0.005) {
game.coins.push(new Bone(this.pos.x, 395));
}
};
Skeleton.prototype.run = function() {
this.update();
this.display();
};
} //Enemies (Inherited)
{
//Player Object
var Player = function(x, y, w, h) {
this.startpos = new PVector(x, y);
this.pos = new PVector(x, y);
this.w = w;
this.h = h;
this.xs = 0;
this.ys = 0;
this.canJump = false;
this.gravity = 0.5;
this.jumpPower = 10;
this.acceleration = 0.5;
this.maxSpeed = 5;
this.momentum = 0.5;
this.armed = 0; //angle of the guns - 0 (loaded) or 70 (unloaded)
this.fired = false;
this.bulletsInit = 2;
this.bullets = game.levels[game.level].bullets || this.bulletsInit;
this.bullet = {
pos: new PVector(0, 0),
w: 5,
h: 5,
dir: 0,
speed: 10
};
};
Player.prototype.display = function() {
noStroke();
//body
fill(215, 177, 112);
rect(this.pos.x, this.pos.y, this.w, this.h, 3);
fill(68, 112, 53);
rect(this.pos.x, this.pos.y+this.h/2, this.w, this.h/2);
//dark green spots (camo)
fill(37, 78, 36);
ellipse(this.pos.x + this.w/8, this.pos.y + this.h / 1.4, 7, 7);
ellipse(this.pos.x + this.w/5, this.pos.y + this.h / 1.5, 5, 5);
ellipse(this.pos.x + this.w/3, this.pos.y + this.h / 1.2, 9, 7);
ellipse(this.pos.x + this.w/2, this.pos.y + this.h / 1.5, 9, 7);
ellipse(this.pos.x + this.w/1.8, this.pos.y + this.h / 1.2, 5, 5);
ellipse(this.pos.x + this.w/1.4, this.pos.y + this.h / 1.3, 5, 5);
ellipse(this.pos.x + this.w/1.2, this.pos.y + this.h / 1.4, 9, 9);
//eyes
fill(28, 28, 28);
//moving eyes in direction of player
ellipse(this.pos.x + this.w/3 + this.xs/this.maxSpeed*this.w/6, this.pos.y + this.h/3.5, 5, 5);
ellipse(this.pos.x + this.w - this.w/3 + this.xs/this.maxSpeed*this.w/6, this.pos.y + this.h/3.5, 5, 5);
//helmet
stroke(68, 112, 53);
strokeWeight(4);
line(this.pos.x, this.pos.y, this.pos.x + this.w-1, this.pos.y);
noStroke();
//hands and guns...
pushMatrix();
translate(this.pos.x + this.w/2, this.pos.y + this.h/1.8);
//hands
fill(215, 177, 112);
ellipse(-this.w/2, this.h/6, 8, 8);
ellipse(this.w/2, this.h/6, 8, 8);
//guns
// stroke(38, 38, 38);
stroke(102, 102, 102);
strokeWeight(4);
//left gun
pushMatrix();
translate(-this.w/2, this.h/10);
rotate(radians(this.armed));
line(0, 0, -this.w/4, 0);
popMatrix();
//right gun
pushMatrix();
translate(this.w/2, this.h/10);
rotate(radians(-this.armed));
line(0, 0, this.w/4, 0);
popMatrix();
popMatrix();
noStroke();
if(this.fired) {
this.bullet.pos.x+= this.bullet.speed * this.bullet.dir;
// fill(8, 8, 8);
fill(200, 200, 200);
ellipse(this.bullet.pos.x, this.bullet.pos.y, this.bullet.w, this.bullet.h);
}
};
Player.prototype.setMovement = function() {
var speed = 0.1;
if(keys[RIGHT]) {
this.xs = constrain(this.xs + this.acceleration, -this.maxSpeed, this.maxSpeed);
}
else if(keys[LEFT]) {
this.xs = constrain(this.xs - this.acceleration, -this.maxSpeed, this.maxSpeed);
}
else {
this.xs *= this.momentum;
}
if(this.canJump && keys[UP]) {
this.ys = -this.jumpPower;
}
};
Player.prototype.update = function() {
this.setMovement();
if(!this.canJump) {
this.ys += this.gravity;
}
this.canJump = false;
this.pos.y = constrain(this.pos.y + this.ys, 0, 450);
this.pos.x = constrain(this.pos.x + this.xs, 0, 600 - this.w);
if(this.pos.y + this.h > 400){
this.ys = 0;
this.pos.y = 400 - this.h;
this.canJump = true;
}
if(this.bullets > 0) {
this.armed = 0;
}
else {
this.armed = 70;
}
};
Player.prototype.shoot = function() {
//Check if already fired - can only fire one bullet at a time
if(this.fired === false) {
//If have bullets then fire
if(this.bullets > 0) {
if(keyPressed && keyCode === 68) { //D - shoot right
this.bullet.pos.x = this.pos.x + this.w + this.w/3;
this.bullet.pos.y = this.pos.y + this.h/1.6;
this.bullet.dir = 1;
this.fired = true;
this.bullets--;
keyCode = 0;
}
else if(keyPressed && keyCode === 65) { //A - shoot left
this.bullet.pos.x = this.pos.x - this.w/3;
this.bullet.pos.y = this.pos.y + this.h/1.6;
this.bullet.dir = -1;
this.fired = true;
this.bullets--;
keyCode = 0;
}
}
}
else {
//Check if killed enemy or gone off the screen
for(var i = game.enemies.length - 1; i >= 0; i--)
{
var enemy = game.enemies[i];
if( this.bullet.pos.x + this.bullet.w > enemy.pos.x &&
this.bullet.pos.x < enemy.pos.x + enemy.w &&
this.bullet.pos.y + this.bullet.h > enemy.pos.y &&
this.bullet.pos.y < enemy.pos.y + enemy.h) {
game.enemies.splice(i, 1);
game.score+= game.levels[game.level].enemyPoints;
game.enemiesKilled++;
this.fired = false;
break;
}
}
//If bullet goes off the screen then able to fire again
if(this.bullet.pos.x < 0 || this.bullet.pos.x > width) {
this.fired = false;
}
}
};
Player.prototype.run = function() {
this.update();
this.shoot();
this.display();
};
} //Player
{
//Game Object
var Game = function() {
this.page = "home";
this.level = 0;
this.levels = [
{ //Home | Levels | How | Scores
//
},
{ //Level 1
enemiesToKill: 10,
story: ("Your mission is to destroy 10 scary skeletons"),
bullets: 2,
enemyPoints: 25,
cointPoints: 5
},
{ //Level 2
enemiesToKill: 15,
story: ("Well done!!\nYour next mission is to destroy 15 zany zombies"),
bullets: 2,
enemyPoints: 30,
cointPoints: 10
},
{ //Level 3
enemiesToKill: 15,
story: ("Awesome work!!\nYour next mission is to destroy 15 sneaky spiders"),
bullets: 3,
enemyPoints: 40,
cointPoints: 15
},
{ //Level 4
enemiesToKill: 20,
story: ("Almost there!!\nYour next mission is to destroy 20 ghoulish ghosts"),
bullets: 4,
enemyPoints: 50,
cointPoints: 20
},
{ //Level 5
enemiesToKill: 50,
story: ("Amazing stuff\nYour final mission is to destroy 50 vicious vampires"),
bullets: 5,
enemyPoints: 75,
cointPoints: 25
}
];
this.currentScene = this.images.scene0;
this.enemiesKilled = 0;
this.enemies = []; //Holds all types of enemie objects
this.coins = []; //Holds coins
this.ammunition = []; //Holds ammunition
this.enemyFrequency = 100; //How often a new enemy appears
this.ammoFrequency = 400; //How often ammo appears
this.resetZombies(); //Level 2 - zombies
this.resetSpiders(); //Level 3 - spiders
this.resetGhosts(); //Level 4 - ghosts
this.resetVampires(); //Level 5 - vampires
this.score = 0;
this.totalScore = 0;
this.finalScore = 0;
this.highScores = [
{
user: "Could be you",
score: 0
},
{
user: "Could be you",
score: 0
},
{
user: "Could be you",
score: 0
},
{
user: "Could be you",
score: 0
},
{
user: "Could be you",
score: 0
},
{
user: "Could be you",
score: 0
},
{
user: "Could be you",
score: 0
}];
this.textColor = color(255);
this.defaultBackgroundColor = color(32, 60, 61);
this.backgroundColor = this.defaultBackgroundColor;
this.homeButton = new Button ({
x: 190,
y: 250,
content: "Home",
page: "home"
});
this.backButton = new Button ({
x: 250,
y: 370,
content: "Home",
page: "home"
});
this.completeButton = new Button ({
x: 250,
y: 370,
content: "Home",
page: "home"
});
this.howButton = new Button({
x: 70,
y: 200,
content: "How",
page: "how"
});
this.levelsButton = new Button({
x: 310,
y: 200,
content: "Levels",
page: "levels"
});
this.scoresButton = new Button({
x: 430,
y: 200,
content: "Scores",
page: "scores"
});
this.startButton = new Button({
x: 190,
y: 200,
content: "Start",
page: "start"
});
this.playButton.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0