Fatal编程技术网
  • php/
  • Php 基于浏览器的游戏地图

Php 基于浏览器的游戏地图

php javascript jquery html css

Php 基于浏览器的游戏地图,php,javascript,jquery,html,css,Php,Javascript,Jquery,Html,Css,我在为基于浏览器的游戏（如Travian）创建地图时遇到了一些麻烦。我已经创建了一个功能，可以将地图拖动到不同的方向，但是每次我点击一个不同的位置，而不是我释放鼠标的位置，它会直接改变位置，然后我可以根据需要移动它。有没有办法解决这个问题？是否需要JQuery？（我不太擅长Javascript，因此我的代码可能与简单的代码处理方式有所不同） 完整文件： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

我在为基于浏览器的游戏（如Travian）创建地图时遇到了一些麻烦。我已经创建了一个功能，可以将地图拖动到不同的方向，但是每次我点击一个不同的位置，而不是我释放鼠标的位置，它会直接改变位置，然后我可以根据需要移动它。有没有办法解决这个问题？是否需要JQuery？（我不太擅长Javascript，因此我的代码可能与简单的代码处理方式有所不同）

完整文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Map</title>
    <script type="text/javascript">

        //object of the element to be moved
        _item = null;

        //stores x & y co-ordinates of the mouse pointer
        mouse_x = 0;
        mouse_y = 0;

        // stores top,left values (edge) of the element
        mapdiv_x = 0;
        mapdiv_y = 0;

        //bind the functions
        function move_init()
        {
            document.onmousemove = _move;
            document.onmouseup = _stop;
        }

        //destroy the object when we are done
            function _stop()
        {
            _item = null;
        }

        //main functions which is responsible for moving the element (div in our example)
        function _move(e)
        {
            mouse_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("mapdiv").backgroundPositionX;
            mouse_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("mapdiv").backgroundPositionY;
            if(_item != null)
            { 
                _item.style.backgroundPosition = "-" + (mouse_x - mapdiv_x) + "px -" + (mouse_y - mapdiv_y) + "px";
            }
        }

        //will be called when use starts dragging an element
        function _move_item(mapdiv)
        {
            //store the object of the element which needs to be moved
            _item = mapdiv;
            mouse_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("mapdiv").backgroundPositionX;
            mouse_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("mapdiv").backgroundPositionY;

            oldmapdivx = _item.style.backgroundPositionX;
            oldmapdivy = _item.style.backgroundPositionY;

            mapdiv_x = oldmapdivx - mouse_x;
            mapdiv_y = oldmapdivy - mouse_y;

            mapdivx2 = mouse_x - mapdiv_x;
            mapdivy2 = mouse_y - mapdiv_y;
        }
    </script>
    <style type="text/css">
    #mapdiv {
        background-image:url('images/map.png');
        background-repeat:no-repeat;
        background-color:#666;
        width:750px;
        height:500px;
        cursor: move;
    }
    </style>
</head>

<body onload="move_init()">
    <div id="mapdiv" onmousedown="_move_item(this);"></div>
</body>
</html>


地图
//要移动的元素的对象
_item=null；
//存储鼠标指针的x&y坐标
鼠标x=0；
鼠标y=0；
//存储元素的顶部、左侧值（边）
mapdiv_x=0；
mapdiv_y=0；
//绑定函数
函数move_init（）
{
document.onmousemove=\u move；
document.onmouseup=\u停止；
}
//完成后，请销毁该对象
函数_stop（）
{
_item=null；
}
//负责移动元素的主要函数（在我们的示例中为div）
功能(e)
{
mouse_x=event.offsetX？（event.offsetX）：event.pageX document.getElementById（“mapdiv”）.backgroundPositionX；
mouse_y=event.offsetY？（event.offsetY）：event.pageY document.getElementById（“mapdiv”）.backgroundPositionY；
如果（_item！=null）
{ 
_item.style.backgroundPosition=“-”+（鼠标x-mapdiv_x）+“px-”+（鼠标y-mapdiv_y）+“px”；
}
}
//将在使用开始拖动元素时调用
功能_移动_项（mapdiv）
{
//存储需要移动的元素的对象
_项目=mapdiv；
mouse_x=event.offsetX？（event.offsetX）：event.pageX document.getElementById（“mapdiv”）.backgroundPositionX；
mouse_y=event.offsetY？（event.offsetY）：event.pageY document.getElementById（“mapdiv”）.backgroundPositionY；
oldmapdivx=_item.style.backgroundPositionX；
oldmapdivy=\u item.style.backgroundPositionY；
mapdiv_x=oldmapdivx-鼠标_x；
mapdiv_y=旧MapDivy-鼠标_y；
mapdivx2=鼠标_x-mapdiv_x；
mapdivy2=鼠标_y-mapdiv_y；
}
#mapdiv{
背景图片：url（'images/map.png'）；
背景重复：无重复；
背景色：#666；
宽度：750px；
高度：500px；
光标：移动；
}
很遗憾，我看不到您代码中的问题

不过，如果您没有死心塌地地为此编写自己的代码，那么实际上有一个非常好的Jquery插件，它可以完全满足您的需求。它被称为Overscroll（），为您提供了这样一个系统所需的所有特性。看一看，我发现它在我过去的工作中非常有用。查看代码也可以帮助您在自己的解决方案中找到问题。

您永远不需要JQuery，它是用JavaScript编写的，因此您可以随时重新创建它提供给您的内容。但既然它让生活变得如此轻松，你为什么要这么做呢；您可能需要JQuery。这是一个很棒的工具，如果你刚开始使用JS，它将为你节省大量的痛苦。