인터랙티브 SVG를 만들고 싶습니다.

JavaScirpt라고 하면 홈페이지에 날짜 표시하는 시대부터 기성 서리.
지금 프런트에서는 무쌍 상태의 언어로 8bit인 느낌의 것을 만들어 보고 싶다고.

전 시대에 혼자서 시도하고 싶습니다.

라이브러리를 사용하는 것이 정답이라고 생각합니다.

자바스크립트 + SVG 벽

선인의 기사를 보면 어쨌든 제한 사항이 많아 길은 어렵다.
인라인 SVG라면 여러가지 조작할 수 있다고 하는 기술을 보는 것도, 그 소스를 붙여 넣는 것은 싫다.
심플한 SVG로 8bit인 느낌을 할 수 없는 것인가.

Let's Generate!

더 이상 생각은 미주하고, SVG로 도트 매트릭스를 생성하면 즐거운 것이 아닐까라는 아이디어에 빠져들게 됩니다.
HC-20이나 PC-1500의 그래픽도 재현할 수 버린다?

    <svg id="matrix" width="220" height="220"></svg>

했어! 인라인 SVG를 작성했습니다.
요소를 생성하고 appendChild합니다.

        mtx = document.getElementById("matrix");
        dotMatrix = {}

        //色指定
        dotOff = "powderblue";
        dotOn = "darkslategray";

        //マトリクスのドット数
        mtxWidth = 10;
        mtxHeight = 10;

        //ドットのサイズ
        dotWidth = 20;
        dotHeight = 20;

        //マトリクス生成
        for (var x = 0; x <= mtxWidth - 1; x++){
            for (var y = 0; y <= mtxHeight - 1; y++){
                //オブジェクトIDを付ける
                dotName = "dot" + x + ":" + y;

                dot=document.createElementNS('http://www.w3.org/2000/svg','rect');
                dot.setAttribute('id',dotName);
                dot.setAttribute('x',x * (dotWidth + 1));
                dot.setAttribute('y',y * (dotHeight + 1));
                dot.setAttribute('width',dotWidth);
                dot.setAttribute('height',dotHeight);
                dot.setAttribute('stroke','none');
                dot.setAttribute('fill',dotOff);
                dot.setAttribute('rx',2);
                dot.setAttribute('ry',2);
                mtx.appendChild(dot);
                dotMatrix[dotName] = dot;
            }
        }

        //色付きの初期配置
        dx = parseInt(mtxWidth / 2);
        dy = parseInt(mtxHeight / 2);
        dotFill(dx,dy,dotOn);

id를 "dot + x 좌표 + : + y 좌표"라고 나름대로 직관적인 명명으로 해시로 설정.
dotFill 함수에 좌표와 색 정보를 주면 요소에 색을 칠합니다.

        //ドットを指定色で塗る関数
        function dotFill(dx,dy,para){
            dotName = "dot" + dx + ":" + dy;
            dot = dotMatrix[dotName];
            dot.attributes['fill'].nodeValue = para;
        }

아, 함수명은 PSET 쪽이 좋았을까・・・.



이런 느낌입니다.

        //キーイベント処理
        document.onkeydown = function(e){
            dotFill(dx,dy,dotOff);

            //右矢印
            if ((e.keyCode == 39) && (dx < mtxWidth - 1)){
                dx++;
            }

            //左矢印
            if ((e.keyCode == 37) && (dx > 0)){
                dx--;
            }

            //上矢印
            if ((e.keyCode == 38) && (dy > 0)){
                dy--;
            }

            //下矢印
            if ((e.keyCode == 40) && (dy < mtxHeight - 1)){
                dy++;
            }
            dotFill(dx,dy,dotOn);
        }

화살표 키를 주워 그리면 지워.

솔직히,이 코드는 깜박임이 엄격하고 도트 수가 많으면 눈이 피곤합니다.
게임 등에 사용할 수 있도록 고속화를 목표로하고 싶습니다.