Articles of html canvas

在javascript中实现可导航的成就菜单

我正在学习JavaScript的游戏devise过程,并希望制作一个单独的成就页,用户可以导航到,将允许他们检查他们在各种游戏上的成就。 (目前我不关心实施本地存储/ cookies等,我现在只想在页面上工作) 所以我的基本想法的要求如下: 能够拖动视口/页面查看所有成就类别,因为它们可能不会全部在较小的屏幕上显示 能够点击一个类别打开一个包含属于该游戏/类别的所有成就的小方块 能够将鼠标放在框中的所有成就,以获得他们是什么的文字描述 可选 :在“overworld”上有连接每个盒子的线条,以向用户显示附近的盒子是否在屏幕外 起初,我以为我会需要canvas才能做到这一点。 我学到了一点,直到我意识到canvas有很多限制,比如不能够做mouseover事件,除非手动实现每一个。 以下是我在进行学习canvastesting时所取得的进展,但这并不是很远: var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.translate(panning.offset.x, panning.offset.y); draw(); } window.addEventListener("resize", resize); var global = { […]

Android的处理屏幕点击dynamic移动视图中的对象

我有一个广泛的问题要问,但我必须从哪里开始……如何处理屏幕上的点击移动物体在视图中的canvas上绘制的最佳方式是什么? 进出口注册屏幕点击很好,我能够得到的X和Y,但是当它来匹配到一个对象在屏幕上的Im在亏损。 我有一个非常古怪的方式遍历现有的对象数组,并检查他们的屏幕上的坐标对数组中的每个项目的坐标,但它没有接近可靠和不工作的大部分时间。 当它工作时,点击最终不会与我点击的项目匹配。 目前这一切都是在一个自定义的视图中进行的,而且正在绘制在一个canvas上,但是在将来,当我有时间的时候,我会用opengl来实现它,或者把钱付给其他人:0 ) 任何意见,教程链接,或建议将不胜感激谢谢。

在javascript中的等距优化

我在优化游戏时遇到了一些问题。 我有一个简单的瓷砖地图像这样在我的情况下,图像是64×64像素: for (i=0; i < 50; i++){ //horizontal for (j=0; j < 50; j++){ // vertical var x = (ij)*(img[0].height/2) + (canvas.width/2)-(img[0].width/2); var y = (i+j)*(img[0].height/4); abposx = x + offset_x; abposy = y + offset_y; total_load++; ctx.drawImage(img[0],abposx,abposy); } } 你可以看到这是一个50乘50的地图。 但是我首先要做下面的优化:找出适合在canvas窗口(包括部分)的最大值,这样就填满了屏幕。 虽然通过施加限制循环的问题,但只会加载许多瓷砖(可以说10乘10),所以地图总是10乘10,而当我滚动瓷砖的其余部分保持卸载的显而易见的原因。 所以我也需要弄清楚如何改变开始的位置…任何想法= /?

是否有可能将文件从Blender 3D转换为SVG?

我想用canvas / svg在html5中构建网页游戏。 我可以将文件从搅拌器转换/导出到canvas / svg吗? 也许通过unity3d?

在canvas中重新创建涂鸦跳跃 – 平台产卵不可及

我已经开始使用Canvas在HTML中重新创建Doodle Jump。 这是我目前的进展 。 正如你所看到的,如果你玩了几秒钟,一些平台将会超出玩家的范围。 我不知道为什么会这样。 这里是负责重新生成平台的代码。 //Movement of player affected by gravity if(player.y > (height / 2) – (player.height / 2)) { player.y += player.vy; player.vy += gravity; } else { for(var i = 0; i < platforms.length; i++) { var p = platforms[i]; if(player.vy < 0) { py -= player.vy; player.vy += 0.08; […]

用Node.js和Socket.io构建一个简单的炸弹人游戏

我正在构建这个游戏,主要是因为我想试用Node.js和Socket.io,游戏更像是一个概念certificate。 首先,我有一个2D网格系统作为游戏地图。 _________________________________________. |____|____|____|____|____|____|____|____|____| . |____|____|____|____|____|____|____|____|____| . |____|____|____|____|____|____|____|____|____| . |____|____|____|____|____|____|____|____|____| . |____|____|____|____|____|____|____|____|____| . |____|____|____|____|____|____|____|____|____| . |____|____|____|____|____|____|____|____|____| . |____|____|____|____|____|____|____|____|____| . |____|____|____|____|____|____|____|____|____| . |____|____|____|____|____|____|____|____|____| . |____|____|____|____|____|____|____|____|____| . |____|____|____|____|____|____|____|____|____| . |____|____|____|____|____|____|____|____|____| . |____|____|____|____|____|____|____|____|____|. 每个值的位置: 0: empty 1: wall – can not be destroyed by explosion 2: obstacles – can be destroyed by explosion 3: bomb 4-9: some powerups […]

在将图块绘制到HTMLcanvas时,如何增加帧率?

我正在使用HTML 5canvas来制作一个简单的一些游戏。 我目前正在使用一个for循环,通过一个瓷砖列表运行,并检查它们是否将被绘制到屏幕上绘制的瓷砖。 for (var i = 0; i < tiles.length; i++) { if (tiles[i].x + scale > pos.x – (canvas.width / 2) && tiles[i].x < (pos.x + scale) + (canvas.width)) { canvas.drawImage(tiles[i].x – pos.x, tiles[i].y – pos.y, scale, scale, "img/Tiles/" + tiles[i].Tile + ".png") } } 我也使用这个自定义库来绘制图像到屏幕上: this.drawImage = function(x, y, width, height, src, […]

投球 – 距离和力量

我有一个问题,我需要一个公式来计算距离和力量的基础上,在手机上拖动手指的速度。 有什么办法可以看看? 而且还显示了线路的球的轨迹… 一个例子是口袋妖怪去,看到图像(用户按下球,并向上拖动手指)。 有什么可以学习的例子吗?

当我知道子弹的起点X和Y,子弹的角度,速度和距离时,检查子弹是否与敌人发生碰撞

这是我玩家点击攻击时创建的子弹 var angInRadians = Math.atan2(data.y – playerArr[i].y, data.x – playerArr[i].x);//data.y & data.x is mouseY and mouseX var temp = angInRadians * (180/Math.PI); function newBullet() { this.attack = temp; this.playerX = playerArr[i].x; this.playerY = playerArr[i].y; this.speed = 10; this.traveled = 0; } 然后在我的游戏循环中,我这样做 for(var j = 0;j<playerArr[i].bullets.length;j++) { playerArr[i].bullets[j].traveled += playerArr[i].bullets[j].speed; } 然后画出子弹我正在做这个 ctx.translate(playerArr[i].bullets[j].playerX, playerArr[i].bullets[j].playerY); ctx.rotate(playerArr[i].bullets[j].attack […]

清除只是对象,而不是整个canvas,留下一个有害的踪迹

我正在通过poo开发一个平台游戏。 我听说是更有效地清除你正在绘制的对象 ,而不是清除整个canvas。 所以我正在处理这个问题,当玩家的速度player.Xvel有一个整数值的时候一切顺利。 但是当我使用浮点数值作为速度的时候,我的物体在它后面留下了一条条纹痕迹,就像条纹和空白的条形码一样。 你能帮我找出造成这个神器的原因吗? var canvas = {}; canvas.obj = document.getElementById('canvas'); canvas.ctx = canvas.obj.getContext('2d'); canvas.width = canvas.obj.width; canvas.height = canvas.obj.height; var Object = function() { this.draw = function() { switch (this.fill) { case true: canvas.ctx.fillStyle = this.color; canvas.ctx.fillRect(this.x, this.y, this.width, this.height); break; case false: canvas.ctx.strokeStyle = this.color; canvas.ctx.strokeRect(this.x, this.y, this.width, this.height); break; default: […]