我怎么让屏幕说游戏而不是在对话框中说游戏结束？

本文介绍了我怎么让屏幕说游戏而不是在对话框中说游戏结束？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 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 == 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， 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 = 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); 这篇关于我怎么让屏幕说游戏而不是在对话框中说游戏结束？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！