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