位置玩家手

如何解决位置玩家手

我正在制作2D游戏，并希望将玩家的手放在他们所指向的位置。现在，一种简单的方法是使用ctx.move（）移动到玩家位置，使用ctx.rotate（）和Math.atan2（）相对于玩家位置旋转以指向鼠标并绘制手。问题是，我想让手抵消。以下是我要实现的目标。 Image

解决方法

在// magic except end load under here下查找。图书馆在那之上。在网上很难找到像这个例子这样的东西：

//<![CDATA[
/* js/external.js */
let get,post,doc,htm,bod,nav,M,I,mobile,beacon,S,Q,hC,aC,rC,tC,shuffle,rand; // for use on other loads
addEventListener('load',()=>{
get = (url,func,responseType = 'json',context = null)=>{
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('GET',url); x.responseType = responseType;
  x.onload = ()=>{
    if(func)func.call(c,x.response);
  }
  x.onerror = e=>{
    if(func)func.call(c,{xhrErrorEvent:e});
  }
  x.send();
  return x;
}
post = function(url,send,responseType ='json',context = null){
  const x = new XMLHttpRequest;
  if(typeof send === 'object' && send && !(send instanceof Array)){
    const c = context || x;
    x.open('POST',url); x.responseType = responseType;
    x.onload = ()=>{
      if(func)func.call(c,x.response);
    }
    x.onerror = e=>{
      if(func)func.call(c,{xhrErrorEvent:e});
    }
    let d;
    if(send instanceof FormData){
      d = send;
    }
    else{
      let s;
      d = new FormData;
      for(let k in send){
        s = send[k];
        if(typeof s === 'object' && s)s = JSON.stringify(s);
        d.append(k,s);
      }
    }
    x.send(d);
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return x;
}
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
beacon = function(url,send){
  let r = false;
  if(typeof send === 'object' && send && !(send instanceof Array)){
    let d;
    if(send instanceof FormData){
      d = send;
    }
    else{
      let s;
      d = new FormData;
      for(let k in send){
        s = send[k];
        if(typeof s === 'object' && s)s = JSON.stringify(s);
        d.append(k,s);
      }
    }
    r = nav.sendBeacon(url,d);
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return r;
}
S = (selector,within)=>{
  let w = within || doc;
  return w.querySelector(selector);
}
Q = (selector,within)=>{
  let w = within || doc;
  return w.querySelectorAll(selector);
}
hC = function(node,className){
  return node.classList.contains(className);
}
aC = function(){
  const a = [].slice.call(arguments),n = a.shift();
  n.classList.add(...a);
  return aC;
}
rC = function(){
  const a = [].slice.call(arguments),n = a.shift();
  n.classList.remove(...a);
  return rC;
}
tC = function(){
  const a = [].slice.call(arguments),n = a.shift();
  n.classList.toggle(...a);
  return tC;
}
shuffle = array=>{
  let a = array.slice(),i = a.length,n,h;
  while(i){
    n = Math.floor(Math.random()*i--); h = a[i]; a[i] = a[n]; a[n] = h;
  }
  return a;
}
rand = (min,max)=>{
  let mn = min,mx = max;
  if(mx === undefined){
    mx = mn; mn = 0;
  }
  return mn+Math.floor(Math.random()*(mx-mn+1));
}
// magic except end load under here 
const canvas = I('canvas');
let cb = canvas.getBoundingClientRect(),cX,cY,af = true,action = false;
canvas.width = cb.width; canvas.height = cb.height;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';

function createRect(){
  ctx.rect(cX-2,cY-37,4,37);
  ctx.stroke(); ctx.fill();
}
function noAct(){
  action = false;
}
function moveit(e,hit = false){
  af = true; cb = canvas.getBoundingClientRect();
  let w = cb.width,h = cb.height,p = 180/Math.PI,r;
  ctx.save(); ctx.clearRect(0,w,h); ctx.beginPath(); ctx.translate(cX,cY);
  r = hit ? 0 : 90;
  ctx.rotate((p*Math.atan2(e.clientY-cb.top-cY,e.clientX-cb.left-cX)+r)/p);
  ctx.translate(-cX,-cY); createRect(e); ctx.restore();
}
function movement(e,hit = false){
  if(af && action){
    af = false; 
    requestAnimationFrame(()=>{ 
      moveit(e,hit);
    });
  }
}
function act(e){
  action = true; cX = e.clientX-cb.left; cY = e.clientY-cb.top; movement(e,true);
}
if(mobile){
  canvas.ontouchstart = e=>{
    act(e.touches[0]);
  }
  touchmove = e=>{
    movement(e.touches[0]);
  }
  ontouchend = noAct;
}
else{
  canvas.onmousedown = act; onmousemove = movement; onmouseup = noAct;
}
}); // end load

/* css/external.css */
*{
  box-sizing:border-box; font:22px Tahoma,Geneva,sans-serif; color:#000; padding:0; margin:0; overflow:hidden;
}
html,body,.main{
  width:100%; height:100%;
}
.main{
  background:#aaa; padding:10px; overflow-y:auto;
}
#canvas{
  width:100%; height:100%; background:#fff;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width,height=device-height,initial-scale:1,user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <canvas id='canvas'></canvas>
  </div>
</body>
</html>