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