JavaScript는 짧은 역사를 가지고 있지만 빠르게 발전하고 있습니다. NetScape는 원래 Navigator 및 웹 서버 제품에 기본 스크립팅 기능을 제공하기 위해 LiveScript 언어를 개발했습니다. Navigator 2.0에 Java 애플릿이 추가되면서 NetScape는 LiveScript를 JavaScript로 전환했고 JavaScript가 탄생했습니다.
이 기사는 JavaScript의 기본 구문과 기능을 소개하는 흥미로운 작은 프로그램으로 시작됩니다. 이 흥미로운 프로그램은 운동에너지 손실을 수반하는 탄성 충돌과 불완전 회복 충돌을 시뮬레이션할 수 있는 볼 충돌 시뮬레이션 프로그램입니다. 이 루틴에서 볼 간 충돌 핸들러를 이해하려면 벡터 좌표 회전과 몇 가지 기본 물리 지식에 익숙해야 합니다. 이것에 대해 아무것도 모르더라도 상관없습니다. 공 사이의 충돌을 위한 프로그램은 단지 몇 가지 함수일 뿐이므로 호출하기만 하면 됩니다. 이것은 우리의 JavaScript 학습에 영향을 미치지 않습니다. 제가 이단적인 생각을 조금 가미하여 이렇게 흥미로운 루틴을 작성하고 싶은 이유는 단지 여러분이 JavaScript에 더욱 관심을 갖기를 바라는 마음에서입니다.
더 이상 쓸데없는 소리는 그만하고 지금부터 시작해 보세요.
1단계: 재료 준비
빨간 공과 파란색 공으로 구성된 작은 공 두 장의 사진을 만듭니다. 이미지 형식은 GIF입니다. 먼저 3D 소프트웨어를 사용하여 3차원 공 그림을 만든 다음 이를 GIF 형식으로 변환하면 프로그램 애니메이션이 더욱 사실적으로 나타납니다. 사진의 배경은 투명해야 하며, 그렇지 않으면 결함이 보일 수 있다는 점에 유의해야 합니다. 마지막으로 배경 이미지가 필요합니다. 이미지 형식은 위와 동일합니다.
2단계: 홈페이지 뼈대 작성
1. NetObject ScriptBuilder에서 New 명령을 사용하여 HTML 파일의 뼈대를 생성합니다. 그런데 새로 생성된 HTML 파일에서 TITLE 태그 사이의 텍스트를 "Small Ball Collision Simulation Demonstration Program"으로 변경합니다.
2. 배경 패턴과 공 이미지 리소스를 추가합니다.
BODY 플래그를 다음으로 변경합니다. 이 명령문의 배경 속성은 window.gif를 배경 패턴으로 지정합니다.
공 이미지 리소스를 로드하려면 로고와
사이에 다음 두 문장을 추가하세요.
이 두 HTML 스크립트는 동일한 의미를 가지며 로고 IMG가 사용됩니다. add image resources . 여기서 SRC 속성은 추가된 이미지 파일의 이름을 나타냅니다. ID 속성은 이미지의 객체 이름을 가리킵니다. 이는 나중에 JavaScript 프로그래밍에서 사용되기 때문에 중요한 속성입니다. 첫 문장과 마찬가지로 이미지 리소스의 객체명으로 BallBlue를 지정합니다(변수명이라고 생각하시면 됩니다). STYLE 속성은 브라우저에서 이미지의 스타일을 지정합니다. "위치" 스위치는 "절대"로 설정되어 텍스트 라인 모드 대신 절대 좌표 모드를 사용하여 창에 이미지의 위치를 지정할 수 있습니다. 이제
HTML 부분 작성이 완료되었습니다. 다음으로 JavaScript를 사용하여 이미지를 움직일 차례입니다.
3단계: JavaScript 프로그램 작성
1. 시뮬레이션 프로그램은 창 개체의 SetTimeout() 메서드를 사용하여 Move_Step() 함수를 주기적으로 호출하여 그림을 이동하는 목적을 달성하고, Move_Step()은 속도 벡터를 기반으로 한 단계 이동의 길이와 방향을 계산합니다. 충돌 처리는 두 부분으로 나뉘며, 첫 번째는 벽에 대한 공의 충돌 처리이며, 두 번째는 구체 간의 충돌 처리이며, 처리 함수는 Ball_Crash_Ball()입니다. 또한 시뮬레이션 오류로 인한 오류를 방지하려면 현재 충돌 상태를 기록하기 위해 일부 충돌 플래그 변수를 설정해야 합니다. 아마도 오류가 오류를 일으키는 이유를 아직 이해하지 못할 수도 있습니다.
2． 그림 객체는 style.pixelLeft 및 style.pixelTop 속성을 사용하여 창에서 그림의 위치를 지정합니다. 이 두 속성은 그림 이동의 핵심입니다. 그러나 그림의 이동 위치를 계산할 때는 사용되지 않습니다. 대신 style.pixelLeft 및 style.pixelTop 속성은 정수 변수이고 소수는 소수이므로 그림의 현재 좌표 위치를 기록하는 데 배열 변수 BallCoord가 사용됩니다. 충돌을 계산할 때 생성되므로 style.pixelLeft 및 style.pixelTop을 직접 사용하면 위치를 기록합니다. 오류 외에도 가장 중요한 것은 창 가장자리에서 특정 유형의 공 충돌이 발생하면 오류가 발생한다는 것입니다. 공이 화면 밖으로 나가는 장면입니다. 배열 변수는 소수점을 저장하는 데 사용되는 부동 소수점 유형일 수 있으므로 오류를 방지할 수 있습니다.
(1) 변수 정의 및 프로그램 초기화
JavaScript 문은 HTML 파일의 본문(BODY 영역)에 위치할 수도 있고 파일 헤더(HEAD 영역)에 위치할 수도 있다는 점에서 차이가 있습니다. HEAD 영역은 일반적으로 BODY 영역에 명령문 호출을 위해 미리 만들어진 함수와 전역 변수를 배치하고, BODY 영역은 일반적으로 프로그램의 초기 명령문을 배치합니다. JavsScript의 변수 정의는 상대적으로 자유롭지만 먼저 정의하고 사용하는 기본 규칙을 충족해야 합니다.
1. HEAD 영역에 전역 변수를 정의합니다.
Window_Top = 22 //창의 상단 위치입니다.
Window_Left = 22 //창의 왼쪽 끝 위치입니다.
Window_Bottom = 294 //창의 하단 위치입니다.
Window_Right = 590 //창의 오른쪽 끝 위치입니다.
Setp_Proportion = 3.00 //속도 증폭 비율.
BallCoord = new Array(new Array(2),new Array(2)) //두 공의 현재 좌표를 기록하기 위해 2차원 배열을 정의합니다.
BallDiametre = new Array(66,92) //두 공의 직경을 저장하는 1차원 배열을 정의합니다. 값은 각각 66과 92입니다.
BallMoveVector = new Array(new Array(2,1),new Array(1,-2))//두 공의 속도 벡터를 기록하는 2차원 배열을 정의하고 별도로 저장합니다. 두 번째 차원에서는 X축과 Y축의 속도입니다.
CrashingWall = new Array(new Array(false,false,false,false),new Array(false,false,false,false))//Array CrashingWall은 벽 충돌을 피하기 위한 2차 계산에 사용됩니다. true 이며, 현재 충돌 상태에 있음을 나타냅니다. 초기값은 거짓입니다.
2． BODY 영역에서 프로그램의 초기 작업을 완료합니다. 내용은 다음과 같습니다.
여기서 JavaScript 프로그램의 프레임워크를 보았습니다. SCRIPT 플래그는 다음 콘텐츠가 스크립트 프로그램임을 브라우저에 알리고, LANGUAGE="JavaScript"는 프로그래밍 언어가 JavaScript임을 나타냅니다. BODY 영역이든 HEAD 영역이든 관계없이 모든 JavaScript 프로그램은 태그 사이에 배치되어야 합니다. 프로그램에서 new Array()는 나중에 그림 객체를 저장하기 위한 Balls 배열을 정의하는 데 사용됩니다. 다음 문 Balls[0] = BallBlue는 이미지 개체 BallBlue를 Balls[0]에 할당합니다. 주의 깊게 보면 BallBlue가 이미지 리소스 로드 문에 지정된 개체 이름임을 알 수 있습니다. 명령문 Balls[0].style.pixelTop = BallCoord[0][0] = 100, 배열 변수 BallCoord[0][0] 및 이미지 객체의 style.pixelTop 속성에 값 100을 할당합니다. 결과적으로 좌표 배열 변수 BallCoord[0][0]는 초기값을 얻어 공 1의 초기 상단 위치를 지정합니다. 다른 문장들도 같은 의미를 가지고 있습니다. 마지막 문장에서는 공을 한 단계 이동하기 위해 Move_Step() 함수를 호출합니다.
(2) 1단계 이동 함수 설명 Move_Step()
HTML 파일의 HEAD 영역에 Move_Step() 함수를 작성하고 내용은 다음과 같습니다.
function Move_Step() {
Ball_Crash_Ball() //공 간 충돌 처리 함수 호출
Balls_Crash_Wall(0) //파란색 공 충돌 처리 함수 호출
Balls_Crash_Wall(1) //호출 빨간 공 충돌 처리 함수
//이동 단계 크기 계산
BallCoord[0][0] = BallMoveVector[0][0] * Setp_Proportion
BallCoord[0][1] = BallMoveVector[0][1] * Setp_Proportion
BallCoord[1][0] = BallMoveVector[1][0] * Setp_Proportion
BallCoord[1][1] = BallMoveVector[1][1] * Setp_Proportion
//한 단계 이동
공 [0].style.pixelTop = BallCoord[0][0]
Balls[0].style.pixelLeft = BallCoord[0][1]
공[ 1].style.pixelTop = BallCoord[1] [0]
Balls[1].style.pixelLeft = BallCoord[1][1]
window.setTimeout("Move_Step()",100) // 100밀리초 후에 Move_Step() 함수를 다시 호출하세요.
}
이 함수의 대부분의 의미에 대해서는 여기에서 몇 가지 사항만 설명하면 됩니다.
1 BallCoord[0][0] = BallMoveVector[0][0] * Setp_Proportion 문에서 BallMoveVector 배열은 속도 벡터를 저장합니다. Setp_Proportion 변수는 단계 증폭 비율을 저장합니다. BallMoveVector[0][0]에 Setp_Proportion을 곱하여 이동 길이를 구합니다. 마지막으로 이 명령문은 BallCoord[0][0]의 원래 값을 추가한 다음 이를 BallCoord[0][0] 자체에 할당하여 이동 위치를 얻습니다.
2． window.setTimeout("Move_Step()",100) 문은 100밀리초 후에 Move_Step() 함수를 다시 호출하는 것을 의미합니다. 이제 setTimeout() 메서드를 사용하면 프로그램이 계속해서 반복됩니다.
Ball_Crash_Ball()은 작은 공 사이의 충돌 처리 기능입니다. 그냥 호출하지 않으면 프로그램이 실행될 수 있지만 공 사이의 충돌을 처리하는 기능이 부족합니다.(Ball_Crash_Ball() 함수에는 CrashEnd_Speed(), atan360(x, y) 함수가 호출되며 전역 변수 CrashingBalls가 사용됩니다. 따라서 이를 올바르게 사용하려면 위의 함수와 변수를 모두 프로그램에 복사해야 합니다. )
(3) HEAD 영역에 벽 충돌 처리 함수 Balls_Crash_Wall()을 작성합니다.
간략화된 함수는 다음과 같습니다.
function Balls_Crash_Wall(i) {
if( BallCoord[i][0] BallMoveVector[i][0] = - BallMoveVector[i][0]
if ( BallCoord[i ][ 1] BallMoveVector[i][1] = - BallMoveVector[i][1]
if ( BallCoord[i][0] BallDiametre[i] >= Window_Bottom)
BallMoveVector[i][0] = - BallMoveVector[i][0]
if ( BallCoord[i][1] BallDiametre[i] >= Window_Right)
BallMoveVector[i][ 1] = - BallMoveVector[i][1]
}
함수는 먼저 공이 벽에 부딪혔는지 판단하고, 그렇다면 변화 없이 해당 방향으로 속도 방향을 반대로 바꿉니다. 크기. 하지만 이 함수에서는 오류가 발생할 수 있습니다(오류가 발생하는 이유는 다소 복잡하므로 힌트만 드리겠습니다. 공의 이동 단계 크기가 1포인트보다 큰 경우가 많고, 시뮬레이션이 이산적으로 수행되므로 오류가 발생합니다) 경우에 따라 발생할 수 있습니다. 충돌 상태를 식별하려면 배열 변수 CrashingWall을 사용해야 하며, 공이 벽에 충돌할 때 공과 벽 사이에 두 번째 충돌이 발생하지 않도록 해당 명령문도 첫 번째 문장과 같이 변경해야 합니다.
if( BallCoord[i][0] { if (! CrashingWall[i][0]) { BallMoveVector[i][0] = - BallMoveVector[i로 변경됨 ][0] }
CrashingWall[i][0] = true
} else CrashingWall[i][0] = false
명령문의 CrashingWall 배열 유형은 논리적입니다. 공과 벽이 충돌하는지 여부를 기록합니다. 충돌 상태에서는 공의 이동 방향을 바꿀 필요가 없습니다.
이 프로그램의 작성은 기본적으로 완료되었습니다. 기타 자세한 내용은 CD에 있는 원본 프로그램과 지침을 참조하세요. 이제 NetObject ScriptBuilder에서 Preview 항목을 선택하고 프로그램을 실행합니다.
참고:
1. 이 루틴을 실행하려면 IE4.0 이상 브라우저나 Netscape Navigator 4.0 이상의 브라우저가 설치되어 있어야 합니다.
2. : 두 개의 공이 충돌할 때 , 두 구의 중심을 연결하는 선과 X축 사이의 각도를 계산합니다. 이 각도를 기준으로 좌표가 회전됩니다. 원래 속도 벡터를 회전된 좌표에 매핑합니다. 이것은 공 사이의 충돌을 직접 충돌로 바꿉니다. 임펄스 정리는 충돌 후 속도를 계산하는 공식을 유도하는 데 사용될 수 있습니다. 그런 다음 좌표를 다시 원래 좌표로 회전합니다. 충돌 후 속도 벡터를 얻을 수 있습니다. 위의 내용을 읽어보면 조금 거슬리는 것 같지만 실제로는 그렇지 않습니다. 프로그램은 모든 계산을 완료하는 데 11줄의 명령문만 사용합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
