0

我在用 html 制作类似 RISK 的游戏时遇到问题。我现在使用的解决方案是给每个国家“位置：绝对；” 然后将其放置在它所属的位置，但是当用户想要将鼠标悬停或单击所需的国家/地区时会出现问题。国家被表示为块，并且具有国家形状的背景图像，所以当你看它时，你看不到它实际上是一个块。

你能给我任何例子或一个好的资源网站，我可以实现以下目标：

这就是它当前的样子：http ://s24.postimg.org/402tvyovp/image.png

这就是我希望它的外观和行为方式：http ://s24.postimg.org/5cpkuysmt/image.png

所以元素有一个国家的形状，而不是一个块，这意味着当用户将鼠标放在那个形状（而不是它周围的块）时，脚本会执行一些功能。

4

1 回答 1

1

以下是如何识别在您的画布上单击了哪个自定义国家/地区形状

首先，使用 Photoshop 将地图上的每个国家/地区更改为不同的唯一颜色（颜色编码的地图）

（不用担心，用户不需要看到这个颜色编码的地图）。

然后当用户点击画布时，获取点击点的颜色并与您的国家颜色进行比较，如下所示：

    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      var color=getPixelRGB(mouseX,mouseY);
      if(isColorMatch(color,255,0,0)){ alert("You clicked on the red country"); }          
      if(isColorMatch(color,0,255,0)){ alert("You clicked on the green country"); }          
      if(isColorMatch(color,0,0,255)){ alert("You clicked on the blue country"); }          
    }

    function isColorMatch(color,red,green,blue){
        return(color.red==red && color.green==green && color.blue==blue);
    }

    function getPixelRGB(x, y) {
        var pxData = ctx.getImageData(x,y,1,1);
        var R = pxData.data[0];
        var G = pxData.data[1];
        var B = pxData.data[2];
        return({red:R, green:G, blue:B});    
    }

您可能不想为您的用户显示彩色编码的地图。如果没有，您可以在与您的屏幕画布相同的屏幕外画布上创建颜色编码的地图 - 除了颜色编码。当用户点击您的屏幕画布时，您只需检查颜色编码地图上的像素位置。您将获得屏幕美感 + 屏幕外功能。

这是代码和小提琴：http: //jsfiddle.net/m1erickson/rmn5D/

请注意，由于跨站点浏览器安全警告，此小提琴不会使用您的确切地图 - 您将需要替换您自己的颜色编码地图。

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.onload=function(){
        canvas.width=img.width;
        canvas.height=img.height;
        ctx.drawImage(img,0,0);
    }
    img.src="yourColorCodedMap.png";


    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      var color=getPixelRGB(mouseX,mouseY);
      if(isColorMatch(color,255,0,0)){ alert("You clicked on the red country"); }          
      if(isColorMatch(color,0,255,0)){ alert("You clicked on the green country"); }          
      if(isColorMatch(color,0,0,255)){ alert("You clicked on the blue country"); }          
    }

    function isColorMatch(color,red,green,blue){
        return(color.red==red && color.green==green && color.blue==blue);
    }

    function getPixelRGB(x, y) {
        var pxData = ctx.getImageData(x,y,1,1);
        var R = pxData.data[0];
        var G = pxData.data[1];
        var B = pxData.data[2];
        return({red:R, green:G, blue:B});    
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <p>Click on a map location to get country</p>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2013-04-07T22:46:55.130 回答