Evolution.js:

var img;
var X;
var Y;
var noclipspeed = 20
var Z
var shp
var shpi
var speed
var freecam = false
var XR = 0
var YR = 0
var debug = true
function preload() {
town = loadImage('./assets/town.png');
BG = loadImage('./assets/BG.png');
X = random(-250,250)
Y = random(-250,250)
Z = 1
shop = loadImage('./assets/shop.png')
hax = loadImage('./assets/hax.png')
cursor(CROSS)
}


function setup() {
 createCanvas(1905,1065,WEBGL);
}


function draw() {
  rotateY(XR)
  rotateX(YR)
  cursor(CROSS)
  keyPressed()
  translate(0,0,10000)
  texture(hax)
  plane(10000,10000)
  translate(0,0,-10000)
  translate(0,0,-10000)
  texture(BG)
  plane(10000000,1000000)
  texture(town)
  translate(0,0,10000)
  translate(X-1000,Y-1000,Z)
  plane(950,567)
  translate(800,750)
  texture(shop)
  plane(100,100)
  if(freecam === false) {
  if (Z>577) {
  Z = 577
} else if (Z < -2600) {
  Z = -2600
} else if (Z === 0 ) {
 Z = 1
}
}
if (shpi === 1) {
Z = 577
X = -814.219833927416
Y = -751.7183831208923
}
if (noclipspeed < 10) {
noclipspeed = 10
}
}

function keyPressed() {
 if (keyIsDown(70)) {
   fullscreen(1)
} else if (keyIsDown(78)) {
   fullscreen(0)
} else if (keyIsDown(79)) {
    freecam = true
  } else if (keyIsDown(76)) {
    freecam = false
    XR = 0
    YR = 0
  } else if (keyIsDown(113)) {
saveCanvas("EvolutionTST","png")
}
 if (freecam === false) {
 XR = 0
 YR = 0
 if (keyIsDown(65)) {
    X+=10;
  } else if (keyIsDown(68)) {
    X-=10;
  } else if (keyIsDown(87)) {
    Y+=10;
  } else if (keyIsDown(83)) {
    Y-=10;
  } else if (keyIsDown(70)) {
   fullscreen(1)
  } else if (keyIsDown(78)) {
   fullscreen(0)
  }
} else {
 if (keyIsDown(65)) {
    X += noclipspeed
} else if (keyIsDown(68)) {
    X -= noclipspeed
} else if (keyIsDown(87)) {
    Z += noclipspeed
} else if (keyIsDown(83)) {
    Z -= noclipspeed
} else if (keyIsDown(32)) {
    Y += noclipspeed
} else if (keyIsDown(16)) {
    Y -= noclipspeed
} else if (keyIsDown(39)) {
    XR += 0.05
} else if (keyIsDown(37)) {
    XR -= 0.05
} else if (keyIsDown(38)) {
    YR -= 0.05
} else if (keyIsDown(40)) {
    YR += 0.05
} else if (keyIsDown(107)) {
    noclipspeed += 10
} else if (keyIsDown(109)) {
    noclipspeed -= 10
} 
}
}

function mouseWheel(event) {
   Z -= event.delta
}

var x = 30;
var y = 350;
var velicina = 50;

function setup() {
    createCanvas(1366, 658);
    background(100);

}

function draw() {
  if (keyIsDown(LEFT_ARROW)) 
    x-=10;

  if (keyIsDown(RIGHT_ARROW))
    x+=10;

  if (keyIsDown(UP_ARROW))
    y-=10;

  if (keyIsDown(DOWN_ARROW))
    y+=10;


  clear();
  fill(255, 0, 0);
  ellipse(x, y, 50, 50);


    if(x < 30) {
        clear();
        background(100);
        ellipse(x, y, 50, 50);
        x = 30;
        y = 350;

    }

    if(x > 1340) {
        clear();
        background(100);
        ellipse(x, y, 50, 50);
        x = 30;
        y = 350;
    }

    if(y < 30) {
        clear();
        background(100);
        x = 30;
        y = 350;
    }

    if(y > -150){
       clear();
       background(100);
       x = 30;
       y = 350;
}

It just doesn't work under Y -200 or Y 200. Please, try it yourself and see.

Thank you!

Thank you in advance,

rebelL1ON.

`function obj(){
    this.y=random(height);
    this.x=random(width);
    this.diameter=random(10,30);
    this.speed=10;
`

`this.move = function(posx,posy) {
        this.x+=posx;
        this.y+=posy;
  };
`

    `this.display = function(){
        ellipse(this.x,this.y,this.diameter,this.diameter);
    }
};

`

That's my code , but my object seems to be stuck in the canvas , not moving at all.

Right now I want to get my circle, which is controlled by arrow keys to move and bump into static squares but it is just going through them. Did I set it up incorrectly? I have been coding for three months, so I might be quite slow sorry!

var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies;

var engine = Engine.create();
var world = engine.world;

var player;
var rocks = [];
var cols = 7;
var rows = 7;

function setup() {
    createCanvas(750, 750);
    Engine.run(engine);

    player = new Player(300, 300, 25);

    var spacing = width / cols;
    for (var j = 0; j < rows; j++) {
        for (var i = 0; i < cols; i++) {
            var r = new Rocks(i * spacing, j * spacing);
            rocks.push(r);
        }
    }
}

function draw() {
    background(51);
    Engine.update(engine);
    for (var i = 0; i < rocks.length; i++) {
        rocks[i].show();
    }
    player.show();
    player.move();
}

function Player(x, y, r) {
    this.body = Bodies.circle(x, y, r);
    this.r = r;
    World.add(world, this.body);

    this.show = function () {
        ellipse(x, y, this.r * 2);
    }

    this.move = function () {
        if (keyIsDown(RIGHT_ARROW))
            x += 10;
        if (keyIsDown(LEFT_ARROW))
            x -= 10;
        if (keyIsDown(UP_ARROW))
            y -= 10;
        if (keyIsDown(DOWN_ARROW))
            y += 10;
        x = constrain(x, this.r, height - this.r);
        y = constrain(y, this.r, width - this.r);
    }
}

function Rocks(x, y, w, h, options) {
    var options = {
        isStatic: true
    }
    this.body = Bodies.rectangle(x, y, h, w, options);
    this.w = w;
    this.h = h;
    this.size = player.r * 2;
    World.add(world, this.body);

    this.show = function () {
        rect(x, y, this.size, this.size);
    }
}

function keyPressed()
{
    if(key === " ")
    {
        bullets.push(new Bullet(player.x+((player.w)*player.dir),player.y+(player.h-3)));
    }
    if(keyCode == LEFT_ARROW)
    {
        moveLeft = true;
    }
    if(keyCode == RIGHT_ARROW)
    {
        moveRight = true;
    }
    if(keyCode == UP_ARROW)
    {
        moveUp = true;
    }
    if(keyCode == DOWN_ARROW)
    {
        moveDown = true;
    }
    return false;
}

And normally this works perfectly, except that if I hold down up+down, down+right, down+left, or up+left and pressing space does nothing and I am not sure why. Stranger still, holding down left+right or up+right still allows pressing space to work.

I'm not sure what's going on here. Any help would be greatly appreciated.

Thanks!

EDIT: I have an example right here: http://polyrogue.com/defender/index.html

One of my friends wrote a small code - a car mooving through traffic - and has the following issue: simultaneous key presses are not resolved individually at times, especially when playwers start mashing the buttons.

What is the right way of dealing with multiple keyboard presses?

This is the code: https://www.openprocessing.org/sketch/396736

I am new to processing and currently I am only testing random staffs. I tried to create a simple circle which is moved by 50 to the UP and DOWN depending on which button on the keyboard you pressed. I am using a simple if/else method. The problem that occurred is the fact that for some reason when you press UP (for example) instead of moving just by 50 it keeps going upwards.

I tried to fix the problem by my own but my knowledge wasn't enough. If someone can help me and explain where my mistake is I will be really grateful.

The code that I wrote:

Main.js:

var Circle;

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

function draw(){
    background(65, 35, 255);
    Circle.move();
    Circle.show();
}

Circle.js

function Circle(){
    this.x = 300;
    this.y = 300;

    this.xup=50;
    this.yup = 50 ;

    this.move = function(){
       if (keyCode === UP_ARROW){
          this.y = this.y - this.yup;
       }
       else if (keyCode === DOWN_ARROW){
          this.y = this.y + this.yup;
       }
    }

    this.show = function (){
       fill(74, 124, 35);
       ellipse(this.x, this.y, 100, 100);
    }
}

So when the ENTER key is tapped, he might pick something up, not pick it up, or pick it up and put it straight back down.

Here's a snippet of the function call...

this.dir = checkKeys();

and here's the function...

function checkKeys() {;

      if (keyIsDown(LEFT_ARROW)) {
        dir = "left";
      } else if (keyIsDown(RIGHT_ARROW)) {
        dir = "right";
      } else if (keyIsDown(UP_ARROW)) {
        dir = "up";
      } else if (keyIsDown(DOWN_ARROW)) {
        dir = "down";
      } else if (keyIsDown(13)) {
        mainSprite.pickUp();
      } else {
        dir = "standing";
      }
      return dir;
    }

this.dir is then passed through a switch to assign moves, actions, animations, etc...

Would I be better off using a built in function like keyPressed() rather than calling a function and looking for a pressed key? Either way, is there a way to always capture the first keypress in the buffer and to empty the buffer if needed (for when I want a "tap" but not a "hold")?

Hmm, I've just noticed I'm returning dir except when the ENTER key is pressed in which case I call another function within the object. Could this cause glitches? Maybe I should give dir a value here and call the function in the switch?

I'm not experienced with p5, processing or programming in general. So I was really excited when I saw, how easy it is to work with p5.

I made a silly little pong game. In p5 editor it works the way I want, just gets more and more slow after running for some time.

Then there is a possibility to run a sketch in browser (from p5 editor). The browser in my case is chrome. Sketch runs fine, even without slowing down. But as code got longer I noticed that it doesnt always run inside browser even if it works in editor. For example I had to put if statement inside another if statement instead of checking all conditions inside one if statement.

Another possibility is to run a sketch by launching index.html file. Here again I get different results. For example sounds do not want to get pre-loaded. I dont know, maybe it would get solved by properly hosting it somewhere instead running it like that. But this is not biggest issue (I just commented out all the sounds in the code). Even without sounds it gives different results in different browsers:

In windows I tried it on explorer, firefox, chrome and opera. It worked ok on all except firefox.

I also tried it on linux ubuntu, on chromium and firefox. Again, it didnt work on firefox. And on chromium it worked, but very slow.

So this is my story. And the question is: are there any guidelines, what should be avoided and what must be done, to make a code good for all browsers? Or maybe there is a possibility to export a sketch in some kind of exe file that could be sent to other people and I would be sure that it will run on their machines exactly the same as on mine?

Ideally, I would just use a simple alert("You Win!"). However, because of this bug, I cannot do that.

What is the easiest, most "p5.js way" to be able to display a message like "Game Over" to the user that is not an alert() or confirm(), prompt() etc. ?