LogoMark.png

JavaScript/Sample2 の変更点

#author("2021-09-25T11:03:33+09:00;2021-05-28T19:45:04+09:00","default:inoue.ko","inoue.ko")
#author("2026-07-28T15:59:15+09:00;2026-07-28T13:58:47+09:00","default:inoue.ko","inoue.ko")
*JavaScript 入門サンプル２
インタラクティブな事例
~


**Keyboard
キーボードの [A] [D] [W] [X] や カーソルによって画面内の要素を移動させるサンプルです。要素の移動は、CSSの position: absolute; を前提に、キーボードイベントの発火に応じて top と left の値を変更する・・というシンプルな方法で実現しています。

-DEMO：https://koichi-inoue.github.io/JS_Sample_04/
-CODE：https://github.com/koichi-inoue/JS_Sample_04
~
~

**Mouse１　[[→ DEMO>https://design.kyusan-u.ac.jp/SampleSite/JS_BoxControl]]
**Mouse１　[[→ DEMO>https://design.cs.kyusan-u.ac.jp/SampleSite/JS_BoxControl]]
マウスの位置情報を用いたインタラクティブなサンプルを紹介します。この事例では、画面上のクリックした位置にBOXが移動します。

-''index.html''
 <!DOCTYPE html>
 <html lang="ja">
 
     <head>
         <title>Basic Sample</title>
         <script type="text/javascript" src="script.js"></script>
         <link rel="stylesheet" type="text/css" href="style.css">
     </head>
 
     <body >
          <div id="container">
              <div id="box">
                  BOX
              </div>
          </div>
      </body>
 
 </html>

-''style.css''
 #container{
     position:relative;
     width:100%; height:100%;
     background-color:maroon;
 }
 
 #box {
     position:absolute;
     width:100px; height:100px;
     background-color:silver;
 }

-''script.js''
 window.onload = function(){
     var field = document.getElementById('container');
     field.addEventListener('click', FitElement, false);
 }
 
 function FitElement(event){
     var obj = document.getElementById('box');
     obj.style.top = (event.clientY - 50) + "px";
     obj.style.left = (event.clientX - 50) + "px";
 }

~
~

**Mouse２　[[→ DEMO>https://design.kyusan-u.ac.jp/SampleSite/JS_BoxAnimate]]
**Mouse２　[[→ DEMO>https://design.cs.kyusan-u.ac.jp/SampleSite/JS_BoxAnimate]]
先の事例の応用で、クリックした場所へBOXがアニメーションします。まずはアニメーションする仕組みをソースコードから読み取って下さい。

-''index.html''
 事例１と同様

-''style.css''
 事例１と同様（Boxのサイズが異なるだけ）

-''script.js''
 var dx = 0;
 var dy = 0;
 var x = 100;
 var y = 100;
 
 window.onload = function(){
     var timer = setInterval(AnimateElement, 5);
     var field = document.getElementById("container");
     field.addEventListener("click", InitPosition, false);
 }
 
 function InitPosition(event){
     dx = ( event.clientX - x )/50;
     dy = ( event.clientY - y )/50;
 }
 
 function AnimateElement(){
     var obj = document.getElementById('box');
     if( x < 0 || window.innerWidth - 40  < x ) dx *= -1;
     if( y < 0 || window.innerHeight - 40 < y ) dy *= -1;
     x += dx;
     y += dy;
     obj.style.left = x + 'px';
     obj.style.top = y + 'px';
 }

-''付記：''パフォーマンスを意識したアニメーションを実装する場合は、setInterval ではなく requestAnimationFrame を利用します。
~
~

**Mouse３　[[→ DEMO>https://design.kyusan-u.ac.jp/SampleSite/JS_BoxAnimate2]]
**Mouse３　[[→ DEMO>https://design.cs.kyusan-u.ac.jp/SampleSite/JS_BoxAnimate2]]
上の事例を配列変数を使ってさらに応用します。
-＜li＞タグに書かれた複数の要素をアニメーションさせます。
-画面をクリックと、すべての要素が一旦その位置に初期化されます。

-''index.html''
 <!DOCTYPE html>
 <html lang="ja">
 
     <head>
         <title>Basic Sample</title>
         <script type="text/javascript" src="script.js"></script>
         <link rel="stylesheet" type="text/css" href="style.css">
     </head>
 
     <body >
          <div id="container">
               <ul>
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                    <li>D</li>
                    <li>E</li>
                    <li>F</li>
                    <li>G</li>
                    <li>H</li>
                    <li>I</li>
                    <li>J</li>
                    <li>K</li>
               </ul>
          </div>
     </body>
 
 </html>

-''style.css''
 *{
     margin:0;
     padding:0;
 }
 
 #container{
     position:relative;
     width:100%; height:100%;
     background-color:maroon;
 }
 
 li {
     position:absolute;
     width:20px; height:20px;
     list-style-type:none;
     background-color:silver;
 }

-''script.js''
 // GLOBAL VALUE
 var dx = new Array(100);
 var dy = new Array(100);
 var x = new Array(100);
 var y = new Array(100);
 var obj;
 
 window.onload = function(){
     var timer = setInterval(AnimateElement, 10);
     var field = document.getElementById('container');
     field.addEventListener('click', InitPosition, false);
     obj = document.getElementsByTagName('li');
     // initialize
     for( i=0 ; i<obj.length ; i++){
          x[i] = 100;
          y[i] = 100;
          dx[i] = i;
          dy[i] = i;
     }
 }
 
 function InitPosition(event){
     for( i=0 ; i<obj.length ; i++){
          x[i] = event.clientX;
          y[i] = event.clientY;
          dx[i] = Math.floor ( Math.random()*21 - 10 );
          dy[i] = Math.floor ( Math.random()*21 - 10 );
     }
 }
 
 function AnimateElement(){
     for( i=0 ; i<obj.length ; i++){
          if( x[i] < 10 || window.innerWidth - 30  < x[i] ) dx[i] *= -1;
          if( y[i] < 10 || window.innerHeight - 30 < y[i] ) dy[i] *= -1;
          x[i] += dx[i];
          y[i] += dy[i];
          obj[i].style.left = x[i] + 'px';
          obj[i].style.top = y[i] + 'px';
     }
 }

-''付記：''パフォーマンスを意識したアニメーションを実装する場合は、setInterval ではなく requestAnimationFrame を利用します。
~
~