Articles of html canvas

良好的技术解决scheme,以建立一个ascii地图和移动浏览器中的人物(如矮人要塞)?

我想为我的游戏网站构建一个web应用程序,其中包括使用文本字符来表示动物和人物,并让他们在具有独立(服务器驱动)的AI的地图上移动。 所以本质上,在浏览器中的矮人堡垒地图: 随着移动的生物,小怪,NPC和PC。 虽然并不是说我不想达到这个规模,但我可能会随时开始展示这个内容的四分之一左右。 可能一些背景/不动的瓷砖可以静态加载。 但是对于生物/动物和可以移动的东西,我不确定哪种技术解决scheme最有效。 我知道<canvas>虽然我不知道它的function是否适合这个用例。 当然,JavaScript的一些量将是必要的。 有没有适合这种用例的JavaScript库或canvas库? 另一个我不知道的技术? 任何人都知道任何类似的网站的例子,以便我可以从他们的想法,

肮脏的二维地图渲染

当谈到HTML5的地图渲染时,我不断听到人们谈论“脏渲染”。 我已经谷歌search了GameDev,但没有太多关于它。 究竟是什么? 如何正确实施?

在运行APK时,android性能不佳,在浏览器中运行良好

我使用Phaser引擎在HTML5中创建了一个小游戏项目(尝试了1.1.5和1.1.6)。 然后将其移植到移动平台,使用Phonegap / Cordova for Windows Phone 8,Android和iOS。 在我的游戏中,大约有10个元素,这些元素会变成animation(从a点移动到b点,同时也有一些旋转)。 在iOS和Windows Phone 8上,我没有遇到任何问题。 但是对于Android来说,性能是不可接受的。 另一方面,如果我通过设备浏览器运行我的游戏,它运行平稳没有任何滞后。 但编译APK运行非常生涩,元素移动非常缓慢&闪烁的方式。 我已经检查清单文件中的Android硬件加速标志设置为“true”。 试图改变它也是错误的,但这并没有反映任何性能的变化。 我已经检查了三星S2设备上的Android 4.2上的相同,性能更好。 但在华硕Nexus Tab 7(运行Android 4.4),它非常干,而操作系统和设备都是最新的。 另外在运行Android 4.3(三星Galaxy Grand Duos)的另一台设备上进行检查,在这方面performance也不是很好。 在我的游戏中,尝试了WebGL / Canvas渲染(Phaser引擎使用Pixi.js,如果不支持WebGL,则使用Pixi.js回退到2dcanvas),但是不会更改。 与easeljs类似。 如果其他人面临类似的问题,并可以建议任何方式获得本地performance。 我查了一下cocoonjs的例子,虽然看起来很顺利,可以接受,但我不能去那条路。

多人游戏HTML5,Node.js,Socket.IO

我尝试用HTML5 Canvas,JavaScript(使用John Resig简单的inheritance库)和Node.js与Socket.IO创建简单的多人游戏。 我的客户代码: var canvas = document.getElementById('game'); var context = canvas.getContext('2d'); var socket = new io.Socket('127.0.0.1',{port:8080}); var player = null; var UP ='UP', LEFT ='左', DOWN ='DOWN', RIGHT ='RIGHT'; socket.connect(); socket.on('connect',function(){socket.send(); 的console.log( '联系!'); player = new Player(50,50); }); socket.on('message',function(msg){ if(msg =='UP'){ player.moveUP(); } else if(msg =='LEFT'){ player.moveLEFT(); } else if(msg =='DOWN'){ player.moveDOWN(); } else […]

在构建基于浏览器的游戏时,要canvas还是不canvas?

背景:我有广泛的发展背景,但是最后一次我编写游戏是在很多年以前。 我的JavaScript技能是相当有限的,我打算通过构建一个简单的游戏 – 俄罗斯方块,吃豆人或其他复杂程度的东西来改善它们。 问题:在我看来,我需要做的基本select是我是否应该呈现在<canvas>元素上。 用canvas,我有基本的工具来渲染点,线和更复杂的东西。 据推测,有或将会有各种框架来帮助解决这个问题。 如果没有canvas,我可以将我的对象保留在DOM树中,就像常规的网页一样,只是相当复杂,有许多重叠的元素。 一种方法比另一种更好吗? 它们是相互排斥的吗? 我怎么知道选哪个?

我应该如何对等距游戏中的图像进行sorting,以便它们以正确的顺序出现?

这似乎是一个相当简单的问题,但我有很多困难。 我应该如何正确地对等距游戏中的图像进行分类? 在正常的2D自上而下游戏中,可以使用屏幕y轴对图像进行sorting。 在这个例子中,树木被正确地分类,但是等距的墙壁却没有。 示例图像:按屏幕ysorting Wall2是wall1下面的一个像素,因此它被绘制在wall1之后。 如果我按等轴测y轴sorting,那么墙壁显示的顺序是正确的,但是树木没有。 示例图像:按等轴测图ysorting

Box2D有没有其他的JS端口?

我一直在考虑为HTML5创建一个自上而下的2D汽车游戏。 对于我的第一个游戏,我写了自己的物理和碰撞,但为了这个,我想用一些现成的库。 我find了Box2D和它的JS端口。 http://box2d-js.sourceforge.net 这似乎是相当老的港口,在2008年。它缺乏当前Box2D的许多function,或者它有重大问题吗? 有没有其他的select呢?

HTML5游戏(canvas) – 用户界面技术?

我正在使用PhoneGap为移动(Android / iPhone / WebOS)构建JavaScript / HTML5游戏(使用Canvas)。 我目前正在devise如何构建UI和游戏板以及它们应该如何交互,但我不确定最佳解决scheme是什么。 这是我能想到的 – 使用诸如drawImage和fillText之类的东西在canvas中构建UI直接使用常规DOM对象在canvas之外构建用户界面的一部分,然后在用户界面元素需要重叠画板时在canvas上浮动div。 有没有其他可能的技术,我可以用来构建我没有想到的游戏用户界面? 另外,这些将被认为是“标准”方式(我知道HTML5游戏不是很stream行,所以可能还没有一个“标准”的方式)? 最后,你会推荐/使用哪种方式? 提前谢谢了!

HTML5 Canvas游戏双缓冲?

我的简单canvas游戏似乎在Mac / Linux上的Chrome和FF上运行良好。 我还没有机会在智能手机或Windows环境中进行testing。 它不使用双缓冲,但我已经看到一些使用它的JScanvas的例子。 什么时候推荐使用双缓冲? 只有特定的浏览器才有所作为? 有没有重大的性能问题? 谢谢!

管理二维数组中的文本地图,在HTML5canvas上绘制

所以,我正在制作一个HTML5 RPG游戏。 地图是一个<canvas> (512px宽度,352px高度| 16个瓷砖,11个瓷砖自上而下)。 我想知道是否有更有效的方式来绘制<canvas> 。 这是我现在的方式。 瓷砖如何加载和绘制在地图上 该地图正在使用Image()片以瓦片(32×32)绘制。 通过一个简单的for循环加载图像文件,并将其放入一个名为tiles[]的数组中,以使用drawImage()进行绘制。 首先,我们加载瓷砖… 这是如何完成的: // SET UP THE & DRAW THE MAP TILES tiles = []; var loadedImagesCount = 0; for (x = 0; x <= NUM_OF_TILES; x++) { var imageObj = new Image(); // new instance for each image imageObj.src = "js/tiles/t" + x + […]