random_colorの無効

現在ぷよぷよを作っているのですが、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}

行動規範の内容に同意します

回答1件

自己解決

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};