Question

这是我第一次尝试JavaScript游戏。我正在尝试使用黄色块进行javascript游戏，您可以使用using System; class Program { static void Main(string[] args) { int deger1, deger2; deger2 = Convert.ToInt32(Console.ReadLine()); for (kivir =0; kivir <2; kivir++) { if (deger1 == 56) Console.WriteLine(Ekle(kivir, deger1)); deger2--; else deger1 = 56; } } static int Ekle(int deger1, int deger2) { return deger1 + deger2; } } w a s键来控制。蓝色方块应该是一个敌人，如果你击中它会让你松动。我稍后会添加更多功能。问题：游戏正常工作，直到您释放其中一个按钮。当你松开控制器按钮时，如何防止播放器块飞走？

当我启用d w a s键作为控制器时，我也无法使按钮工作，但我不认为这是一个主要问题在此刻。即便如此，如果有人知道如何解决它，我会很高兴。

var myGamePiece;
var myFi;

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(200,200,0,0.5)", 10, 175);
  //blueGamePiece = new component(20, 20, "blue", 300, 110);
  myFi = new component(15, 15, "blue", 300, 120);
}
var myGameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 680;
    this.canvas.height = 420;
    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.keys = (myGameArea.keys || []);
      myGameArea.keys[e.keyCode] = (e.type == "keydown");
    })
    window.addEventListener('keyup', function(e) {
      myGameArea.keys[e.keyCode] = (e.type == "keydown");
    })
  }, // I don't get why the comma is so important and what it does!

  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  },

  stop: function() {
    clearInterval(this.interval);
  }
}

function component(width, height, color, x, y) {
  this.gamearea = myGameArea;
  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;
    },
    this.crashWith = function(enemy) {
      var myleft = this.x;
      var myright = this.x + (this.width);
      var mytop = this.y;
      var mybottom = this.y + (this.height);
      var fileft = enemy.x;
      var firight = enemy.x + (enemy.width);
      var fitop = enemy.y;
      var fibottom = enemy.y + (enemy.height);
      var crash = true;
      if ((mybottom < fitop) || (mytop > fibottom) || (myright < fileft) || (myleft > firight)) {
        crash = false;
      }
      return crash;
    }
}

function updateGameArea() {
  if (myGamePiece.crashWith(myFi)) {
    myGameArea.stop();
  } else {
    myGameArea.clear();
    myGamePiece.speedX += myGamePiece.speedX;
    myGamePiece.speedY += myGamePiece.speedY;
    if (myGameArea.keys && myGameArea.keys[65]) {
      myGamePiece.speedX = -1;
    }
    if (myGameArea.keys && myGameArea.keys[68]) {
      myGamePiece.speedX = 1;
    }
    if (myGameArea.keys && myGameArea.keys[87]) {
      myGamePiece.speedY = -1;
    }
    if (myGameArea.keys && myGameArea.keys[83]) {
      myGamePiece.speedY = 1;
    }
    myGamePiece.newPos();
    //blueGamePiece.x -=1;
    //blueGamePiece.y +=2;
    //blueGamePiece.update();
    myGamePiece.update();
    myFi.update();
  }
}

function moveup() {
  myGamePiece.speedY = 1;
}

function movedown() {
  myGamePiece.speedY = 1;
}

function moveleft() {
  myGamePiece.speedX = 1;
}

function moveright() {
  myGamePiece.speedX = 1;
}

function clearmove() {
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
}

body {
  text-align: center;
}
canvas {
  border: 1px solid #d3d3d3;
  background-color: #f4f4f4;
}
div {
  text-align: center;
  width: 300px;
  height: 100px;
}
button {
  background-color: black;
  color: yellow;
}

Answer 1

TLDR：演示 https://jsfiddle.net/tty7y1gr/3/

的jsFiddle

你问的第一件事是如何让玩家停止移动。尝试更改这些行：

myGamePiece.speedY = 1;

到此：

myGamePiece.speedY += 1;

此外，您没有正确设置向下，向左和向右移动：没有负值。试试这个：

function moveup() {
  myGamePiece.speedY -= 1;
}

function movedown() {
  myGamePiece.speedY += 1;
}

function moveleft() {
  myGamePiece.speedX -= 1;
}

function moveright() {
  myGamePiece.speedX += 1;
}

另一件事是你在这里有一些代码：

myGamePiece.speedX += myGamePiece.speedX;
myGamePiece.speedY += myGamePiece.speedY;

这将使得游戏片段具有交错的，零星的运动，因为速度将继续增加它自己，直到游戏片段几乎指数级更快。除非这是故意的，否则要消除这些动作，摆脱这两条线。

我在其中看到的下一个问题是w a s d个键。尝试这样的事情：将其放在GameArea（）中：

window.addEventListener('keydown', function (e) {            
        myGameArea.keys = (myGameArea.keys || []);
        myGameArea.keys[e.keyCode] = true;
});

window.addEventListener('keyup', function (e) {
        myGameArea.keys[e.keyCode] = false;
});

这是你创建播放器的地方＆＃34; Controller＆＃34; （或运动）

myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.keys && (myGameArea.keys[37] || myGameArea.keys[65])) {
    myGamePiece.speedX = -1;
  }
  if (myGameArea.keys && (myGameArea.keys[39] || myGameArea.keys[68])) {
    myGamePiece.speedX = 1;
  }
  if (myGameArea.keys && (myGameArea.keys[38] || myGameArea.keys[87])) {
    myGamePiece.speedY = -1;
  }
  if (myGameArea.keys && (myGameArea.keys[40] || myGameArea.keys[83])) {
    myGamePiece.speedY = 1;
  }
}

（这也适用于箭头键）

但是这会让您的按钮移动停止工作。为了防止这种情况，你必须让gameupdate（）不要总是把你的游戏片段的速度设置为0.所以，在那里设置一个变量来设置一个变量来释放游戏片段的速度屏幕上的按钮，然后在您停止按下这些按钮时将其设置回来。像这样：

myGameArea.update（）之外：

var buttonMove = false;

包装游戏片的速度设置：

if (!buttonMove) {
        myGamePiece.speedX = 0;
        myGamePiece.speedY = 0;
}

myGameArea.update（）内部：

function moveup() {
  buttonMove = true;
  myGamePiece.speedY -= 1;
}

function movedown() {
buttonMove = true;
  myGamePiece.speedY += 1;
}

function moveleft() {
buttonMove = true;
  myGamePiece.speedX -= 1;
}

function moveright() {
buttonMove = true;
  myGamePiece.speedX += 1;
}

function clearmove() {
buttonMove = false;
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
}

我在您的代码中看到了有关您为何需要逗号的注释。你需要它，因为你正在创建一个JavaScript对象，其属性用逗号分隔。所以myGameArea看起来像这样：

var myGameArea = {
  canvas: "value",
  start: "value",    
  clear: "value",    
  stop: "value"
}

除了它有奇特的价值和＃34;在适当的位置，有些是功能，有些是元素等。

还有最后一件事，以及＃34;钳制＆＃34;你的玩家失败了，所以他们不能走出画布，你需要在你的＆＃34; Controller＆＃34;之后用这样的东西设置他们的界限。但在更新职位之前：

Number.prototype.clamp = function(min, max) {
    return Math.min(Math.max(this, min), max);
  };

  myGamePiece.x = myGamePiece.x.clamp(0, myGameArea.canvas.width - myGamePiece.width);
  myGamePiece.y = myGamePiece.y.clamp(0, myGameArea.canvas.height - myGamePiece.height);

jsFiddle演示：

https://jsfiddle.net/tty7y1gr/3/

Javascript游戏控件

1 个答案: