Question switched to p5.js category

p5.js Coding Questions
1

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.xspeed*scl
      this.y = this.y + this.yspeed*scl

      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:
<html>
<head>

  <meta charset="UTF-8">

  <script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
  <script language="javascript" type="text/javascript" src="libraries/p5.dom.js"></script>
  <script language="javascript" type="text/javascript" src="Sketch.js"></script>
  <script language="javascript" type="text/javascript" src="snake.js"></script>
  <style> body {padding: 0; margin: 0;} </style>
</head>

<body>
</body>
</html>

please help me i am using p5.js

2

Hey,

First of all, can you format your code using the </> button in the message editor and press Ctrl+T in the processing IDE ?

Thanks

3

I dont use Proccesing cus i dont want to have my folder named “sketch”, and i dont understand anything about what you said i am not the best at p5,js/javascript sorry.

4

Oh sorry, thought you were on processing (put your issue in the p5.js category).
You need to format your code and respect indentations like this (when you write your message, there’s a </> button to write your code) :

function setup(){
    console.log("setup");
}

function draw(){
    console.log("draw");
}
5

Please format your code. Edit your post, select your code and hit the </> button. Simple.

Also, edit the title of your post to reflect the nature of your question.

Notice you can edit your post by clicking the little pen in the bottom edge of the post that you want to edit.

Kf