我怎么让屏幕说游戏而不是在对话框中说游戏结束？ [英] How do I make the screen say game over rather than it saying game over in a dialogue box?

问题描述

  var  canvas =  document  .getElementById（  myCanvas）; 
  var  ctx = canvas.getContext（  2D）; 
  var  ballRadius =  10 ; 
  var  x = canvas.width / 2; 
  var  y = canvas.height-30; 
  var  dx =  2 ; 
  var  dy = -2; 
  var  paddleHeight =  10 ; 
  var  paddleWidth =  75 ; 
  var  paddleX =（canvas.width-paddleWidth）/ 2; 
  var  rightPressed =  false ; 
  var  leftPressed =  false ; 
  var  brickRowCount =  5 ; 
  var  brickColumnCount =  5 ; 
  var  brickWidth =  75 ; 
  var  brickHeight =  20 ; 
  var  brickPadding =  10 ; 
  var  brickOffsetTop =  30 ; 
  var  brickOffsetLeft =  30 ; 
  var 得分=  0 ; 
  var  lives =  3 ; 
 
  var  bricks = []; 
  for （c =  0 ; c< brickColumnCount; c ++）{
 brick [c] = []; 
  for （r =  0 ; r< brickRowCount; r ++）{
 brick [c] [r] = {x： 0 ，y： 0 ，状态： 1 }; 
} 
} 
 
  document  .addEventListener（  keydown，keyDownHandler， false ）; 
  document  .addEventListener（  keyup，keyUpHandler， false ）; 
  document  .addEventListener（  mousemove，mouseMoveHandler， false ）; 
 
  function  keyDownHandler（e）{
  if （e。 keyCode ==  39 ）{
 rightPressed =  true ; 
} 
  else   if （e.keyCode ==  37 ）{
 leftPressed =  true ; 
} 
} 
  function  keyUpHandler（e）{
  if (e.keyCode ==  39 ）{
 rightPressed =  false ; 
} 
  else   if （e.keyCode ==  37 ）{
 leftPressed =  false ; 
} 
} 
  function  mouseMoveHandler（e）{
  var  relativeX = e.clientX  -  canvas.offsetLeft; 
  if （relativeX>  0 && relativeX< canvas.width）{ 
 paddleX = relativeX  -  paddleWidth / 2; 
} 
} 
  function  collisionDetection（）{
  for （c =  0 ; c< brickColumnCount; c ++）{
  for （r =  0 ; r< brickRowCount; r ++）{
  var  b = brick [c] [r ]。 
  if （b.status ==  1 ）{
  if （x> bx&& x< b.x + brickWidth&& y>&& y< b.y + brickHeight）{ 
 dy = -dy; 
 b.status =  0 ; 
得分=得分+  10  
  if （得分== 5 * 5） {
 alert（ 你赢了，大声说道！）; 
  document 。 location  .reload（）; 
} 
} 
} 
} 
} 
} 
 
  function  drawBall（）{
 ctx.beginPath（）; 
 ctx.arc（x，y，ballRadius， 0 ，数学 .PI * 2） ; 
 ctx.fillStyle =  ＃0095DD; 
 ctx.fill（）; 
 ctx.closePath（）; 
} 
  function  drawPaddle（）{
 ctx.beginPath（）; 
 ctx.rect（paddleX，canvas.height-paddleHeight，paddleWidth，paddleHeight）; 
 ctx.fillStyle =  ＃0095DD; 
 ctx.fill（）; 
 ctx.closePath（）; 
} 
  function  drawBricks（）{
  for （c =  0 ; c< brickColumnCount; c ++）{
  for （r =  0 ; r< brickRowCount; r ++）{
  if （bricks [c] [r] .status == < span class =code-digit> 1 ）{
  var  brickX =（r *（brickWidth + brickPadding））+ brickOffsetLeft; 
  var  brickY =（c *（brickHeight + brickPadding））+ brickOffsetTop; 
砖[c] [r] .x = brickX; 
砖[c] [r] .y = brickY; 
 ctx.beginPath（）; 
 ctx.rect（brickX，brickY，brickWidth，brickHeight）; 
 ctx.fillStyle =  ＃0095DD; 
 ctx.fill（）; 
 ctx.closePath（）; 
} 
} 
} 
} 
 功能 drawScore（）{
 ctx.font =   16px Arial; 
 ctx.fillStyle =  ＃0095DD; 
 ctx.fillText（ 得分： +得分， 8 ， 20 ）; 
} 
  function  drawLives（）{
 ctx.font =   16px Arial; 
 ctx.fillStyle =  ＃0095DD; 
 ctx.fillText（ 生命： +生命，canvas.width-65，< span class =code-digit> 20 ）; 
} 
 
  function  draw（）{
 ctx.clearRect（ 0 ， 0 ，canvas.width，canvas.height）; 
 drawBricks（）; 
 drawBall（）; 
 drawPaddle（）; 
 drawScore（）; 
 drawLives（）; 
 collisionDetection（）; 
 
  if （x + dx> canvas.width-ballRadius || x + dx< ballRadius）{
 dx = -dx; 
} 
  if （y + dy< ballRadius）{
 dy = -dy; 
} 
 其他 如果（y + dy> canvas.height-ballRadius ）{
  if （x> paddleX&& x< paddleX + paddleWidth）{
 dy = -dy; 
} 
 其他 {
 lives--; 
  if （！lives）{
 alert（  GAME OVER）; 
  document 。 location  .reload（）; 
} 
  else  {
 x = canvas.width / 2; 
 y = canvas.height-30; 
 dx =  3 ; 
 dy = -3; 
 paddleX =（canvas.width-paddleWidth）/ 2; 
} 
} 
} 
 
  if （rightPressed&& paddleX< canvas.width -paddleWidth）{
 paddleX + =  7 ; 
} 
 其他 如果（leftPressed&& paddleX>  0 ）{
 paddleX  -  =  7 ; 
} 
 
 x + = dx; 
 y + = dy; 
 requestAnimationFrame（draw）; 
} 
 
 draw（）; 

我的尝试：



Gamedev Canvas Workshop - 第10课 - JSFiddle [ ^ ]

解决方案

通过替换 alert（）调用，在Canvas上显示带有绘图文本的消息框。



如何做到这一点已包含在 drawScore 和 drawLives 函数（未经测试）：

 ctx.font =  < span class =code-string> 16px Arial; 
 ctx.fillStyle =  ＃0095DD; 
 ctx.fillText（ 游戏结束！，canvas.width， 20 ）; 

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 5;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var score = 0;
var lives = 3;

var bricks = [];
for(c=0; c<brickColumnCount; c++) {
    bricks[c] = [];
    for(r=0; r<brickRowCount; r++) {
        bricks[c][r] = { x: 0, y: 0, status: 1 };
    }
}

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
document.addEventListener("mousemove", mouseMoveHandler, false);

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
}
function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
}
function mouseMoveHandler(e) {
    var relativeX = e.clientX - canvas.offsetLeft;
    if(relativeX > 0 && relativeX < canvas.width) {
        paddleX = relativeX - paddleWidth/2;
    }
}
function collisionDetection() {
    for(c=0; c<brickColumnCount; c++) {
        for(r=0; r<brickRowCount; r++) {
            var b = bricks[c][r];
            if(b.status == 1) {
                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                    dy = -dy;
                    b.status = 0;
                    score = score + 10
                    if(score == 5*5) {
                        alert("YOU WIN, CONGRATS!");
                        document.location.reload();
                    }
                }
            }
        }
    }
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
function drawBricks() {
    for(c=0; c<brickColumnCount; c++) {
        for(r=0; r<brickRowCount; r++) {
            if(bricks[c][r].status == 1) {
                var brickX = (r*(brickWidth+brickPadding))+brickOffsetLeft;
                var brickY = (c*(brickHeight+brickPadding))+brickOffsetTop;
                bricks[c][r].x = brickX;
                bricks[c][r].y = brickY;
                ctx.beginPath();
                ctx.rect(brickX, brickY, brickWidth, brickHeight);
                ctx.fillStyle = "#0095DD";
                ctx.fill();
                ctx.closePath();
            }
        }
    }
}
function drawScore() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Score: "+score, 8, 20);
}
function drawLives() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBricks();
    drawBall();
    drawPaddle();
    drawScore();
    drawLives();
    collisionDetection();
    
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if(y + dy < ballRadius) {
        dy = -dy;
    }
    else if(y + dy > canvas.height-ballRadius) {
        if(x > paddleX && x < paddleX + paddleWidth) {
            dy = -dy;
        }
        else {
            lives--;
            if(!lives) {
                alert("GAME OVER");
                document.location.reload();
            }
            else {
                x = canvas.width/2;
                y = canvas.height-30;
                dx = 3;
                dy = -3;
                paddleX = (canvas.width-paddleWidth)/2;
            }
        }
    }
    
    if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 7;
    }
    else if(leftPressed && paddleX > 0) {
        paddleX -= 7;
    }
    
    x += dx;
    y += dy;
    requestAnimationFrame(draw);
}

draw();

What I have tried:

Gamedev Canvas Workshop - lesson 10 - JSFiddle[^]

解决方案

By replacing the alert() call to show the message box with drawing text on the Canvas.

How this can be done is already contained in the posted code in the drawScore and drawLives functions (untested):

ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Game Over!", canvas.width, 20);

这篇关于我怎么让屏幕说游戏而不是在对话框中说游戏结束？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！