다와다코와 함께 완자 만들기 게임입니다!①~ 캔버스에 게임 화면 그리기~

간신히 게임 같은 거 하려고.
그나저나 advent 달력에 참가하는 사람이 없으면 달력을 채울 수 없고 쓰기가 귀찮으면 장기 연재가 된다(에이)
참가자 모집 중~.잘 부탁해~
마구 게임이 뭐예요?
　3×세 번째 칸에서 두 사람이 번갈아 그림을 그렸다×한쪽에 놓고 자신의 로고를 세로로 세로로 세운 사람이 이긴다.
다들 아시죠?너 공책에 줄 그고 놀았지??
삼목배열이라고도 하죠.

일단 화면을 만들고.
대화무자 창고 세 곳시작합니다.
간이 편집기 이런 것도 괜찮지만 저장고에서 문법이 더욱 돋보이고, 캔버스의 사이즈는 자유롭게 바꿀 수 있고, 기타 각종 고기능은 모두 편리하다☆
저장고 자체는 올해도 다양한 기능이 있어 사용하기 편합니다!
캔버스 사용
타코 3은 HTML5의 canvas를 사용할 수 있습니다.
어떤 편집기든 캔버스는 처음부터 사용할 수 있는 표준이기 때문에 아무것도 하지 않아도 그림 관련 명령을 즉시 사용할 수 있다.
여자축구수첩>plugenbrowser/ 그리기
하지만 자신이 준비한 HTML로 하려면 조금 준비해야 한다.
캔버스의 설치
예전에는 HTML에 직접 썼어요, 아니면 대화무자HTML設定로 했어요, 아니면DOM要素作成으로 했어요?그렇지만2.28에서 キャンバス作成명령을 내렸습니다!
여자축구수첩>plugenbrowser/캔버스 제작
너비와 높이를 지정하여 캔버스 요소를 만드는 명령입니다.

[300,300]のキャンバス作成して、ゲーム画面に代入。

그리기 시작
HTML 내의 캔버스는 1개로 제한되지 않으므로 드로잉 명령의 객체 캔버스를 지정합니다.

ゲーム画面へ描画開始。

이렇게 하면 나중에 편집기에서처럼 드로잉 관련 명령을 사용할 수 있습니다.
3×세 칸을 그리다
마구 놀이의 판면은 세로 가로와 우물 위에 선을 그을 뿐이다.
테두리가 없는 사람은 마구 게임과 유사하다.
그래서 線描画만 있으면 돼☆
여자축구수첩>plugenbrowser/선 그리기
대체로 새로운 캔버스 만드는 법도 썼는데 저장소는 처음에 300×캔버스 300개를 준비했기 때문에 그렇게 게임 화면으로 사용했다.
게임 화면 크기가 300이니까 100, 200 선을 그리는 게 좋아요.
세로 가로 가로?
호랑이 새끼.nako3

４に線太さ設定。黒色に線色設定。
[100,0]から[100,300]まで線描画。
[200,0]から[200,300]まで線描画。
[0,100]から[300,100]まで線描画。
[0,200]から[300,200]まで線描画。

이런 느낌?
변수 재사용
이것 괜찮아요?×바둑처럼×19살이면 어떤 얘기가 될지, 좀 더 똑똑해질 것 같아서(?)설정
이후 장 크기를 바꿀 수 있기를 바라지만 절차상 변경되지 않을 예정 수치인 만큼 상수라고 선언했다.
디스크 그리기.nako3

定数 マス幅＝100。
４に線太さ設定。黒色に線色設定。
２回
    [マス幅*回数,0]から[マス幅*回数,マス幅*3]へ線描画。
    [0,マス幅*回数]から[マス幅*3,マス幅*回数]へ線描画。
ここまで。

그려졌어!
⭕및❌태그 표시
위치 표시
빈칸은 0~8의 서열 번호로 어느 빈칸에 어떤 기호를 써서 그릴지 지정하기를 바랍니다.
0
1
2
3
4
5
6
7
8
열수로 숫자를 나눈 정수 부분에서 몇 줄은 열수로 나눈 나머지이니 몇 열인지 알 수 있겠지.
그리고 네모난 칸의 넓이를 더하면 그 네모난 칸의 좌표를 알 수 있다.
몇 줄

番号を列数で割って、それの整数部分。

또는

INT(番号/列数)

다 쓸 수 있어요.
0/3(0)
1/3(0)
2/3(0)
3/3(1)
4/3(1)
5/3(1)
6/3(2)
7/3(2)
8/3(2)
몇 열

番号を列数で割った余り。

또는

番号%列数。

다 쓸 수 있어요.
0%3(0)
1%3(1)
2%3(2)
3%3(0)
4%3(1)
5%3(2)
6%3(0)
7%3(1)
8%3(2)
문자로 그리기
　⭕및❌그럼 円描画와線描画도 간단하게 그릴 수 있는데 文字描画라고 해도 될까요?
여자축구수첩>plugenbrowser/ 문자 그리기
문자가 묘사한 x, y는 알파벳 (자모의 기선) 의 왼쪽 끝이며, 무자 1 때와 다르다.
이거 처음엔 이해하기 어려웠는데 중간에 글자 크기가 바뀌었고 기초도 통일돼서 너무 편해요☆
하지만 일시적인 생각으로 아무 생각 없이 [0,0]에 글을 그리면 (특히 일본어) 화면에 아무것도 안 나와서 조급해한다.
문자 드로잉.nako3

＃盤面描画
定数 マス幅＝100。
４に線太さ設定。黒色に線色設定。
２回
    [マス幅*回数,0]から[マス幅*回数,マス幅*3]へ線描画。
    [0,マス幅*回数]から[マス幅*3,マス幅*回数]へ線描画。
ここまで。

＃文字描画でマルバツ描画
定数 [マル,バツ]＝["⭕","❌"]
72に描画フォント設定。

0にマルをマルバツ描画。
4にバツをマルバツ描画。

●（番号に記号を）マルバツ描画
    定数 [文字位置x,文字位置y]＝[15,75]。# 0の場合のx,y。ベースラインの左端。
    xは、番号を3で割った余りにマス幅を掛けて文字位置xを足す。
    yは、番号を3で割って、それの整数部分にマス幅を掛けて文字位置yを足す。
    [x,y]に記号を文字描画。
ここまで。

응, 계산 시간이 이 지경까지 길어지면 차라리 산식이 더 보기 쉬워?(＾▽＾;
근데 나왔어!

역시 원 그리고 선 그리기.
난 또 오케이~☆인 줄 알았어.
이렇게 되면 먼저 하기 시작하네요.
여러 번 해 보았지만 역시 문자 묘사가 좀 그렇다.
Firefox면 딱 좋은데 크롬이면 전체적으로 그림과 글이 빈약해요.아마 흑백일 거예요.
흑백이면 흑백도 괜찮아요.⭕및❌크기와 굵기가 크게 다르다.
밸런스가 안 맞아서 멋있지 않아요.ω・‘)
아니면 환경과 글꼴의 문자 그리기를 포기하고 원화와 선묘로 묘사할 것인가.
그래서 이런 느낌?
원형과 선으로 원을 그리다.nako3

＃盤面描画
定数 マス幅＝100。
４に線太さ設定。黒色に線色設定。
２回
    [マス幅*回数,0]から[マス幅*回数,マス幅*3]へ線描画。
    [0,マス幅*回数]から[マス幅*3,マス幅*回数]へ線描画。
ここまで。

＃円描画と線描画でマルバツ描画
定数 [マル,バツ]＝[0,1]
0にマルをマルバツ描画。
4にバツをマルバツ描画。

●（番号に記号を）マルバツ描画
    定数 [マル中点,マル半径,バツ始点,バツ終点,記号太さ]＝[50,30,20,80,10]
    x＝番号を3で割った余りにマス幅を掛ける。
    y＝番号を3で割って、それの整数部分にマス幅を掛ける。
    「#DD3344」に線色設定。空に塗り色設定。記号太さに線太さ設定。
    もし、記号がマルならば、
        [x+マル中点,y+マル中点]にマル半径の円描画。
    違えば、もし、記号がバツならば、
        [x+バツ始点,y+バツ始点]から[x+バツ終点,y+バツ終点]まで線描画。
        [x+バツ始点,y+バツ終点]から[x+バツ終点,y+バツ始点]まで線描画。
    ここまで。
ここまで。

동작 확인
아직은 아무것도 할 수 없는 상태만 그려서 올리지는 않았지만, 코드를 전부 하위 3 저장소 편집기에 붙이면 이동☆
계속
오늘은 정말 화면에 선 하나를 그리고 동그라미를 그렸을 뿐이다.
내용상 천으로 선을 긋거나 글씨를 쓰거나 일차원을 이차원으로 바꾸는 것?
다음에 놀 수 있어!
카탈로그

캔버스에 게임 화면을 그리다

둘이 놀래요.

사람으로 하여금 컴퓨터로 놀 수 있게 하다

미니법을 배우다

최강의 동글동글 게임이 왔다☆