最新文章:

您的位置: 富录-前端开发|web技术博客 > JavaScript > 用canvas实现游戏手柄方向摇杆(joystick)

用canvas实现游戏手柄方向摇杆(joystick)

发布时间:2023年05月31日 评论数:抢沙发阅读数: 1339

    WX20230531-175226.png

    摸鱼摸到canvas上了,那总得摸出点东西来吧,于是乎摸出了粗糙的方向摇杆,直接上代码吧。

    在canvas元素上绘制一个圆形摇杆,并且在鼠标移动时更新摇杆的位置。当鼠标移动到摇杆圆形范围内时,摇杆会跟随鼠标移动;当鼠标移动到摇杆圆形范围外时,摇杆会沿着鼠标与圆心的连线移动,直到到达圆形范围边缘。


    HTML

    <canvas id="joystick"></canvas>

    JavaScript

    var canvas = document.getElementById("joystick");
    canvas.width = 500
    canvas.height = 500
    var ctx = canvas.getContext("2d");
    
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius = 50;
    
    function drawJoystick(x, y) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      ctx.fillStyle = "#CCCCCC";
      ctx.fill();
      ctx.lineWidth = 2;
      ctx.strokeStyle = "#333333";
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(x, y, radius / 2, 0, 2 * Math.PI, false);
      ctx.fillStyle = "#333333";
      ctx.fill();
    }
    
    canvas.addEventListener("mousemove", function(event) {
      var rect = canvas.getBoundingClientRect();
      var x = event.clientX - rect.left;
      var y = event.clientY - rect.top;
      var distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
      if (distance <= radius) {
        drawJoystick(x, y);
      } else {
        var angle = Math.atan2(y - centerY, x - centerX);
        var newX = centerX + radius * Math.cos(angle);
        var newY = centerY + radius * Math.sin(angle);
        drawJoystick(newX, newY);
      }
    });
    
    canvas.addEventListener("mouseleave", function() {
      drawJoystick(centerX, centerY);
    });


二维码加载中...
本文作者:DGF      文章标题: 用canvas实现游戏手柄方向摇杆(joystick)
本文地址: https://www.arbays.com/post-212.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论