자바 스크립트를 사용하여 코드 효과를 비가 매트릭스

자바 스크립트를 사용하여 코드 효과를 비가 매트릭스

새로운 매트릭스 영화는 올해오고,나는 내 도구로이 상징적 인 효과를 만들 수 있었다 그것을 위해 너무 흥 해요. 그리고 나는 단지 그것을 위해 자바 스크립트를 사용했다.

당신은 비디오 포맷을 선호하는 경우,당신은 유튜브에 내 튜토리얼을 확인할 수 있습니다:

우리는 자바 스크립트의 모든 로그인을 할 것입니다.이 파일에는 다음과 같은 내용이 포함되어 있습니다. 본문에서 우리는 단지있을 것이다<canvas>,나는 또한 하단에 여기에 자바 스크립트 파일을 포함,당신은 또한defer속성으로 머리에 포함 할 수 있습니다. 

<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./styles.css"> <title>Matrix digital rain</title></head><body> <canvas></canvas> <script src="./index.js"></script></body></html>
전체 화면 모드 입력 전체 화면 모드 종료

이것도 정말 짧을 것입니다. 나는 단지 기본적으로 몸이 전체 뷰포트를 채우고 그것을 위해 검은 색 배경색을 설정하게합니다.

html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}
전체 화면 모드 입력 전체 화면 모드 종료

자바스크립트

이 구현은 프로젝트의 100%라이온쉐어가 될 것이다.
먼저 캔버스를 2 차원 컨텍스트로 초기화해야 합니다. 또한 너비와 높이를 설정하여 전체 뷰포트를 차지하도록 캔버스를 설정했습니다:

const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;
전체 화면 모드 입력 전체 화면 모드 종료

다음 나는 우리가 비를 위해 우리의 특성을 쑤실 알파벳을 창조한다. 가타카나 문자를 사용합니다(가타카나 기호의 변형은 매트릭스 영화 자체에서 사용되었습니다.),라틴 알파벳 및 아라비아 숫자. 이들의 연결은 알파벳을 만들 것입니다.

const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;
전체 화면 모드 입력 전체 화면 모드 종료

우리는 얼마나 많은”비 열”이 화면에 맞는지 계산해야하며 고정 글꼴 크기를 설정하고 창 안쪽 너비의 너비를 나누어 정확한 열 수를 얻어야합니다.

const fontSize = 16;const columns = canvas.width/fontSize;
전체 화면 모드 입력 전체 화면 모드 종료

배열을 사용하여 빗방울을 저장하고 렌더링 할 것입니다. 주어진 요소의 인덱스는 빗방울의 좌표가 될 것입니다 엑스 축,그리고 주어진 요소의 값은 그것을 보유합니다 좌표 에 와이 축. 이 방법으로 우리는 2 차원 배열이 필요하지 않습니다. 배열을 초기화하기 위해 나는 그것을 사람과 함께 채우므로 초기화를 마친 후에 우리는 모든 열에 대해 동일한 정확한 높이를 가질 것입니다:1.

const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}
전체 화면 모드 입력 전체 화면 모드 종료

지금은 우리의 효과 그리기 기능의 난로를 구현하는 시간이다. 먼저 전체 캔버스를 투명한 검은 색으로 칠할 것입니다. 이 드롭이 이미 익사 문자가 천천히 사라질 것이다 떨어질 때,우리에게 빗방울에 흔적 효과를 줄 것이다. 다음으로 폰트 크기와 색상을 설정합니다(물론 녹색). 그리고 지금 제 2 의 열쇠가 온다. 빗방울 배열을 통해 아픈 루프,그리고 모든 요소에 대해 나는 우리의 알파벳에서 임의의 문자를 선택하고 열의 다음 위치에 그 렌더링합니다. 여기서 중요한 것은 완벽한 간격을 얻기 위해 글꼴 크기와 좌표(요소 값 및 인덱스)를 곱해야한다는 것입니다. 마지막으로 뷰포트 높이 아래로 떨어진 빗방울을 해당 열의 맨 위로 이동해야 합니다. 비가 효과를 얻으려면 내가 바로 상단에 넣어,하지만 그렇게 할 수있는 임의의 기회를 추가하여 약간의 임의성을 추가하지 않습니다.

const draw = () => { context.fillStyle = 'rgba(0, 0, 0, 0.05)'; context.fillRect(0, 0, canvas.width, canvas.height); context.fillStyle = '#0F0'; context.font = fontSize + 'px monospace'; for(let i = 0; i < rainDrops.length; i++) { const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length)); context.fillText(text, i*fontSize, rainDrops*fontSize); if(rainDrops*fontSize > canvas.height && Math.random() > 0.975){ rainDrops = 0; } rainDrops++; }};
전체 화면 모드 입력 전체 화면 모드 종료

마지막 단계로 나는 간격으로 그리기 함수를 호출해야하고,이 모든 30 밀리 초에서 그리기 함수를 호출합니다.

setInterval(draw, 30);
전체 화면 모드 입력 전체 화면 모드 종료

결론

이 만들 수있는 정말 재미있는 프로젝트와 내가 할 수있는 한 친화적 인 초보자로 구현을 유지하기 위해 노력했다. 당신이 나를 따라 웹 개발에 대한 교육 콘텐츠를 추구하는 경우,내가 너무 교육 유튜브 동영상,인스 타 그램 게시물을 작성,그것을 즐겼다 바랍니다..

해피 해킹!

나에게서 더 많은 것을 배울 수 있습니까?

나는 여러 플랫폼에서 웹 개발을 다루는 교육 콘텐츠를 작성,그들을 체크 아웃 주시기 바랍니다.

나는 또한 내가 만든 주 또는 2 주의 교육 콘텐츠를 공유하는 뉴스 레터를 만듭니다. 황소는 없습니다.

🔗링크:

  • 🍺 무료 교육을 지원하고 나에게 맥주를 구입
  • 불화에 우리의 커뮤니티에 가입
  • 뉴스 레터 여기에 가입
  • 유튜브 자바 스크립트 아카데미
  • 트위터:dev

Leave a Reply

이메일 주소는 공개되지 않습니다.