質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

471閲覧

If文で困っています

koropppp

総合スコア6

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2023/03/09 08:18

実現したいこと

四角の箱にボールがぶつかるとゲームオーバーになるようにしたいです。

前提

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分y<100などに変えた場合はうまく動いてくれました

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

javasciprt

1 if(paddleX-10<x<paddleX+10 && paddley-10<y<paddley+10){ //ゲームオーバーの処理

この部分が間違っています。
範囲内に存在するか確認する場合は

javascirpt

1if(paddleX-10< x && x < paddleX+10 && paddley-10 <y && y < paddley+10){

のように最小と最大を別々に比較しましょう。

投稿2023/03/09 08:53

gogoweb_ikeda

総合スコア1426

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問