CODEWITHSUNDEEP
javascripthtmlcssdomp5.js
mnn
mnn

Reputation: 337

Creating game in JavaScript and P5 - few fundamental questions

I am currently working on a game that needs to be done using HTML, JavaScript, CSS and P5.

Idea is to have the standard 2d game where the character needs to enter the exit door on the map. Main features are rotating the "map" or "canvas" by 90 degrees with Q and E buttons. Game similar to the already existing game called Rotate. When rotating the map character stays in the same position so its only background that rotating.

I have following questions regarding the best approach:

  1. Should I write the map manually, i.e. assign the location on the map of each boundary (floor, walls etc) and then when rotating the map by 90 degrees just mathematically adjust the boundaries to a different location? Is this the best approach or is there any more time efficient are smarter approach?

  2. Should I be using P5 at all or this all can be done in HTML with dom manipulation?

  3. I want to have the camera effect by showing only square of the map - so that character is always centered - when walking to the left map would be moving rather then the character. So that the map can be always rotated in the current point of the character - center of the map.

I appreciate any advice or recommendation in advance.

Thanks!

Upvotes: 4

Views: 99

Answers (1)

Ruskin Wadia
Ruskin Wadia

Reputation: 96

You can place all the objects with respect to the centre, using the formula: xpos = distance * sin(angle), ypos = distance * cos(angle); Here's an example you could refer to:

let a;
let dist = 50;

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
  a = PI;
}

function draw() {
  background(220);
  translate(width / 2, height / 2);
  let x = dist * sin(a);
  let y = dist * cos(a);
  rect(x, y, 20, 20);
  line(0, 0, x, y);
}

function keyTyped() {
  if (key == 'q' || key == 'Q')
    a += PI / 2;
  if (key == 'e' || key == 'E')
    a -= PI / 2;
}

Upvotes: 2

Related Questions