js 게임 만들기 진행 중

const canvas = document.querySelector(`canvas`);

const c = canvas.getContext("2d");

canvas.width = innerWidth;
canvas.height = innerHeight;

const gravity = 0.5;

class Player {
  constructor() {
    this.position = {
      x: 100,
      y: 100,
    };
    this.velocity = {
      x: 0,
      y: 1,
    };
    this.width = 30;
    this.height = 30;
  }

  draw() {
    c.fillStyle = "red";
    c.fillRect(this.position.x, this.position.y, this.width, this.height);
  }

  update() {
    this.draw();
    this.position.x += this.velocity.x;
    this.position.y += this.velocity.y;

    if (this.position.y + this.height + this.velocity.y <= canvas.height)
      this.velocity.y += gravity;
    else this.velocity.y = 0;
  }
}

class Platform {
  constructor({ x, y }) {
    this.position = {
      x,
      y,
    };
    this.width = 200;
    this.height = 20;
  }

  draw() {
    c.fillStyle = "blue";
    c.fillRect(this.position.x, this.position.y, this.width, this.height);
  }
}

class Finish {
  constructor() {
    this.position = {
      x: 2050,
      y: 500,
    };
    this.width = 200;
    this.height = 200;
  }

  draw() {
    c.fillStyle = "purple";
    c.fillRect(this.position.x, this.position.y, this.width, this.height);
  }
}

class Bottom {
  constructor() {
    this.position = {
      x: 0,
      y: innerHeight - 100,
    };
    this.width = innerWidth;
    this.height = 100;
  }

  draw() {
    c.fillStyle = "gray";
    c.fillRect(this.position.x, this.position.y, this.width, this.height);
  }
}

const player = new Player();
const platforms = [
  new Platform({ x: 300, y: 400 }),
  new Platform({ x: 50, y: 450 }),
  new Platform({ x: 1450, y: 350 }),
  new Platform({ x: 1630, y: 420 }),
  new Platform({ x: 700, y: 380 }),
  new Platform({ x: 800, y: 500 }),
  new Platform({ x: 1050, y: 400 }),
  new Platform({ x: 1250, y: 350 }),
];
const bottom = new Bottom();
const finish = new Finish();

const keys = {
  right: {
    pressed: false,
  },
  left: {
    pressed: false,
  },
  up: {
    pressed: false,
  },
  down: {
    pressed: false,
  },
};

let scrollOffset = 0;

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, canvas.width, canvas.height);
  player.update();
  platforms.forEach((platform) => {
    platform.draw();
  });
  bottom.draw();
  finish.draw();

  if (
    player.position.y + player.height <= bottom.position.y &&
    player.position.y + player.height + player.velocity.y >=
      bottom.position.y &&
    player.position.x + player.width >= bottom.position.x &&
    player.position.x <= bottom.position.x + bottom.width
  )
    player.velocity.y = 0;

  if (keys.right.pressed && player.position.x < 400) {
    player.velocity.x = 5;
  } else if (keys.left.pressed && player.position.x > 100) {
    player.velocity.x = -5;
  } else {
    player.velocity.x = 0;

    if (keys.right.pressed) {
      scrollOffset += 5;
      platforms.forEach((platform) => {
        platform.position.x -= 5;
      });
      finish.position.x -= 5;
    } else if (keys.left.pressed) {
      scrollOffset -= 5;
      platforms.forEach((platform) => {
        platform.position.x += 5;
      });
      finish.position.x += 5;
    }
  }

  if (scrollOffset > 2000) {
    console.log("you win", "이겼다");
    alert("축하 이겼습니다");
  }

  platforms.forEach((platform) => {
    if (
      player.position.y + player.height <= platform.position.y &&
      player.position.y + player.height + player.velocity.y >=
        platform.position.y &&
      player.position.x + player.width >= platform.position.x &&
      player.position.x <= platform.position.x + platform.width
    ) {
      player.velocity.y = 0;
    }
  });
}

animate();

addEventListener("keydown", ({ key }) => {
  console.log("keydown", key);
  switch (key) {
    case "a":
      keys.left.pressed = true;
      break;
    case "d":
      keys.right.pressed = true;
      break;
    case "w":
      player.velocity.y -= 10;
      break;
    case "s":
      break;
  }
});

addEventListener("keyup", ({ key }) => {
  console.log("keyup 키업", key);
  switch (key) {
    case "a":
      keys.left.pressed = false;

      break;
    case "d":
      keys.right.pressed = false;
      break;
    case "w":
      break;
    case "s":
      break;
  }
});

class 를 이용해서 각 캐릭터, 구조물, 바닥 등을 만들고, 중력과 이동과 같은 동적인 작업들을 해줬습니다. 재밌기는 하지만 시간이 너무 빨리가서 공부할 시간이 줄어드는 현상이 있습니다. 적당히 해야겠습니다.

완성하는데 30년정도 걸릴 것으로 추정됩니다.