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

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

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

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

Q&A

解決済

1回答

600閲覧

random_colorの無効

aoi68

総合スコア9

JavaScript

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

0グッド

0クリップ

投稿2021/02/06 22:53

現在ぷよぷよを作っているのですが、draw_puyo関数のランダムカラーの位置が悪いため、移動キーでぷよを移動させるたびに色が変わってしまうバグが起きています。

canvasのメソッドになにか解決策があるのではと思い探していたところ、translateとsaveメソッドが使えそうな感じがしたので、それらを使ってコードを組み直してみたのですが、どれも失敗に終わったので結局使わずにもとに戻してあります。

javascript

1const canvas = document.getElementById("myCanvas"); 2const ctx = canvas.getContext("2d"); 3 4const color = ["red", "blue", "green", "yellow"]; 5 6const puyoSize = 50; 7 8let firstX = puyoSize * 2.5; 9 10let firstY = puyoSize / 2; 11 12canvas.width = puyoSize * 6; 13 14canvas.height = puyoSize * 12; 15 16 17let draw_puyo = function () { 18 for (let i = 0; i < puyoSize * 2; i += puyoSize) { 19 ctx.beginPath(); 20 ctx.fillStyle = color[Math.floor(Math.random() * color.length)]; 21 ctx.arc(firstX, i + firstY, puyoSize / 2, 0, 360 / 180 * Math.PI); 22 ctx.fill(); 23 } 24}; 25 26draw_puyo(); 27 28document.addEventListener('keydown', (event) => { 29 let keyName = event.key; 30 31 console.log(keyName); 32 33 ctx.clearRect(firstX - puyoSize / 2, firstY - puyoSize / 2, puyoSize, puyoSize * 2); 34 35 if(keyName === "ArrowUp") { 36 firstY -= puyoSize; 37 console.log("うえ"); 38 } else if(keyName === "ArrowDown") { 39 firstY += puyoSize; 40 console.log("した"); 41 } else if(keyName === "ArrowLeft") { 42 firstX -= puyoSize; 43 console.log("ひだり"); 44 } else if(keyName === "ArrowRight") { 45 firstX += puyoSize; 46 console.log("みぎ"); 47 }; 48 49 draw_puyo(); 50});

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>ぷよぷよ</title> 7 <link rel="stylesheet" href="style.css"> 8</head> 9<body> 10 <canvas id="myCanvas"></canvas> 11 12 <!--script--> 13 14 <script src="script.js"></script> 15</body> 16</html>

css

1canvas { 2 border: 1px solid; 3 border-top: none; 4 transform: translate(500px,100px); 5}

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

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

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

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

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

guest

回答1

0

自己解決

javascript

1let draw_puyo = function () { 2 for (let i = 0; i < puyoSize * 2; i += puyoSize) { 3 ctx.beginPath(); 4 let random_color = color[Math.floor(Math.random() * color.length)]; 5 ctx.fillStyle = random_color; 6 puyo_colors.push(random_color); 7 console.log(puyo_colors[0]); 8 console.log(puyo_colors[1]); 9 ctx.arc(firstX, i + firstY, puyoSize / 2, 0, 360 / 180 * Math.PI); 10 ctx.fill(); 11 } 12}; 13 14let move_puyo = function () { 15 let p = 0; 16 17 for (let i = 0; i < puyoSize * 2; i += puyoSize) { 18 ctx.beginPath(); 19 ctx.fillStyle = puyo_colors[p]; 20 ctx.arc(firstX, i + firstY, puyoSize / 2, 0, 360 / 180 * Math.PI); 21 ctx.fill(); 22 p += 1; 23 } 24};

for文の最後に配列を作って、配列に追加していきました。

投稿2021/02/07 03:48

aoi68

総合スコア9

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問