JavaScript 및 codeguppy.com에 대한 빠른 소개
- Patricia Arquette원래의
- 2024-11-15 01:06:02194검색
JavaScript는 가장 다재다능한 프로그래밍 언어 중 하나이며 창의적인 코딩, 게임 개발, 웹 개발을 위한 핵심 도구입니다. 귀하가 초보자이거나 지식을 새롭게 하려는 경우, 이 가이드는 귀하가 성공적으로 실행하는 데 도움이 되도록 설계된 기본 JavaScript 개념에 대한 빠른 개요를 제공합니다. 또한 초보자 친화적인 온라인 코딩 플랫폼인 codeguppy.com을 활용하여 기술을 연습하는 방법도 배웁니다. 변수부터 루프 및 함수까지, 이 기사집은 JavaScript를 빠르게 시작하기 위한 참고 자료 역할을 합니다.
목차
1장: JavaScript 구문
- 변수
- if 문
- For 루프
- While 루프
- While 루프 수행
- 스위치 설명
- 기능
- 배열 방법
- 문자열 메소드
- 임의의 숫자
- 모듈
2장: JavaScript를 사용하여 캔버스에 그리기
- 캔버스에 대하여
- 캔버스 지우기
- 배경색상
- 도형 그리기
- 도형 설정
- 거북이 그래픽
- 색상
- 각도
- 애니메이션
3장: 사용자 입력
- keyPressed 이벤트
- 키 출시 이벤트
- keyTyped 이벤트
- mouseClicked 이벤트
- mousePressed 이벤트
- 마우스 출시 이벤트
- mouseMoved 이벤트
- mouseDragged 이벤트
- doubleClicked 이벤트
- 마우스휠 이벤트
- 키를 눌렀습니다
- 열쇠
- 키코드
- 마우스X
- 마우스Y
- pmouseX
- pmouseY
- 마우스가 눌렸습니다
- 마우스버튼
- keyIsDown()
- keyWentDown()
4장: codeguppy.com을 사용한 JavaScript 게임 개발
- 드로잉 레이어
- 배경 이미지 설정
- 내장 스프라이트 로드
- 맞춤 스프라이트 로드
- 애니메이션 맞춤 스프라이트 로드 중
- 스프라이트 위치 설정
- 스프라이트 자동 이동
- 스프라이트 미러링
- 스프라이트 회전
- 스프라이트 자동 회전
- 그리기 깊이
- 애니메이션 변경
- 스프라이트의 마우스 이벤트
- 스프라이트 숨기기
- 스프라이트 제거
- 스프라이트 충돌
- 스프라이트 그룹
- 배경음악
- 음향효과
- 도형 간 충돌
- 게임 루프
- 자산 미리 로드하기
- 장면을 보여줍니다
- 입장 이벤트
- 장면에 데이터 전달
5장: 기타 코딩 힌트
- 데이터 인쇄
- 데이터 입력 UI 구축
1장: JavaScript 구문
JavaScript 구문을 살펴보는 것으로 기사를 시작하겠습니다.
변수 선언
변수는 숫자, 문자열(텍스트) 또는 복잡한 개체와 같은 데이터를 저장하는 데 사용됩니다. 기억하세요:
- 프로그램 내에는 원하는 만큼 많은 변수를 가질 수 있습니다.
- 저장된 데이터를 나타내는 이름으로 각 변수의 이름을 지정해야 합니다.
- 동일한 코드 블록(예: { ... } 사이에 있는 내용) 또는 함수 내부의 변수에 다른 이름을 지정하세요
변수 x 선언
let x;
x를 선언하고 숫자 값으로 초기화합니다.
let x = 1;
s를 선언하고 문자열로 초기화합니다.
let s = "Hello, World!";
변수에 값 할당
let으로 선언된 변수는 원하는 만큼 여러 번 다른 값을 할당/재할당할 수 있습니다.
간단한 상수 또는 상수, 다른 변수, 심지어 동일한 변수를 포함하는 복잡한 표현식을 사용하여 할당할 수 있습니다! 컴퓨터는 표현을 평가하는 데 매우 능숙합니다.
변수 x에 숫자 100을 할당합니다.
x = 100;
문자열 "Hello"를 변수 s에 할당
s = "Hello";
변수 ar에 빈 배열을 할당합니다.
ar = [];
변수 ar에 3개의 숫자 배열을 할당합니다.
ar = [1, 2, 3];
변수 ar에 2개의 문자열 할당 및 배열
ar = ["A", "B"];
인라인 개체를 변수 o에 할당
o = { Type: 'car',
x : 100,
y : 200
};
변수 합계는 a b와 같습니다.
sum = a + b;
변수 avg에 표현식 할당
avg = (a + b) / 2;
변수 합계가 10만큼 증가합니다. (새 합계는 이전 합계 10이 됩니다.)
sum = sum + 10;
변수 i가 1씩 증가(증가)됩니다.
i++;
변수 i는 2씩 증가합니다.
i += 2;
if 문
if 문은 프로그램 흐름을 제어하는 데 적합합니다. 일반적으로 프로그램은 위에서 아래로 한 번에 한 명령씩 실행됩니다.
조건이 충족되면 결정을 내리고 일련의 지침을 실행할 수 있습니다.
조건이 true인 경우 {} 사이의 명령 블록을 실행합니다.
if (mouseX < width)
{
}
조건이 true이면 명령의 첫 번째 블록을 실행하고, 그렇지 않으면 두 번째 블록을 실행합니다.
if (hour < 12)
{
}
else
{
}
다양한 조건에 따라 다양한 블록 실행
다음 예에서는 첫 번째 조건이 true이면 첫 번째 블록이 실행되고 나머지는 실행되지 않습니다.
그러나 첫 번째 조건이 true가 아니면 else if를 사용하여 다른 조건을 테스트하고, true이면 해당 else if 블록이 실행됩니다.
마지막 else 이후의 블록은 해당 시점까지 다른 조건이 참이 아닌 경우에만 실행됩니다.
let x;
참고: 이러한 종류의 표현식에는 else if 블록이 여러 개 있을 수 있습니다.
for 루프
for 루프와 println을 사용하여 0부터 4까지의 숫자를 인쇄합니다.
let x = 1;
for 루프를 사용하여 10부터 0까지 숫자를 인쇄합니다.
let s = "Hello, World!";
0부터 100까지의 짝수를 출력합니다.
x = 100;
배열의 모든 요소를 인쇄합니다.
s = "Hello";
while 루프
while 루프를 사용하여 0부터 9까지의 숫자를 인쇄합니다.
ar = [];
동안 해라
do while 루프를 사용하여 0부터 10까지의 숫자를 인쇄합니다.
ar = [1, 2, 3];
참고: while 루프를 실행하면 코드 블록 뒤에 조건이 배치되므로 조건이 거짓이더라도 블록은 적어도 한 번은 실행될 수 있습니다.
스위치 문
switch 문은 프로그램의 흐름을 제어하기 위한 if/else if 외에 또 다른 명령입니다. 스위치를 사용하여 표현식을 다른 값과 비교한 다음 해당 표현식이 임의의 케이스 값과 같은지 여부에 따라 해당 명령 세트를 실행할 수 있습니다.
일반적으로 스위치는 if/else if/else보다 덜 자주 사용됩니다.
ar = ["A", "B"];
기능
함수는 프로그램에서 반복해서 사용할 수 있는 새로운 언어 지침을 만드는 데 유용합니다.
새 명령어를 정의하면 JavaScript 및 codeguppy.com에 있는 내장 명령어와 구별할 수 없게 됩니다
함수 풍선 정의 및 호출
o = { Type: 'car',
x : 100,
y : 200
};
값을 반환하는 함수
sum = a + b;
참고: codeguppy.com에는 원, 직사각형 등과 같은 수많은 내장 함수가 포함되어 있습니다. 사용자 정의 함수를 호출하는 것과 같은 방식으로 이러한 함수를 호출할 수 있습니다.
배열 방법
단일 변수 이름을 사용하여 일련의 값을 편리하게 저장하려면 배열을 사용하세요. 배열에는 해당 요소를 조작할 수 있는 속성과 메서드가 있습니다.
ar을 빈 배열로 선언하고 초기화하기
avg = (a + b) / 2;
ar을 3개 숫자 배열로 선언하고 초기화하기
sum = sum + 10;
배열의 길이
i++;
배열 끝에 요소 추가
i += 2;
배열의 시작 부분에 요소 삽입
if (mouseX < width)
{
}
임의의 위치에 요소 삽입
if (hour < 12)
{
}
else
{
}
임의의 위치에 요소 삽입(쉬운 모드)
참고: 삽입 배열 방법은 codeguppy.com에만 있습니다
let x;
배열의 요소 2 값을 읽습니다.
let x = 1;
배열 요소의 합 계산
let s = "Hello, World!";
배열의 모든 요소에 다른 값 할당
x = 100;
첫 번째 요소에 액세스
s = "Hello";
마지막 요소에 접근하기
ar = [];
마지막 요소에 접근하기(쉬운 방법)
참고: peek 배열 방법은 codeguppy.com에만 있습니다
ar = [1, 2, 3];
배열의 첫 번째 요소 제거
ar = ["A", "B"];
배열의 마지막 요소 제거
o = { Type: 'car',
x : 100,
y : 200
};
임의의 위치에서 요소 제거
sum = a + b;
배열의 모든 요소 제거
avg = (a + b) / 2;
두 배열 연결
sum = sum + 10;
배열의 조각 추출
slice()는 배열에서 "슬라이스"를 추출하는 데 사용할 수 있는 흥미로운 방법입니다. "슬라이스"는 독립적인 배열로 반환됩니다. 이 메서드는 첫 번째 요소의 인덱스(포함)와 슬라이스에서 원하는 마지막 요소의 인덱스(제외)를 인수로 받습니다.
i++;
배열 요소 결합하기
i += 2;
문자열 메소드
배열과 마찬가지로 문자열 내에서 독립적인 문자에 액세스하고 조작할 수 있습니다.
문자열의 길이
let x;
문자열의 모든 문자 반복
let x = 1;
위치별로 문자열 문자에 접근하기
let s = "Hello, World!";
텍스트를 대문자로 변환
x = 100;
텍스트를 소문자로 변환
s = "Hello";
문자열에 다른 하위 문자열이 포함되어 있는지 확인
ar = [];
문자열이 지정된 접두사로 시작하는지 확인
ar = [1, 2, 3];
문자열이 지정된 접미사로 끝나는지 확인
ar = ["A", "B"];
하위 문자열의 위치를 찾습니다. 검색은 처음부터 시작됩니다.
o = { Type: 'car',
x : 100,
y : 200
};
하위 문자열의 위치를 찾습니다. 검색은 지정된 인덱스에서 시작됩니다.
sum = a + b;
문자열에서 부분문자열 추출
avg = (a + b) / 2;
문자열의 시작과 끝에서 공백을 제거합니다.
sum = sum + 10;
문자열 시작 부분에서 공백을 제거합니다.
i++;
문자열 끝에서 공백을 제거합니다.
i += 2;
문자열의 시작 부분을 다른 문자열로 채웁니다.
if (mouseX < width)
{
}
문자열의 끝 부분을 다른 문자열로 채웁니다.
if (hour < 12)
{
}
else
{
}
문자 코드
if (minute <= 15)
{
}
else if(minute <= 30)
{
}
else
{
}
코드의 문자
for(let i = 0; i < 5; i++)
{
println(i);
}
난수
난수는 코딩에 매우 유용합니다.
JavaScript에서 0(포함)과 1(제외) 사이의 난수를 얻으려면 Math.random() 함수를 사용할 수 있습니다.
for(let i = 10; i >= 0; i--)
{
println(i);
}
codeguppy.com은 선호하는 범위에서 난수를 빠르게 선택할 수 있는 추가 지침을 통해 난수에 대한 지원을 확장했습니다.
0과 1 사이의 임의의 부동 소수점 수(1은 포함되지 않음)
Math.random()과 같습니다
for(let i = 0; i <= 100; i+=2)
{
println(i);
}
0과 n 사이의 임의 부동 소수점 수(n은 포함되지 않음)
let ar = [10, 20, 30];
for(let element of ar)
{
println(element);
}
n1과 n2 사이의 임의 부동 소수점 수(n2는 포함되지 않음)
let i = 0;
while(i < 10)
{
println(i);
i++;
}
최소와 최대 사이의 임의 정수(둘 다 포함)
randomInt 또는 RandomNumber를 사용할 수 있습니다
let i = 0;
do
{
println(i);
i++;
}
while(i < 10)
chr1과 chr2 사이의 임의 문자(둘 다 포함됨)
함수randomChar(chr1, chr2)
switch(myExpresion)
{
case 100:
//...
break;
case 200:
//...
break;
case 300:
//...
break;
default:
//...
}
배열의 임의 요소
// Function balloon draws a balloon using simple shapes such as circle and line
// It expects as arguments the coordinates for balloon center and the color of the balloon
function balloon(x, y, shapeColor)
{
let r = 30;
let stringLen = 100;
fill(shapeColor);
stroke(shapeColor);
circle(x, y, r);
line(x, y + r, x, y + r + stringLen);
}
// Call function balloon with different parameters
balloon(100, 100, "red");
balloon(300, 300, "blue");
balloon(500, 200, "yellow");
배열 섞기
function addNumbers(x, y)
{
return x + y;
}
// Call a function
var sum = addNumbers(100, 200);
println(sum);
모듈
특히 대규모 프로그램에서 코드를 더 잘 구성하기 위해 codeguppy.com에서는 모듈 개념을 도입합니다.
단일 코드 페이지에 프로그램의 모든 기능을 작성하는 대신 여러 코드 페이지로 분할하여 각 코드 페이지가 모듈이 될 수 있습니다.
모듈은 내부에 정의된 변수와 함수에 대해 강력한 캡슐화를 제공합니다. 이 캡슐화를 사용하면 다른 모듈에서 동일한 이름을 가진 함수/변수를 정의할 수 있습니다.
모듈 내부의 기능을 사용하려면 먼저 해당 모듈을 require해야 합니다.
주요 프로그램
let x;
모듈 MathUtils 콘텐츠
let x = 1;
참고: 코드 페이지의 또 다른 용도는 게임 장면을 정의하는 것입니다. codeguppy.com에는 게임 장면 관리자가 내장되어 있습니다. 자세한 내용은 게임 개발 글을 참고해주세요.
2장: JavaScript를 사용하여 캔버스에 그리기
codeguppy.com은 데카르트 그래픽과 거북이 그래픽을 모두 사용하는 그래픽 기반 활동을 위한 훌륭한 환경입니다.
캔버스에 대하여
codeguppy.com에서 그래픽 캔버스는 800 x 600픽셀입니다.
시스템은 캔버스의 크기에 따라 너비 및 높이 변수를 자동으로 초기화합니다
(가능한 경우) 상수를 하드코딩하는 대신 프로그램에서 이러한 변수를 사용하는 것이 좋습니다.
let s = "Hello, World!";
캔버스 지우기
clear()는 그리기 캔버스를 지우는 데 사용됩니다. 이 기능은 애니메이션에서 loop() 이벤트 내에서 다음 그리기 전에 프레임을 지우는 데 매우 유용합니다.
x = 100;
배경색
배경 명령은 캔버스의 배경색을 설정하는 데 사용됩니다.
? 배경 명령은 캔버스에 그려진 모양을 지우지 않습니다. 캔버스를 지우려면 대신 clear()를 사용하세요.
배경색을 문자열로 지정된 내장 색상으로 설정합니다.
s = "Hello";
배경색을 16진수 "#RRGGBB" 문자열로 지정된 색상으로 설정합니다.
ar = [];
배경색을 회색(0 - 검정, 255 - 흰색)으로 설정합니다.
ar = [1, 2, 3];
참고: codeguppy.com에서는 이미지도 배경으로 설정할 수 있습니다. 이미지를 배경으로 설정하는 방법에 대한 자세한 내용은 "게임" 페이지를 참조하세요.
도형 그리기
좌표 400 x 300, 반경 200픽셀에 원을 그립니다.
ar = ["A", "B"];
좌표가 400 x 300이고 너비와 높이가 300 x 200픽셀인 타원을 그립니다.
o = { Type: 'car',
x : 100,
y : 200
};
왼쪽 위 모서리가 400 x 300 좌표이고 너비와 높이가 300 x 200 픽셀인 직사각형을 그립니다.
sum = a + b;
좌표 400 x 300과 500 x 500 사이에 선을 그립니다.
avg = (a + b) / 2;
각 모서리 좌표를 지정하여 삼각형을 그립니다.
sum = sum + 10;
호 그리기
호를 그리려면 타원(중심 위치, 너비 및 높이)과 마찬가지로 좌표를 지정하고 추가로 시작 및 끝 각도를 지정합니다.
let x;
400 x 300 좌표에 점을 그립니다.
let x = 1;
400 x 300 좌표에 텍스트 JavaScript 그리기
let s = "Hello, World!";
모양 설정
참고: 일단 설정하면 이 설정은 캔버스에 그려진 모든 연속 모양에 적용됩니다
텍스트 크기를 20으로 설정
x = 100;
도형을 채울 색상을 "마젠타"로 설정하세요.
s = "Hello";
모양을 그릴 색상을 "청록색"으로 설정
ar = [];
선 두께를 2px로 설정
ar = [1, 2, 3];
채우기 색상 없이 빈 모양 그리기
ar = ["A", "B"];
윤곽선 없이 도형 그리기
o = { Type: 'car',
x : 100,
y : 200
};
거북이 그래픽
codeguppy.com을 사용하면 데카르트 그래픽과 거북이 그래픽을 결합할 수 있습니다.
터틀 그래픽으로 작업할 때 기본 거북이(초보자 및 일반 프로그램에 권장)를 사용하거나 추가 거북이(복잡한 프로그램의 경우)를 만들 수 있습니다.
기본 거북이로 작업하기
기본 거북이를 사용하려면 다음 전역 지침을 따르기만 하면 됩니다.
기본 거북이를 홈 위치로 재설정
sum = a + b;
기본 거북이의 펜 색상을 빨간색으로 설정합니다.
avg = (a + b) / 2;
기본 거북이의 펜 크기를 2로 설정합니다.
sum = sum + 10;
펜을 종이 위에 올려놓으세요. 거북이가 그릴 것입니다.
i++;
종이에서 펜을 들어올립니다. 거북이는 전진하지만 끌지는 않습니다.
i += 2;
거북이를 캔버스의 임의의 위치로 이동
if (mouseX < width)
{
}
지정된 각도만큼 기본 거북이를 왼쪽으로 회전시킵니다.
if (hour < 12)
{
}
else
{
}
기본 거북이를 오른쪽으로 30도 회전시킵니다.
if (minute <= 15)
{
}
else if(minute <= 30)
{
}
else
{
}
거북이 방향(방향)을 임의의 각도로 설정합니다.
for(let i = 0; i < 5; i++)
{
println(i);
}
지정된 픽셀 수만큼 거북이를 앞으로 이동합니다.
참고: 거북이는 이전에 왼쪽, 오른쪽 또는 고정 방향으로 설정된 방향으로 움직입니다. 펜이 종이 위에 있으면 거북이가 그림을 그립니다.
for(let i = 10; i >= 0; i--)
{
println(i);
}
지정된 픽셀 수만큼 거북이를 뒤로 이동합니다.
참고: 거북이는 앞으로 움직일 때와 반대 방향으로 움직입니다
for(let i = 0; i <= 100; i+=2)
{
println(i);
}
기본 거북이의 x 및 y 위치를 2개 숫자의 배열로 검색합니다.
let ar = [10, 20, 30];
for(let element of ar)
{
println(element);
}
기본 거북이 방향을 도 단위로 검색합니다.
let i = 0;
while(i < 10)
{
println(i);
i++;
}
여러 거북이와 함께 작업하기
복잡한 프로그램에서는 여러 거북이를 사용하여 작업하는 것이 유용할 수 있습니다. 각각의 거북이는 위치, 색상 등과 같은 고유한 상태를 유지하기 때문입니다.
여러 거북이 만들기
let x;
기본 거북이 가져오기
let x = 1;
그림 물감
위의 예에서 볼 수 있듯이 codeguppy.com에서는 사용자가 다양한 방법으로 색상을 지정할 수 있습니다. 이렇게 하면 프로그램에 가장 편리한 방법을 사용할 수 있습니다.
명명된 색상
codeguppy.com에는 사전 정의된 이름을 가진 다양한 색상이 있습니다. "배경" 팔레트에서 모든 색상을 탐색할 수 있습니다.
let s = "Hello, World!";
RGB / HTML 스타일 색상
미리 정의된 색상이 충분하지 않은 경우 빨간색, 녹색, 파란색 양을 지정하여 원하는 색상을 만들 수 있습니다. #RRGGBB 형식을 사용하여 이러한 색상을 채우기 및 획 기능에 문자열로 전달할 수 있습니다.
x = 100;
빠른 회색 색상
회색 음영을 빠르게 생성해야 하는 경우 채우기 또는 획과 같은 색상이 필요한 함수에 0~255 사이의 숫자를 전달하면 됩니다.
s = "Hello";
color() 함수를 사용한 색상
색상을 만드는 또 다른 방법은 색상 기능과 R, G, B 양을 사용하는 것입니다. 이 금액은 0에서 255까지입니다
ar = [];
HSB 모드로 변경
기본적으로 codeguppy.com 색상 시스템은 RGB 모드를 사용하며, 색상은 R, G, B 양으로 지정됩니다(위 참조).
그러나 고급 사용자는 색상, 채도 및 밝기에 따라 색상이 지정되는 HSB 모드로 전환할 수 있습니다.
HSB 모드에서 색상 함수 값은 0~360 범위에 있습니다
ar = [1, 2, 3];
RGB 모드로 다시 변경
ar = ["A", "B"];
각도
모든 삼각 함수는 물론 호와 같은 특정 그리기 기능도 각도와 함께 작동합니다.
젊은 코더와 초보자의 관심을 끌기 위해 codeguppy.com의 모든 각도는 기본적으로 "DEGREES"로 설정되어 있습니다.
그러나 고급 사용자는 angleMode를 사용하여 "RADIANS" 모드로 전환할 수 있습니다. RADIANS 작업이 끝나면 "DEGREES"로 다시 전환하는 것을 잊지 마세요.
o = { Type: 'car',
x : 100,
y : 200
};
삼각함수 사용
codeguppy.com은 p5.js 라이브러리를 통해 사용자에게 sin, cos 등과 같은 사용하기 쉬운 일련의 삼각 함수를 제공합니다.
sum = a + b;
애니메이션
애니메이션을 구현하기 위해 codeguppy.com은 사용자에게 "만화"에서 사용하는 것과 유사한 방법을 제공합니다. 애니메이션을 일련의 프레임으로 생각하세요! 첫 번째 프레임을 그린 다음 지우고 두 번째 프레임을 약간 다른 위치에 그리는 식으로 하면 됩니다!
loop()는 애니메이션의 기본입니다.
codeguppy.com에서는 loop() 함수가 특별합니다. 여러분이 해야 할 일은 코드에 이 함수를 정의하는 것뿐입니다. 그러면 codeguppy.com 엔진이 이 함수를 초당 최대 60회 실행합니다! 굳이 직접 부를 필요는 없습니다.
화면에서 수평선 이동
let x;
화면에 원을 바운스
let x = 1;
기본 프레임 속도 변경
let s = "Hello, World!";
프레임 속도 얻기
x = 100;
3장: 사용자 입력
codeguppy.com 프로그램에 키보드/마우스 사용자 입력을 가져오는 두 가지 주요 방법은 이벤트를 통하거나 내장 시스템 변수 및 함수를 읽어 loop() 함수를 통하는 것입니다.
이벤트
codeguppy.com 엔진은 키보드나 마우스 이벤트가 발생할 때 프로그램에 알릴 수 있습니다. 프로그램에서 적절한 함수(예: 이벤트 핸들러)를 정의하기만 하면 해당 이벤트가 나타날 때 시스템이 자동으로 이를 호출합니다.
키를 눌렀을 때 이벤트
키를 눌렀을 때 1회 실행
s = "Hello";
키릴리스 이벤트
키를 놓을 때 실행
ar = [];
keyTyped 이벤트
특수키를 제외한 키 입력시 실행
ar = [1, 2, 3];
mouseClicked 이벤트
마우스를 눌렀다가 놓을 때 1회 실행
ar = ["A", "B"];
mousePressed 이벤트
마우스 버튼을 눌렀을 때 1회 실행
o = { Type: 'car',
x : 100,
y : 200
};
mouseReleased 이벤트
마우스 버튼을 놓았을 때 실행
sum = a + b;
mouseMoved 이벤트
마우스를 움직이고 버튼을 누르지 않았을 때 실행
avg = (a + b) / 2;
mouseDragged 이벤트
마우스를 움직이거나 버튼을 눌렀을 때 실행
sum = sum + 10;
doubleClicked 이벤트
마우스 더블클릭 시 실행
i++;
마우스휠 이벤트
사용자가 마우스 휠이나 터치패드를 사용할 때 실행
i += 2;
시스템 변수
이벤트 외에도 시스템은 일부 시스템 변수를 적절한 이벤트 데이터로 자동으로 채웁니다.
이벤트 핸들러 내에서 또는 메인 애니메이션/게임 루프() 내에서 이러한 변수에 액세스할 수 있습니다.
이것은 일반적으로 게임을 만들 때 사용자 입력을 얻는 데 선호되는 방법입니다.
키를 눌렀습니다.
키가 눌렸는지 여부를 나타내는 부울 시스템 변수
if (mouseX < width)
{
}
열쇠
마지막으로 입력한 키가 포함된 시스템 변수
if (hour < 12)
{
}
else
{
}
키코드
마지막으로 누른 키의 코드가 포함된 시스템 변수입니다.
숫자 키 코드 대신 다음 상수를 사용할 수 있습니다: LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW. 따옴표 없이 사용하세요.
if (minute <= 15)
{
}
else if(minute <= 30)
{
}
else
{
}
참고: keyCode를 찾으려면 테스트 프로그램을 작성하거나 keycode.info와 같은 사이트를 사용할 수 있습니다.
마우스X
마우스 커서의 수평 좌표를 포함하는 시스템 변수
let x;
마우스Y
마우스 커서의 수직 좌표를 포함하는 시스템 변수
let x = 1;
pmouseX
마우스 커서의 이전 수평 좌표를 포함하는 시스템 변수
let s = "Hello, World!";
pmouseY
마우스 커서의 이전 수직 좌표를 포함하는 시스템 변수
x = 100;
마우스눌림
마우스 버튼을 눌렀는지 여부를 나타내는 부울 시스템 변수
어떤 버튼이 눌렸는지 확인하려면 mouseButton 변수를 확인하세요.
s = "Hello";
마우스버튼
누른 마우스 버튼을 포함하는 시스템 변수입니다. LEFT, RIGHT, CENTER 값 중 하나를 갖습니다.
마우스가 눌렸는지 확인하려면 mouseIsPressed를 확인하세요.
ar = [];
기능
keyIsDown()
loop() 이벤트 내에서 keyIsDown() 함수를 사용하여 지정된 키가 눌렸는지 감지합니다. 키코드를 지정해야 합니다.
숫자 키 코드 대신 다음 상수를 사용할 수 있습니다: LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW. 따옴표 없이 사용하세요.
ar = [1, 2, 3];
참고: 키 코드를 찾으려면 keycode.info와 같은 사이트를 사용할 수 있습니다
키WentDown()
keyWentDown()은 loop() 이벤트에도 사용되며 keyIsDown()과 유사합니다.
차이점은 이 함수는 키를 누를 때마다 한 번만 true를 반환한다는 것입니다. 기능을 다시 트리거하려면 사용자가 키를 놓았다가 다시 눌러야 합니다.
/i/code.html?hints/userinput_10
4장: codeguppy.com을 사용한 JavaScript 게임 개발
codeguppy.com을 사용하면 게임 개발이 매우 쉽고 재미있습니다. 시스템에는 배경 이미지, 스프라이트, 음악 및 음향 효과가 내장되어 있어 자산을 검색하는 대신 코드에 집중할 수 있습니다.
그리기 레이어
codeguppy.com에는 레이어드 드로잉 아키텍처가 있습니다. 다음 다이어그램과 같이 캔버스 위에는 언제든지 최대 5개의 그리기 레이어가 있습니다.
엔진이 자동으로 모든 레이어를 결합하고 최종 이미지를 화면에 표시합니다.
배경 이미지 설정
캔버스의 배경색을 설정하는 방법으로 배경 명령도 "그리기" 섹션에 다음과 같이 표시되었습니다.
ar = ["A", "B"];
그러나 배경 명령은 단순한 색상을 배경으로 설정하는 것 이상의 역할을 할 수 있습니다.
동일한 기능을 사용하여 codeguppy.com 라이브러리의 이미지를 배경으로 설정할 수 있습니다.
let x;
? 배경을 이미지로 설정하려면 "배경" 팔레트를 열고 코드 영역에 이미지를 끌어서 놓습니다. 시스템이 귀하에게 적합한 코드를 작성해 드립니다.
배경 명령은 위 다이어그램과 같이 배경 레이어의 이미지를 설정합니다. 이런 방식으로 배경 이미지는 clear() 명령어나 모양 그리기 명령어, 심지어 스프라이트에 의해서도 지워지거나 변경되지 않습니다.
스프라이트
스프라이트는 코드를 통해 로드하고 조작할 수 있는 작은 이미지로, 주로 애니메이션이 적용됩니다. 스프라이트는 성공적인 게임의 필수 요소입니다.
codeguppy.com에는 내장된 스프라이트의 대규모 라이브러리가 포함되어 있는 동시에 사용자에게 맞춤 스프라이트를 정의할 수 있는 기능도 제공합니다.
내장 스프라이트 로드
sprite 명령을 사용하여 내장 라이브러리에서 모든 스프라이트를 로드할 수 있습니다.
스프라이트 로드
스프라이트 명령은 내장된 스프라이트 평면을 로드하여 화면 중앙에 배치합니다.
let x = 1;
? 스프라이트 팔레트를 열고 포함된 모든 내장 스프라이트를 찾아보세요. 마음에 드는 코드를 찾았을 때 코드 편집기에 끌어서 놓으면 시스템이 자동으로 코드를 작성합니다.
스프라이트 로드 및 위치 지정
let s = "Hello, World!";
스프라이트 로드 및 크기 조정
다음 코드 조각에서 스프라이트 평면은 화면 중앙에 배치되기 전에 0.5로 크기가 조정됩니다
x = 100;
스프라이트 로드, 위치 지정 및 크기 조정
다음 코드 조각에서 스프라이트 평면은 화면 중앙에 배치되기 전에 0.5로 크기가 조정됩니다
s = "Hello";
스프라이트의 특정 애니메이션 로드
다중 애니메이션 스프라이트의 경우 . 기호(예: plane.shoot)
? "스프라이트" 팔레트에서 스프라이트 위로 마우스를 가져가면 각 스프라이트가 지원하는 애니메이션을 확인할 수 있습니다. 툴팁으로 제공되는 정보를 확인해보세요.
ar = [];
참고: 여러 애니메이션이 포함된 스프라이트의 경우 나중에 sprite .show() 메서드를 사용하여 표시되는 애니메이션을 변경할 수도 있습니다.
맞춤 스프라이트 로드
맞춤형 그래픽이 필요한 게임의 경우 사용자는 코드에서 직접 추가 맞춤 스프라이트를 정의할 수 있습니다. codeguppy.com은 최대 16가지 색상의 사용자 정의 스프라이트에 대해 Microsoft MakeCode Arcade 형식을 사용합니다.
텍스트에서 이미지로
문자열 템플릿에서 img를 사용하거나 함수로 사용하여 사용자 정의 스프라이트 텍스트를 이미지로 변환합니다.
/i/code.html?hints/gamedev_10
이미지에서 스프라이트까지
sprite 명령을 사용하여 사용자 정의 스프라이트를 로드할 수도 있습니다. 이런 방식으로 나머지 내장 스프라이트처럼 조작할 수 있습니다.
/i/code.html?hints/gamedev_20
애니메이션 사용자 정의 스프라이트
맞춤 스프라이트에 애니메이션을 적용할 수도 있습니다. 애니메이션 스프라이트가 필요한 경우 각 스프라이트에 대해 여러 프레임 이미지를 생성해야 합니다.
/i/code.html?hints/gamedev_30
여러 애니메이션이 포함된 맞춤 스프라이트
사용자 정의 스프라이트에 여러 애니메이션을 넣을 수도 있습니다. 이는 나중에 스프라이트 .show() 메서드를 사용하여 애니메이션을 변경하는 데 도움이 됩니다.
/i/code.html?hints/gamedev_40
사용자 정의 스프라이트를 위한 사용자 정의 팔레트
프로그램에 다른 색상이 필요한 경우 setPalette를 사용하여 사용자 정의 팔레트를 정의할 수 있습니다.
/i/code.html?hints/gamedev_41
참고: getPalette() 함수를 사용하면 언제든지 현재 팔레트를 얻을 수 있습니다.
스프라이트 속성 조작
런타임에는 사용자 정의 스프라이트가 내장 스프라이트와 구별되지 않습니다. 스프라이트를 어떻게 로드/생성했는지에 관계없이 코드를 통해 동일한 방식으로 조작할 수 있습니다.
sprite 명령은 메서드와 속성을 호출할 수 있는 개체에 대한 참조를 반환합니다.
스프라이트 위치 설정
sprite 명령은 스프라이트 개체에 대한 참조를 반환합니다. .x 및 .y 속성을 사용하여 화면의 스프라이트 위치를 업데이트하세요.
let x;
스프라이트 자동 이동
.x 및 .y 좌표를 직접 변경하는 대신 적절한 .velocity 값을 지정하여 엔진이 자동으로 x 또는 y축에서 스프라이트를 이동하도록 할 수 있습니다.
let x = 1;
미러링 스프라이트
가끔 .x축이나 .y축에서 스프라이트를 뒤집어야 하는 경우가 있습니다.
스프라이트를 미러링하려면 -1을 인수로 사용하여 .mirror 메소드를 사용하세요. 원래 방향으로 미러링하려면 1을 인수로 사용하세요.
let s = "Hello, World!";
스프라이트 회전
특정 게임 및 프로그램에서는 스프라이트를 임의의 각도로 회전할 수 있습니다. 회전 각도를 지정할 수 있는 .rotation 속성을 사용하여 이 작업을 수행할 수 있습니다.
스프라이트 자동 회전
스프라이트가 무한정 자동 회전하도록 하려면 .rotationSpeed 속성에 0보다 큰 값을 지정하여 자동 회전을 설정할 수 있습니다.
/i/code.html?hints/gamedev_50
드로잉 깊이
일반적으로 새로 추가된 스프라이트는 이전 스프라이트 위에 그려집니다.
어떤 스프라이트가 위에 그려지고 어떤 스프라이트가 뒤에 그려지는지 제어하려면 .length 속성을 사용할 수 있습니다. 깊이가 낮은 스프라이트는 깊이가 높은 스프라이트 뒤에 그려집니다.
그래픽 API(원, 직사각형 등)를 사용하여 그린 고전적인 모양과 스프라이트를 결합할 수도 있습니다.
스프라이트가 그래픽 평면 뒤에 나타나도록 하려면 스프라이트에 음수 깊이를 지정해야 합니다. 그렇지 않으면 스프라이트가 그래픽 평면 위에 그려집니다.
애니메이션 변경
선택한 스프라이트에 여러 애니메이션이 포함된 경우 애니메이션 이름에 . 첫 번째 매개변수의 문자열:
let x;
그러나 나중에 .show 메소드를 사용하여 해당 스프라이트의 애니메이션을 변경할 수 있습니다.
let x = 1;
? 스프라이트 팔레트의 스프라이트 썸네일 위에 마우스를 올려 스프라이트가 지원하는 애니메이션을 주의 깊게 확인해 보세요.
스프라이트의 마우스 이벤트
다음 스프라이트 속성에 이벤트 핸들러(예: 함수)를 할당하여 스프라이트에 대한 마우스 클릭을 감지할 수 있습니다.
- .onMousePressed
- .onMouse출시
- .onMouseOver
- .onMouseOut
/i/code.html?hints/gamedev_51
스프라이트 숨기기
두 가지 방법으로 스프라이트를 숨길 수 있습니다.
- .visible 속성을 false로 설정
- 보이는 캔버스 외부에서 .x 및/또는 .y 좌표 설정
let s = "Hello, World!";
스프라이트 제거
프로그램에서 스프라이트를 영구적으로 제거하려면 스프라이트에 .remove() 메서드를 사용하세요. 이는 파괴된 적, 수집된 아이템 등 스프라이트에 유용합니다.
또한 .life 속성을 사용하여 특정 프레임 수 후에 스프라이트가 자동 제거되도록 할 수도 있습니다. 이는 총알, 로켓 등과 같은 물체를 쏘고 잊어버릴 때 유용합니다. 수집품은 이 속성을 활용할 수 있습니다. 기본적으로 이 속성의 값은 -1(비활성화)입니다.
/i/code.html?hints/gamedev_55
스프라이트 충돌
스프라이트가 충돌하는지 확인하는 방법에는 4가지가 있습니다.
- sprite.collide(대상, 콜백);
- sprite.displace(대상, 콜백);
- sprite.overlap(대상, 콜백);
- sprite.bounce(대상, 콜백);
호출되면 이러한 메소드 중 일부는 자동으로 스프라이트를 대체하고 다른 메소드는 궤적에 영향을 미칩니다. 충돌이 발생했는지 여부를 나타내는 부울 값을 모두 반환합니다.
이러한 방법을 실험하여 그들의 행동을 알아보세요!
매개변수:
- target – 이는 다른 스프라이트 또는 스프라이트 그룹에 대한 참조입니다(그룹에 대해서는 나중에 자세히 설명)
- 콜백 – 선택 사항이지만 경우에 따라 유용합니다. 콜백은 충돌 시 자동으로 호출되는 다음 시그니처가 있는 함수입니다.
x = 100;
참고: 스프라이트 간 또는 스프라이트와 다른 모양 간의 충돌을 확인하는 또 다른 방법은 다음 모양 충돌 기능을 사용하는 것입니다.
스프라이트 그룹
동일한 종류의 여러 스프라이트가 있는 게임에서는 새로운 Group()을 사용하여 생성된 단일 그룹에 다양한 스프라이트를 그룹화하는 것이 유용한 경우가 있습니다.
그룹의 주요 방법은 다음과 같습니다.
- .add(sprite) - 그룹에 스프라이트 추가
- .remove(sprite) – 그룹에서 스프라이트를 제거합니다
- .clear() - 그룹에서 스프라이트를 제거합니다. 프로그램에서 스프라이트를 제거하지 않습니다.
- .contains(sprite) - 지정된 스프라이트가 그룹에 있는지 확인
/i/code.html?hints/gamedev_60
참고: 스프라이트 충돌 방법과 같은 특정 방법은 단일 스프라이트가 아닌 전체 스프라이트 그룹에서 작동할 수 있습니다(이전 페이지에서 설명).
배경음악
Rainbow라는 음악을 틀어주세요
let x;
참고: 이전에 재생 중이던 음악이 있으면 새 음악을 재생하기 전에 음악 안내가 해당 음악을 중단합니다.
볼륨 0.1에서 "Fun Background"라는 음악을 재생합니다.
let x = 1;
? 음악을 찾으려면 "음악 및 소리" 팔레트를 사용하세요. 마음에 드는 것을 찾으면 코드 영역에 노래를 끌어서 놓습니다. 시스템이 귀하에게 적합한 코드를 작성해 드립니다.
음향 효과
사운드 zap1 재생
let s = "Hello, World!";
참고: 시스템은 사운드 명령으로 트리거된 모든 사운드를 동시에 재생합니다.
? "음악 및 소리" 팔레트를 사용하여 음향 효과를 찾아보세요. 마음에 드는 것을 찾으면 코드 영역에 노래를 끌어서 놓습니다. 시스템이 귀하에게 적합한 코드를 작성해 드립니다.
모양 간의 충돌
? 게임이 스프라이트만 사용하는 경우 스프라이트 충돌 방법을 사용하는 것이 좋습니다.
그러나 스프라이트를 사용하지 않거나 일반 모양과 결합하여 스프라이트를 사용하는 경우 다음 방법을 사용하여 충돌을 감지할 수 있습니다. 두 모양의 매개변수를 인수로 취하고 두 모양이 충돌하면 true를 반환합니다.
참고: 편의상 일부 명령어는 모양이 반전되어 설명되는 인수를 사용하여 두 번 정의됩니다.
점과 원의 충돌 감지
점과 원 사이의 충돌을 감지하려면 다음 지침 중 하나를 사용하세요.
x = 100;
/i/code.html?hints/gamedev_61
점과 선의 충돌 감지
점과 선 사이의 충돌을 감지하려면 다음 두 명령 중 하나를 사용하세요.
s = "Hello";
/i/code.html?hints/gamedev_62
점과 직사각형 사이의 충돌 감지
점과 직사각형 사이의 충돌을 감지하려면 다음 두 가지 지침 중 하나를 사용하세요.
ar = [];
/i/code.html?hints/gamedev_63
두 원 사이의 충돌 감지
두 원 사이의 충돌을 감지하려면 다음 지침을 따르세요.
ar = [1, 2, 3];
/i/code.html?hints/gamedev_64
원과 직사각형 사이의 충돌 감지
원과 직사각형 사이의 충돌을 감지하려면 다음 두 가지 지침 중 하나를 사용하세요.
let x;
/i/code.html?hints/gamedev_65
두 직사각형 사이의 충돌 감지
두 직사각형 사이의 충돌을 감지하려면 다음 지침을 사용하세요.
let x = 1;
/i/code.html?hints/gamedev_66
두 선 사이의 충돌 감지
두 줄 사이의 충돌을 감지하려면 다음 명령을 사용하세요.
let s = "Hello, World!";
/i/code.html?hints/gamedev_67
선과 직사각형 사이의 충돌 감지
선과 직사각형 사이의 충돌을 감지하려면 다음 두 가지 지침 중 하나를 사용하세요.
x = 100;
/i/code.html?hints/gamedev_68
게임 루프
거의 모든 게임에서는 지속적으로 사용자 입력을 받고, 게임 상태를 업데이트하고, 게임 그래픽을 렌더링하는 특수 기능인 '게임 루프'를 정의해야 합니다.
codeguppy.com에서는 loop() 함수를 사용하여 "게임 루프"를 쉽게 구현할 수 있습니다. 이는 "애니메이션" 섹션의 "도면" 페이지에 설명된 것과 동일한 기능입니다. 여러분이 해야 할 일은 코드에 이 함수를 정의하는 것뿐입니다. 그러면 codeguppy.com 엔진이 이 함수를 초당 최대 60회 실행합니다! 굳이 직접 부를 필요는 없습니다.
게임에서 스프라이트만 사용하는 경우
화면에서 캐릭터를 움직이게 하려면 키보드를 읽고 루프() 내부에서 캐릭터 상태(예: 위치)를 업데이트하세요.
/i/code.html?hints/gamedev_70
게임에서 스프라이트와 모양을 사용하는 경우
게임에서 클래식 모양도 사용하는 경우 루프 기능 내에서 해당 모양을 다시 렌더링해야 합니다. 스프라이트는 속성을 변경하면 자동으로 렌더링됩니다.
/i/code.html?hints/gamedev_80
게임을 일련의 프레임으로 생각해보세요! 첫 번째 프레임부터 그린 다음 이를 지우고 약간 다른 위치에 두 번째 프레임을 그리는 식으로 진행됩니다!
자산 사전 로드
codeguppy.com 엔진은 실행 전에 자동으로 코드를 스캔하여 로드해야 하는 자산(예: 배경, 스프라이트, 음악, 음향 효과)을 식별합니다. 엔진은 사용자가 사용한 해당 배경, 스프라이트, 음악 및 사운드 명령을 조사하여 이를 식별합니다.
이러한 명령이 자산을 상수로 지정하지 않으면 사전 로드 기능을 사용하여 필요한 자산을 사전 로드해야 합니다. 모든 필수 자산을 쉼표로 구분하여 나열하세요.
s = "Hello";
다중 장면 게임
다중 장면 게임 구축 지원은 codeguppy.com 환경의 주요 특징 중 하나입니다!
게임에 더 많은 장면을 추가하면 게임이 더욱 세련되게 보입니다. 일반적인 게임에서는 게임 방법을 설명하는 "인트로" 장면과 실제 "게임" 장면, 게임을 마친 후 축하/점수를 보여주는 "축하합니다" 장면을 만들어도 좋습니다.
각 장면은 새로운 코드 페이지에서 생성됩니다. 나중에 참조해야 하므로 코드 페이지 이름을 적절하게 지정했는지 확인하세요.
장면을 보여주는 중
프로그램이 시작되면 항상 정의한 첫 번째 장면이 실행됩니다. 다른 장면을 표시하려면 showScene 메소드를 사용해야 합니다:
let x;
입장 이벤트
장면에 enter라는 함수가 포함되어 있는 경우 장면에 들어가거나 표시될 때 엔진이 자동으로 이 함수를 실행합니다. 일반적인 게임에서는 게임 중에 장면이 두 번 이상 표시될 수 있습니다. 예를 들어 사용자가 "인트로" 장면에서 게임을 다시 시작할 때마다 "게임" 장면이 표시됩니다.
장면 상태를 적절하게 설정할 수 있는 기능을 제공합니다.
참고: 함수 외부의 느슨한 코드는 장면당 한 번만 실행됩니다. 장면을 연속적으로 표시해도 더 이상 해당 코드가 실행되지 않습니다.
let x = 1;
장면에 데이터 전달
어떤 경우에는 showScene 메소드를 통해 데이터를 장면에 전달하는 것이 유용합니다. 예를 들어 게임 옵션을 "Intro" 장면에서 "Game" 장면으로 전달하거나, 플레이어 점수를 "Game" 장면에서 "Congrats" 장면으로 전달할 수 있습니다.
"축하합니다" 장면에 숫자(예: 점수) 전달
let s = "Hello, World!";
"축하합니다" 장면 내에서 다음과 같은 방법으로 전달된 데이터를 검색할 수 있습니다.
x = 100;
"Congrats" 장면에 복잡한 구조 전달
s = "Hello";
"축하합니다" 장면 내에서 다음과 같은 방법으로 전달된 데이터를 검색할 수 있습니다.
ar = [];
추가 읽기
codeguppy.com에서 스프라이트 작업 방법을 더 자세히 알아보려면 다음 튜토리얼을 참조하세요.
- 내장된 스프라이트 플레이그라운드 및 튜토리얼을 사용한 작업
- 맞춤형 스프라이트 플레이그라운드 및 튜토리얼 작업
5장: 기타 코딩 힌트
codeguppy.com에서는 기본 데이터 입력 UI로 알고리즘을 연습하거나 프로그램을 구현할 수도 있습니다. 이 기사에서는 이러한 종류의 프로그램 지원에 대해 설명합니다.
데이터 인쇄
print 및 println 명령어를 사용하면 캔버스 위에 숫자, 문자열 및 기타 정보를 빠르게 인쇄할 수 있습니다. 이 지침은 별도의 스크롤 가능한 텍스트 레이어에서 작동합니다.
이 지침은 프로그램 디버깅, 언어 요소 또는 알고리즘 연습에 적합합니다.
0부터 9까지의 숫자를 출력하세요.
ar = [1, 2, 3];
처음 10개의 소수를 출력하세요.
/i/code.html?hints/other_10
참고: println은 각 인쇄 후에 새 줄 문자를 추가하지만 print는 그렇지 않습니다.
데이터 입력 UI 구축
codeguppy.com은 데이터 입력 사용자 인터페이스를 생성하기 위한 간단한 지침을 제공합니다.
입력 상자 만들기
한 줄 입력 상자를 만들려면 createEdit 명령어를 사용하여 컨트롤 위치와 너비를 지정하세요.
let x;
여러 줄 입력 상자를 만들려면 높이도 지정해야 합니다. 높이 매개변수를 생략하면 시스템이 자동으로 한 줄 입력 상자를 만듭니다.
let x = 1;
createEdit 명령어는 편집 상자 개체에 대한 참조를 반환합니다. 다음 속성을 사용하여 편집 상자 내용을 조작할 수 있습니다.
- .텍스트
- .읽기전용
- .visible
- .너비
- .높이
- .온체인지
예:
let s = "Hello, World!";
버튼 만들기
UI 레이어에서 생성할 수 있는 또 다른 UI 요소는 일반 푸시 버튼입니다.
x = 100;
createButton 명령은 생성된 버튼 개체에 대한 참조를 반환합니다. 이 참조를 사용하여 다음과 같은 속성에 액세스할 수 있습니다.
- .텍스트
- .visible
- .비활성화
- .너비
- .높이
- .온클릭
예:
https://codeguppy.com/code.html?hints/other_20
JavaScript는 대화형 및 동적 애플리케이션을 구축하는 데 필수적인 도구이며 핵심 개념을 이해하는 것이 이 강력한 언어를 마스터하기 위한 첫 번째 단계입니다. 이 가이드에서는 변수, 루프, 함수 등에 대한 빠르고 실용적인 참조를 제공하는 주요 JavaScript 기본 사항을 소개했습니다. codeguppy.com에서 연습함으로써 학습자는 새로 발견한 지식을 코딩 연습에 직접 적용하고 실습 경험을 통해 이해를 심화할 수 있습니다. JavaScript를 계속 탐색하면서 숙련되고 창의적인 코딩의 잠재력을 최대한 활용하려면 지속적인 연습과 실험이 중요하다는 점을 기억하세요.
위 내용은 JavaScript 및 codeguppy.com에 대한 빠른 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!