-1
私は、プレーヤーが落下するオブジェクトを捉えるゲームを作っています。オブジェクトがキャッチされると、スコアは1つ増えますが、それは増加しません。私は、オブジェクトがそれらをキャッチしたときにオブジェクトが消えるコリジョン関数を既に持っています。スコアはすでに画面に表示されています。ここに私のコードは次のとおりです。ゲームのスコア値を上げるにはどうしたらいいですか？
(() => {
// In general, don't touch anything except for sections explicitly marked as such.
// Look for the exclamations points (!!!!!) for such markers.
let canvas = document.getElementById("game");
let game = canvas.getContext("2d");
let lastTimestamp = 0;
let playerScore = 0;
const FRAME_RATE = 60;
const FRAME_DURATION = 1000/FRAME_RATE;
// !!!!! Change/add to this as needed. What other objects or variables will you need for your game idea?
// A score? Different kinds of fallers? Player statistics? It's all up to you!
let fallers = [];
// Check out that cool ES6 feature: default parameter values!
const DEFAULT_DESCENT = 0.0002; // This is per millisecond.
let Faller = function (x, y, width, height, dx = 0, dy = 0, ax = 0, ay = DEFAULT_DESCENT) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
// Velocity.
this.dx = dx;
this.dy = dy;
// Acceleration.
this.ax = ax;
this.ay = ay;
};
Faller.prototype.draw = function() {
game.fillStyle = "blue";
game.fillRect(this.x, this.y, this.width, this.height);
};
Faller.prototype.move = function (millisecondsElapsed) {
//Good old Newtonian physics.
this.x += this.dx * millisecondsElapsed;
this.y += this.dy * millisecondsElapsed;
this.dx += this.ax * millisecondsElapsed;
this.dy += this.ay * millisecondsElapsed;
};
const DEFAULT_PLAYER_WIDTH = 45;
const DEFAULT_PLAYER_HEIGHT = 20;
const DEFAULT_PLAYER_Y = canvas.height - DEFAULT_PLAYER_HEIGHT;
let Player = function (x, y = DEFAULT_PLAYER_Y, width = DEFAULT_PLAYER_WIDTH, height = DEFAULT_PLAYER_HEIGHT) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
};
Player.prototype.draw = function() {
game.fillStyle = "aqua";
game.beginPath();
game.moveTo(this.x - this.width/2, this.y + this.height);
game.lineTo(this.x - 2, this.y);
game.lineTo(this.x, this.y - 20);
game.lineTo(this.x + 2, this.y);
game.lineTo(this.x + this.width/2, this.y + this.height);
game.closePath();
game.fill();
};
let player = new Player(canvas.width/2);
// !!!!! You can treat this function like Khan Academy’s `draw`---just precede all
// drawing instructions with `game.`
let draw = (millisecondsElapsed) => {
game.clearRect(0, 0, canvas.width, canvas.height);
fallers.forEach((faller) => {
faller.draw();
//COLLISION FUNCTION!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
let playerScore = document.getElementById("playerScore");
if (player.x < faller.x + faller.width && player.x + player.width > faller.x &&
\t \t player.y < faller.y + faller.height && player.y + player.height > faller.y) {
game.clearRect(0, 0, canvas.width, canvas.height);
};
playerScore += 1;
faller.move(millisecondsElapsed);
});
player.draw();
// Remove fallers that have hit the ground. You might have other reasons to remove fallers.
fallers = fallers.filter((faller) => {
return faller.y < canvas.height;
});
};
// !!!!! This section is modifiable to a degree. It is responsible for generating falling objects at random.
// You don't want to completely eliminate this code, but you may want to revise it to modify the rate/range
// of objects that get generated.
const MIN_WIDTH = 10;
const WIDTH_RANGE = 20;
const MIN_HEIGHT = 10;
const HEIGHT_RANGE = 20;
const MILLISECONDS_BETWEEN_FALLERS = 800;
let fallerGenerator;
let startFallerGenerator =() => {
fallerGenerator = setInterval(() => {
// !!!!! This code looks really repetitive! Hmmmm, what to do...
let fallerWidth = Math.floor(Math.random() * WIDTH_RANGE) + MIN_WIDTH;
fallers.push(new Faller(
Math.floor(Math.random() * (canvas.width - fallerWidth)), 0,
fallerWidth, Math.floor(Math.random() * HEIGHT_RANGE) + MIN_HEIGHT
));
}, MILLISECONDS_BETWEEN_FALLERS);
};
let stopFallerGenerator =() => clearInterval(fallerGenerator);
// !!!!! This section is also modifiable to a degree: it is responsible for moving the "player" around based on
// mouse movement.
let setPlayerPositionBasedOnMouse = (event) => {
player.x = event.clientX/document.body.clientWidth * canvas.width;
};
document.body.addEventListener("mouseenter", setPlayerPositionBasedOnMouse);
document.body.addEventListener("mousemove", setPlayerPositionBasedOnMouse);
// OK, back to the no-touch zone (unless you _really_ know what you’re doing).
let running = false;
let nextFrame = (timestamp) => {
if (!lastTimestamp) {
lastTimestamp = timestamp;
}
if (timestamp - lastTimestamp < FRAME_DURATION) {
if (running) {
window.requestAnimationFrame(nextFrame);
}
return;
}
draw(timestamp - lastTimestamp);
lastTimestamp = timestamp;
if (running) {
window.requestAnimationFrame(nextFrame);
}
};
document.getElementById("start-button").addEventListener("click",() => {
running = true;
lastTimestamp = 0;
startFallerGenerator();
window.requestAnimationFrame(nextFrame);
});
document.getElementById("stop-button").addEventListener("click",() => {
stopFallerGenerator();
running = false;
});
})();canvas {
border: solid 1px gray;
display: block;
margin-left: auto;
margin-right: auto;
width: 1024px;
}
p {
text-align: center;
}<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Undefined</title>
<link rel="stylesheet" href="falling.css">
</head>
<body>
<h1>Not finished</h1>
<p>
<b>Score:</b> <span id="playerScore">0</span>
<!-- This starter code only contains the area in which the game graphics get drawn.
Feel free to add more elements for displays like scores, lives left, player
statistics, instructions, etc. -->
<canvas id="game" width="1024" height="536">
Sorry, but you need a web browser that supports the
<code>canvas</code> element.
</canvas>
<p>
<button id="start-button">Start</button>
<button id="stop-button">Stop</button>
</p>
<script src="falling.js"></script>
</body>
</html>
膨大なコードダンプの代わりに、[MCVE]（http://stackoverflow.com/help/mcve）を提供してください。 –
'let playerScore = document.getElementById（" playerScore "）;'は数値を隠す新しいローカル変数 'playerScore'を作成します。あなたがこの行で何をしたいのかははっきりしていません。これをデバッグする方法は次のとおりです： 'console.log（playerScore）'を使うだけで、ブラウザのコンソールにその値が表示されます。 – Xufox