画像をドラッグアンドドロップしてドロップ先の画像を変える

はじめに

これはSLP KBIT Advent Calendar 2018 11日目の記事です。
今回初めて書きます。よろしくお願いいたします。

イー〇イ可愛いですよね。このイーブ〇は様々な種類に進化しますが、どの子が一番好みでしょうか? というわけで、HTML上で進化させたり退化させたりしてみます。

仕様

さすがに本家は使えないので上の小さい画像を石、下の画像をモンスターと思ってください。
石の画像をドラッグできるようにして、モンスターの画像をドロップ先に指定します。
そして、ドロップさせた画像によってモンスターの画像が変更されます。
具体的に言うと、炎をドロップするとブース〇ーに、雷をドロップするとサンダー〇に、水素水をドロップするとシャワー〇に、アリスをドロップすると、日中はエ〇フィに、夜は〇ラッキーに、ただの石をドロップすると、〇ーブイに戻ります。ちなみに炎をドラッグアンドドロップすると以下のようになりまふ。

以下、石の画像の動作、モンスターの画像の動作を分けて説明します。

石の画像の動作

html側の動き

home.html

   <span id="rock" draggable="true">
      <img  src="img/fire.png" width="100px" height="50px">
      <img  src="img/kaminari.png" width="100px" height="50px">
      <img  src="img/suisosui.png" width="100px" height="50px">
      <img  src="img/alice.png" width="100px" height="50px">
      <img  src="img/nochangerock.jpg" width="100px" height="50px">
   </span>

まず、htmlファイル側でdraggableをtrueにして、画像を動かせるようにします。また、写真全体を　id=rock　にしておきます。

js側の動き

myscript.js

var koko="";
//条件分岐のための配列
var imgr = new Array();
imgr[0] = "nochangerock.jpg";
imgr[1] = "kaminari.png";
imgr[2] = "fire.png";
imgr[3] = "suisosui.png";
imgr[4] = "alice.png";

document.getElementById("rock").ondragstart = function(e){
    koko = e.target.currentSrc.split("/").pop();
    console.log(koko);   //ログがちゃんと取れているかの確認用  
}

(このあたりは上の人間から助言をいただきました)
画像を動かし始めたら関数を実行し、その画像のlogをとります。また、これを後述のswitch文で分岐条件として使います。しかし、そのまま使うと長いので、split()とpop()の合わせ技を使い、logの一番最後の「/」以降のみ取り出して格納するようにしました。そのため、配列に石の画像のファイル名を格納しています。

モンスターの画像の動作

html側の動き

home.html

<div
    ondrop="changeIMG();event.preventDefault();"
    ondragenter="event.preventDefault();"
    ondragover="event.preventDefault();">
    <img id="gazo" src="img/dog.png" width="30%" class="pull-left">
</div>

ondrop時にモンスターの画像を変更するchangeIMG()を実行します(説明はjs側の動きで)。また、event.preventDefault()は一応付けておいた、程度のものです。cssも使いましたがあんまり関係ないので割愛。

js側の動き

myscript.js

//画像の場所を格納させる関数(今回はthisを使いたかっただけ)
function Picture(n){
    this.n = new Image();
    this.n.src = n;
}

//画像への場所のための配列
var img = new Array();
img[0] = new Picture("img/dog.png");
img[1] = new Picture("img/dragon_yellow.png");
img[2] = new Picture("img/dragon_red.png");
img[3] = new Picture("img/dragon_blue.png");
img[4] = new Picture("img/dragon_black.png");
img[5] = new Picture("img/dragon_white.png");

//html上のモンスターの画像の変更処理
function changeIMG(){
    switch(koko){                            //"koko"については石の画像の動きの説明を参照
        case imgr[0] : document.getElementById("gazo").src=img[0].n.src; break;
        case imgr[1] : document.getElementById("gazo").src=img[1].n.src; break;
        case imgr[2] : document.getElementById("gazo").src=img[2].n.src; break;
        case imgr[3] : document.getElementById("gazo").src=img[3].n.src; break;
        case imgr[4] : timeChoice(); break; //こいつだけさらに時間分岐
    }
}

//時間分岐用の変更処理
function timeChoice(){
    var now = new Date();
    if(now.getHours() >= 17 || now.getHours() < 5) {
        document.getElementById("gazo").src=img[4].n.src;
    }else{
        document.getElementById("gazo").src=img[5].n.src;
    }

}

今回、自分のお勉強のためにプロトタイプオブジェクト(あってるかな…)を使って画像データを格納していきました。
changeIMG()について、switch文で分岐して画像変更を行うようにしています。石の画像の動きで説明したlogを使って分岐を行っています。一番最後だけさらに時間による分岐を行っています。

終わりに

もっと行数かかるかなと思ったけど、割と短く書けて驚きました。(まあ、普通に画像1枚を自由に動かしてドロップ先にドラッグした画像を置きっぱなしにしようと思うと、100行近くかかるんですが…)

コードはgithubに載せております。

一か所文末の終わり方がおかしかった部分があると思いますが、誤字ではないのでご安心を。ゆるーくボケてみただけです。