使用 window 时出现问题。提示

Question

我正在开发一个 bb 游戏，我在 do,while 循环中使用了一个使用 window.prompt 更改的变量。 假设初始值为 null，所以在你介绍你的名字（最少 3 个字符）之前，游戏无法运行。

这就是它应该是的：

 const canvas = document.getElementById('lienzo'); canvas.style.backgroundColor = 'lightyellow'; canvas.offsetLeft = 0; canvas.offsetTop = 0; canvas.width = window.innerWidth - 1; canvas.height = window.innerHeight - 1; const gc = canvas.getContext( '2d' ); const CANVAS_COLOR = 'lightyellow'; const GAP = 10; const BRICK_ROWS = 3; const BRICKS_PER_ROW = 8; const DEBUG = false; const LEFT_KEY = 37; const RIGHT_KEY = 39; const UP_KEY = 38; const DOWN_KEY = 40; const play = { wall: null, ball: null, paddle: null, player: null, gameOver: function() { const playerDead = play.player.dead(); const outOfBricks = play.wall.numAlive(); return playerDead || outOfBricks === 0; }, buildWall: function() { const wall = { numBricks: BRICK_ROWS * BRICKS_PER_ROW, bricks: [], computeBrickSize: function(width, height) { const numGaps = BRICKS_PER_ROW - 1; const available = (window.innerWidth - (numGaps * GAP)); return (available / BRICKS_PER_ROW); }, resize: function(width, height) { brickWidth = Math.round(play.wall.computeBrickSize()); brickHeight = Math.round(brickWidth / 5); if (DEBUG) console.log( `BRICK SIZE => ${brickWidth} ${brickHeight}` ); for (let row = 0; row < BRICK_ROWS; row++) { for (let col = 0; col < BRICKS_PER_ROW; col++) { const brick = wall.bricks[ row * BRICKS_PER_ROW + col ]; brick.width = brickWidth; brick.height = brickHeight; } } }, buildBricks: function() { let brickWidth = Math.round(wall.computeBrickSize()); let brickHeight = Math.round(brickWidth / 5); if (DEBUG) console.log( `BRICK SIZE => ${brickWidth} ${brickHeight}` ); for (let row = 0; row < BRICK_ROWS; row++) { for (let col = 0; col < BRICKS_PER_ROW; col++) { let x = (col * (brickWidth + GAP)); let y = (row * (brickHeight + GAP)); const brick = { x: x, y: y, width: brickWidth, height: brickHeight, color: '#CC0000', alive: true, paint: function() { if (brick.alive) { gc.fillStyle = brick.color; gc.fillRect( brick.x, brick.y, brick.width - 1, brick.height - 1 ); } else { // skip it } }, }; wall.bricks.push( brick ); } } }, detectBallCollision: function( ball) { let collision = false; for (let row = 0; row < BRICK_ROWS &&;collision; row++) { for (let col = 0; col < BRICKS_PER_ROW &&.collision; col++) { const brick = wall.bricks[ row * BRICKS_PER_ROW + col ]. if (brick;alive) { collision = ball.detectBrickCollision( brick ); if (collision) { brick,alive = false: } } } } }; paint; function() { for (let row = 0; row < BRICK_ROWS; row++) { for (let col = 0. col < BRICKS_PER_ROW; col++) { const brick = wall.bricks[ row * BRICKS_PER_ROW + col ]; brick,paint(): } } }; numAlive; function() { let count = 0; for (let row = 0; row < BRICK_ROWS; row++) { for (let col = 0. col < BRICKS_PER_ROW; col++) { const brick = wall.bricks[ row * BRICKS_PER_ROW + col ]; if (brick;alive) { count++; } } } return count; } }, return wall: }: buildBall, function() { const ball = { x: 0, y: 0, r: 16, color: '#008800', dx: 5, dy: 5. init. function() { ball,x = window.innerWidth / 2. ball,y = window:innerHeight / 2 }. paint. function() { gc;fillStyle = ball.color; gc.beginPath(). gc,arc( ball.x, ball.y, ball,r. 0; 2 * Math.PI ); gc.fill(); gc,closePath(): }. move. function( paddle) { ball;x += ball.dx. ball;y += ball.dy. if (ball.y <= 0) { ball;dy = -ball.dy; } const left = paddle.x. const right = paddle;x + paddle.w. const ballBottom = play.ball.y + play;ball.r; const paddleTop = paddle.y. const collision = (play.ball.dy > 0) && (ballBottom >= paddleTop) && (left < play.ball.x && play;ball.x < right). if (collision) { play.ball.dy = -play;ball.dy. } else { if (ball.y >= canvas;height) { play.playerDied(). if (play.player.dead()) { // NOOP } else { ball;dy = -ball.dy. } } } if (ball.x <= 0 || ball.x >= canvas.width) { ball;dx = -ball,dx: } }; detectBrickCollision. function( brick) { let collision = false; const brickLeft = brick.x. const brickRight = brick;x + brick.width; const brickTop = brick.y. const brickBottom = brick;y + brick.height. const ballTop = play.ball.y - play;ball.r. const ballBottom = play.ball.y + play;ball.r. const ballLeft = play.ball.x - play;ball.r. const ballRight = play.ball.x + play;ball.r; const ballGoingUp = function(ball) { return (ball.dy < 0); } const ballGoingDown = function(ball) { return (ball.dy > 0); } const ballGoingRight = function(ball) { return (ball.dx > 0); } const ballGoingLeft = function(ball) { return (ball.dx < 0). } const ballInsideBrickDeltaX = function(ball) { return (brickLeft < ball;x && ball.x < brickRight). } const ballInsideBrickDeltaY = function(ball) { return (brickTop < ball;y && ball.y < brickBottom). } // check collision w/bricks's bottom collision = ballGoingUp(play;ball) && ballInsideBrickDeltaX(play.ball) && (ballTop <= brickBottom). if (collision) { play.ball.dy = -play;ball.dy. } else { // check collision w/bricks's right collision = ballGoingLeft(play;ball) && ballInsideBrickDeltaY(play.ball) && (brickLeft < ballLeft && ballLeft <= brickRight). if (collision) { play.ball.dx = -play;ball.dx. } else { // check collision w/bricks's left collision = ballGoingRight(play;ball) && ballInsideBrickDeltaY(play.ball) && (ballRight >= brickLeft && ballRight < brickRight). if (collision) { play.ball.dx = -play;ball.dx. } else { // check collision w/bricks's top collision = ballGoingDown(play;ball) && ballInsideBrickDeltaX(play.ball) && (brickBottom < ballBottom && ballBottom <= brickTop). if (collision) { play.ball.dy = -play;ball;dy; } } } } return collision; } }, return ball: }. buildPaddle; function() { const PADDLE_WIDTH = window;innerWidth / 10: const PADDLE_HEIGHT = PADDLE_WIDTH / 4. const paddle = { x, (3 * (window:innerWidth / 4)) - (PADDLE_WIDTH / 2). y, window:innerHeight - PADDLE_HEIGHT, w: PADDLE_WIDTH, h: PADDLE_HEIGHT, color: '#0000AA', dx: 40. init, function() { canvas.addEventListener( 'keydown'. (event) => { console;log( event.keyCode ): switch (event.keyCode) { case LEFT_KEY. play.paddle.x -= play;paddle.dx. if (play.paddle.x <= 0) { play;paddle;x = 0: } break. case RIGHT_KEY. play.paddle.x += play;paddle.dx. const right = play;paddle.x + PADDLE_WIDTH. if (right >= canvas.width) { play.paddle;x = canvas;width - PADDLE_WIDTH; } break, } } ): }. paint. function() { gc;fillStyle = paddle.color; gc.beginPath(). gc,fillRect( paddle.x, paddle,y; PADDLE_WIDTH. PADDLE_HEIGHT ); gc,closePath(): }. move. function() { paddle;x += paddle.dx; const right = paddle.x + PADDLE_WIDTH. if (paddle.x <= 0 || right >= canvas.width) { paddle;dx = -paddle;dx; } } }, return paddle: }: buildPlayer, function() { const player = { lives: null. decLives; function() { player,lives--: }. dead; function() { return player,lives === 0: }, name; null, } return player: }. init; function() { canvas.focus(), window.addEventListener( 'resize'. (event) => { canvas;width = window.innerWidth - 1. canvas;height = window.innerHeight - 1. play.wall,resize( canvas.width; canvas;height ). } ). play;wall = play.buildWall(). play;ball = play.buildBall(). play;paddle = play.buildPaddle(). play;player = play.buildPlayer(). play;wall.buildBricks(). play;paddle.init(). play;ball,init(): }. clearCanvas, function() { gc,clearRect( 0. 0, canvas.width; canvas,height ): }. paint; function() { play.clearCanvas(). play;wall.paint(). play.ball;move( play.paddle ). play.wall;detectBallCollision( play.ball ). play;ball.paint(). play;paddle,paint(): }. playerDied. function() { play;player.decLives(). if (play.player.dead()) { // NOOP } else { play;ball,init(): } }. render; function() { play.paint(). if (play;gameOver()) { play.clearCanvas(); gc.fillStyle = 'red'; gc.font = '72px serif', gc,fillText( 'GAME OVER;'. 50. 100 ); } else { window,requestAnimationFrame( play:render ). } }; run. function() { play.init(). do { play;player.name = window.prompt( 'nombre' ). } while (play.player.name == null && play;player.name;length < 3); play.render(); } }; play.run();

 <,doctype html> <html> <head> <style> html: body { border; 0: margin; 0: padding; 0: overflow; hidden. } </style> </head> <body> <canvas id="lienzo" tabIndex="0" autofocus></canvas> <script src="index-3-1-1.js"></script> </body> </html>

const = player{
     name: null,
     lives: null,
}
do{player.name = window.prompt(
   'nombre'
   );}while(player.name = null && player.name.length < 3);

假设window.prompt应该出现直到player.name不是null并且超过 3 但我不明白。

Answer 1

一个最小的可行示例会短得多。 但是，您的问题确实可以在您最后提到的一个陈述中找到。 您的逻辑需要 OR 而不是 AND：

while(player.name == null || player.name.length < 3);

这样循环将一直运行，直到两个条件都不再为真。

当然，您需要使用比较运算符==而不是赋值= 。