- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以让我首先说我正在尝试创建一个大图像或房间,比如说 5000 x 3750,并且 Canvas 或查看区域只有 800 x 599,始终跟随玩家的作品。我确实找到了一个很好的指南,说明如何使用 java 脚本绘制的背景和播放器(不是从 sprite 表中获取)。但是我拥有的是一个带有背景的 Sprite 表和播放器,我已经让播放器在从 JavaScript 绘制的背景上工作,而不是像我想做的那样从 Sprite 表中获取。以下是部分代码:
// wrapper for "class" Map
(function(){
function Map(width, height){
// map dimensions
this.width = width;
this.height = height;
// map texture
this.image = null;
}
// generate an example of a large map
Map.prototype.generate = function(){
ctxBg.drawImage(imgSprite,0,2250,5000,3750,0,0,5000,3750);
}
// draw the map adjusted to camera
Map.prototype.draw = function(context, xView, yView){
var sx, sy, dx, dy;
var sWidth, sHeight, dWidth, dHeight;
// offset point to crop the image
sx = xView;
sy = yView;
// dimensions of cropped image
sWidth = 800;
sHeight = 599;
// if cropped image is smaller than canvas we need to change the source dimensions
if(800 - sx < sWidth){
sWidth = 800 - sx;
}
if(599 - sy < sHeight){
sHeight = 599 - sy;
}
// location on canvas to draw the croped image
dx = 0;
dy = 0;
// match destination with source to not scale the image
dWidth = sWidth;
dHeight = sHeight;
context.drawImage(imgSprite, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
}
// add "class" Map to our Game object
Game.Map = Map;
})();
// Game Script
(function(){
// prepaire our game canvas
var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");
// game settings:
var FPS = 30;
var INTERVAL = 1000/FPS; // milliseconds
var STEP = INTERVAL/1000 // seconds
// setup an object that represents the room
var room = {
width: 5000,
height: 3750,
map: new Game.Map(5000, 3750)
};
room.map.generate();
这是相机/播放器代码:
(function(){
function Rectangle(left, top, width, height){
this.left = left || 0;
this.top = top || 0;
this.right = (left + width) || 0;
this.bottom = (top + height) || 0;
}
Rectangle.prototype.set = function(left, top, /*optional*/width, /*optional*/height){
this.left = left;
this.top = top;
this.width = width || this.width;
this.height = height || this.height;
this.right = (this.left + this.width);
this.bottom = (this.top + this.height);
}
Rectangle.prototype.within = function(r) {
return (r.left <= this.left &&
r.right >= this.right &&
r.top <= this.top &&
r.bottom >= this.bottom);
}
Rectangle.prototype.overlaps = function(r) {
return (this.left < r.right &&
r.left < this.right &&
this.top < r.bottom &&
r.top < this.bottom);
}
// add "class" Rectangle to our Game object
Game.Rectangle = Rectangle;
})();
// wrapper for "class" Camera (avoid global objects)
(function(){
// possibles axis to move the camera
var AXIS = {
NONE: "none",
HORIZONTAL: "horizontal",
VERTICAL: "vertical",
BOTH: "both"
};
// Camera constructor
function Camera(xView, yView, canvasWidth, canvasHeight, worldWidth, worldHeight)
{
// position of camera (left-top coordinate)
this.xView = xView || 0;
this.yView = yView || 0;
// distance from followed object to border before camera starts move
this.xDeadZone = 0; // min distance to horizontal borders
this.yDeadZone = 0; // min distance to vertical borders
// viewport dimensions
this.wView = 800;
this.hView = 599;
// allow camera to move in vertical and horizontal axis
this.axis = AXIS.BOTH;
// object that should be followed
this.followed = null;
// rectangle that represents the viewport
this.viewportRect = new Game.Rectangle(this.xView, this.yView, this.wView, this.hView);
// rectangle that represents the world's boundary (room's boundary)
this.worldRect = new Game.Rectangle(this.xView, this.yView, this.wView, this.hView);
}
// gameObject needs to have "x" and "y" properties (as world(or room) position)
Camera.prototype.follow = function(gameObject, xDeadZone, yDeadZone)
{
this.followed = gameObject;
this.xDeadZone = xDeadZone;
this.yDeadZone = yDeadZone;
}
Camera.prototype.update = function()
{
// keep following the player (or other desired object)
if(this.followed != null)
{
if(this.axis == AXIS.HORIZONTAL || this.axis == AXIS.BOTH)
{
// moves camera on horizontal axis based on followed object position
if(this.followed.x - this.xView + this.xDeadZone > this.wView)
this.xView = this.followed.x - (this.wView - this.xDeadZone);
else if(this.followed.x - this.xDeadZone < this.xView)
this.xView = this.followed.x - this.xDeadZone;
}
if(this.axis == AXIS.VERTICAL || this.axis == AXIS.BOTH)
{
// moves camera on vertical axis based on followed object position
if(this.followed.y - this.yView + this.yDeadZone > this.hView)
this.yView = this.followed.y - (this.hView - this.yDeadZone);
else if(this.followed.y - this.yDeadZone < this.yView)
this.yView = this.followed.y - this.yDeadZone;
}
}
// update viewportRect
this.viewportRect.set(this.xView, this.yView);
// don't let camera leaves the world's boundary
if(!this.viewportRect.within(this.worldRect))
{
if(this.viewportRect.left < this.worldRect.left)
this.xView = this.worldRect.left;
if(this.viewportRect.top < this.worldRect.top)
this.yView = this.worldRect.top;
if(this.viewportRect.right > this.worldRect.right)
this.xView = this.worldRect.right - this.wView;
if(this.viewportRect.bottom > this.worldRect.bottom)
this.yView = this.worldRect.bottom - this.hView;
}
}
// add "class" Camera to our Game object
Game.Camera = Camera;
})();
// wrapper for "class" Player
(function(){
function Player(x, y){
// (x, y) = center of object
// ATTENTION:
// it represents the player position on the world(room), not the canvas position
this.x = x;
this.y = y;
this.srcX = 1700;
this.srcY = 599;
this.drawX = 350;
this.drawY = 400;
xView = this.x-this.width/2;
yView = this.y-this.height/2;
// move speed in pixels per second
this.speed = 100;
// render properties
this.width = 85;
this.height = 80;
}
Player.prototype.update = function(step, worldWidth, worldHeight){
// parameter step is the time between frames ( in seconds )
// check controls and move the player accordingly
if(Game.controls.left)
this.x -= this.speed * step;
if(Game.controls.up)
this.y -= this.speed * step;
if(Game.controls.right)
this.x += this.speed * step;
if(Game.controls.down)
this.y += this.speed * step;
// don't let player leaves the world's boundary
if(this.x - this.width/2 < 0){
this.x = this.width/2;
}
if(this.y - this.height/2 < 0){
this.y = this.height/2;
}
if(this.x + this.width/2 > worldWidth){
this.x = worldWidth - this.width/2;
}
if(this.y + this.height/2 > worldHeight){
this.y = worldHeight - this.height/2;
}
}
Player.prototype.draw = function(/*context,*/ xView, yView){
ctxPlayer.clearRect(0,0,800,599);
context.save();
ctxPlayer.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,(this.x-this.width/2),(this.y-this.height/2),this.width,this.height);
context.restore();
}
// add "class" Player to our Game object
Game.Player = Player;
})();
它显示图像和播放器,但 Canvas 不跟随播放器对象,但如果我使用这样的背景,它会跟随:
(function(){
function Map(width, height){
this.width = width;
this.height = height;
this.image = null;
}
Map.prototype.generate = function(){
var ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = this.width;
ctx.canvas.height = this.height;
var rows = ~~(this.width/44) + 1;
var columns = ~~(this.height/44) + 1;
var color = "red";
ctx.save();
ctx.fillStyle = "red";
for (var x = 0, i = 0; i < rows; x+=44, i++) {
ctx.beginPath();
for (var y = 0, j=0; j < columns; y+=44, j++) {
ctx.rect (x, y, 40, 40);
}
color = (color == "red" ? "blue" : "red");
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
ctx.restore();
this.image = new Image();
this.image.src = ctx.canvas.toDataURL("image/png");
// clear context
ctx = null;
}
// draw the map adjusted to camera
Map.prototype.draw = function(context, xView, yView){
var sx, sy, dx, dy;
var sWidth, sHeight, dWidth, dHeight;
// offset point to crop the image
sx = xView;
sy = yView;
// dimensions of cropped image
sWidth = context.canvas.width;
sHeight = context.canvas.height;
// if cropped image is smaller than canvas we need to change the source dimensions
if(this.image.width - sx < sWidth){
sWidth = this.image.width - sx;
}
if(this.image.height - sy < sHeight){
sHeight = this.image.height - sy;
}
dx = 0;
dy = 0;
dWidth = sWidth;
dHeight = sHeight;
context.drawImage(this.image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
}
Game.Map = Map;
})();
我环顾四周,进行了一些谷歌搜索并使用了 JavaScript 检查器,但没有成功。非常感谢任何建议/建议。
最佳答案
无论如何我都会试一试。因此,对于理论部分:
您要实现的是简单的场景管理。一个场景需要一个相机,一个存储 X 和 Y 偏移量以及它将要显示的宽度和高度的对象(宽度和高度在 3D 图形中也称为投影平面)。在每一帧中,您都将通过相机的偏移绘制场景(或世界)。
实现:
要在小的 Canvas 上绘制大图像,只需使用带有所有 9 个参数的 drawImage() 函数即可。
要绘制许多像 Tiles 这样的小图像,我建议看一下 Scene graphs,我前段时间在 Collision detection in HTML5 canvas. Optimization too 写了一个更深入的答案。
如果您每帧绘制许多对象,请注意您始终可以创建不在 html DOM 中的 Canvas 对象来缓存绘制结果,这是获得良好性能所必需的。绘制调用是昂贵的,因为它的渲染状态更改和流媒体成本,而不是因为像素本身。
最后,要在顶部绘制您的 Angular 色,您需要某种 z 索引,以便您的绘制循环知道玩家在地面上,您可以通过图层或存储游戏对象的 z 索引来完成此操作。
到目前为止,您已经在正确的轨道上了!
关于javascript - Html5 Canvas 游戏,创建比查看 Canvas 大得多的 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17782833/
我有一个用 Swift 编写的自定义转换,当呈现的 View 从侧面进入时,被关闭的 View 消失。 现在我想要同样的效果,但我希望呈现的 View 从顶部进入,而被取消的 View 从底部出来。
该方法的预期目的是什么 findBinding(View view) ? 我一直在使用数据绑定(bind)库测试版。 目前还没有针对各个类的官方引用文档,所以我一直在查看源代码以了解我们可以访问哪些方
我试图在遍历 &str 时查看当前位置前面的字符。 let myStr = "12345"; let mut iter = myStr.chars().peekable(); for c in ite
每当我在 Azure 中创建新的 Azure 函数应用时,我都会选择一个存储帐户供其使用。 创建应用后,如何查看/更改存储帐户? 我尝试在门户中浏览,但无法看到可以在哪里配置它。 最佳答案 创建后,您
我想查看读取 QFile 的 QTextStream 的下一个字符,以创建一个高效的标记器。 但是,我没有找到任何令人满意的解决方案。 QFile f("test.txt"); f.open(QIOD
当我旋转手机时, ListView 中选定的项目将被取消选择。这是我的适配器。我只想更改所选项目的颜色(仅是单个选择),当我旋转手机时,我想查看我选择的内容。现在,当我旋转手机时,我看不到所选项目。
我开始编写代码来检查函数的返回值,但我不确定在捕获到一些错误后如何继续。 例如,在 fgets 中: while( fgets( rta, 3, stdin ) == NULL ) {
是否可以获取或创建一个 optional 轮,它以假想的圆圈滚动而不是直接向下(垂直)滚动? 直线链接但想要弯曲 例如就像控件 here ,但车轮是弯曲的? 最佳答案 有没有可能你想要的是一个轮播?
当我尝试为其创建 View 时出现错误:“ View 的 SELECT 在 FROM 子句中包含一个子查询”,但它在普通查询中工作正常。我认为它与我的 WHERE 子句有关,但我不明白为什么或如何修复
在一个类中,我有以下代码: /// [System.Xml.Serialization.XmlElementAttribute("Errors", typeof(ErrorsType))] [Sys
我想显示来自 catch block 的错误(日志)消息。如何在单个屏幕上显示所有消息(堆栈),以便用户了解? 谢谢... 最佳答案 使用 Toast 怎么样? 示例: Toast.makeText(
我有以下屏幕(图像),当按下按钮时显示一个侧面菜单,菜单出现,另外我有一个 uitableview 来显示其他东西 我的问题是,当侧边菜单出现时,uitableview 被调整了大小。 如何保持 ui
invariant violation element type is invalid: expected a string (for built-in components) or a class/
我是新手,正在尝试学习 fork() 和系统调用的功能,现在我正在使用 execvp() 来尝试制作 bash,但我遇到的问题是,当我编写正确的命令时,程序结束,我想循环使用我的 bash,直到有人在
我正在尝试使用 Laravel request validation method 创建一个登录页面 和凭据验证 -> 如果用户未通过身份验证,它将返回错误“密码错误....” 我在两种不同的情况下看
我有一个 .jar 文件,我需要查看 jar 文件的内容。 是否有任何解码器可用于解码 jar 文件。 我也有 solaris 环境,我需要知道什么是 最佳答案 使用jar命令行,即 jar tf j
Git 提供了几种方式可以帮你快速查看提交中哪些文件被改变。 如果你每天使用 Git,应该会提交不少改动。如果你每天和其他人在一个项目中使用 Git,假设 每个人 每天的提
问题 tensor详细数值 不能直接print打印: ? 1
一,uptime 可以查看系统的运行时间 show global status like 'uptime'; 二,利用linux命令查看 Linux 下有个 uptime 可以查看系统的运行时
在所有主流的浏览器中,均能够查看原始的 XML 文件 不要指望 XML 文件会直接显示为 HTML 页面 查看 XML 文件 <?xml version="1.0" e
我是一名优秀的程序员,十分优秀!