Articles of html canvas

HTML5canvas上使用vector和速度的2Danimation

我把星舰从一个地方移到另一个地方。 在创建一个vector,规范化和量化它。 让我们假设我的向量看起来像这样 Vector x: 156, y: -90, m: 180.0000000546, nx: 0.8661855860486004, ny: -0.49972245348957717, 目前animation船舶运动的方式是: if (! action.animated){ if (action.type == "move"){ if (game.ships[i].actions[j].vm > 0){ // v is the Vector above ! game.ships[i].x += action.v.nx; game.ships[i].y += action.v.ny; game.ships[i].actions[j].vm–; } else { game.ships[i].actions[j].animated = true; } 所以基本上,即时通讯使用requestanimationframe和一个循环来移动星等, 每帧等于1幅/ 1单位长度(px) 。 到目前为止,它正在工作(但事实上,船只animation比它应该多一个)。 然而,假设我有两艘飞船 ,其中一艘有180级vector,另一艘有200级 ,我同时在animation,我怎样才能制作一个animation,可以更快地移动更快的飞船,也就是说,两艘飞船都应该开始移动并结束在同一帧中移动 […]

角色移动重置HTML5游戏中的x&y位置

我正在做一个HTML5游戏,而我正在试图让角色移动。 大多数情况下,角色(矩形方块)正在移动,但不是从其起始位置移动。 相反,当我按下移动键时,角色的x位置和y位置重置为0,0。我的问题是,为什么角色的位置在开始移动之前被设置为0,0? 我已经在项目中join了一个Dropbox的链接,这样就可以更容易地看到发生了什么,但是这里有一个参考的移动脚本。 initMap.js脚本,第81 – 92行 case "Player": gameObjectsLayerCtx.fillStyle = "rgb(0, 0, 0)"; gameObjectsLayerCtx.fillRect(xPos, yPos, destWidth / 3, destHeight / 3); window.onkeydown = function(ev){ var key = ev.key; if(key == "w"){ yPos += 5; gameObjectsLayerCtx.clearRect(0, 0, gameObjectsLayer.width, gameObjectsLayer.height); gameObjectsLayerCtx.fillRect(xPos, yPos, destWidth / 3, destHeight / 3); } }; break; 项目 脚本是initMap.js脚本,移动function来自第81 – 92行 角色的起始位置 […]

JavaScript游戏相机,跟随我的球员

我在这里尝试游戏开发,但我的玩家disapears我的玩家只能走在屏幕上,永远不会再被看到,所以我想知道如果有人可以帮我添加一个相机,我的游戏,让玩家,让他居中在屏幕上,但允许他走到墙壁,而不是停在这里是我的游戏代码:) <html> <body> <canvas id="canvas"> </canvas> </body> </html> <script> var audio = new Audio('sounds/theServerRoom.mp3'); audio.play(); // Create the canvas var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.body.appendChild(canvas); // Background image var bgReady = false; var bgImage = new Image(); bgImage.onload = function() { bgReady = true; }; bgImage.src […]

玩家在物体后面移动

我在RPG JS和Browser Quest上玩耍,玩家在移动的时候,可以在树木或房屋后面走路,所以玩家在物体后面“有效”消失。 这个效果是如何产生的? 我现在正在使用javascript和canvas来构建和RPG游戏,并且很乐意尝试在游戏中实现这一点。 我正在为我的角色工作。

我们如何在Canvas上定义ViewObject(Bitmap)的dynamicpath

我目前正在一个2D的Android游戏, 在这个游戏中,一个视图对象(位图)正在移动屏幕上的抛物线path就像在这个图像中一样,但是这个path是静态的,静态path正在通过canvas上的符文graphics, 和签名图一样。 位图移动代码在这个静态path是 //animation step private static int iMaxAnimationStep = 900; private int iCurStep = 0; private Path ptCurve = new Path(); //curve private PathMeasure pm; //curve measure private float fSegmentLen; //curve segment length //init smooth curve PointF point = aPoints.get(0); ptCurve.moveTo(point.x, point.y); for(int i = 0; i < aPoints.size() – 1; i++){ point […]

有没有办法用createjs为游戏创建多分辨率graphics?

我正在使用createjs框架进行游戏的高级开发。 不过现在是时候把它导出到一些平台上了。 graphics是为iPad 3分辨率制作的。 我想将它们导出到处理能力较低的设备,如iPhone 4或低端Android。 但高清资产耗尽了他们的小处理器。 调整所有文件的大小不是一个解决scheme。 图像加载器必须有一些“缩放因子”,或者其他机制才能获得正确大小的图像。 如果我的游戏canvas的虚拟宽度为1000px,而我的资源宽度为1000px,则canvas将由资源填充。 如果我把它调整到一半的大小,宽度将会是500px,而canvas将会被填满一半。 应该有一个缩放因子应该得到displayObject (不是资产),并将其sizeX和sizeY设置为两倍大小再次填充屏幕。 我可以手动完成每一个,但我正在寻找一个更好的解决scheme。

滚动世界各地的地图

我正在开发一个TBS(回合制策略)游戏。 我已经创建了一个简单的canvas渲染器来呈现六边形的地图。 我已经在地图上实现了滚动。 我目前的问题是,我想让它像在文明游戏,你可以滚动世界各地。 但是我有点困惑于如何实现这一点。 我有想检查一个tile是否被渲染,如果左边还有空间渲染下一个兄弟,等等,但是这会变成长循环。 我的地图数组(2d)拥有所有的瓷砖,每个瓷砖都有一个拥有所有兄弟的成员。 你将如何解决这个问题? 这是一个例子的截图。 你可以在http://civ.minerjs.com上查看。 该代码也可以使用开发人员工具在网站上浏览。 谢谢阅读!

实现轨道速度的初始力量

我正在试图让小行星绕轨道运行一个声称引力的黑洞。 目前有些部分正在工作,如黑洞声称重力,吸引小行星和摧毁它们。 有时小行星,或更小的块最终在黑洞周围的轨道。 但是我的愿望是让他们在游戏开始时随机运行。 重力 首先请注意,我相信很多这个math背后的math是closures的,我现在正在窃听一个概念,一旦有足够的部分到位,我打算回来,并适当的规模和单位的一切。 接下来,它是用JS编写的,但概念应该是相当通用的。 function attractBodyToBlackHole(body) { var sx = body.position[0]; var sy = body.position[1]; var bx = blackHoleBody.position[0]; var by = blackHoleBody.position[1]; var angleToBody = Math.atan2(sx – bx, sy – by); var distanceToBody = Math.sqrt(Math.pow(sx – bx, 2) + Math.pow(sy – by, 2)); var magGrav = 0.8 – (distanceToBody / 14); […]

如何绘制更小的小精灵?

我已经创建了25px(宽)* 34px(高)的分辨率的图像( 我知道这是不寻常的,但它现在不打扰我 )。 问题是,当我尝试通过创建一个位图显示它,它变得真的很小,在我的银河S4。 它应该看起来像一个像素,有点像一个飞扬的鸟精灵。 我也检查了这些精灵,他们甚至比我的更小,但它显示的比我的精灵在屏幕上大得多。 我想知道如果我可以让它看起来更大,而不缩放。 有没有办法让我的精灵看起来更大? @Override protected void onDraw(Canvas canvas) { Log.i(TAG, "onDraw called"); BitmapFactory.Options op = new BitmapFactory.Options(); op.inPreferredConfig = Bitmap.Config.ALPHA_8; bm.setDensity(DisplayMetrics.DENSITY_DEFAULT); bm = Bitmap.createBitmap(BitmapFactory.decodeResource(getResources(),R.drawable.giraffe_default,op)); canvas.drawBitmap(bm,getWidth()/2,getHeight()/2,null); //get from res, set coords to 10,10 } 这是我绘制我的canvas和位图的onDraw方法。 正如我所说,我的形象似乎是如此之小,我几乎看不到它。

在canvas上移动时,矩形互相清晰

移动矩形后,我遇到了这个问题,他们似乎删除了另一个。 很可能这是clearRect(…)方法的一个问题。 这是我正在使用的干净的function: clean: function(element){ // All default values clean all the screen if(typeof element.x === 'undefined'){ element.x = 0; } if(typeof element.y === 'undefined'){ element.y = 0; } if(typeof element.width === 'undefined'){ element.width = canvas.width; } if(typeof element.height === 'undefined'){ element.height = canvas.height; } // In case values are entered if(element.type === 'rectangle'){ ctx.clearRect(element.x,element.y,element.width,element.height); […]