我已经安装了所有的p5并且工作正常,但每当我使用mousePressed()时它都不起作用(keyPressed也不起作用)。以下是问题的部分:
//is the game over?
var playing = false;
//speed at which the square will move
var speedx = 6;
var speedy = 4;
//setting square variables
var square = {
x : 300,
y : 200,
length : 80
};
//score
var score = 0;
//start + end background
var g = 120;
//start menu colour colChange
colChange = -3;
//transparency of buttons
var playfill = 0;
var sharefill = 0;
var settingsfill = 0;
var inButtonP = false;
function setup() {
createCanvas(600, 400);
}
function draw() {
//start screen
if (!(playing)) {
//background
background(221, g, 222);
//menu rectangle
stroke(255, 255, 255);
strokeWeight(5);
fill(0, 0, 0, 0);
rectMode(CENTER);
rect(300, 200, 500, 300, 50);
//menu text
textAlign(CENTER);
textSize(32);
text("THE WAITING GAME", 300, 120);
//play button
stroke(255, 255, 255);
strokeWeight(2);
fill(255, 255, 255, playfill);
rectMode(CENTER);
rect(300, 190, 360, 60);
textSize(20);
text("PLAY GAME", 300, 197);
//share button
stroke(255, 255, 255);
strokeWeight(2);
fill(255, 255, 255, sharefill);
rectMode(CENTER);
rect(205, 270, 170, 60);
strokeWeight(5);
fill(255, 255, 255);
ellipse(185, 260, 10, 10);
line(185, 260, 225, 270);
ellipse(225, 270, 10, 10);
line(225, 270, 185, 280);
ellipse(185, 280, 10, 10);
//settings button
stroke(255, 255, 255);
strokeWeight(2);
fill(255, 255, 255, settingsfill);
rectMode(CENTER);
rect(395, 270, 170, 60);
strokeWeight(5);
line(370, 260, 420, 260);
line(370, 270, 420, 270);
line(370, 280, 420, 280);
//colour change
g = g + colChange;
if (g < 1) {
colChange = 3;
};
if (g > 120) {
colChange = -3;
};
//press play button
if (mouseX > 120 && mouseX < 480 && mouseY > 160 && mouseY < 220) {
playfill = 120;
inButtonP = true;
} else {
playfill = 0;
sharefill = 0;
settingsfill = 0;
inButtonP = false;
};
function mousePressed() {
if (inButtonP) {
playing = true;
println("pressed");
}
}
};
//main game
if (playing) {
//background
background(221, 160, 222);
//square
fill(221, 160, 222);
stroke(255, 255, 255);
rectMode(CENTER);
rect(square.x, square.y, square.length, square.length);
//basic bounce collision on x axis
if (square.x > (width - square.length / 2)) {
speedx = random(-5, -1);
};
if (square.x < square.length / 2) {
speedx = random(2, 6);
};
//basic bounce collision on y axis
if (square.y > (height - square.length / 2)) {
speedy = random(-5, -1);
};
if (square.y < square.length / 2) {
speedy = random(2, 6);
};
square.x = square.x + speedx;
square.y = square.y + speedy;
//score display
stroke(221, 20, 222);
fill(221, 20, 222);
text("", 5, 35);
text("Score: " + score, 5, 15);
//check for corner
if (square.x > (width - square.length / 2) && square.y < square.length / 2) {
score = score + 1;
} else if (square.x > (width - square.length / 2) && square.y > (height - square.length / 2)) {
score = score + 1;
} else if (square.x < square.length / 2 && square.y > (height - square.length / 2)) {
score = score + 1;
} else if (square.x < square.length / 2 && square.y < square.length / 2) {
score = score + 1;
};
};
}
以下是完整代码:
{{1}}
我必须添加这些额外的文字和内容,否则会有太多的代码://// blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
答案 0 :(得分:1)
update: function (oldData) {
if (this.data.change) {
// ...
this.parent.setAttribute('value', this.curr)
}
}
方法需要在绘图函数之外生效。
以下是mousePressed
移出draw
之后工作的小提琴:https://jsfiddle.net/xh9p28r6/2/