canvas多关卡轨道射击类小游戏代码
代码语言：html
所属分类：游戏
代码描述：canvas多关卡轨道射击类小游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
box-sizing: border-box;
overflow: hidden;
}
body {
background: #3F2E88;
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();
{
noStroke();
angleMode = "degrees";
//textFont(createFont("ink free", 0));
textFont(createFont("Verdana", 0));
var lag = false;
var game;
var cannon;
} //Defaults
{
//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;
};
} //Keys/Mouse
{
var Button = function(config) {
this.x = config.pos.x || 0;
this.y = config.pos.y || 0;
this.radius = config.radius || 80;
this.radiusBase = this.radius;
this.content = config.content || "Home";
this.page = config.page || "home";
this.level = config.level || 0;
this.amplitude = this.radius * 0.1;
this.colorLight = config.colorLight || color(255, 161, 25);
this.colorDark = config.colorDark || color(244, 106, 7);
this.colorLightAlpha = color(red(this.colorLight), green(this.colorLight), blue(this.colorLight), 100);
this.colorDarkAlpha = color(red(this.colorDark), green(this.colorDark), blue(this.colorDark), 100);
this.colorHover = color(red(this.colorLight), green(this.colorLight), blue(this.colorLight), 60);
this.colorHoverOuter = color(red(this.colorLight), green(this.colorLight), blue(this.colorLight), 40);
this.textColor = config.textColor || color(0, 0, 0, 200);
this.textSize = config.textSize || 20;
this.angleBase = floor(random(-30, 30));
this.angle = this.angleBase;
this.hover = false;
this.scale = 1;
};
Button.prototype.update = function() {
this.scale = abs(sin(radians(frameCount*1.1)) * 0.1) + 1;
};
Button.prototype.display = function () {
textSize(this.textSize);
strokeWeight(1);
noStroke();
//circles
if (dist(mouseX, mouseY, this.x, this.y) <= this.radius / 2) { //hover
this.hover = true;
if(clicked) {
game.page = this.page;
if(this.page === "level") {
game.page = "next";
game.level = this.level;
}
else {
game.reset();
}
}
this.drawPlanet();
}
else { //not hover
this.hover = false;
this.drawPlanet();
}
};
Button.prototype.drawPlanet = function() {
this.angle++;
if(this.hover === true) {
this.angle++;
pushMatrix();
translate(this.x, this.y);
scale(this.scale);
fill(this.colorHover);
ellipse(0, 0, this.radius*1.2, this.radius*1.2);
fill(this.colorHoverOuter);
ellipse(0, 0, this.radius*1.4, this.radius*1.4);
fill(this.colorLight);
rotate(radians(-frameCount*2));
ellipse(0, -this.radius*1.2/2, 5, 5);
ellipse(0, this.radius*1.2/2, 5, 5);
ellipse(-this.radius*1.2/2, 0, 5, 5);
ellipse(this.radius*1.2/2, 0, 5, 5);
rotate(radians(frameCount*4));
fill(this.colorDark);
ellipse(0, -this.radius*1.4/2, 5, 5);
ellipse(0, this.radius*1.4/2, 5, 5);
ellipse(-this.radius*1.4/2, 0, 5, 5);
ellipse(this.radius*1.4/2, 0, 5, 5);
popMatrix();
}
noStroke();
fill(this.color);
pushMatrix();
translate(this.x, this.y);
scale(this.scale);
rotate(radians(this.angle));
//right
fill(this.colorLight);
arc(0, 0, this.radius, this.radius, radians(90), radians(270));
fill(this.colorDark);
arc(0, 0, this.radius, this.radius, radians(-89), radians(90));
noFill();
strokeWeight(8 * (this.radius/this.radiusBase));
strokeCap(ROUND);
stroke(this.colorDarkAlpha);
line(-this.radius*0.05, -this.radius*0.4, this.radius*0.2, -this.radius*0.4);
line(-this.radius*0.3, -this.radius*0.2, this.radius*0.2, -this.radius*0.2);
line(-this.radius*0.1, 0, this.radius*0.2, 0);
line(-this.radius*0.2, this.radius*0.2, this.radius*0.2, this.radius*0.2);
line(-this.radius*0.1, this.radius*0.4, this.radius*0.2, this.radius*0.4);
stroke(this.colorLightAlpha);
line(-this.radius*0.05, -this.radius*0.3, this.radius*0.1, -this.radius*0.3);
line(-this.radius*0.3, -this.radius*0.1, this.radius*0.2, -this.radius*0.1);
line(-this.radius*0.1, this.radius*0.1, this.radius*0.3, this.radius*0.1);
line(-this.radius*0.3, this.radius*0.3, this.radius*0.2, this.radius*0.3);
stroke(this.colorLight);
strokeWeight(4 * (this.radius/this.radiusBase));
ellipse(0, 0, this.radius*0.95, this.radius*0.95);
popMatrix();
textAlign(CENTER, CENTER);
fill(this.textColor);
text(this.content, this.x, this.y);
};
Button.prototype.run = function() {
this.update();
this.display();
};
} //Buttons
{
var colors = [
color(255, 255, 255),
color(104, 200, 38),
color(1, 168, 210),
color(244, 105, 4),
color(117, 39, 149)
];
} //Colors
{
var Star = function(config) {
this.pos = config.pos || new PVector(random(0, width), random(0, height));
this.size = config.size || 10;
this.velocity = config.velocity || new PVector(0, 0);
this.color = colors[floor(random(0, colors.length))];
this.r = red(this.color);
this.b = blue(this.color);
this.g = green(this.color);
this.backColor = color(this.r, this.g, this.b, random(50, 100));
};
Star.prototype.update = function() {
this.pos.add(this.velocity);
};
Star.prototype.display = function() {
noFill();
stroke(this.backColor);
strokeWeight(this.size*0.5);
strokeCap(ROUND);
pushMatrix();
translate(this.pos.x, this.pos.y);
line(0, -this.size/2, 0, this.size/2);
line(-this.size/2, 0, this.size/2, 0);
popMatrix();
};
Star.prototype.run = function() {
this.update();
this.display();
};
} //Star
{
var Barrier = function(config) {
this.pos = config.pos || new PVector(0, 0);
this.w = config.w || 100;
this.h = config.h || 20;
this.color = config.color || color(255, 0, 0);
this.color2 = config.color2 || color(255, 255, 0);
this.theta = config.theta || random(0.7, 1.2);
this.amplitude = config.amplitude || random(0.3, 0.5);
};
Barrier.prototype.update = function() {
this.pos.y += sin(radians(frameCount * this.theta)) * this.amplitude;
};
Barrier.prototype.display = function() {
noStroke();
fill(red(this.color), green(this.color), blue(this.color), 200);
rect(this.pos.x, this.pos.y, this.w, this.h, 5);
fill(0, 0, 0, 40);
rect(this.pos.x, this.pos.y + this.h/2, this.w, this.h/2, 5);
};
Barrier.prototype.run = function() {
this.update();
this.display();
};
Barrier.prototype.collision = function (missile) {
if (missile.pos.x + missile.size / 2 > this.pos.x &&
missile.pos.y + missile.size / 2 > this.pos.y &&
missile.pos.x - missile.size / 2 < this.pos.x + this.w &&
missile.pos.y - missile.size / 2 < this.pos.y + this.h) {
game.addExplosion({
pos: new PVector(missile.pos.x, missile.pos.y),
backColor: this.color,
w: 40,
h: 40
});
return true;
}
return false;
};
} //Barrier
{
var Oscillator = function(config) {
this.origin = config.origin || new PVector(width/2, height/2);
this.angle = config.angle || new PVector(0, 0);
this.velocity = config.velocity || new PVector(random(-2, 2), random(-2, 2));
this.amplitude = config.amplitude || new PVector(random(this.origin.x*0.3, this.origin.x*0.5), random(this.origin.y*0.3, this.origin.y*0.5));
this.radius = this.amplitude.mag()*0.25;
this.color = config.color || colors[floor(random(1, colors.length))];
this.r = red(this.color);
this.g = green(this.color);
this.b = blue(this.color);
this.pos = config.pos || new PVector(0, 0);
this.w = config.w || this.radius;
this.h = config.h || this.radius;
this.thetaX = 0.0;
this.thetaY = 0.0;
this.amplitude2 = config.amplitude2 || 5.0;
this.dx = 0.0;
this.dy = 0.0;
this.thetaChangeX = random(3, 12);
this.thetaChangeY = random(3, 12);
};
Oscillator.prototype.oscillate = function() {
this.thetaX += this.thetaChangeX;
this.thetaY += this.thetaChangeY;
this.dx = sin(radians(this.thetaX)) * this.amplitude2;
this.dy = sin(radians(this.thetaY)) * this.amplitude2;
this.w = this.dx + this.radius;
this.h = this.dy + this.radius;
this.amplitude.mult(1.001);
this.amplitude.limit(300);
this.angle.add(this.velocity);
};
Oscillator.prototype.display = function() {
this.pos.x = sin(radians(this.angle.x)) * this.amplitude.x;
this.pos.y = sin(radians(this.angle.y)) * this.amplitude.y;
var v = new PVector(this.pos.x, this.pos.y);
var opacity = map(v.mag(), 0, this.origin.x, 70, 255);
this.pos.add(this.origin);
pushMatrix();
stroke(200, 200, 200, 30);
strokeWeight(1);
line(this.origin.x, this.origin.y, this.pos.x, this.pos.y);
noStroke();
fill(this.r, this.g, this.b, opacity);
ellipse(this.pos.x, this.pos.y, this.w, this.h);
fill(0, 0, 0, 20);
arc(this.pos.x, this.pos.y, this.w, this.h, 0, radians(180));
popMatrix();
};
Oscillator.prototype.run = function() {
this.oscillate();
this.display();
};
Oscillator.prototype.collision = function(obj) {
var dx = this.pos.x - obj.pos.x;
var dy = this.pos.y - obj.pos.y;
var distance = Math.sqrt(dx * dx + dy * dy);
if (distance < this.radius/2 + obj.size/2) {
game.addExplosion({
pos: this.pos,
backColor: this.color,
w: 40,
h: 40
});
return true;
}
return false;
};
var OscillatorSystem = function(config) {
this.oscillators = [];
this.num = config.num || 1;
for(var i = 0; i < this.num; i++) {
this.oscillators.push(new Oscillator({}));
}
};
OscillatorSystem.prototype.run = function() {
for(var i = 0; i < this.oscillators.length; i++) {
this.oscillators[i].run();
}
};
OscillatorSystem.prototype.add = function(n) {
for(var i = 0; i < n; i++) {
this.oscillators.push(new Oscillator({}));
}
};
} //Oscillator
{
var Wave = function(config) {
this.xSpacing = config.xSpacing || 16;
this.theta = config.theta || 0.0;
this.amplitude = config.amplitude || 25.0;
this.baseHeight = config.baseHeight || height * 0.8;
this.radius = config.radius || 25;
this.points = config.points || new Array(width + this.xSpacing);
this.colors = [
color(104, 200, 38, 150),
color(1, 168, 210, 150),
color(244, 105, 4, 150),
color(117, 39, 149, 150)
];
};
Wave.prototype.init = function() {
this.points = new Array(width + this.xSpacing);
var x = this.theta;
var c;
for (var i = 0; i < this.points.length; i++) {
c = this.colors[floor(random(0, this.colors.length))];
this.points[i] = {
y: sin(radians(x)) * this.amplitude,
color: c,
shade: color(red(c), green(c), blue(c), 50)
};
x += 1;
}
};
Wave.prototype.update = function() {
this.theta += 2;
var x = this.theta;
for (var i = 0; i < this.points.length; i++) {
this.points[i].y = sin(radians(x)) * this.amplitude;
x += 1;
}
};
Wave.prototype.display = function() {
noStroke();
for(var x = 0; x < this.points.length; x+= this.xSpacing * 2) {
fill(this.points[x].shade);
rect(x - this.radius/4, this.baseHeight + this.points[x].y + this.radius/2, this.radius/2, height);
fill(this.points[x].color);
ellipse(x, this.baseHeight + this.points[x].y, this.radius, this.radius);
fill(0, 0, 0, 40);
arc(x, this.baseHeight + this.points[x].y, this.radius, this.radius, 0, radians(180));
}
};
Wave.prototype.run = function() {
this.update();
this.display();
};
} //Wave
{
var Spiral = function(config) {
this.pos = config.pos || new PVector(width/2, height/2);
this.basePos = new PVector(this.pos.x, this.pos.y);
this.speed = config.speed || random(3, 6);
this.radius = config.radius || random(20, 40);
this.xAmp = 0;
this.yAmp = 0;
this.xAmpSpeed = random(0.0007, 0.001);
this.yAmpSpeed = random(0.0007, 0.001);
this.dir = config.dir || random() < 0.5 ? 1 : -1;
this.index = 0;
this.colors = [
color(104, 200, 38),
color(1, 168, 210),
color(244, 105, 4),
color(117, 39, 149)
];
this.color = config.color || this.colors[floor(random(this.colors.length))];
this.r = red(this.color);
this.g = green(this.color);
this.b = blue(this.color);
};
Spiral.prototype.update = function() {
this.index+= this.speed;
this.pos = new PVector(sin(radians(this.index*this.dir)) * width * this.xAmp + this.basePos.x, -cos(radians(this.index*this.dir)) * height * this.yAmp + this.basePos.y);
this.xAmp+= this.xAmpSpeed;
this.yAmp+= this.yAmpSpeed;
};
Spiral.prototype.display = function() {
noStroke();
fill(this.r, this.g, this.b, 200);
ellipse(this.pos.x, this.pos.y, this.radius, this.radius);
fill(0, 0, 0, 20);
arc(this.pos.x, this.pos.y, this.radius, this.radius, 0, radians(180));
};
Spiral.prototype.collision = function(obj) {
var dx = this.pos.x - obj.pos.x;
var dy = this.pos.y - obj.pos.y;
var distance = Math.sqrt(dx * dx + dy * dy);
if (distance < this.radius/2 + obj.size/2) {
game.addExplosion({
pos: this.pos,
backColor: this.color,
w: 40,
h: 40
});
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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