Javascript mousemoveの座標が別のイベントで元に戻ってしまう。

Question

前提・実現したいこと

javascriptでゲームを作っています。
HTMLで作成した要素「キャラ」と「武器」をdocument.mousemoveでマウスストーカーさせて、
クリックしたときに剣の要素を90度変えて剣を振るような動作をさせようとしています。

発生している問題・エラーメッセージ

クリックしたときに剣の要素の角度をDOMで90度変える処理をしているのですが、時に剣が元の位置が右上に戻ってしまい、カーソルを動かすとまたマウスストーカーの処理が行われます、剣の位置を元に戻さないようにして、マウスストーカーさせながら剣を振る動作をするにはどうすればいいでしょうか。

該当のソースコード

<style>
#maru { /* 主人公のCSS */
pointer-events: none;
position: absolute;
top: -16px;     
left: -16px;    
width: 32px;   
height: 32px;  
background: rgba(37, 90, 168, 0.5);
border-radius: 50%;
transform: translate(0,0);
transition: transform 1s;  
transition-timing-function: ease-out;
z-index: 999;
}



#武器{
position: relative;
width        : 15px;
height       : 40px;
pointer-events: none;
transition: transform 1s;  
transition-timing-function: ease-out;
z-index: 999;
}

#武器::after{
content      : "";
position: absolute;
top: -50px;     
left: 18px;   
width        : 15px;
height       : 40px;
background   : linear-gradient(to bottom, #999999, #999999);
transform    : skewX(-30deg);

pointer-events: none;
transition: transform 1s;  
transition-timing-function: ease-out;
z-index: 999;
}
</style>


<script type="text/javascript">
function 攻撃(){
    武器.style.transform = "rotate(" + 90 + "deg)";
}

function マウスアップ時の処理(){
    武器.style.transform = "rotate(" + 0 + "deg)";
}

function 移動(e){
    this.name.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
}


document.addEventListener('mousedown', 攻撃);
document.addEventListener('mouseup', マウスアップ時の処理);

document.addEventListener('mousemove', {name: maru, handleEvent: 移動}, false);
document.addEventListener('mousemove', {name: 武器, handleEvent: 移動}, false);







</script>

Comments

[hatena19]

HTMLコードも載せてもらった方が回答しやすいです。

Answer 1

HTMLを下記のように、武器をキャラの子要素にして、

<div id="maru">
  <div id="武器"></div>
</div>

武器移動のコードを削除すれば、どうでしょう。
子要素にしておけば、キャラと一緒に移動するのでこれは不要になります。

//document.addEventListener('mousemove', {name: 武器, handleEvent: 移動}, false);

キャラと武器の位置関係がずれるのでCSSで調整すればいいでしょう。

#武器 {
    position: relative;
    width: 15px; /* 調整 */
    height: 40px;/* 調整 */
    pointer-events: none;
    transition: transform 1s;
    transition-timing-function: ease-out;
    z-index: 999;
}

CodePenサンプル