JavaScript/Sample2

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

マウスの位置情報を用いたインタラクティブなサンプルを紹介します。この事例では、画面上のクリックした位置に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

先の事例の応用で、クリックした場所へ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

上の事例を配列変数を使ってさらに応用します。

＜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 を利用します。

JavaScript 入門サンプル２

Keyboard

Mouse１　→ DEMO

Mouse２　→ DEMO

Mouse３　→ DEMO

PAGES

GUIDE

DATA

JavaScript/Sample2

JavaScript 入門サンプル２

Keyboard

Mouse１ → DEMO

Mouse２ → DEMO

Mouse３ → DEMO

PAGES

GUIDE

DATA

Mouse１　→ DEMO

Mouse２　→ DEMO

Mouse３　→ DEMO