canvas+processing实现往上冲小游戏代码
代码语言：html
所属分类：游戏
代码描述：canvas+processing实现往上冲小游戏代码，疯狂点击鼠标左键往上走，单击一次向上冲，有重力会落下，落到水里就输了，不能碰到电子围栏和炸弹。
代码标签： canvas processing 往上 冲 小 游戏 代码
下面为部分代码预览，完整代码请点击下载或在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.1.4.8.js"></script>
<script >
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(600, 600);
frameRate(60);
smooth();
textFont(createFont('Trebuchet MS'));
var app;
//manages the key/mouse states
var pressed = false, clicked = false, hover = false, keys = [];
mouseClicked = function() {
clicked = true;
};
mousePressed = function () {
pressed = true;
};
keyPressed = function() {
keys[keyCode] = true;
};
keyReleased = function () {
keys[keyCode] = false;
};
//Button object
var Button = (function() {
var Button = function(args) {
this.x = args.x;
this.y = args.y;
this.diameter = args.diameter || 120;
this.content = args.content;
this.textSize = args.textSize || this.diameter * 0.13;
this.hover = false;
this.action = args.action;
this.backColor = args.backColor || color(242, 242, 242);
this.textColor = args.textColor || color(242, 239, 242);
};
Button.prototype = {
over: function() {
//check if the mouse is over the button
return (dist(mouseX, mouseY, this.x, this.y) < this.diameter / 2);
},
draw: function() {
//set hover based on mouse over the button
this.hover = this.over();
if(this.hover) {
hover = true;
}
pushMatrix();
translate(this.x, this.y);
fill(this.backColor, (this.hover ? 200 : 255));
noStroke();
ellipse(0, 0, this.diameter, this.diameter);
fill(app.colors.stroke);
switch(this.content) {
case "play":
triangle(this.diameter*0.25, 0, -this.diameter*0.15, -this.diameter*0.25, -this.diameter*0.15, this.diameter*0.25);
break;
case "sound":
pushStyle();
noStroke();
fill(app.colors.stroke);
triangle(0, -this.diameter * 0.3, 0, this.diameter * 0.3, -this.diameter * 0.3, 0);
rect(-this.diameter * 0.3, -this.diameter * 0.1, this.diameter * 0.3, this.diameter * 0.2);
if(app.sound) {
noFill();
stroke(app.colors.stroke);
strokeWeight(this.diameter/20);
arc(this.diameter * 0.1, 0, this.diameter * 0.2, this.diameter * 0.2, radians(-91), radians(90));
arc(this.diameter * 0.1, 0, this.diameter * 0.4, this.diameter * 0.4, radians(-81), radians(80));
}
else {
noFill();
stroke(app.colors.stroke);
strokeWeight(this.diameter/20);
line(this.diameter * 0.1, -this.diameter * 0.1, this.diameter * 0.25, this.diameter * 0.1);
line(this.diameter * 0.1, this.diameter * 0.1, this.diameter * 0.25, -this.diameter * 0.1);
}
popStyle();
break;
case "leaders":
pushStyle();
noFill();
stroke(app.colors.stroke);
strokeWeight(this.diameter * 0.14);
strokeCap(SQUARE);
line(0, this.diameter * 0.25, 0, -this.diameter * 0.3);
line(-this.diameter * 0.2, this.diameter * 0.25, -this.diameter * 0.2, -this.diameter * 0.1);
line(this.diameter * 0.2, this.diameter * 0.25, this.diameter * 0.2, -this.diameter * 0.2);
popStyle();
break;
case "shop":
pushStyle();
noStroke();
fill(app.colors.stroke);
rect(-this.diameter * 0.25, -this.diameter * 0.25, this.diameter * 0.5, this.diameter * 0.5);
fill(255, 100);
rect(-this.diameter * 0.15, -this.diameter * 0.15, this.diameter * 0.1, this.diameter * 0.15);
rect(this.diameter * 0.05, -this.diameter * 0.15, this.diameter * 0.1, this.diameter * 0.15);
popStyle();
break;
case "home":
pushStyle();
beginShape();
vertex(this.diameter*0.25, 0); //1
vertex(this.diameter*0.25, this.diameter*0.25); //2
vertex(this.diameter*0.07, this.diameter*0.25); //3
vertex(this.diameter*0.07, this.diameter*0.12); //4
vertex(-this.diameter*0.07, this.diameter*0.12); //5
vertex(-this.diameter*0.07, this.diameter*0.25); //6
vertex(-this.diameter*0.25, this.diameter*0.25); //7
vertex(-this.diameter*0.25, 0); //8
vertex(0, -this.diameter*0.2); //9
vertex(this.diameter*0.25, 0); //10
endShape();
noFill();
stroke(app.colors.stroke);
strokeWeight(this.diameter*0.05);
line(-this.diameter*0.27, -this.diameter*0.05, 0, -this.diameter*0.27);
line(this.diameter*0.27, -this.diameter*0.05, 0, -this.diameter*0.27);
line(this.diameter*0.15, -this.diameter*0.19, this.diameter*0.15, -this.diameter*0.25);
popStyle();
break;
case "replay":
pushStyle();
noFill();
stroke(app.colors.stroke);
strokeWeight(5);
pushMatrix();
rotate(radians(frameCount * 3));
arc(0, 0, this.diameter * 0.6, this.diameter * 0.6, 0, radians(275));
noStroke();
fill(app.colors.stroke);
translate(this.diameter * 0.30, -this.diameter * 0.18);
rotate(radians(-70));
triangle(0, -this.diameter * 0.1, -this.diameter * 0.14, -this.diameter * 0.3, this.diameter * 0.14, -this.diameter * 0.3);
popMatrix();
popStyle();
break;
case "how":
pushStyle();
textAlign(CENTER, CENTER);
textFont(createFont('Trebuchet MS Bold'), this.diameter * 0.7);
text("?", 0, 0);
popStyle();
break;
default:
pushStyle();
textAlign(CENTER, CENTER);
text(this.content, 0, 0);
popStyle();
}
popMatrix();
//if button is clicked then run the function argument
if(clicked && this.hover) {
this.action();
}
}
};
return Button;
})();
//Player object
var Player = (function() {
var Player = function() {
this.x = 275;
this.y = 400;
this.px = 275;
this.py = 400;
this.w = 40;
this.h = 40;
this.color = color(227, 211, 134);
this.state = 0; //0 = normal, 1 = lava
this.mouth = {
value: 0,
max: 3
};
this.eyes = {
value: 0,
max: 3
};
this.vx = 0;
this.vy = 0;
this.dir = random() < 0.5 ? 1 : -1;
this.gravity = 0.1;
this.ymin = 400;
this.angle = 0;
};
Player.prototype = {
draw: function() {
switch(this.state) {
case 1: //hit lava state
fill(50);
break;
default:
fill(this.color);
}
pushStyle();
noStroke();
strokeWeight(1);
stroke(250, 200);
noStroke();
//tenticles
ellipse(this.x + this.w * 0.25, this.y + this.h * 0.9, this.w * 0.25, this.h * 0.5);
ellipse(this.x + this.w * 0.5, this.y + this.h * 0.9, this.w * 0.25, this.h * 0.5);
ellipse(this.x + this.w * 0.75, this.y + this.h * 0.9, this.w * 0.25, this.h * 0.5);
//body
strokeWeight(1);
stroke(250, 200);
rect(this.x, this.y, this.w, this.h, 8, 8, 5, 5);
//eyes
switch(this.eyes.value) {
case 0:
noStroke();
fill(255);
ellipse(this.x + this.w * 0.3, this.y + this.h * 0.35, this.w * 0.35, this.w * 0.35);
ellipse(this.x + this.w * 0.7, this.y + this.h * 0.35, this.w * 0.35, this.w * 0.35);
fill(40);
ellipse(this.x + this.w * 0.31, this.y + this.h * 0.34, this.w * 0.17, this.w * 0.19);
ellipse(this.x + this.w * 0.69, this.y + this.h * 0.34, this.w * 0.17, this.w * 0.19);
break;
case 1:
noFill();
stroke(50, 200);
strokeWeight(3);
arc(this.x + this.w * 0.3, this.y + this.h * 0.41, this.w * 0.25, this.w * 0.30, radians(180), radians(360));
arc(this.x + this.w * 0.7, this.y + this.h * 0.41, this.w * 0.25, this.w * 0.30, radians(180), radians(360));
break;
case 2:
noFill();
stroke(50, 200);
strokeWeight(4);
line(this.x + this.w * 0.33, this.y + this.h * 0.25, this.x + this.w * 0.33, this.y + this.h * 0.45);
line(this.x + this.w * 0.67, this.y + this.h * 0.25, this.x + this.w * 0.67, this.y + this.h * 0.45);
break;
case 3:
//dead eyes
noFill();
stroke(50, 200);
strokeWeight(2);
line(this.x + this.w * 0.30, this.y + this.h * 0.27, this.x + this.w * 0.40, this.y + this.h * 0.43);
line(this.x + this.w * 0.40, this.y + this.h * 0.27, this.x + this.w * 0.30, this.y + this.h * 0.43);
line(this.x + this.w * 0.57, this.y + this.h * 0.27, this.x + this.w * 0.67, this.y + this.h * 0.43);
line(this.x + this.w * 0.67, this.y + this.h * 0.27, this.x + this.w * 0.57, this.y + this.h * 0.43);
break;
}
//mouth
switch(this.mouth.value) {
case 0:
strokeWeight(3);
stroke(50, 200);
line(this.x + this.w * 0.35, this.y + this.h * 0.75, this.x + this.w * 0.65, this.y + this.h * 0.75);
break;
case 1:
noStroke();
fill(50, 200);
ellipse(this.x + this.w / 2, this.y + this.h * 0.75, this.w * 0.20, this.w * 0.20);
break;
case 2:
noStroke();
fill(50, 200);
arc(this.x + this.w / 2, this.y + this.h * 0.70, this.w * 0.30, this.w * 0.25, 0, radians(180));
break;
}
popStyle();
},
update: function() {
//not implemented within the player prototype
},
run: function() {
this.update();
this.draw();
}
};
return Player;
})();
//Transition object
var Transition = function() {
this.h = 0;
this.vy = 15;
this.active = false;
this.scene = "home";
this.reset = function() {
this.h = 0;
this.vy = 15;
};
this.draw = function() {
pushStyle();
stroke(app.colors.stroke, 250);
strokeWeight(30);
fill(app.colors.blockColor[0]);
rect(-20, -20, width + 40, this.h);
rect(-20, height-this.h, width + 40, this.h + 20);
strokeWeight(1);
popStyle();
};
this.update = function() {
this.h+= this.vy;
//if halfway down the screen then change the scene
if(this.h >= height/2) {
app.scene = this.scene;
if(this.scene === "play") {
app.reset();
}
this.vy*= -1;
}
//else if it's completely off the screen reset it and set to inactive
else if(this.h < 0) {
this.reset();
this.active = false;
}
};
this.run = function() {
if(this.active) {
this.draw();
this.update();
}
};
};
//App object (runs the game)
var App = (function() {
var App = function() {
this.scene = "load";
this.start = false;
this.player = new Player();
this.transition = new Transition();
this.highscores = [
{
name: "Could be you",
score: 0
},
{
name: "Could be you",
score: 0
},
{
name: "Could be you",
score: 0
},
{
name: "Could be you",
score: 0
},
{
name: "Could be you",
score: 0
},
{
name: "Could be you",
score: 0
},
{
name: "Could be you",
score: 0
},
{
name: "Could be you",
score: 0
},
{
name: "Could be you",
score: 0
},
{
name: "Could be you",
score: 0
}
];
this.theme = 0;
this.themes = [
{
backColor: color(35, 205, 255),
blockColor: [
color(40, 120, 130),
color(30, 110, 120)
],
stroke: color(20, 100, 110),
playerColor: color(230, 141, 240),
images: []
},
{
backColor: color(235, 95, 125),
blockColor: [
color(150, 50, 70),
color(115, 50, 65),
],
stroke: color(105, 40, 55),
playerColor: color(144, 222, 113),
images: []
},
{
backColor: color(180, 210, 130),
blockColor: [
color(70, 120, 75),
color(60, 90, 60),
],
stroke: color(50, 80, 50),
playerColor: color(235, 225, 80),
images: []
}
];
this.colors = this.themes[this.theme];
this.images = undefined;
this.imageIndex = 0;
this.loaded = false;
this.sound = false;
this.sounds = {
lava: this.addSound("//repo.bfw.wiki/bfwrepo/sound/game/water-bubble.mp3"),
bird: this.addSound("//repo.bfw.wiki/bfwrepo/sound/game/giant-yah.mp3"),
spike: this.addSound("//repo.bfw.wiki/bfwrepo/sound/game/giant-hyah.mp3"),
wall: this.addSound("//repo.bfw.wiki/bfwrepo/sound/game/hit-thud.mp3"),
lazer: this.addSound("//repo.bfw.wiki/bfwrepo/sound/game/laser2.mp3"),
star: this.addSound("//repo.bfw.wiki/bfwrepo/sound/game/metal-chime.mp3"),
birdCollect: this.addSound("//repo.bfw.wiki/bfwrepo/sound/game/sound-game-start.mp3")
};
// this.sounds = {
// lava: getSound("rpg/water-bubble"),
// bird: getSound("rpg/giant-yah"),
// spike: getSound("rpg/giant-hyah"),
// wall: getSound("rpg/hit-thud"),
// lazer: getSound("retro/laser2"),
// star: getSound("rpg/metal-chime"),
// };
this.shake = 0;
this.shakedown = 0.1;
this.cam = {
x: 0,
y: 0
};
this.inventory = {
stars: 0
};
this.score = {
value: 0,
best: 0
};
this.stats = {
games: 0
};
this.fonts = {
title: createFont('Trebuchet MS Bold'),
content: createFont('Trebuchet MS')
};
this.anim = {
over: {
value: -600,
base: -600,
angle: 0
}
};
this.parallax = {
back: {
y1: 0,
y2: 899,
speed: 0.25
}
};
this.lava = {
x1: -50,
y1: height - 40,
cx1: 200,
cy1: height - 40,
cx2: 400,
cy2: height - 40,
x2: width + 50,
y2: height - 40,
h: 200,
arr: []
};
this.blocks = [];
this.centerBlocks = [];
this.spikes = [];
this.lazers = [];
this.enemies = [];
this.deadEnemies = [];
this.smokes = [];
this.bubbles = [];
this.fishes = [];
this.particles = [];
this.starImages = [];
this.stars = [];
this.assetImages = [];
this.assets = [];
this.dead = false;
this.grid = {
y1: 0,
y2: -599
};
this.buttons = {
menu: {
play: new Button({
x: width / 2,
y: 300,
diameter: 150,
content: "play",
action: function() {
app.transition.scene = "play";
app.transition.active = true;
}
}),
leaders: new Button({
x: width / 2 - 70,
y: 435,
content: "leaders",
action: function() {
app.transition.scene = "leaderboard";
app.transition.active = true;
}
}),
sound: new Button({
x: width / 2 + 70,
y: 435,
content: "sound",
action: function() {
app.sound = !app.sound;
}
})
},
over: {
home: new Button({
x: width / 2 - 60,
y: 460,
diameter: 100,
content: "home",
action: function() {
if(app.dead) {
app.transition.scene = "home";
app.transition.active = true;
}
}
}),
leaders: new Button({
x: width / 2 + 60,
y: 460,
diameter: 100,
content: "leaders",
action: function() {
if(app.dead) {
app.transition.scene = "leaderboard";
app.transition.active = true;
}
}
}),
replay: new Button({
x: width / 2,
y: 320,
diameter: 130,
content: "replay",
action: function() {
if(app.dead) {
app.transition.scene = "play";
app.transition.active = true;
}
}
})
},
leaderboard: {
home: new Button({
x: width / 2,
y: 535,
diameter: 100,
textSize: 20,
content: "home",
action: function() {
app.transition.scene = "home";
app.transition.active = true;
}
})
}
};
this.init();
};
App.prototype = {
addSound: function(src) {
var sound = document.createElement("audio");
sound.src = src;
sound.setAttribute("preload", "auto");
sound.setAttribute("controls", "none");
sound.style.display = "none";
document.body.appendChild(sound);
return sound;
},
setBlocks: function() {
//initializes the blocks at the start of each game
this.blocks.length = 0;
this.centerBlocks.length = 0;
var y = height + 300;
for(var i = 0; i < 8; i++) {
var h = random(100, 250);
var blockColor = this.colors.blockColor[random(this.colors.blockColor.length) | 0];
this.blocks.push({
x: -310,
y: y - h,
w: 300 + random(20, 250),
h: h,
color: blockColor,
image: this.colors.images[random(this.colors.images.length) | 0]
});
var w = random(20, 250);
this.blocks.push({
x: width - w + 10,
y: y - h,
w: w + 300,
h: h,
color: blockColor,
image: this.colors.images[random(this.colors.images.length) | 0]
});
//add random plants on the left
if(random() < 0.3) {
var b1 = this.blocks[this.blocks.length-2];
var asset1 = this.assetImages[random(this.assetImages.length) | 0];
this.assets.push({
x: b1.x + b1.w - asset1.width / 2,
y: random(b1.y + asset1.height, b1.y + b1.h - asset1.height),
image: asset1
});
}
//add random plants on the right
if(random() < 0.3) {
var b2 = this.blocks[this.blocks.length-1];
var asset2 = this.assetImages[random(this.assetImages.length) | 0];
this.assets.push({
x: b2.x - asset2.width / 2,
y: random(b2.y + asset2.height, b2.y + b2.h - asset2.height),
image: asset2
});
}
y-= h;
}
},
outlineText: function(args) {
//creates text with an outline color
textSize(args.textSize);
fill(args.stroke);
for(var i = 0; i < 360; i+= 30) {
text(args.text,
args.x + sin(radians(i)) * (args.strokeWeight || 2),
args.y + cos(radians(i)) * (args.strokeWeight || 2));
}
fill(args.fill);
text(args.text, args.x, args.y);
},
generateBlock: function(blockColor, strokeColor) {
//gets an image of the blocks used in the game
background(0, 0, 0, 0);
pushMatrix();
translate(25, 50);
pushStyle();
fill(blockColor);
stroke(strokeColor);
strokeWeight(3);
rect(0, 0, 550, 250, 10);
noStroke();
fill(0, 10);
for(var i = 0; i < 10; i++) {
var w = random(50, 300);
var h = random(50, 200);
rect(random(0, 550 - w), random(0, 250 - h), w, h, 10);
}
popStyle();
popMatrix();
return get(23, 48, 554, 254);
},
star: function(x, y, inner, outer, sides) {
//gets an image of the stars used in the game
var rot = 360 / sides;
pushMatrix();
translate(x, y);
rotate(radians(270));
beginShape();
for(var angle = 0; angle < 360; angle+= rot / 2) {
vertex(cos(radians(angle)) * (angle % rot === 0 ? outer : inner), sin(radians(angle)) * (angle % rot === 0 ? outer : inner));
}
endShape(CLOSE);
popMatrix();
},
init: function() {
//add initial bubbles
for(var i = 0; i < 15; i++) {
this.bubbles.push({
x: random(width),
y: random(height),
vx: random(0.3, 1) * (random() < 0.5 ? 1 : -1),
vy: random(-0.7, -0.3),
diameter: random(10, 20),
opacity: random(50, 100),
dir: random() < 0.5 ? 1 : -1,
offset: random(360) | 0
});
}
//add initial fishes
for(var i = 0; i < 10; i++) {
this.fishes.push({
x: random(width),
y: random(height - 50),
diameter: random(20, 30),
vx: random(0.5, 2),
vy: 0,
dir: random() < 0.5 ? 1 : -1,
speed: random(0.5, 2)
});
}
//generate block images
this.themes[0].images.push(this.generateBlock(this.themes[0].blockColor[0], this.themes[0].stroke));
this.themes[0].images.push(this.generateBlock(this.themes[0].blockColor[0], this.themes[0].stroke));
this.themes[0].images.push(this.generateBlock(this.themes[0].blockColor[1], this.themes[0].stroke));
this.themes[0].images.push(this.generateBlock(this.themes[0].blockColor[1], this.themes[0].stroke));
this.themes[1].images.push(this.generateBlock(this.themes[1].blockColor[0], this.themes[1].stroke));
this.themes[1].images.push(this.generateBlock(this.themes[1].blockColor[0], this.themes[1].stroke));
this.themes[1].images.push(this.generateBlock(this.themes[1].blockColor[1], this.themes[1].stroke));
this.themes[1].images.push(this.generateBlock(this.themes[1].blockColor[1], this.themes[1].stroke));
this.themes[2].images.push(this.generateBlock(this.themes[2].blockColor[0], this.themes[2].stroke));
this.themes[2].images.push(this.generateBlock(this.themes[2].blockColor[0], this.themes[2].stroke));
this.themes[2].images.push(this.generateBlock(this.themes[2].blockColor[1], this.themes[2].stroke));
this.themes[2].images.push(this.generateBlock(this.themes[2].blockColor[1], this.themes[2].stroke));
//add images
this.images = {
heading: function() {
background(0, 0, 0, 0);
pushStyle();
textAlign(CENTER, CENTER);
textFont(app.fonts.title);
app.outlineText({
text: "GO GO",
x: width / 2,
y: 50,
textSize: 100,
fill: color(255, 240),
stroke: color(50, 100),
strokeWeight: 5,
});
popStyle();
return get(0, 0, width, 150);
},
store: function() {
background(0, 0, 0, 0);
pushStyle();
textAlign(CENTER, CENTER);
textFont(app.fonts.title);
app.outlineText({
text: "Store",
x: width / 2,
y: 50,
textSize: 70,
fill: color(255, 240),
stroke: app.colors.stroke,
strokeWeight: 5,
});
popStyle();
return get(0, 0, width, 150);
},
leaderboard: function() {
background(0, 0, 0, 0);
pushStyle();
textAlign(CENTER, CENTER);
textFont(app.fonts.title);
app.outlineText({
text: "Leaderboard",
x: width / 2,
y: 50,
textSize: 70,
fill: color(255, 240),
stroke: app.colors.stroke,
strokeWeight: 5,
});
popStyle();
return get(0, 0, width, 150);
},
spike: function() {
background(0, 0, 0, 0);
pushMatrix();
translate(300, 300);
pushStyle();
fill(50);
stroke(209, 209, 209);
strokeWeight(3);
beginShape();
for(var angle = 0; angle < 360; angle+= 30) {
var dx = cos(radians(angle));
var dy = sin(radians(angle));
var dxOuter = cos(radians(angle + 15));
var dyOuter = sin(radians(angle + 15));
vertex(dx * 25, dy * 25);
vertex(dxOuter * 45, dyOuter * 45);
}
endShape(CLOSE);
popStyle();
popMatrix();
return get(250, 250, 100, 100);
},
back: function() {
var gx = createGraphics(600, 900, P2D);
gx.background(0, 0, 0, 0);
gx.pushStyle();
gx.noStroke();
gx.fill(0, 4);
for(var i = 0; i < 20; i++) {
var diameter = random(30, 300);
gx.ellipse(random(width), random(diameter / 2, 900 - diameter / 2), diameter, diameter);
}
gx.popStyle();
return gx.get();
},
plant1: function() {
background(0, 0, 0, 0);
pushStyle();
strokeWeight(8);
stroke(70, 180, 35);
pushMatrix();
translate(300, 300);
var diameter = 25;
for(var i = 0; i < 360; i+= 30) {
rotate(radians(30));
line(0, 0, diameter, 0);
}
popMatrix();
popStyle();
return get(270, 270, 60, 60);
},
plant2: function() {
background(0, 0, 0, 0);
pushStyle();
strokeWeight(8);
stroke(193, 133, 204);
pushMatrix();
translate(300, 300);
var diameter = 25;
for(var i = 0; i < 360; i+= 30) {
rotate(radians(30));
line(0, 0, diameter, 0);
}
popMatrix();
popStyle();
return get(270, 270, 60, 60);
},
plant3: function() {
background(0, 0, 0, 0);
pushStyle();
strokeWeight(8);
stroke(70, 180, 35);
pushMatrix();
translate(300, 300);
var diameter = 30;
for(var i = 0; i < 360; i+= 180) {
rotate(radians(180));
line(0, 0, diameter, 0);
line(diameter * 0.3, -diameter * 0.40, diameter * 1.2, -diameter * 0.40);
line(diameter * 0.4, diameter * 0.40, diameter * 0.8, diameter * 0.40);
line(diameter * 0.3, -diameter * 0.40, diameter * 0.3, 0);
line(diameter * 0.4, diameter * 0.40, diameter * 0.4, 0);
}
popMatrix();
popStyle();
return get(260, 280, 80, 40);
},
plant4: function() {
background(0, 0, 0, 0);
pushStyle();
strokeWeight(8);
stroke(193, 133, 204);
pushMatrix();
translate(300, 300);
var diameter = 30;
for(var i = 0; i < 360; i+= 180) {
rotate(radians(180));
line(0, 0, diameter, 0);
line(diameter * 0.3, -diameter * 0.40, diameter * 1.2, -diameter * 0.40);
line(diameter * 0.4, diameter * 0.40, diameter * 0.8, diameter * 0.40);
line(diameter * 0.3, -diameter * 0.40, diameter * 0.3, 0);
line(diameter * 0.4, diameter * 0.40, diameter * 0.4, 0);
}
popMatrix();
popStyle();
return get(260, 280, 80, 40);
},
star1: function() {
background(0, 0, 0, 0);
pushStyle();
stroke(255, 200);
strokeWeight(6);
fill(237, 150, 107);
app.star(300, 300, 55, 100, 5);
strokeWeight(8);
stroke(50, 200);
line(280, 270, 280, 285);
line(320, 270, 320, 285);
popStyle();
return get(200, 190, 200, 200);
},
star2: function() {
background(0, 0, 0, 0);
pushStyle();
stroke(255, 200);
strokeWeight(6);
fill(240, 115, 209);
app.star(300, 300, 55, 100, 5);
strokeWeight(8);
stroke(50, 200);
line(280, 270, 280, 285);
line(320, 270, 320, 285);
popStyle();
return get(200, 190, 200, 200);
},
star3: function() {
background(0, 0, 0, 0);
pushStyle();
stroke(255, 200);
strokeWeight(6);
fill(83, 189, 224);
app.star(300, 300, 55, 100, 5);
strokeWeight(8);
stroke(50, 200);
line(280, 270, 280, 285);
line(320, 270, 320, 285);
popStyle();
return get(200, 190, 200, 200);
}
};
},
load: function(s) {
//loads the images before the game starts
var obj = Object.keys(this.images);
this.images[obj[this.imageIndex]] = this.images[obj[this.imageIndex]]();
this.imageIndex++;
background(this.colors.blockColor[1]);
pushStyle();
fill(250);
textAlign(CENTER, CENTER);
textSize(40);
text('LOADING', width/2, height/2);
noFill();
stroke(250);
strokeCap(SQUARE);
strokeWeight(15);
arc(width/2, height/2, height/2, height/2, 0, map(this.imageIndex / obj.length, 0, 1, 0, radians(360)));
strokeWeight(1);
popStyle();
if(this.imageIndex < obj.length){
this.loaded = false;
}
else {
//add plant images to plants array
this.assetImages.push(this.images.plant1);
this.assetImages.push(this.images.plant2);
this.assetImages.push(this.images.plant3);
this.assetImages.push(this.images.plant4);
//add star images
this.starImages.push(this.images.star1);
this.starImages.push(this.images.star2);
this.starImages.push(this.images.star3);
//set the initial blocks
this.setBlocks();
this.loaded = true;
this.scene = s;
}
},
resetBubbles: function() {
//resets the bubbles ready for a new game
for(var i = 0; i < this.bubbles.length; i++) {
this.bubbles[i].x = random(width);
this.bubbles[i].y = random(height);
}
},
reset: function() {
//resets all game parameters before each game
this.stars.length = 0;
this.spikes.length = 0;
this.lazers.length = 0;
this.enemies.length = 0;
this.deadEnemies.length = 0;
this.smokes.length = 0;
this.particles.length = 0;
this.assets.length = 0;
this.score.value = 0;
this.start = false;
this.player.x = 275;
this.player.y = 400;
this.player.vx = 0;
this.player.vy = 0;
this.player.ymin = 400;
this.player.state = 0;
this.player.eyes.value = 0;
this.player.mouth.value = 0;
this.anim.over.value = this.anim.over.base;
this.dead = false;
this.shake = 0;
this.theme = random(this.themes.length) | 0;
this.colors = this.themes[this.theme];
this.resetBubbles();
this.setBlocks();
},
rectCircleCollision: function(player, circle) {
//checks for rectangle to circle collision
var closestX = constrain(circle.x, player.x, player.x + player.w);
var closestY = constrain(circle.y, player.y, player.y + player.h);
return dist(circle.x, circle.y, closestX, closestY) <= circle.diameter / 2;
},
rectRectCollision: function(player, rectangle) {
//checks for rectangle to rectangle collision
return player.x < rectangle.x + rectangle.w &&
player.x + player.w > rectangle.x &&
player.y < rectangle.y + rectangle.h &&
player.y + player.h > rectangle.y;
},
collisionBlocks: function(dir, blocks) {
//checks to see if the player collided with the blocks
for(var i = 0; i < blocks.length; i++) {
var block = blocks[i];
//if player collided with block
if(this.rectRectCollision(this.player, block)) {
//check horizontal collision
if(dir === "horizontal") {
if(this.player.vx > 0) {
this.player.x = block.x - this.player.w;
}
else {
this.player.x = block.x + block.w;
}
this.player.dir*= -1;
this.player.vx = -this.player.vx;
}
//check vertical collision
else {
if(this.player.vy > 0) {
this.player.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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