keyCode event doesn't work in Chorme browser when using p5.js web editor

[lmccart]

From @Leiyufazhuangjia on September 22, 2018 5:25

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Which platform were you using when you encountered this?

• Mobile/Tablet (touch devices)
• [x ] Desktop/Laptop
• Others (specify if possible)

Details about the bug:

• p5.js version: https://editor.p5js.org/web editor
• Web browser and version: chrome://69.0.3497.100
• Operating System: Windows
• Steps to reproduce this:

//I'm trying to write the Snake game，and use the UP,DOWN,LEFT,RIGHT_ARROW to control the direction
//No matter how i press the keybord it doesn't work, and without any feedback.
function setup() {
createCanvas(600, 600);
snake = new Snake();
}

function draw() {
background(50);
snake.show();
snake.update();
print(snake.yspeed);
}

function keyPressed() {
if (keyCode === UP_ARROW) {
snake.dir(0, 1);
} else if (keyCode === DOWN_ARROW) {
snake.dir(0, -1);
} else if (keyCode === LEFT_ARROW) {
snake.dir(-1, 0);
} else if (keyCode === RIGHT_ARROW) {
snake.dir(1, 0);
}
}

function Snake() {
this.x = 0;
this.y = 0;
this.xspeed = 1;
this.yspeed = 0;

this.update = function() {
this.x = this.x + this.xspeed;
this.y = this.y + this.yspeed;
}

this.dir = function(_x, _y) {
this.xspeed = _x;
this.yspeed = _y;
}

this.show = function() {
fill(255);
rect(this.x, this.y, 10, 10);
}
}

//Even when i run the official example.
var fillVal = 126;
function draw() {
fill(fillVal);
rect(25, 25, 50, 50);
}

function keyPressed() {
if (keyCode === UP_ARROW) {
fillVal = 255;
} else if (keyCode === DOWN_ARROW) {
fillVal = 0;
}
return false; // prevent default
}

//This only works when i came to the reference page.However ,when play it in the web editor it doesn't work. i fell really confused.

Feature enhancement details:

New feature details:

Copied from original issue: processing/p5.js#3231

[yonghuming]

emm, === is right
you shoud not put two draw and keyPressed function in one sketch

function setup() {
createCanvas(600, 600);
snake = new Snake();
}

function draw() {
background(50);
snake.show();
snake.update();
print(snake.yspeed);
}

function keyPressed() {
if (keyCode === UP_ARROW) {
snake.dir(0, 1);
} else if (keyCode === DOWN_ARROW) {
snake.dir(0, -1);
} else if (keyCode === LEFT_ARROW) {
snake.dir(-1, 0);
} else if (keyCode === RIGHT_ARROW) {
snake.dir(1, 0);
}
}

function Snake() {
this.x = 0;
this.y = 0;
this.xspeed = 1;
this.yspeed = 0;

this.update = function() {
this.x = this.x + this.xspeed;
this.y = this.y + this.yspeed;
}

this.dir = function(_x, _y) {
this.xspeed = _x;
this.yspeed = _y;
}

this.show = function() {
fill(255);
rect(this.x, this.y, 10, 10);
}
}

you should not put two draw function in one sketch
and when press run button you should click canvas made it get focus

[Leiyufazhuangjia]

emm, === is right
you shoud not put two draw and keyPressed function in one sketch

function setup() {
createCanvas(600, 600);
snake = new Snake();
}

function draw() {
background(50);
snake.show();
snake.update();
print(snake.yspeed);
}

function keyPressed() {
if (keyCode === UP_ARROW) {
snake.dir(0, 1);
} else if (keyCode === DOWN_ARROW) {
snake.dir(0, -1);
} else if (keyCode === LEFT_ARROW) {
snake.dir(-1, 0);
} else if (keyCode === RIGHT_ARROW) {
snake.dir(1, 0);
}
}

function Snake() {
this.x = 0;
this.y = 0;
this.xspeed = 1;
this.yspeed = 0;

this.update = function() {
this.x = this.x + this.xspeed;
this.y = this.y + this.yspeed;
}

this.dir = function(_x, _y) {
this.xspeed = _x;
this.yspeed = _y;
}

this.show = function() {
fill(255);
rect(this.x, this.y, 10, 10);
}
}

you should not put two draw function in one sketch
and when press run button you should click canvas made it get focus

Thanks so much,
After the canvas clicked, everything gana be right!

[yonghuming]

[yonghuming]

emm, === is right
you shoud not put two draw and keyPressed function in one sketch

function setup() {
createCanvas(600, 600);
snake = new Snake();
}

function draw() {
background(50);
snake.show();
snake.update();
print(snake.yspeed);
}

function keyPressed() {
if (keyCode === UP_ARROW) {
snake.dir(0, 1);
} else if (keyCode === DOWN_ARROW) {
snake.dir(0, -1);
} else if (keyCode === LEFT_ARROW) {
snake.dir(-1, 0);
} else if (keyCode === RIGHT_ARROW) {
snake.dir(1, 0);
}
}

function Snake() {
this.x = 0;
this.y = 0;
this.xspeed = 1;
this.yspeed = 0;

this.update = function() {
this.x = this.x + this.xspeed;
this.y = this.y + this.yspeed;
}

this.dir = function(_x, _y) {
this.xspeed = _x;
this.yspeed = _y;
}

this.show = function() {
fill(255);
rect(this.x, this.y, 10, 10);
}
}

you should not put two draw function in one sketch
and when press run button you should click canvas made it get focus

Thanks so much,
After the canvas clicked, everything gana be right!

aha, you made me found the real bug

[lmccart]

👍