Articles of html canvas

安卓帆布绳swing

我正在创建代码,一个玩家在绳子上摆动 目前我得到了这个 double angle = Math.atan2(player_y – center_y, player_x – center_x) – Math.atan2(end_y – center_y, end_x – center_x); if (direction == 'right') { player_x += 10; player_y += 10 * angle; } else { player_x -= 10; player_y -= 10 * angle; } 我知道我必须增加引力,速度等等,但是我不擅长物理学。 问题是如何让绳子摆动更现实? 我不使用任何引擎或框架,只使用本地canvas。 编辑 试过这个代码。 onStart… angle0 = Math.atan2(player_y – center_y, player_x […]

我如何制作一个HTML5canvas瓷砖地图,其中有不是平方边的瓷砖?

我正在创建一个HTMLcanvas贴图,我正在尝试让瓷砖的边缘不显示为正方形,因为瓷砖之间相互融合。 我在互联网上search了好几个小时,但似乎找不到任何东西。 我怎么去做这个? Dropbox链接到项目 我已经包含了使用的图像,所以当项目被下载并在浏览器上运行时,地图应该如下图所示。 这不是我想要的样子,而是它目前的样子。 我知道使用基于贴图的地图可能无法得到这个确切的效果,但这不是一个完美的表示,但是这里是我想要完成的一般概念。 注意角落不再是平方的,而是具有更圆的外观,并且似乎与下一个颜色拼贴混合。 这是我的目标。 提前致谢。

HTMLcanvas,Node WebSocket和像slither.io这样的多人游戏。 如何通过websockets发送视觉数据?

从哪里开始创建像slither.io,agar.io等多人游戏 我只需要学习如何将所有玩家的现场位置和其他数据绘制成一个全屏HTML5canvas,更新频率+/- 100ms。 我已经有websocket服务器,但这只是聊天。 我不知道传送球员和位置的图像。 我的第一个想法是发送所有玩家位置,地图上的当前位置和玩家的所有其他数据的每100msarrays。 var worldSize = [10000,10000]; //width and height in px var currentPosition = [5000,5000]; //center on the map var players = new Array(); //on player join players.push({ id: 1, name: "test", position: [1234,850], //random position on the map points: 100 //example points }); //on player eat point find that player, […]

JavaScript – 从服务器端或客户端实时更新canvas…

我有一个150×150地图的2D瓦片地图游戏13×13视口(一次在canvas上绘制169个瓦片)。 每个瓷砖是32x32px。 显然,我只更新13×13视口… 我想实时更新canvas,因为世界地图将在服务器端进行处理。 至less逻辑…画…应该是服务器端还是客户端? 现在,我正在使用Socket.IO来获取实时数据。 基于当前玩家的x和y,canvas从该人在地图上的位置绘制。 我可以做这两个方面: ( 服务器端 )使用node-canvas通过NodeJS绘制服务器端并传回新的canvas。 可能吗? 因为看来我只能通过PNG做一次。 ( 客户端 )发送新的tileset的169arrays(当玩家移动或动作发生时)。 做逻辑服务器端并从客户端从callback接收的数组中绘制它。 客户端问题:这里的问题是,传输一个大的数组需要几秒钟(2-3),所以有一些滞后。 服务器端问题:没有从输出到客户端的服务器绘制canvas的连续stream…在那里? 还是我不看足够的node-canvas npm模块。 我没有使用任何JavaScript游戏框架。 我最好的select是什么?

按左右键时如何转车

我是新来的帆布和开发一个汽车直行的游戏,现在我想按逆时针方向按左键,顺时针按右键。 目前我正在尝试 var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); function drawSprite(image, x, y, scale = 1,angle = 0){ ctx.setTransform(scale, 0, 0, scale, x, y); // set scale and center of sprite ctx.rotate(angle); ctx.drawImage(image,- image.width / 2, – image.height / 2); ctx.setTransform(1,0,0,1,0,0); // restore default transform // if you call this function many times // […]

一个逻辑错误。 canvas:球物理,反弹

嗨,我正在制作一个模拟一堆球弹跳的程序,但问题是一些球卡在地板上。 由于这是一个逻辑错误,这是很难find。 有人可以帮助,我让下面的snipper代码谢谢。 var output = document.getElementById('output'); var canvas = {}; var ball = []; canvas.obj = document.getElementById('canvas'); canvas.ctx = canvas.obj.getContext('2d'); canvas.width = canvas.obj.width; canvas.height = canvas.obj.height; canvas.clear = function() { canvas.ctx.clearRect(0, 0, canvas.width, canvas.height); }; canvas.preferences = function() { canvas.ctx.strokeStyle = 'rgb(210,210,210)'; canvas.ctx.lineWidth = 1; }; const FRICTION = .9; const MIN_ACCELERATION = 1; […]

限制帧率和input

所以我最近一直在学习HTML5 canvas,遇到了一些麻烦。 我创建了一个构建基于块的二维地图的概念certificate,您可以使用箭头键移动一个字符。 这个效果很好,因为一切都是自由移动的(角色每帧移动1个像素,所以移动stream畅,看起来不错)。 我正在试图摆脱这个代码来创建另一个强制网格运动的概念(就像典型的roguelike一样)。 我已经更新了我的移动代码,以块的大小移动块,但问题是刷新速度太快,以至于看起来像角色正在超速移动。 这里是处理animation的代码片段: function gameLoop() { ctx.clearRect(player.x,player.y,PLAYER_SIZE,PLAYER_SIZE); getInput(); ctx.fillStyle = '#000000'; player.draw(ctx); window.requestAnimationFrame(gameLoop); } 使用requestAnimationFrame()这种运动不是一个好主意吗? 这种事情只是setInterval()更好吗? 我发现一篇文章通过谷歌谈到使用variables的时间,三角洲,FPS等,以限制帧率…但林不知道我明白如何做到这一点与requestAnimationFrame()。 我应该以某种方式持有我的gameLoop()击中requestAnimationFrame(),直到某个时间间隔被击中? 这似乎是只是浪费,因为我需要强制循环的某种…看起来不是太优雅

在HTML5canvas中animation制作精灵

我正在用HTML5 canvas和javascript创建一个2D平台游戏。 我在animation方面有点挣扎。 目前我通过从数组中获取预加载的图像进行animation处理,代码非常简单,在player.update()我调用了一个这样的函数: var animLength = this.animations[id].length; this.counter++; this.counter %= 3; if (this.counter == 2) this.spriteCounter++; this.spriteCounter %= animLength; return this.animations[id][this.spriteCounter]; 这个问题有两个问题:当玩家同时做两个需要animation的动作时,animation速度加倍。 显然this.counter++在同一时间工作两次。 我想如果我用这个开始animation多个精灵,animation的速度将乘以精灵的数量。 其他问题是,我不能让animation只运行一次,而不是按住按键循环。 有人告诉我,我应该创建一个function Animation(animation id, isLooped boolean)和使用像player.sprite = new Animation("explode", false)但我不知道如何使它的工作。

简单的JavaScript HTML5canvas开始菜单

我目前正在寻找一个使用javascript的游戏的简单和基本的开始屏幕,所以基本上它的第一个function,被称为,然后按播放,然后进入游戏。 在网上看,他们似乎都是先进的,似乎也找不到任何教程。

物理太空游戏

我正在制作一个太空游戏,你驾驶一艘船。 我正在努力研究这样一个游戏的物理,到目前为止: var thrust; //between 1 & 100 how much the engines are pushing var mass; // the mass of the spaceship var speed; //the speed at which the spaceship is moving 现在大船会有更多的质量,因此需要更长的时间加速,一旦推力停止,时间会更长。 大船会因为质量而变慢。 小船的速度会加快,速度也会加快,但速度也会加快。 我将如何实现这个游戏? 我可以做关键事件,例如,如果向上按5帧,例如我会使推力提高到每帧10(例如),然后根据质量和推力的某个公式来增加船的速度。 这是游戏:只有用户界面和菜单,但要实现运动之前,得到我的物理学的想法http://www.taffatech.com/DarkOrbit.html