when i play my game and eat a food and then move it sometimes removes my scale heres my source code
sketch source: (where my move runs)
var s;
var scl = 20;
var food = 20;
var foods = 0;
var foodU = foods;
function setup() {
createCanvas(600,600)
s = new snake();
frameRate(10)
PickLocation()
console.log(foods)
}
function draw() {
background(51);
s.update()
s.show()
if(s.eat(food))
PickLocation()
fill(255, 0, 100);
rect(food.x, food.y, scl, scl)
}
function PickLocation() {
var cols = floor(width/scl);
var rows = floor(height/scl);
food = createVector(floor(random(cols)), floor(random(rows)));
food.mult(scl);
}
function keyPressed() {
if (keyCode === UP_ARROW) {
s.dir(0, -1);
s.yScale = s.xScale;
s.xScale = 20;
} else if(keyCode === DOWN_ARROW) {
s.dir(0, 1);
s.yScale = s.xScale;
s.xScale = 20;
} else if(keyCode === LEFT_ARROW) {
s.dir(-1, 0);
s.xScale = s.yScale;
s.yScale = 20;
} else if(keyCode === RIGHT_ARROW) {
s.dir(1, 0);
s.xScale = s.yScale;
s.yScale = 20;
}
}
my snake.js file
function snake() {
this.x = 0;
this.y = 0;
this.xspeed = 1;
this.yspeed = 0;
this.yScale = 20;
this.xScale = 20;
this.update = function() {
this.x = this.x + this.xspeedscl
this.y = this.y + this.yspeedscl
this.x = constrain(this.x, 0, width-scl);
this.y = constrain(this.y, 0, height-scl);
}
this.eat = function(pos) {
var d = dist(this.x, this.y, pos.x, pos.y);
if (d < 1) {
s.xScale = s.xScale + s.yScale
foods = foods + 1;
print(foods);
return true;
} else {
return false;
}
}
this.dir = function(x, y) {
this.xspeed = x;
this.yspeed = y;
}
this.show = function() {
fill(255)
rect(this.x, this.y, this.xScale, this.yScale)
}
}
my index.html:
body {padding: 0; margin: 0;}
please help me i am using p5.js