小编use*_*969的帖子

HTML5 Canvas相机/视口 - 如何实际操作?

我确定之前已经解决了1000次:我得到了一个960*560大小的画布和一个大小为5000*3000的房间,其中应该只画出960*560,这取决于玩家的位置.玩家应该始终位于中间,但是当接近边界时 - 应该计算最佳视图).玩家可以使用WASD或箭头键完全免费移动.并且所有物体都应该自己移动 - 而不是我移动除了玩家之外的所有其他东西以创造玩家移动的幻觉.

我现在发现了这两个问题:

HTML5 - 为画布创建一个视口,但仅适用于此类游戏,我无法重现我的代码.

更改html5画布的视图"中心"似乎更有前途,也更有说服力,但我只是理解它相对于播放器正确绘制所有其他对象而不是如何相对于播放器滚动画布视口,我想要当然要先实现.

我的代码(简化 - 游戏逻辑是单独的):

var canvas = document.getElementById("game");
canvas.tabIndex = 0;
canvas.focus();
var cc = canvas.getContext("2d");

// Define viewports for scrolling inside the canvas

/* Viewport x position */   view_xview = 0;
/* Viewport y position */   view_yview = 0;
/* Viewport width */        view_wview = 960;
/* Viewport height */       view_hview = 560;
/* Sector width */          room_width = 5000;
/* Sector height */         room_height = 3000;

canvas.width …
Run Code Online (Sandbox Code Playgroud)

javascript html5 canvas viewport html5-canvas

44
推荐指数
3
解决办法
6万
查看次数

标签 统计

canvas ×1

html5 ×1

html5-canvas ×1

javascript ×1

viewport ×1