Делаем JS игру, куда добавлять в код другие объекты - PullRequest
Новая
       9

Делаем JS игру, куда добавлять в код другие объекты

1 голос
/ 09 июля 2020

У меня есть концепция игры, и, используя w3 schools, я построил базовый c код для движущейся части игры в основе холста. Однако я хочу создать игру, отличную от плана игр W3. Я не прошу помощи в написании кода, я прошу помощи в том, где в моем коде добавлять другие переменные / объекты. Вот мой текущий код. 

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    canvas {
      border: 5px solid #d3d3d3;
      background-color: #f1f1f1;
    }
  </style>
</head>

<body onload="startGame()">
  <script>
    var myGamePiece;

    function startGame() {
      myGamePiece = new component(30, 30, "black", 350, 445);
      myGameArea.start();
    }

    var myGameArea = {
      canvas: document.createElement("canvas"),
      start: function() {
        this.canvas.width = 700;
        this.canvas.height = 480;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function(e) {
          myGameArea.key = e.keyCode;
        }) 
        window.addEventListener('keyup', function(e) {
          myGameArea.key = false;
        })
      },
      clear: function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
    }

    function component(width, height, color, x, y) {
      this.width = width;
      this.height = height;
      this.speedX = 0;
      this.speedY = 0;
      this.x = x;
      this.y = y;
      this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
      this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;
      }
    }

    function updateGameArea() {
      myGameArea.clear();
      myGamePiece.speedX = 0;
      myGamePiece.speedY = 0;
      if (myGameArea.key && myGameArea.key == 37) {
        myGamePiece.speedX = -1;
      }
      if (myGameArea.key && myGameArea.key == 39) {
        myGamePiece.speedX = 1;
      }
      myGamePiece.newPos();
      myGamePiece.update();
    }
  </script>
</body>

</html>

Любая помощь будет принята с благодарностью. один по-разному влияет на вашего плеера или фон / musi c.

1 Ответ

0 голосов
/ 09 июля 2020

В этом коде для добавления других объектов вам нужно будет вставить код в два места:

  • функция startGame Здесь инициализируются все переменные объекта
  • функция updateGameArea Вот где объект на самом деле отображается на холсте

Итак, давайте перейдем к примеру: 

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    canvas {
      border: 5px solid #d3d3d3;
      background-color: #f1f1f1;
    }
  </style>
</head>

<body onload="startGame()">
  <script>
    var myGamePiece;

    function startGame() {
      dots = []
      for (i = 0; i < 45; i++) {
        a = i*8 * Math.PI / 180
        dots.push(new component(2, 2, "red", Math.sin(a)*45 + 80, Math.cos(a)*35 + 60)) 
      }
      myGamePiece = new component(30, 30, "black", 350, 125);
      myGameArea.start();
    }

    var myGameArea = {
      canvas: document.createElement("canvas"),
      start: function() {
        this.canvas.width = 600;
        this.canvas.height = 160;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function(e) {
          myGameArea.key = e.keyCode;
        });        
        window.addEventListener('keyup', function(e) {
          myGameArea.key = false;
        });
      },
      clear: function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
    }

    function component(width, height, color, x, y) {
      this.width = width;
      this.height = height;
      this.speedX = 0;
      this.speedY = 0;
      this.x = x;
      this.y = y;
      this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
      this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;
      }
    }

    function updateGameArea() {
      myGameArea.clear();
      myGamePiece.speedX = 0;
      myGamePiece.speedY = 0;
      if (myGameArea.key && myGameArea.key == 37) {
        myGamePiece.speedX = -1;
      }
      if (myGameArea.key && myGameArea.key == 39) {
        myGamePiece.speedX = 1;
      }
      myGamePiece.newPos();
      myGamePiece.update();
      dots.forEach(x => x.update());
    }
  </script>
</body>

</html>
  • запуск функции Игра Я добавил dots = []... всего несколько точек на эллиптическом узоре
  • function updateGameArea А здесь мы просто вызываем обновление объектов: dots.forEach(x => x.update());
...