processing+canvas实现形状入侵射击闯关类小游戏代码
代码语言：html
所属分类：游戏
代码描述：processing+canvas实现形状入侵射击闯关类小游戏代码，按住键盘左右方向键控制飞船左右移动，按住键盘d键发射子弹攻击目标，按键盘p键暂停游戏，每一关卡有三次复活机会，最后一关还有大boss。
代码标签： 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: #111;
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, 600);
frameRate(60);
smooth();
/* ADD YOUR OWN LEVELS HERE (Boss level must be the last one)
Must be 10 columns x 9 rows
X = Blank space
Y = Barrier (blocks)
1, 2, 3, 4 = Enemies
P = Portal (random portal enemies emerge from portals)
B = Boss (random boss enemies emerge from the boss)
*/
var levels = [
{}, //start screen (Home | Levels | How | Scores | etc.)
{
grid: [
"XXXXXXXXXX",
"XXXXXXXXXX",
"X11111111X",
"X11111111X",
"X11111111X",
"XXXXXXXXXX",
"XXXXXXXXXX",
"XXXXXXXXXX",
"XYYXYYXYYX"
],
enemyPoints: 10,
story: ("Your mission is to destroy the enemy")
}, //Level 1
{
grid: [
"XXXXXXXXXX",
"X2121P12XX",
"XX1212121X",
"X2121212XX",
"XX1212121X",
"XXXXXXXXXX",
"YXXXXXXXXY",
"XXXXXXXXXX",
"YXXXYYXXXY"
],
enemyPoints: 15,
story: ("Well done!!\nYour next mission is to destroy more enemies")
}, //Level 2
{
grid: [
"XXXXXXXXXX",
"XXXPXXPXXX",
"XX222222XX",
"XXX1111XXX",
"XX333333XX",
"X33211233X",
"XXXXXXXXXX",
"XYYXXXXYYX",
"YXXXYYXXXY"
],
enemyPoints: 20,
story: ("Awesome work!!\nYour next mission is to destroy even more enemies")
}, //Level 3
{
grid: [
"XXXXXXXXXX",
"XPXXPXXPXX",
"XX222222XX",
"XXX1111XXX",
"XX333333XX",
"X33211233X",
"XXXXXXXXXX",
"XYYXXXXYYX",
"YXXXYYXXXY"
],
enemyPoints: 30,
story: ("Wicked!!\nNow you get to destroy even more enemies")
}, //Level 4
{
grid: [
"XXXXXXXXXX",
"X4P4444P4X",
"X31231231X",
"X44444444X",
"X21212121X",
"YXXXXXXXXY",
"XXXYXXYXXX",
"YYYXYYXYYY",
"XXXXXXXXXX"
],
enemyPoints: 100,
story: ("Almost there!!\nYour next mission is to destroy something")
}, //Level 5
{
grid: [
"XXXXXXXXXX",
"XXXXBPXXXX",
"XX13XX31XX",
"XXXX33XXXX",
"XXX1221XXX",
"YXXXXXXXXY",
"XXXYXXYXXX",
"YXYXXXXYXY",
"XXXXXXXXXX"
],
enemyPoints: 150,
story: ("Youza!!\nGet ready to meet the BOSS (lite)"),
bossLives: 5
}, //Level 6 - Boss (lite)
{
grid: [
"XXXXXXXXXX",
"XXXXBPXXXX",
"XX13XX31XX",
"XXX4334XXX",
"XXX2121XXX",
"YXXXXXXXXY",
"XXXYXXYXXX",
"YXYXYYXYXY",
"XXXXXXXXXX"
],
enemyPoints: 150,
story: ("Sick!!\nTime to destroy the BOSS (medium)"),
bossLives: 15
}, //Level 7 - Boss (medium)
{
grid: [
"XXXXXXXXXX",
"YYXXPBPXYY",
"XXX3333XXX",
"YYXX44XXYY",
"XYY4444YYX",
"YXYY44YYXY",
"XYYX33XYYX",
"XYYYYYYYYX",
"XXXXXXXXXX"
],
enemyPoints: 250,
story: ("You da bomb!\nFinal showdown with the real BOSS"),
bossLives: 25
} //Level 8 - Boss (finale)
];
/* ADD YOUR OWN COLOR THEMES HERE (Each theme must include a name and exactly 5 colors)
Try to use light to dark, or dark to light so you get a better contrast in the game
*/
var colorThemes = [
{
name: "vibes",
colors: [
color(0, 48, 73),
color(232, 226, 136),
color(214, 40, 40),
color(247, 127, 0),
color(252, 191, 73)
]
},
{
name: "chalkboard", //by RandomProgrammer24
colors: [
color(64),
color(232, 213, 93),
color(162, 219, 216),
color(209, 182, 192),
color(209, 230, 207),
]
},
{
name:"fire", //by Sreenjoy Modak
colors:[
color(255),
color(255,98,0),
color(255,187,0),
color(240, 140, 0),
color(255, 181, 71)
]
},
{
name: "desert", //by Benji Doerr
colors: [
color(0, 0, 0),
color(235, 215, 0),
color(137, 148, 92),
color(186, 89, 4),
color(255, 0, 0)
]
},
{
name: "birthday party", //by Benji Doerr
colors: [
color(112, 17, 109),
color(202, 5, 77),
color(240, 82, 216),
color(127, 204, 255),
color(244, 252, 0)
]
},
{
name: "contemporary",
colors: [
color(26, 26, 28),
color(78, 78, 80),
color(111, 34, 50),
color(149, 7, 65),
color(195, 8, 63)
]
},
{
name: "futuristic",
colors: [
color(44, 53, 50),
color(16, 100, 102),
color(216, 176, 140),
color(255, 203, 155),
color(210, 233, 227)
]
},
{
name: "audacious",
colors: [
color(39, 39, 39),
color(116, 116, 116),
color(255, 101, 47),
color(255, 228, 1),
color(19, 167, 107)
]
},
{
name: "citrus",
colors: [
color(31, 38, 5),
color(31, 100, 33),
color(83, 144, 15),
color(164, 166, 30),
color(214, 206, 20)
]
},
{
name: "playing arts",
colors: [
color(0, 127, 112),
color(69, 69, 64),
color(139, 42, 49),
color(177, 125, 89),
color(255, 255, 255)
]
},
{
name: "civic",
colors: [
color(64, 61, 62),
color(61, 158, 204),
color(238, 71, 49),
color(248, 249, 251),
color(54, 174, 91)
]
},
{
name: "unnamed",
colors: [
color(46, 53, 50),
color(220, 220, 221),
color(148, 149, 139),
color(175, 28, 28),
color(183, 182, 193)
]
},
{
name: "sunset",
colors: [
color(114, 17, 33),
color(202, 5, 77),
color(241, 81, 86),
color(255, 192, 127),
color(255, 207, 153)
]
},
{
name: "black & white",
colors: [
color(0, 0, 0),
color(51, 51, 51),
color(102, 102, 102),
color(153, 153, 153),
color(255, 255, 255)
]
}
];
{
angleMode = "degrees";
textFont(createFont("Courier New"));
noStroke();
//Grid Coordinates
var w = width / 10;
var h = height / 10;
var highQuality = true;
var player;
var game;
//Used for the Menu Screens
var p1, e1, e2, e3, e4, boss, bossEnemy, portal, portalEnemy;
} //Global Variables
{
//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/5;
//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() {
pushStyle();
strokeWeight(2);
if(this.isMouseInside()) {
hover = true;
if(clicked) {
game.page = this.page;
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);
fill(game.textColor);
textSize(this.textSize);
textAlign(CENTER, CENTER);
text(this.content, this.x + this.width/2, this.y + this.height/2);
}
popStyle();
};
//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
{
var Explosion = function(config){
this.pos = config.pos || new PVector(width/2, height/2);
this.w = config.w || 10;
this.h = config.h || 10;
this.rotation = random(360);
this.rotationDelta = config.rotationDelta || random(-5, 5);
this.acceleration = new PVector(random(-2, 2), random(-2, 2));
this.timeToLive = 255;
this.red = config.red || random(255);
this.green = config.green || random(255);
this.blue = config.blue || random(255);
};
Explosion.prototype.run = function() {
this.update();
this.display();
};
Explosion.prototype.update = function() {
this.pos.add(this.acceleration);
this.rotation += this.rotationDelta;
};
Explosion.prototype.display = function() {
pushMatrix();
translate(this.pos.x, this.pos.y);
rotate(radians(this.rotation));
noStroke();
fill(color(this.red, this.green, this.blue, this.timeToLive));
rect(-this.w / 2, -this.h / 2, this.w, this.h);
popMatrix();
};
} //Explosion
{
var Particle = function(config){
this.pos = config.pos || new PVector(width/2, height/2);
this.w = config.w || 10;
this.h = config.h || 10;
this.acceleration = config.acceleration || new PVector(random(-2, 2), random(1, 3));
this.timeToLive = 255;
this.backColor = config.backColor || color(0);
this.red = red(this.backColor) || random(255);
this.green = green(this.backColor) || random(255);
this.blue = blue(this.backColor) || random(255);
};
Particle.prototype.update = function() {
this.pos.add(this.acceleration);
};
Particle.prototype.display = function() {
pushMatrix();
translate(this.pos.x, this.pos.y);
noStroke();
fill(color(this.red, this.green, this.blue, this.timeToLive));
ellipse(0, 0, this.w, this.h);
popMatrix();
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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