ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 해지구달&랜덤영어날라다니기 실습_210409(금)
      JAVASCRIPT 2021. 7. 22. 00:40

      실습 : 해 지구 달(삼각함수)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Insert title here</title>
      <script>
          window.onload = function() {
              var sun = document.getElementById('sun');
              var earth = document.getElementById('earth');
              var moon = document.getElementById('moon');
       
              // style속성변경
              sun.style.position = 'absolute';
              earth.style.position = 'absolute';
              moon.style.position = 'absolute';
       
              sun.style.left = 250 + 'px';
              sun.style.top = 250 + 'px';
       
              // 변수선언
              var earthAngle = 0;
              var moonAngle = 0;
       
              // 에니메이션
              setInterval(function() {
                  // 지구와 달의 좌표
                  var earthLeft = 250 + 150 * Math.cos(earthAngle);
                  var earthTop = 250 + 150 * Math.sin(earthAngle);
                  var moonLeft = earthLeft + 50 * Math.cos(moonAngle);
                  var moonTop = earthTop + 50 * Math.sin(moonAngle);
                  
                  // 지구와 달의 위치를 이동
                  earth.style.left = earthLeft + 'px';
                  earth.style.top = earthTop + 'px';
                  moon.style.left = moonLeft + 'px';
                  moon.style.top = moonTop + 'px';
                      
                  // 각도변경
                  earthAngle += 0.1;
                  moonAngle += 0.3;
              }, 1000 / 30)    //0.3초
       
          }
      </script>
      </head>
       
      <body>
          <h1 id="sun">@</h1>
          <h1 id="earth">O</h1>
          <h1 id="moon">*</h1>
      </body>
      </html>
      		 cs

      js 의 모든 함수는 'prototype(원형)'이라는 객체가 존재한다.

      실습 : 랜덤영어들이 날라다니는 애니메이션

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Insert title here</title>
       
      <!-- 랜덤한 알파벳 -->
      <script>
          // 랜덤정수
          function nextRandomIndeger(limit) {
              // Math.random()      : 0~1사이의 난수하나를 생성
              // Math.random()*10   : 0~10사이의 난수하나를 생성
              // Math.random()*10-5 : -5~5사이의 난수하나를 생성
              return Math.round(Math.random() * limit);
          }
       
          // 랜덤알파벳
          var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
          function randomAlphabet() {
              return alphabet.charAt(nextRandomIndeger(25)); // A~Z 알파벳 하나를 리턴
          }
       
          // 알파벳의 속도
          function randomSpeed(maxSpeed) {
              return Math.random() * maxSpeed - Math.random() * maxSpeed;
          }
      </script>
       
      <!-- 알파벳생성함수 -->
      <script>
          var canvasWidth = 700;
          var canvasHeight = 400;
       
          function MovingText() {
       
              // 1. 위치와 속도 임의로 설정
              this.x = nextRandomIndeger(canvasWidth);
              this.y = nextRandomIndeger(canvasHeight);
              this.vx = randomSpeed(10);
              this.vy = randomSpeed(10);
       
              this.body = document.createElement('h1')
              this.body.innerHTML = randomAlphabet();
              this.body.style.position = 'absolute';
              document.body.appendChild(this.body);
          }
       
          MovingText.prototype.move = function() {
              // 범위확인
              if (this.x<0 || this.x>canvasWidth) {
                  this.vx *= -1;
              }
              if (this.y<0 || this.y>canvasHeight) {
                  this.vy *= -1;
              }
       
              // 알파벳이동
              this.x += this.vx;
              this.y += this.vy;
       
              // 화면에 표시
              this.body.style.left = this.x + 'px';
              this.body.style.top = this.y + 'px';
          }
      </script>
       
      <!-- window.onload  -->
      <script>
          window.onload = function() {
              // 변수선언
              var movingTexts = [];
       
              // 배열에 알파벳객체 100개생성
              for (var i = 0; i < 100; i++) {
                  movingTexts.push(new MovingText());    //생성자함수를 집어넣음
              }
       
              // 애니메이션
              setInterval(function() {
                  for ( var i in movingTexts) {
                      movingTexts[i].move();    //위의 MovingText()객체의 속성?인 move의 function을 사용
                  }
              }, 1000 / 60);
          }
      </script>
       
      </head>
      <body>
       
      </body>
      </html>
      		 cs

      'JAVASCRIPT' 카테고리의 다른 글

      jQuery:선택자,ready(),val(),setTimeout(),each()_210409(금)  (0) 2021.07.22
      이벤트,예외처리_210409(금)  (0) 2021.07.22
      배열,객체,BOM,DOM_210408(목)  (0) 2021.07.22
      형변환,함수,객체,BOM_210407(수)  (0) 2021.07.22
      변수,연산자,window이벤트_210406(화)  (0) 2021.07.21

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바