背景是一张大图，显示区域窗口小时，需要拖动查看，游戏地图的简单实现
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>背景拖动</title> 7 <script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script> 8 <style> 9 body { margin: 0; overflow: hidden; background-color: #222; } 10 canvas { display: block; } 11 #gameContainer { position: relative; } 12 </style> 13 </head> 14 <body> 15 <div id="gameContainer"> 16 <canvas id="gameCanvas" width="200" height="200"></canvas> 17 </div> 18 <script> 19 // 获取 canvas 元素 20 var canvas = document.getElementById("gameCanvas"); 21 var stage = new createjs.Stage(canvas); 22 23 // 加载地图图像 24 var mapImage = new Image(); 25 mapImage.src = './bg.jpeg'; // 替换为你的地图图片路径 26 mapImage.onload = function() { 27 var mapBitmap = new createjs.Bitmap(mapImage); 28 29 // 设置地图位置为右下角 30 // mapBitmap.x = canvas.width - mapImage.width; 31 // mapBitmap.y = canvas.height - mapImage.height; 32 33 stage.addChild(mapBitmap); 34 stage.update(); // 更新舞台以显示图像 35 36 var isDragging = false; 37 var lastX, lastY; 38 39 mapBitmap.on("mousedown", function(event) { 40 isDragging = true; 41 lastX = event.stageX; 42 lastY = event.stageY; 43 }); 44 mapBitmap.on("pressmove", function(event) { 45 // console.log(isDragging,event.stageX, event.stageY); 46 if (isDragging) { 47 var dx = event.stageX - lastX; 48 var dy = event.stageY - lastY; 49 // 检查边界并更新位置 50 var newX = mapBitmap.x + dx; 51 var newY = mapBitmap.y + dy; 52 if (newX <= 0 && newX >= (canvas.width - mapImage.width)) { // 检查 X 轴边界 53 mapBitmap.x = newX; 54 } 55 if (newY <= 0 && newY >= (canvas.height - mapImage.height)) { // 检查 Y 轴边界 56 mapBitmap.y = newY; 57 } 58 // mapBitmap.x = newX; 59 // mapBitmap.y = newY; 60 // console.log(mapBitmap.x, mapBitmap.y) 61 lastX = event.stageX; 62 lastY = event.stageY; 63 stage.update(); // 更新舞台以显示新的位置（如果位置有变化） 64 } 65 }); 66 67 mapBitmap.on("pressup", function(event) { 68 isDragging = false; // 停止拖动 69 }); 70 }; 71 72 </script> 73 </body> 74 </html>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。