我开始尝试用Javascript开发游戏,在进一步探讨该主题之前,我只遇到一个问题.
在每帧绘制一个新画布还是仅更改CSS的left,right,top和bottom属性是否更有效率(从性能角度而言)？
一个游戏中的乒乓球示例：
该代码每秒将被调用60次以上,假设我们不仅拥有一个球,而且拥有更多的玩家,可能参与的游戏更加复杂,环境中的实体也需要更新,等等.
//Draws a NEW square in a NEW location that has been
//prevIoUsly updated by a game method
canvasContext.fillRect(posX, posY, ballW, ballH);
要么
//ball is an stand alone canvas
//Updates the position
ball.style.left = prevIoUsPos + 1;
解决方法:
最好的方法是自己在一个画布上全部渲染,或者使用多个球并修改其transform CSS property.
使用转换比使用顶部和左侧更快.你可以这样做：
function updatePos() {
var e = document.getElementsByClassName('ellipse');
for (var i = 0; i < e.length; i++) {
e[i].dataset.x = (parseFloat(e[i].dataset.x) || 0) + Math.random() * 10 - 5;
e[i].dataset.y = (parseFloat(e[i].dataset.y) || 0) + Math.random() * 10 - 5;
e[i].style.transform = 'translate(' + e[i].dataset.x + 'px, ' + e[i].dataset.y + 'px)';
}
requestAnimationFrame(updatePos);
}
updatePos();.ellipse {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background: #f00;
border-radius: 50%;
border: 1px solid;
}<div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div>本质上,您只需要固定顶部和左侧位置并修改变换即可.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
