rpg一个窗口中滚动显示整个大地图——h5游戏

ChenyiMX

已于 2023-06-15 18:18:35 修改

阅读量1.4k

点赞数

分类专栏： canvas实践文章标签：游戏 javascript 前端

于 2018-10-17 16:28:52 首次发布

本文链接：https://blog.csdn.net/chenyimx/article/details/83112582

版权

canvas实践专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先需要jquery插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>巡检地图</title>
    <script src="../js/jquery-3.2.1.js"></script>
    <style>
        #backLayer{
            position: relative;
        }

        #mycanvas{
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 10;
        }
    </style>
</head>
<body style="background-color: black">
<div  id="backLayer">

    <canvas id="mycanvas"  style="border: 1px #cccccc solid">

    </canvas>
</div>
<script>
    var canvas = document.getElementById("mycanvas");
    var context = canvas.getContext("2d");
    canvas.width = 300;
    canvas.height = 300;
    var img = new Image();
    img.src = '../images/地图2.jpg';
    img.οnlοad=function(){

        //从图片x，y位置截取图 z是计时器
        var x=0, y= 0,z=0;

        function animate() {
            //done();
            z++;
            if (z>=15){
            $("#mycanvas").mousemove(
                    function(e){
                        z = 0;
                        // 1 当鼠标在画布的右边
                    if(e.offsetX>270){
                        //如果 x 小于图片宽度减去画布宽度
                        if(x<=(img.width-300)){
                            x += 0.1;
                        }
                    }
                        //2  当鼠标在画布的下边
                        if(e.offsetY>270){
                            // y小于图片高度减去画布高度
                            if(y<=(img.height-300)){
                                y += 0.1;
                            }

                        }
                        //3  当鼠标在画布的左边
                       if(e.offsetX<30){
                            //x大于0
                            if(x>0){
                                x -= 0.1;
                            }

                        }
                        //4 当鼠标在画布的上边
                        if(e.offsetY<30){
                            //y大于0
                            if(y>0){
                                y -= 0.1;
                            }

                        }
                    }
            )

            }


            canvas.style.top=y+"px";
            canvas.style.left=x+"px";
            context.drawImage(img,x,y,300,300,0,0,300,300);

            globalID = requestAnimationFrame(animate);
//            if(){
//
//                cancelAnimationFrame(globalID);//结束
//            }
        }
        requestAnimationFrame(animate);//开始



    }


</script>
</body>
</html>

首先，准备一张背景图，越大越好
比如·

    var img = new Image();
  img.src = '../images/地图2.jpg';

然后就是这个方法

  context.drawImage(img,x,y,300,300,0,0,300,300);

这个方法的参数是：
//截取图片imgx，y的长300，宽300的矩形图像缩放到（后面的）300，300矩形大小展示在画板的0，0处也就是说我们可以通过改变x,y的值截取图片的不同位置显示在画板上

下面的方法是画板移动

  canvas.style.top=y+"px";
            canvas.style.left=x+"px";

不是必要如果你的窗口够大并且在地图的中间你只需要图片滚动即可

当鼠标停留在画板的上下左右边沿有一个判定就是当图片在这个方向的边沿，就不会移动

     // 1 当鼠标在画布的右边
                    if(e.offsetX>270){
                        //如果 x 小于图片宽度减去画布宽度
                        if(x<=(img.width-300)){
                            x += 0.1;
                        }
                    }

其中 var z的值先当与一个延时器避免画面移动过快

img.onload方法是图片加载完成后运行，不然不能取到图片的宽和高

以上就是在一个窗口中滚动显示整个大地图的方法本人新手有对h5游戏感兴趣的盆友可以一起交流哈啊
以下是效果图图片不大窗口设置的比较小
在这里插入图片描述

在这里插入图片描述

ChenyiMX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
rpg一个窗口中滚动显示整个大地图——h5游戏

首先需要jquery插件&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;巡检地图&lt;/title&gt; &lt;script src="../js/jquery-3.2.
复制链接

扫一扫

专栏目录