问题描述
我正在制作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>