Articles of html canvas

如何使用HTML5canvas绘制一个tileset?

我有一个像这样的瓷砖: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 我的tileset绘制代码如下所示: var image = new Image(); image.src = '32×32.png'; var tile = 5; var tileSize = 32; var x = 100; var y = 100; context.drawImage(image, Math.floor(tile * tileSize), 0, tileSize, tileSize, x, […]

将一个精灵朝x和y坐标移动

给定一个具有x和y坐标的精灵,如何将它移动到另一个具有x和y坐标的精灵? 我已经面向另一个精灵了,我已经向另一个精灵前进了,但是因为我正在使用sin和cos所以它正在盘旋着玩家,慢慢地向他们移动。 这里的方法是: Enemy.prototype.update = function(playerX, playerY) { // Rotate us to face the player this.rotation = Math.atan2(this.y – playerY, this.x – playerX) – 2.35; // Move towards the player this.x += Math.sin(this.rotation) * this.speed; this.y -= Math.cos(this.rotation) * this.speed; } 我怎样才能让这个精灵直线移动到一个直线上而不是一个圆圈? 我发现了一个很好的例子,但是它使用了XNA Vector2 ,因此它不能直接与x和y位置一起工作。

需要指导制作HTML5 Canvas游戏引擎

所以我有一些空闲的时间在这个冬季rest,想要建立一个简单的二维HTML5帆布游戏引擎。 大多数物理引擎将决定对象移动和交互的方式(碰撞等)。 我在这里做了一个基本的游戏: http://caidenhome.com/HTML%205/pong.html 并希望做更多,并认为这将是一个很好的理由,为这个东西做一个简单的框架。 这里有一些问题: 脚本语言是否必须是Javascript? Ruby呢? 我可能会用jQuery编写它,因为select的权力,但我很好奇的方式。 你们知道有什么伟大的导游吗? 我想要一个快速指南,这将有助于我在接下来的2周内某个时间内破解这个引擎,希望能早点解决。 我应该注意哪些好的约定? 什么是最好的方法来获得声音? 目前我正在使用这样的东西: var audioElement = document.createElement('audio'); audioElement.setAttribute('src','paddle_col.wav'); audioElement.load(); 我有兴趣使这个引擎轻量级和非常高效,我会尽一切努力获得伟大的速度和处理能力。 我知道这个问题相当模糊,但我只是需要一个正确的方向。 谢谢 :)

二维地图,如何构造?

我是新来的。 而且我不太了解二维瓷砖地图。 我读过的教程使用了数组,但是当它们变大时,这难道难以管理? 而如果我想要不同的楼层,比如上下楼梯,我是否需要为游戏世界的每个“层次”设置一个arrays? 任何人都可以解释简单的瓷砖地图吗? 如果您包含代码,请使其成为Javascript或伪代码,因为这是我所知道的。

将坐标系转换为等距游戏世界

我尝试过search和阅读答案,但是我可以挖掘的信息或者不符合我需要的或者类似于“仅用我的脑子的逆matrix乘以vector”的forms不幸的是)和说普通话的人一样有意义。 计划是使用requestAnimationFrame和canvas作为绘图,而WebSockets则用于通信。 我已经对requestAnimationFrame和canvas进行了一个公正的掌握,还有一些攻击了php WebSockets服务器的代码,支持大多数当前正在使用的草稿。 这是一个有趣和学习的项目,所以请不要评论在php中编写服务器软件有多愚蠢 当我尝试实施运动时,主要的障碍就出现了。 我有绘制地图交错和菱形的代码。 我甚至已经实施了点击式走动式的运动,但是到了实施碰撞检测的时候我却碰壁了。 看到,我的播放器存在于canvas的坐标系统中,还有鼠标事件等。我所做的是在canvas中间画出角色精灵,并通过canvas中心之间的差异为地图的偏移设置animation和一个点击点。 事情是,我想保持我的“世界”(例如地图,玩家,对象/实体)在内存中作为一个规则的网格地图,只是用等距倾斜绘制的一切。 这将使实现碰撞检测非常简单。 就像现在一样,向玩家x坐标添加32px并不会使他沿着地图x轴移动,而是沿着canvas移动。 如果增加玩家的x将他沿地图x轴移动,那么就如我所说的那样,执行碰撞检测就像检查沿着该轴的下一个瓦片是否阻塞一样简单,并基于此来更新我的x位置。 简单的问题是:给定玩家的X坐标和Y坐标,我如何计算适当的地图偏移量,以便增加任一坐标将使玩家沿着适当的“游戏内”轴移动? 谢谢,并链接到我的黑客一起初步testing: http : //dev.plastbox.org/isoengine/它不断被修改,所以它可能不时工作。

在Javacanvas中的文本字段

所以我试图在游戏中input一些forms的信息,并且我理解所有的keyPresses,但是唯一的问题是我不知道向游戏添加文本字段。 JTextfield似乎并没有出现,所以我开始采取按键,并将其添加到一个string,但这certificate以太太慢或太快。 有没有办法给游戏添加文本框? 我只使用普通的java和swing。 这是一个代码片段: JFrame frame = new JFrame("Game"); //Sorts out JFrame variables and settings. frame.setLayout(null); setBounds(0,0,800,600); frame.add(this); frame.setSize(800,600); frame.setResizable(false); frame.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { gameRunning = false; System.exit(0); } }); frame.addKeyListener(this); addKeyListener(this); addMouseListener(this); addMouseMotionListener(this); int columns = 25; TextField localTextField = new TextField("Text", columns); Insets insets = frame.getInsets(); Dimension size […]

我怎样才能重复使用Javascript中的图像的一部分?

所以我试图重复我的spritesheet的一部分作为背景。 到目前为止,我曾试图这样做: var canvas = $("#board")[0], ctx = canvas.getContext("2d"), sprite = new Image(); sprite.src = "spritesheet.png"; sprite.onload = function(){ ctx.fillStyle = ctx.createPattern(spriteBg, "repeat"); ctx.fillRect(0, 25, 500, 500); } 正如你所看到的,它重复了整个图像,而不仅仅是其中的一部分,我不知道如何做最后一部分。

CocoonJS在瓷砖周围绘制阴影

我在iOS上使用CocoonJS启动器进行简单的平铺游戏。 调用canvasdrawImage为瓷砖添加阴影或幽灵边框。 看这个截图: http : //martindrapeau.github.io/cocoon-mario/img/screenshot.png canvas宽960像素。 使用视口元标记:在iOS 8上使用CocoonJS Launcher 2.1.1.2(iPad mini和iPhone 6)。 与消除锯齿相同的行为已closures。 与Scale Aspect Fit和No Scale相同的行为。 如果有人能帮我消除这个问题,那就太好了。 额外的笔记:看到这里的压缩,尝试在CocoonJS启动: http ://martindrapeau.github.io/cocoon-mario/cocoon-mario.zip 以及在您的浏览器中播放的HTML5游戏。 注意它在任何浏览器中都可以find。 http://martindrapeau.github.io/cocoon-mario/

在canvas上绘制一个hexgrid,但使其缩放/可滚动?

我正在开发一个JS / PHP的游戏。 游戏基本上是一个二维平面(hexgrid),每个hex代表一个空间位置。 总的来说,我在1000×1000的canvas上绘制了25 * 25的格子。 我也在这些格子里画出指标。 hexgrid和指标都可以通过使用鼠标滚轮改变的缩放variables重新绘制,然后重新绘制所有的内容*缩放。 这可以工作到一定程度。 如果您滚动得太深,那么这个格子就会变得太大,从它的基本尺寸上来看,canvas不能显示25 * 25的六角形。 所以现在我需要一个“滚动”function,例如一个按住鼠标左键或左移或右移“移动”视图。 不幸的是,我不知道如何实现这一点,特别是因为我需要一个“焦点”variables来指示canvas中心(宽度,高度/ 2)当前位于六边形上下文中的哪个位置。 长话短说,使用一个canvas元素来显示一个对象数组,我将如何去添加一个滚动函数,在上下文中重绘我的canvas到相对位置? 作为参考,我的hexgrid是一个对象,它拥有一个625个子对象(hexes)的数组,每个对象都有一个行/列variables以及像素坐标中的所有6个六角形点。

优化我的Node.js / Js / Socket射击游戏

所以在这里,我做了一个小射手游戏只是为了玩和在我的电脑上运行良好,但与互联网/function较差的电脑(例如在学校/我的朋友很less)的人是相当滞后,这是我的第一个canvas所以我不确定通常的优化技术。 我通过套接字将客户端信息以及其他玩家信息(只有客户端需要的最低限度)发送给客户端60秒钟。 对不起,这个问题有点模糊,基本上只是寻找优化技巧。 如果需要更多的代码,只需要问! 谢谢! 这是我的绘图function: function draw() { ctx.clearRect(0, 0, canvas.width,canvas.height); //grey background ctx.fillStyle="rgba(128, 128, 128, 0.15)"; ctx.fillRect(0, 0,canvas.width, canvas.height); //drawing background grid for(var pos = 25;pos<5000;pos+=25) { ctx.beginPath(); ctx.strokeStyle = "rgba(128, 128, 128, 0.75)"; ctx.lineWidth="1"; ctx.moveTo(0, pos-player.y+pos); ctx.lineTo(canvas.width, pos-player.y+pos); ctx.stroke(); } for(var pos = 25;pos<5000;pos+=25) { ctx.beginPath(); ctx.strokeStyle = "rgba(128, 128, 128, 0.75)"; […]