javascript - 使用 Canvas 创建可指向的第一人称射击枪-6ren

javascript - 使用 Canvas 创建可指向的第一人称射击枪

转载作者：行者123 更新时间：2023-11-30 15:35:48

24

4

我一直在尝试寻找一种方法来渲染如何用 Canvas 制作枪支的结果，该枪支可以指向光标所在的位置。我对我应该做什么有一个基本的想法:

<!doctype html>
<html>
    <head>
        <title>Block Shooter</title>
    </head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <body>
        <center>
            <div id="introContainer"><h1 id="intro">Welcome to Block Shooter</h1></div>
            <button id="skip" style="position: absolute; bottom: 50px; left:610px">Skip Intro</button>
            <canvas id="canvas" width="1200" height="600" style="border: 1px solid black;"></canvas>
            <script>

            // Variables

            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var gunWidth = 80;
            var gunLength = 150;

            $("#canvas").mousemove(function (event) {
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                ctx.beginPath();
                ctx.lineWidth = gunWidth;
                ctx.strokeStyle = "black";
                ctx.moveTo(canvas.width / 2 - gunWidth / 2, canvas.height + 100);
                ctx.lineTo(event.offsetX, event.offsetY);
                ctx.stroke();
                ctx.closePath();

                ctx.beginPath();
                ctx.lineWidth = gunWidth;
                ctx.strokeStyle = "white";
                ctx.moveTo(event.offsetX, event.offsetY);
                ctx.lineTo(canvas.width / 2 - gunWidth / 2, canvas.height - gunLength);
                ctx.stroke();
                ctx.closePath();

            })

            </script>
        </center>
    </body>

</html>

我不知道下一步该做什么。有更好的方法吗？如果是，请提供示例。谢谢!

最佳答案

不幸的是，交互式图形编程很快就进入了数学……用以下内容替换 $(#canvas).mousemove( 函数中的内容

           ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.beginPath();
            ctx.lineWidth = gunWidth;
            ctx.strokeStyle = "black";
            //get dimensions of canvas
           //for performance this should be moved out of the
            //mousemove and up to where your other global variables canvas and ctx are. 
            var dimensions=event.target.getBoundingClientRect();
            var middle=dimensions.left+(dimensions.width/2)
            ctx.moveTo(middle,0);
            //get mousex relative to canvas
            var mousex=event.clientX-dimensions.left;
            //get mousey relative to canvas 
            var mousey=event.clientY-dimensions.top;
            var ydistance=mousey;
            var xdistance=mousex-middle
            //distance formula 
            var distance=Math.sqrt((xdistance*xdistance)+(ydistance*ydistance))
            //http://math.stackexchange.com/questions/175896/finding-a-point-along-a-line-a-certain-distance-away-from-another-point
            var gunlength=200;
            var drawx=(gunlength*(xdistance/distance))+middle
            var drawy=gunlength*(ydistance/distance)

            ctx.lineTo(drawx, drawy);


            ctx.stroke();
            ctx.closePath();

这将使枪保持相同的大小......你需要改变一些东西让枪回到 Canvas 的底部(HTML Canvas 有一个倒置的 y 轴，我没有在演示中考虑到这一点)

关于javascript - 使用 Canvas 创建可指向的第一人称射击枪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41560395/

24

4

0

文章推荐： javascript - 获取数组中的下一个所有项目

文章推荐： javascript - SVG 图像 url 在 Chrome 但在 Firefox 中不起作用？

文章推荐： javascript - 使用 Javascript 在 Firebase 中中断循环

c++ - 指向 const 的指针指向 int 的指针
有人能给我解释一下我下面程序中的一点吗我编写的以下程序是为了理解 int * const * var 的含义； #include "iostream" using namespace std ; in
C: 通过类型转换和取消引用访问 (int) 通过 (void *) 指向 (void *) 指向 (int)
我正在摆弄 C 中的指针，但仍然不确定一些非常基础的知识。我想出了以下示例代码: #include int main(void) { int num = 42; /
C: 指针类型之间的非法转换:指向 const unsigned char 的指针 -> 指向 unsigned char 的指针
以下代码产生警告: const char * mystr = "\r\nHello"; void send_str(char * str); void main(void){ send_str
linux - "cmake --version"指向/usr/bin/cmake 而 "which cmake"指向/usr/local/bin
我正在尝试在我的 Linux 计算机上升级 cmake。这是我使用的命令。删除旧的 cmake: sudo apt purge --auto-remove cmake 从 https://cmake
指向 union 存储的字符指针
我试图借助 char 指针来追踪 union 第一个字节的值。我假设 byte1 的输出应该是 ff，但实际上是 ffffffff。如果我错了请纠正我。 #include #include #in
指向 volatile 结构成员的常量指针
我正在使用微 Controller 进行一些 ADC 测量。当我尝试使用 -O2 优化编译以下代码时遇到问题，当代码中存在 PrintVal() 函数时，MCU 卡住。我做了一些调试，结果发现，当我添
c++ - 指向 vector
#include #include using namespace std; int main () { vector qwerty; qwerty.push_back(5);
python - 指向.deb包中的真实主目录
我有我的 woking setup.py 文件；其中包含以下行: home = os.environ["HOME"] # home = /home/dr in my machine; distu
c++ - 指向 volatile 的指针的迭代器特征
这段代码 #include #include static_assert(std::is_same_v::value_type, volatile int>); 在最新的 GCC 和 clang
c - 指向 C 中前向声明结构数组的指针
我对 C 中的前向声明有疑问。代码 typedef struct yhash_s t_yhash;// forward declaration struct yhash_s { size_t
c++ - 获取成员类型 memberpointer 指向
我想提取成员指针指向的成员的类型。 template void demo(myClass& instance, void* ptr) { instance.*member = *reinter
C 指向 Swift 指针的指针
我正在尝试使用指针将一段 C 代码转换为 Swift 3。这是 C 代码中的相关部分。 Float32 sampleArray[256] = { // Array is 256 Float value
c - 指向 VLA 的指针
您可能知道，VLA's haves pros and cons 和它们在 C11 中是可选的。我想使 VLA 成为可选项的主要原因是:“堆栈可能会爆炸”: int arr[n]; /* where
c - 指向 C 中结构的指针
这段代码有什么错误？为什么我不能按照我尝试的方式取消引用该元素。 #include typedef struct { int value; struct node * left;
javascript - 指向 JavaScript 中变量的指针
有什么方法可以在 JavaScript 中创建\返回指向变量的指针吗？比如，在 PHP 中: function func() { ..... return &$result; } 我
delphi - 指向(子)方法函数的指针？
如果您想使用方法的指针作为参数，则需要将该方法键入作为对象的函数，就像这样好 : type TAcceptor = function(filename:string):boolean of objec
c++ - 访问对象 unique_ptr 指向
很简单的问题: 我对 C++ 中的智能指针有点陌生。我想我得到了所有权的东西，但我不知道如何访问他们实际指向的内容。当我尝试使用对象的成员函数/变量时，我只是得到了 unique_ptr 类的函数，这
javascript - 指向 GPS 位置的方向
我得到了一个点的方位 Angular 、指南针方向和一个可以将箭头设置到某个方向的 api(0 是顶部，90 是右侧，180 是底部，360 是顶部) 如果我希望箭头指向我采用方位 Angular 形
excel - 指向 Excel 中相对的其他工作表
我正在尝试找到一种方法，从单元格中获取位于当前工作表左侧(托盘下方)的工作表单元格中的数据。我知道如何通过调用其他工作表 =Sheet1!A1 但现在我需要一些最好的解释 =Sheet[-1]!A1
function - 指向 MATLAB 函数的指针？
所以我在 MATLAB 中有一个 for 循环，其中向量 x 将通过一个函数，比如 cos(x).^2，或者不同的选择，比如 sin(x).^2 + 9.*x。用户将在 for 循环之前选择他想使用的

首页

博学

6Ren·AI

商城

javascript - 使用 Canvas 创建可指向的第一人称射击枪