実現したいこと
四角の箱にボールがぶつかるとゲームオーバーになるようにしたいです。
前提
jsを使用しております
なぜかゲーム開始直後にゲームオーバーのメッセージが出てきます
エラーメッセージ
なし
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <title>qwwqowqw</title> <style> * { padding: 0; margin: 0; } canvas { background: #ece9e9; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="myCanvas" width="480" height="320"></canvas> <script> 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 = 50; var paddleWidth = 50; var paddleX = (canvas.width-paddleWidth)/2; var paddley = ( canvas.height-paddleHeight); var rightPressed = false; var leftPressed = false; document.addEventListener("keydown", keyDownHandler, false); document.addEventListener("keyup", keyUpHandler, false); function keyDownHandler(e) { if(e.key == "d") { rightPressed = true; } else if(e.key == "a") { leftPressed = true; } else if(e.key == "w") { goPressed = true; } else if(e.key == "s") { backPressed = true; } } function keyUpHandler(e) { if(e.key == "d") { rightPressed = false; } else if(e.key == "a") { leftPressed = false; } else if(e.key == "w") { goPressed = false; } else if(e.key == "s") { backPressed = false; } } function drawPaddle() { ctx.beginPath(); ctx.rect(paddleX,paddley, paddleWidth, paddleHeight); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); if(paddleX-10<x<paddleX+10 && paddley-10<y<paddley+10){ //ゲームオーバーの処理 alert("GAME OVER"); document.location.reload(); clearInterval(interval); // Needed for Chrome to end game } drawBall();//ボールの処理 if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { dx = -dx; } if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { dy = -dy; } x += dx; y += dy; drawPaddle();//player //player操作 if(rightPressed) { paddleX += 7; if (paddleX + paddleWidth > canvas.width){ paddleX = canvas.width - paddleWidth; } } else if(leftPressed) { paddleX -= 7; if (paddleX < 0){ paddleX = 0; } } else if(goPressed) { paddley -= 7; if (paddley < 0){ paddley = 0; } } else if(backPressed) { paddley += 7; if (paddley+paddleHeight > canvas.height){ paddley = canvas.height-paddleHeight; } } } var interval = setInterval(draw, 10); </script> </body> </html> ### 試したこと ゲームオーバーの条件のIF分ｙ<100などに変えた場合はうまく動いてくれました
0 コメント