游戏分数计数器

Question

我是编程的新手，我试图制作游戏。你移动一个红色区块，当你碰到绿色区块时，你会回到（0,0）并且绿色区块会移动到一个随机位置。

现在我的问题是当我点击绿色区块时，我如何在游戏中放置一个得分计数器+1。

＆＃13;

＆＃13;

var myGamePiece;
var myObstacle;

function startGame() {
  myGamePiece = new component(40, 40, "red", 0, 0);
  myObstacle = new component(40, 40, "green", Math.floor((Math.random() *
      560) +
    0), Math.floor((Math.random() * 360) + 0));
  myGameArea.start();
}

var myGameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 600;
    this.canvas.height = 400;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
  },
  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.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.crashWith = function(otherobj) {
    var myleft = this.x;
    var myright = this.x + (this.width);
    var mytop = this.y;
    var mybottom = this.y + (this.height);
    var otherleft = otherobj.x;
    var otherright = otherobj.x + (otherobj.width);
    var othertop = otherobj.y;
    var otherbottom = otherobj.y + (otherobj.height);
    var crash = true;
    if ((mybottom < othertop) || (mytop > otherbottom) || (myright <
        otherleft) || (myleft > otherright)) {
      crash = false;
    }
    return crash;
  }
}

function updateGameArea() {
  if (myGamePiece.crashWith(myObstacle)) {
    return startGame();
  } else {
    myGameArea.clear();
    myObstacle.update();
    myGamePiece.x += myGamePiece.speedX;
    myGamePiece.y += myGamePiece.speedY;
    myGamePiece.update();
    if (myGamePiece.x >= 580) {
      myGamePiece.x -= 20;
    }
    if (myGamePiece.x <= -20) {
      myGamePiece.x += 20;
    }
    if (myGamePiece.y <= -20) {
      myGamePiece.y += 20;
    }
    if (myGamePiece.y >= 380) {
      myGamePiece.y -= 20;
    }
  }
}

function anim(e) {

  if (e.keyCode == 39) {
    myGamePiece.speedX = 1;
    myGamePiece.speedY = 0;
  }
  if (e.keyCode == 37) {
    myGamePiece.speedX = -1;
    myGamePiece.speedY = 0;
  }
  if (e.keyCode == 40) {
    myGamePiece.speedY = 1;
    myGamePiece.speedX = 0;
  }

  if (e.keyCode == 38) {
    myGamePiece.speedY = -1;
    myGamePiece.speedX = 0;
  }

  if (e.keyCode == 32) {
    myGamePiece.speedY = 0;
    myGamePiece.speedX = 0;
  }

}

document.onkeydown = anim;
window.onload=startGame();

＆＃13;

canvas {
  border: 1px solid #d3d3d3;
  background-color: #f1f1f1;
}

＆＃13;

<button onmousedown="anim(e)" onmouseup="clearmove()" ontouchstart="moveup()">Start</button>
<br><br>
<p>press start to start
    <br> use the buttons ↑ ↓ → ← on your keyboard to move stop with the space</p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

添加

var chrashed = 0; 

并使用

if (myGamePiece.crashWith(myObstacle)) { 
  crashed++; 
  showCrashed; 
  return startGame(); 
}

https://jsfiddle.net/mplungjan/m4w3ahj1/

Answer 2

更改

• 添加了<output>代码以显示分数。
• 重新定义的事件处理程序/侦听器

有关更改的详情，请参阅演示

演示

// Reference output#score
var score = document.getElementById('score');
// Declare points
var points = 0;

var myGamePiece;
var myObstacle;

function startGame() {
  myGamePiece = new component(40, 40, "red", 0, 0);
  myObstacle = new component(40, 40, "green", Math.floor((Math.random() *
      560) +
    0), Math.floor((Math.random() * 360) + 0));
  myGameArea.start();
}

var myGameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 600;
    this.canvas.height = 400;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
  },
  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.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.crashWith = function(otherobj) {
    var myleft = this.x;
    var myright = this.x + (this.width);
    var mytop = this.y;
    var mybottom = this.y + (this.height);
    var otherleft = otherobj.x;
    var otherright = otherobj.x + (otherobj.width);
    var othertop = otherobj.y;
    var otherbottom = otherobj.y + (otherobj.height);
    var crash = true;
    if ((mybottom < othertop) || (mytop > otherbottom) || (myright <
        otherleft) || (myleft > otherright)) {
      crash = false;
    }
    return crash;
  }
}

function updateGameArea() {
  if (myGamePiece.crashWith(myObstacle)) {

    // Convert points to a real number
    points = parseInt(points, 10);

    // Increment points
    points++;

    // Set output#score value to points
    score.value = points;
    return startGame();
  } else {
    myGameArea.clear();
    myObstacle.update();
    myGamePiece.x += myGamePiece.speedX;
    myGamePiece.y += myGamePiece.speedY;
    myGamePiece.update();
    if (myGamePiece.x >= 580) {
      myGamePiece.x -= 20;
    }
    if (myGamePiece.x <= -20) {
      myGamePiece.x += 20;
    }
    if (myGamePiece.y <= -20) {
      myGamePiece.y += 20;
    }
    if (myGamePiece.y >= 380) {
      myGamePiece.y -= 20;
    }
  }
}

function anim(e) {
  if (e.keyCode == 39) {
    myGamePiece.speedX = 1;
    myGamePiece.speedY = 0;
  }
  if (e.keyCode == 37) {
    myGamePiece.speedX = -1;
    myGamePiece.speedY = 0;
  }
  if (e.keyCode == 40) {
    myGamePiece.speedY = 1;
    myGamePiece.speedX = 0;
  }

  if (e.keyCode == 38) {
    myGamePiece.speedY = -1;
    myGamePiece.speedX = 0;
  }

  if (e.keyCode == 32) {
    myGamePiece.speedY = 0;
    myGamePiece.speedX = 0;
  }

}

/* Set on click handler 
|| When event occurs call startGame() / exclude
|| parenthesis
*/
document.onclick = startGame;

/* Register keydown event
|| When event occurs call anim() / exclude parenthesis
*/
document.addEventListener('keydown', anim, false);

/* When a callback is a named function / exclude the
|| parenthesis
*/
window.onload = startGame;

canvas {
  border: 1px solid #d3d3d3;
  background-color: #f1f1f1;
}

button {
  font: inherit;
}

<br><br>
<button id='start'>Start</button>
<br><br>
<label for='score'>Score: </label>
<output id='score'>0</output>
<br><br>
<p>Click <kbd>Start</kbd> button</p>
<p>Use the buttons ↑ ↓ → ← on your keyboard to move stop with the spacebar.</p>