processing实现canvas万圣节捉鬼游戏代码
代码语言：html
所属分类：游戏
代码描述：processing实现canvas万圣节捉鬼游戏代码，这个游戏是基于Google涂鸦“2018万圣节”的主题。在游戏中，幽灵们组队竞争，看谁能在月亮消失之前收集到最多的游荡鬼火。但途中会有一些意外的转折...使用方向键或WASD键来移动和收集鬼火。你可以从敌人那里偷取鬼火，但要小心，他们也可以偷走你的。将鬼火带回你的基地可以获得积分。请注意，不同的鬼火会给你不同的能力。
代码标签： processing canvas 万圣节 捉鬼 游戏 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
box-sizing: border-box;
overflow: hidden;
}
body {
background: #242424;
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>
<script >
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(600, 600);
frameRate(60);
smooth();
var game;
//Keys/Mouse
{
//Key|Button stuff
var clicked = false;
var hover = false;
var keys = [];
keyPressed = function () {
keys[keyCode] = true;
};
keyReleased = function () {
keys[keyCode] = false;
};
mouseClicked = function () {
clicked = true;
};
}
/** @created_by MKaelin368 (KWC) (c) 2018 */
var setKALoopTimeout = function (ms) {
var method_name = "KAInfiniteLoopSetTimeout";
if (method_name in this) {
this[method_name](ms >>> 0);
}
};
var Button = function (config) {
this.x = config.x || 0;
this.y = config.y || 0;
this.size = config.size || 100;
this.content = config.content || "Home";
this.page = config.page || "home";
this.textSize = config.textSize || this.size / 5;
this.borderColor = color(12, 31, 3, 20);
this.backColor = color(70, 71, 71, 150);
this.textColor = config.textColor || color(170, 170, 170);
this.backColorHover = color(102, 105, 105, 150);
this.textColorHover = color(130, 130, 130);
this.growth = 0;
this.func = config.func || function() {};
this.draw = function () {
pushStyle();
textAlign(CENTER, CENTER);
textSize(this.textSize + (this.growth * 0.1));
noStroke();
//shadow
fill(20, 20, 20, 30);
ellipse(this.x, this.y + this.size * 0.52, (this.size + this.growth) * 0.8, (this.size + this.growth) * 0.3);
//circles
if (dist(mouseX, mouseY, this.x, this.y) <= this.size / 2) { //hover
hover = true;
this.growth = constrain(this.growth + 0.5, 0, 10);
if (clicked) {
this.func();
}
fill(this.backColorHover);
stroke(this.borderColor);
noStroke();
ellipse(this.x, this.y, this.size + this.growth, this.size + this.growth);
fill(this.textColorHover);
switch(this.content) {
case "Play":
triangle(this.x + this.size*0.25, this.y, this.x - this.size*0.15, this.y - this.size*0.25, this.x - this.size*0.15, this.y + this.size*0.25);
break;
case "How":
pushStyle();
textSize(this.size*0.6);
text("?", this.x, this.y);
popStyle();
break;
case "Sound":
pushStyle();
noStroke();
fill(this.textColorHover);
triangle(this.x, this.y - this.size * 0.3, this.x, this.y + this.size * 0.3, this.x - this.size * 0.3, this.y);
rect(this.x - this.size * 0.3, this.y - this.size * 0.1, this.size * 0.3, this.size * 0.2);
if(game.sound) {
noFill();
stroke(this.textColorHover);
strokeWeight(this.size/20);
arc(this.x + this.size * 0.1, this.y, this.size * 0.2, this.size * 0.2, -91, 90);
arc(this.x + this.size * 0.1, this.y, this.size * 0.4, this.size * 0.4, -81, 80);
}
else {
noFill();
stroke(this.textColorHover);
strokeWeight(this.size/20);
line(this.x + this.size * 0.1, this.y - this.size * 0.1, this.x + this.size * 0.25, this.y + this.size * 0.1);
line(this.x + this.size * 0.1, this.y + this.size * 0.1, this.x + this.size * 0.25, this.y - this.size * 0.1);
}
popStyle();
break;
case "Story":
pushStyle();
noFill();
stroke(this.textColorHover);
strokeWeight(4);
line(this.x-this.size*0.23, this.y-this.size*0.2, this.x+this.size*0.23, this.y-this.size*0.2);
line(this.x-this.size*0.23, this.y, this.x+this.size*0.23, this.y);
line(this.x-this.size*0.23, this.y+this.size*0.2, this.x+this.size*0.23, this.y+this.size*0.2);
popStyle();
break;
case "Scoreboard":
pushStyle();
noFill();
stroke(this.textColorHover);
strokeWeight(this.size * 0.14);
strokeCap(SQUARE);
line(this.x, this.y + this.size * 0.25, this.x, this.y - this.size * 0.3);
line(this.x - this.size * 0.2, this.y + this.size * 0.25, this.x - this.size * 0.2, this.y - this.size * 0.1);
line(this.x + this.size * 0.2, this.y + this.size * 0.25, this.x + this.size * 0.2, this.y - this.size * 0.2);
popStyle();
break;
case "Back":
pushStyle();
beginShape();
vertex(this.x+this.size*0.25, this.y); //1
vertex(this.x+this.size*0.25, this.y+this.size*0.25); //2
vertex(this.x+this.size*0.07, this.y+this.size*0.25); //3
vertex(this.x+this.size*0.07, this.y+this.size*0.12); //4
vertex(this.x-this.size*0.07, this.y+this.size*0.12); //5
vertex(this.x-this.size*0.07, this.y+this.size*0.25); //6
vertex(this.x-this.size*0.25, this.y+this.size*0.25); //7
vertex(this.x-this.size*0.25, this.y); //8
vertex(this.x, this.y-this.size*0.2); //9
vertex(this.x+this.size*0.25, this.y); //10
endShape();
noFill();
stroke(this.textColorHover);
strokeWeight(this.size*0.05);
line(this.x-this.size*0.27, this.y-this.size*0.05, this.x, this.y-this.size*0.27);
line(this.x+this.size*0.27, this.y-this.size*0.05, this.x, this.y-this.size*0.27);
line(this.x+this.size*0.15, this.y-this.size*0.19, this.x+this.size*0.15, this.y-this.size*0.25);
popStyle();
break;
case "Replay":
pushStyle();
noFill();
stroke(this.textColorHover);
strokeWeight(5);
pushMatrix();
translate(this.x, this.y);
rotate(radians(game.rate * 5));
arc(0, 0, this.size * 0.6, this.size * 0.6, 1, 275);
noStroke();
fill(this.textColorHover);
translate(this.size * 0.30, -this.size * 0.18);
rotate(radians(-70));
triangle(0, -this.size * 0.1, -this.size * 0.14, -this.size * 0.3, this.size * 0.14, -this.size * 0.3);
popMatrix();
popStyle();
break;
default:
text(this.content, this.x, this.y);
}
}
else { //not hover
this.growth = constrain(this.growth - 0.5, 0, 10);
fill(this.backColor);
strokeWeight(2);
stroke(this.borderColor, 100);
noStroke();
ellipse(this.x, this.y, this.size + this.growth, this.size + this.growth);
fill(this.textColor);
switch(this.content) {
case "Play":
triangle(this.x + this.size*0.25, this.y, this.x - this.size*0.15, this.y - this.size*0.25, this.x - this.size*0.15, this.y + this.size*0.25);
break;
case "How":
pushStyle();
textSize(this.size*0.6);
text("?", this.x, this.y);
popStyle();
break;
case "Sound":
pushStyle();
noStroke();
fill(this.textColor);
triangle(this.x, this.y - this.size * 0.3, this.x, this.y + this.size * 0.3, this.x - this.size * 0.3, this.y);
rect(this.x - this.size * 0.3, this.y - this.size * 0.1, this.size * 0.3, this.size * 0.2);
if(game.sound) {
noFill();
stroke(this.textColor);
strokeWeight(this.size/20);
arc(this.x + this.size * 0.1, this.y, this.size * 0.2, this.size * 0.2, -91, 90);
arc(this.x + this.size * 0.1, this.y, this.size * 0.4, this.size * 0.4, -81, 80);
}
else {
noFill();
stroke(this.textColor);
strokeWeight(this.size/20);
line(this.x + this.size * 0.1, this.y - this.size * 0.1, this.x + this.size * 0.25, this.y + this.size * 0.1);
line(this.x + this.size * 0.1, this.y + this.size * 0.1, this.x + this.size * 0.25, this.y - this.size * 0.1);
}
popStyle();
break;
case "Story":
pushStyle();
noFill();
stroke(this.textColor);
strokeWeight(4);
line(this.x-this.size*0.23, this.y-this.size*0.2, this.x+this.size*0.23, this.y-this.size*0.2);
line(this.x-this.size*0.23, this.y, this.x+this.size*0.23, this.y);
line(this.x-this.size*0.23, this.y+this.size*0.2, this.x+this.size*0.23, this.y+this.size*0.2);
popStyle();
break;
case "Scoreboard":
pushStyle();
noFill();
stroke(this.textColor);
strokeWeight(this.size * 0.14);
strokeCap(SQUARE);
line(this.x, this.y + this.size * 0.25, this.x, this.y - this.size * 0.3);
line(this.x - this.size * 0.2, this.y + this.size * 0.25, this.x - this.size * 0.2, this.y - this.size * 0.1);
line(this.x + this.size * 0.2, this.y + this.size * 0.25, this.x + this.size * 0.2, this.y - this.size * 0.2);
popStyle();
break;
case "Back":
pushStyle();
beginShape();
vertex(this.x+this.size*0.25, this.y); //1
vertex(this.x+this.size*0.25, this.y+this.size*0.25); //2
vertex(this.x+this.size*0.07, this.y+this.size*0.25); //3
vertex(this.x+this.size*0.07, this.y+this.size*0.12); //4
vertex(this.x-this.size*0.07, this.y+this.size*0.12); //5
vertex(this.x-this.size*0.07, this.y+this.size*0.25); //6
vertex(this.x-this.size*0.25, this.y+this.size*0.25); //7
vertex(this.x-this.size*0.25, this.y); //8
vertex(this.x, this.y-this.size*0.2); //9
vertex(this.x+this.size*0.25, this.y); //10
endShape();
noFill();
stroke(this.textColor);
strokeWeight(this.size*0.05);
line(this.x-this.size*0.27, this.y-this.size*0.05, this.x, this.y-this.size*0.27);
line(this.x+this.size*0.27, this.y-this.size*0.05, this.x, this.y-this.size*0.27);
line(this.x+this.size*0.15, this.y-this.size*0.19, this.x+this.size*0.15, this.y-this.size*0.25);
popStyle();
break;
case "Replay":
pushStyle();
noFill();
stroke(this.textColor);
strokeWeight(5);
pushMatrix();
translate(this.x, this.y);
rotate(radians(sin(game.rate * 5) * 20));
arc(0, 0, this.size * 0.6, this.size * 0.6, 1, 275);
noStroke();
fill(this.textColor);
translate(this.size * 0.30, -this.size * 0.18);
rotate(radians(-70));
triangle(0, -this.size * 0.1, -this.size * 0.14, -this.size * 0.3, this.size * 0.14, -this.size * 0.3);
popMatrix();
popStyle();
break;
default:
text(this.content, this.x, this.y);
}
}
popStyle();
};
};
var Avatar = function(config) {
this.type = config.type || 0;
this.draw = function() {
switch(this.type) {
case 0: //Jade
pushMatrix();
pushStyle();
//face
noStroke();
fill(255, 255, 255);
beginShape();
vertex(50, 5);
bezierVertex(65, 4, 86, 15, 91, 34);
bezierVertex(94, 58, 82, 72, 63, 79);
bezierVertex(36, 82, 16, 72, 11, 52);
bezierVertex(8, 32, 20, 12, 50, 5);
endShape(CLOSE);
//body
fill(131, 255, 174, 150);
stroke(20, 104, 26, 70);
strokeWeight(8);
beginShape();
vertex(50, 3);
bezierVertex(69, 3, 88, 8, 97, 32);
bezierVertex(102, 58, 101, 82, 100, 101);
bezierVertex(99, 110, 100, 115, 90, 118);
bezierVertex(79, 116, 80, 109, 79, 103);
bezierVertex(77, 110, 70, 117, 62, 119);
bezierVertex(52, 119, 48, 114, 44, 106);
bezierVertex(42, 112, 32, 120, 20, 116);
bezierVertex(13, 113, 9, 104, 9, 95);
bezierVertex(11, 79, 6, 70, 5, 47);
bezierVertex(4, 24, 23, 3, 50, 3);
endShape(CLOSE);
//eyes
noStroke();
fill(0, 97, 0);
ellipse(39, 29, 25, 23);
ellipse(70, 26, 25, 23);
//eyeballs
fill(174, 255, 174);
ellipse(43, 30, 11, 10);
ellipse(66, 27, 11, 10);
//mouth
noFill();
stroke(0, 97, 0, 100);
strokeWeight(3);
bezier(39, 48, 44, 53, 54, 55, 59, 52);
popStyle();
popMatrix();
break;
case 1: //Sage
pushMatrix();
pushStyle();
//face
noStroke();
fill(255, 255, 255);
beginShape();
vertex(50, 5);
bezierVertex(65, 4, 86, 15, 91, 34);
bezierVertex(98, 60, 87, 76, 74, 77);
bezierVertex(32, 88, 12, 74, 11, 52);
bezierVertex(8, 32, 20, 12, 50, 5);
endShape(CLOSE);
//body
fill(131, 255, 174, 150);
stroke(20, 104, 26, 70);
strokeWeight(8);
beginShape();
vertex(50, 3);
bezierVertex(69, 3, 88, 8, 97, 32);
bezierVertex(102, 58, 101, 82, 100, 101);
bezierVertex(99, 110, 100, 115, 90, 118);
bezierVertex(79, 116, 80, 109, 78, 108);
bezierVertex(77, 110, 70, 117, 62, 119);
bezierVertex(52, 119, 48, 114, 44, 106);
bezierVertex(42, 112, 32, 120, 20, 116);
bezierVertex(13, 113, 9, 104, 9, 95);
bezierVertex(11, 79, 6, 70, 5, 47);
bezierVertex(4, 24, 23, 3, 50, 3);
endShape(CLOSE);
//glasses
noFill();
stroke(206, 114, 30);
strokeWeight(4);
beginShape();
vertex(21, 15);
bezierVertex(48, 12, 69, 9, 83, 6);
bezierVertex(85, 18, 82, 23, 74, 26);
bezierVertex(65, 27, 62, 22, 58, 15);
bezierVertex(58, 22, 56, 33, 43, 34);
bezierVertex(31, 34, 25, 25, 21, 16);
endShape(CLOSE);
strokeWeight(2);
line(24, 22, 58, 17);
line(28, 28, 56, 23);
line(61, 16, 84, 12);
line(63, 23, 83, 17);
//mouth
noFill();
stroke(0, 97, 0, 100);
strokeWeight(3);
bezier(23, 33, 32, 46, 44, 43, 49, 41);
popStyle();
popMatrix();
break;
case 2: //Kelly
pushMatrix();
pushStyle();
noStroke();
//face
fill(255, 255, 255);
beginShape();
vertex(50, 5);
bezierVertex(65, 4, 86, 15, 91, 34);
bezierVertex(94, 58, 82, 68, 63, 73);
bezierVertex(36, 77, 16, 72, 11, 52);
bezierVertex(8, 32, 20, 12, 50, 5);
endShape(CLOSE);
//body
fill(131, 255, 174, 150);
stroke(20, 104, 26, 70);
strokeWeight(8);
beginShape();
vertex(50, 3);
bezierVertex(69, 3, 88, 8, 97, 32);
bezierVertex(100, 58, 93, 82, 100, 101);
bezierVertex(101, 110, 100, 115, 90, 118);
bezierVertex(77, 116, 77, 109, 74, 103);
bezierVertex(74, 110, 67, 117, 59, 119);
bezierVertex(47, 119, 43, 114, 39, 96);
bezierVertex(42, 112, 32, 120, 20, 116);
bezierVertex(13, 113, 9, 104, 9, 95);
bezierVertex(11, 79, 6, 70, 5, 47);
bezierVertex(4, 24, 23, 3, 50, 3);
endShape(CLOSE);
//eyes
noStroke();
fill(0, 97, 0);
ellipse(44, 21, 21, 19);
ellipse(65, 20, 21, 19);
//eyeballs
fill(174, 255, 174);
ellipse(47, 22, 8, 7);
ellipse(62, 21, 8, 7);
//mouth
noStroke();
fill(0, 97, 0, 100);
beginShape();
vertex(35, 33);
bezierVertex(42, 33, 45, 44, 55, 43);
bezierVertex(61, 43, 64, 49, 62, 54);
bezierVertex(55, 60, 43, 57, 33, 52);
bezierVertex(27, 43, 29, 36, 35, 33);
endShape(CLOSE);
popStyle();
popMatrix();
break;
case 3: //Olive
pushMatrix();
pushStyle();
//ears
fill(131, 255, 174, 150);
stroke(20, 104, 26, 70);
strokeWeight(8);
beginShape();
vertex(67, 14);
bezierVertex(72, 8, 79, 7, 85, 5);
bezierVertex(89, 15, 91, 21, 90, 29);
endShape(CLOSE);
beginShape();
vertex(37, 17);
bezierVertex(30, 10, 22, 8, 15, 7);
bezierVertex(11, 19, 17, 31, 20, 38);
endShape(CLOSE);
//face
noStroke();
fill(255, 255, 255);
beginShape();
vertex(50, 12);
bezierVertex(65, 10, 86, 15, 91, 34);
bezierVertex(97, 58, 82, 68, 63, 71);
bezierVertex(36, 74, 16, 68, 11, 52);
bezierVertex(8, 32, 20, 17, 50, 12);
endShape(CLOSE);
//body
fill(131, 255, 174, 150);
stroke(20, 104, 26, 70);
strokeWeight(8);
beginShape();
vertex(50, 7);
bezierVertex(69, 7, 88, 8, 97, 32);
bezierVertex(102, 58, 101, 82, 100, 101);
bezierVertex(99, 110, 100, 115, 90, 118);
bezierVertex(79, 116, 80, 109, 79, 103);
bezierVertex(77, 110, 70, 117, 62, 119);
bezierVertex(52, 119, 48, 114, 44, 106);
bezierVertex(42, 112, 32, 120, 20, 116);
bezierVertex(13, 113, 9, 104, 9, 95);
bezierVertex(11, 79, 6, 70, 5, 47);
bezierVertex(4, 24, 23, 8, 50, 7);
endShape(CLOS.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
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