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 - I.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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