Hei, jadi saya sangat baru dalam hal ini, dan memutuskan untuk belajar sambil melakukan! Dan ikuti tutorial untuk membuat sedikit melompat bergerak di sekitar permainan. Lalu saya berpikir, bukankah bagus jika persegi menjadi sebuah gambar. Jadi di situlah masalah saya dimulai. Seperti yang saya pahami, gambar yang saya miliki mengisi kanvas dalam pola yang berulang, dan ketika persegi berada di atasnya, Anda dapat melihat ke gambar. Dan sekarang aku tersesat. Adakah tips tentang di mana harus mulai memperbaiki ini atau apakah itu sia-sia?

const context = document.querySelector("canvas").getContext("2d");
context.canvas.height = document.documentElement.clientHeight;      //viewport height
context.canvas.width = Math.max(                                    //width of everything
  document.body.scrollWidth, document.documentElement.scrollWidth,
  document.body.offsetWidth, document.documentElement.offsetWidth,
  document.body.clientWidth, document.documentElement.clientWidth
);


// Create a collection to hold the generated x coordinates
const obXCoors = [];

const square = {    // size of the square
  height: 100,
  jumping: true,
  width: 100,
  x: 0,
  xVelocity: 0,
  y: 0,
  yVelocity: 0
};

const controller = {  
  left: false,
  right: false,
  up: false,
  keyListener: function (event) {
    var key_state = (event.type == "keydown") ? true : false;
    switch (event.keyCode) {
      case 37:// left key
        controller.left = key_state;
        break;
      case 32:// space key
        controller.jump = key_state;
        break;
      case 39:// right key
        controller.right = key_state;
        break;
    }
  }
};

const loop = function () {

  if (controller.jump && square.jumping == false) {
    square.yVelocity -= 50;
    square.jumping = true;
  }

  if (controller.left) {
    square.xVelocity -= 1;
  }

  if (controller.right) {
    square.xVelocity += 1;
  }

  square.yVelocity += 1.5;// gravity
  square.x += square.xVelocity;
  square.y += square.yVelocity;
  square.xVelocity *= 0.9;// friction
  square.yVelocity *= 0.9;// friction
  

  // if square is falling through the floor
  if (square.y > context.canvas.height - 100) {
    square.jumping = false;
    square.y = context.canvas.height - 100;
    square.yVelocity = 0;
  }

  // if square is going off the left of the screen
  if (square.x < -10) {
    square.x = 0;
  } 
  
  // if square goes past the right edge
  else if (square.x > context.canvas.width - 90) { 
    square.x = (context.canvas.width-100);
  }

  // scroll to the right
  var viewportwidth = window.innerWidth;
  if (square.x > (viewportwidth*0.8) + window.pageXOffset) {
    window.scrollBy(10,0);  
  }

  // scroll to the left
  else if (square.x < (viewportwidth * 0.2) + window.pageXOffset) {
    window.scrollBy(-10, 0);
  }

  // Creates the backdrop for each frame
  context.fillStyle = "white";
  context.fillRect(0, 0, context.canvas.width, context.canvas.height); // x, y, width, height

  const run = document.createElement("IMG");
  run.setAttribute("src", "img/run.gif");
  run.setAttribute("width", "100");
  run.setAttribute("height", "100");
  run.setAttribute("alt", "run");
  
  const pattern = context.createPattern(run,'repeat');

  // Creates and fills the cube for each frame
  context.fillStyle = pattern; // hex for cube color
  context.beginPath();
  context.rect(square.x, square.y, square.width, square.height);
  context.fill();


  // call update when the browser is ready to draw again
  window.requestAnimationFrame(loop); 
};


window.addEventListener("keydown", controller.keyListener)
window.addEventListener("keyup", controller.keyListener);
window.addEventListener("keydown", function(e) {
  // space and arrow keys
  if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
    e.preventDefault();
  }
}, false);
window.requestAnimationFrame(loop);
0
Chloe Cordon 13 November 2020, 19:26

1 menjawab

Jawaban Terbaik

Coba ini:

const context = document.querySelector("canvas").getContext("2d");
context.canvas.height = document.documentElement.clientHeight;      //viewport height
context.canvas.width = Math.max(                                    //width of everything
  document.body.scrollWidth, document.documentElement.scrollWidth,
  document.body.offsetWidth, document.documentElement.offsetWidth,
  document.body.clientWidth, document.documentElement.clientWidth
);


// Create a collection to hold the generated x coordinates
const obXCoors = [];

const square = {    // size of the square
  height: 100,
  jumping: true,
  width: 100,
  x: 0,
  xVelocity: 0,
  y: 0,
  yVelocity: 0
};

const controller = {  
  left: false,
  right: false,
  jump: false,
  keyListener: function (event) {
    var key_state = (event.type == "keydown") ? true : false;
    switch (event.keyCode) {
      case 37:// left key
        controller.left = key_state;
        break;
      case 32:// space key
        controller.jump = key_state;
        break;
      case 39:// right key
        controller.right = key_state;
        break;
    }
  }
};

const loop = function () {

  if (controller.jump && square.jumping == false) {
    square.yVelocity -= 50;
    square.jumping = true;
  }

  if (controller.left) {
    square.xVelocity -= 1;
  }

  if (controller.right) {
    square.xVelocity += 1;
  }

  square.yVelocity += 1.5;// gravity
  square.x += square.xVelocity;
  square.y += square.yVelocity;
  square.xVelocity *= 0.9;// friction
  square.yVelocity *= 0.9;// friction
  

  // if square is falling through the floor
  if (square.y > context.canvas.height - 100) {
    square.jumping = false;
    square.y = context.canvas.height - 100;
    square.yVelocity = 0;
  }

  // if square is going off the left of the screen
  if (square.x < -10) {
    square.x = 0;
  } 
  
  // if square goes past the right edge
  else if (square.x > context.canvas.width - 90) { 
    square.x = (context.canvas.width-100);
  }

  // scroll to the right
  var viewportwidth = window.innerWidth;
  if (square.x > (viewportwidth*0.8) + window.pageXOffset) {
    window.scrollBy(10,0);  
  }

  // scroll to the left
  else if (square.x < (viewportwidth * 0.2) + window.pageXOffset) {
    window.scrollBy(-10, 0);
  }
   
  // Creates the backdrop for each frame
  context.fillStyle = "#FFF";
  context.fillRect(0, 0, context.canvas.width, context.canvas.height); // x, y, width, height

  // Creates and fills the cube for each frame
  context.beginPath();
  base_image = new Image();
  base_image.src = 'data:image/jpeg;base64,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';
  context.drawImage(base_image, square.x, square.y);


  // call update when the browser is ready to draw again
  window.requestAnimationFrame(loop); 
};


window.addEventListener("keydown", controller.keyListener)
window.addEventListener("keyup", controller.keyListener);
window.addEventListener("keydown", function(e) {
  // space and arrow keys
  if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
    e.preventDefault();
  }
}, false);
window.requestAnimationFrame(loop);

Kode membuat gambar seperti ini:

  const run = document.createElement("IMG");
  run.setAttribute("src", "img/run.gif");
  run.setAttribute("width", "100");
  run.setAttribute("height", "100");
  run.setAttribute("alt", "run");
  
  const pattern = context.createPattern(run,'repeat');
  context.fillStyle = pattern; // hex for cube color
  context.beginPath();
  context.rect(square.x, square.y, square.width, square.height);
  context.fill();

Saya telah menggantinya dengan

  base_image = new Image();
  base_image.src = 'img/run.gif';
  context.drawImage(base_image, square.x, square.y);

Saya juga memperbaiki kesalahan ketik di:

const controller = {  
  left: false,
  right: false,
  up: false, // should be 'jump' not 'up'
0
Huw 13 November 2020, 17:52