Javascript缓慢的玩家移动

更新 将其更改为以下内容，并注意到速度提高。现在的问题是，播放器只需滑动而不设置帧动画

    var animator, frames;
    animator = window.setInterval(function(){
    if(currentFrame == totalFrames){
        clearInterval(animator);
        currentFrame = 0;
        update();
        isMoving = 0;
        return;
    }
    xPosition += x;
    yPosition += y;
    frames = window.requestAnimationFrame(animator);
    currentFrame++;
    update();   

},frames);

我目前面临的一些问题是：地图边缘代码部分完全被破坏了。我只是想让玩家不能移动到canvas.width/canvas.height之外。另外，我的球员动作非常缓慢，反应迟钝。我想这是因为我加了一张流动支票。我希望能够移动得更平稳。现在这个角色移动的时间太长了，我觉得自己好像落后了。此外，由于某些原因，有时它会移动不止一次。当它发生时，它是完全随机的。任何帮助都将不胜感激

var playerSprite = new Image();
playerSprite.src = "male.png";

var playerWidth = 64;
var playerHeight = 64;
var currentFrame = 0;
var totalFrames = 8;

var moveDistance = 4; // move 4 pixels
var xPosition = 300;
var yPosition = 200;
var direction = 2; // south, options: 0 - 3

var isMoving = 0;

var canvas, context;
window.addEventListener("load", function(){
    canvas = document.getElementById('map');
    context = canvas.getContext('2d');
 })


function draw(){
    context.drawImage(playerSprite,currentFrame * playerWidth, direction*  playerHeight ,playerWidth,playerHeight,xPosition,yPosition,playerWidth,playerHeight);
}

function update()
{
    clearMap();
    draw();
}

function move(x, y){

    if(isMoving)return;
    isMoving = 1;

    if(x > 0) direction = 3;
    else if(x < 0) direction = 1;
    if(y > 0) direction = 2;
    else if(y < 0) direction = 0;

    //update direction no matter what, implemented 
    // in order for directions to update
    // when changing directions in map edges
    //update();

/*      Broken

    if(xPosition + playerWidth + x > canvas.width)return; //works
    else if(xPosition - x < 0)return; // player gets stuck

    if(yPosition + playerHeight + y > canvas.height)return; //works
    else if(yPosition - y < 0)return; // player gets stuck

    //xPosition += x;
    //yPosition += y;
*/
    //actual animation update
    var animator;
    animator = window.setInterval(function(){
        if(currentFrame == totalFrames){
            clearInterval(animator);
            currentFrame = 0;
            update();
            isMoving = 0;
            return;
        }
        xPosition += x;
        yPosition += y;
        currentFrame++;
        update();

    },1000/16);
}
function clearMap(){
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function keyPress(e)
{

    if(currentFrame == totalFrames){
        currentFrame = 0;
    }

    switch(e.keyCode){
        case 38: move(0, -moveDistance); break;
        case 40: move(0, +moveDistance); break;
        case 39: move(+moveDistance, 0); break;
        case 37: move(-moveDistance, 0); break;
    }

}

window.addEventListener("load", update, false);
window.addEventListener("keydown",keyPress);

var playerSprite=new Image（）；
playerSprite.src=“male.png”；
var playerWidth=64；
var playerHeight=64；
var currentFrame=0；
var totalFrames=8；
var moveDistance=4；//移动4像素
var xPosition=300；
变量位置=200；
变量方向=2；//南部，选项：0-3
var isMoving=0；
var，上下文；
addEventListener（“加载”，函数（）{
canvas=document.getElementById（'map'）；
context=canvas.getContext（'2d'）；
})
函数绘图（）{
绘图图像（playerSprite、currentFrame*playerWidth、direction*playerWidth、playerWidth、playerWidth、xPosition、yPosition、playerWidth、playerWidth）；
}
函数更新（）
{
clearMap（）；
draw（）；
}
功能移动（x，y）{
如果（正在移动）返回；
isMoving=1；
如果（x>0）方向=3；
如果（x<0）方向=1，则为else；
如果（y>0）方向=2；
如果（y<0）方向=0，则为else；
//更新方向，无论发生什么，都要执行
//以便更新方向
//在贴图边中更改方向时
//更新（）；
/*破碎的
if（xPosition+playerWidth+x>canvas.width）返回；//有效
否则如果（xPosition-x<0）返回；//玩家被卡住
如果（yPosition+playerHeight+y>canvas.height）返回；//有效
否则如果（yPosition-y<0）返回；//玩家被卡住
//xPosition+=x；
//y位置+=y；
*/
//实际动画更新
var动画师；
animator=window.setInterval（函数（）{
如果（currentFrame==totalFrames）{
clearInterval（动画师）；
currentFrame=0；
更新（）；
isMoving=0；
返回；
}
xPosition+=x；
y位置+=y；
currentFrame++；
更新（）；
},1000/16);
}
函数clearMap（）{
clearRect（0，0，canvas.width，canvas.height）；
}
功能按键（e）
{
如果（currentFrame==totalFrames）{
currentFrame=0；
}
开关（如钥匙代码）{
案例38：移动（0，-移动距离）；中断；
情况40：移动（0，+移动距离）；中断；
案例39：移动（+moveDistance，0）；中断；
案例37：移动（-moveDistance，0）；中断；
}
}
window.addEventListener（“加载”，更新，错误）；
window.addEventListener（“向下键”，按键）；

我更改的要点：

• 任何地方都不能使用

  setInterval

  。相反，我们让浏览器使用

  requestAnimationFrame

  处理FPS的速率
• 一个中央游戏循环（

  update（）

  ）。以前，每次按下一个键，你都要做一系列的计算并开始新的背景循环。那太糟糕了。如果有人要捣碎箭头键，浏览器必须在后台处理100+

  setInterval

  s
• 我们不用在关键事件中进行任何计算，而是使用一个变量来跟踪按下的按钮。然后在每帧发生的游戏循环中，如果按住箭头键，我们可以将玩家移动几个像素

为您准备的练习：

• 动画速度快得惊人，因为玩家帧在每一个游戏帧中都是高级的。慢点
• 如果一台速度更快的计算机以每秒60帧的速度运行，播放器将每秒移动60*4=240像素。如果速度较慢的计算机以20fps的速度运行，则播放器每秒仅移动20*4=80像素。这实际上是一个巨大的差异。要使游戏在任何平台上都能始终如一地运行，您应该根据游戏运行的速度多多少少移动玩家。开始游戏。此外，文档也会有所帮助

代码如下：

var playerSprite = new Image();
playerSprite.src = "male.png";

var playerWidth = 64;
var playerHeight = 64;
var currentFrame = 0;
var totalFrames = 8;

var direction = 2; // south, options: 0 - 3
var moveDistance = 4; // move 4 pixels
var xPosition = 300;
var yPosition = 200;

var left = 0,
    right = 0,
    up = 0,
    down = 0;

var canvas, context;

window.addEventListener("keydown", keyPress);
window.addEventListener("keyup", keyRelease);
window.addEventListener("load", function(){
    canvas = document.getElementById('map');
    context = canvas.getContext('2d');

    // tells the browser to call update() as soon as it's ready
    // this prevents lockups, and also the browser regulates the FPS
    window.requestAnimationFrame(update);
});

function update() {
    // EVERYTHING game related happens in update (except listening for key events).
    // This keeps everything organized, and prevents any lag/slowdown issues

    // handles player movement and animation
    movePlayer();

    // handles all drawing
    draw();

    // lets the browser know we're ready to draw the next frame
    window.requestAnimationFrame(update);
}

function movePlayer() {
    if(left) {
        xPosition -= moveDistance;
        direction = 1;
    }
    if(right) {
        xPosition += moveDistance;
        direction = 3;
    }
    if(up) {
        yPosition -= moveDistance;
        direction = 0;
    }
    if(down) {
        yPosition += moveDistance;
        direction = 2;
    }

    // all this code happens every frame
    // in english: if we're moving, advance to the next frame
    if(left || right || up || down) {
        currentFrame ++;
        if(currentFrame == totalFrames) currentFrame = 0;
    }
}

function draw() {
    // clear the map
    context.clearRect(0, 0, canvas.width, canvas.height);

    // draw the next frame
    context.drawImage(playerSprite, currentFrame * playerWidth, direction * playerHeight,
                                    playerWidth, playerHeight,
                                    xPosition, yPosition,
                                    playerWidth, playerHeight);
}

// keyPress and keyRelease ensure that the variables are
//  equal to 1 if pressed and 0 otherwise.
function keyPress(e)
{
    switch(e.keyCode){
        case 38: up = 1; break;
        case 40: down = 1; break;
        case 39: right = 1; break;
        case 37: left = 1; break;
    }
}

function keyRelease(e)
{
    switch(e.keyCode){
        case 38: up = 0; break;
        case 40: down = 0; break;
        case 39: right = 0; break;
        case 37: left = 0; break;
    }
}

我改变的要点是：

• 任何地方都不能使用

  setInterval

  。相反，我们让浏览器使用

  requestAnimationFrame

  处理FPS的速率
• 一个中央游戏循环（

  update（）

  ）。以前，每次按下一个键，你都要做一系列的计算并开始新的背景循环。那太糟糕了。如果有人要捣碎箭头键，浏览器必须在后台处理100+

  setInterval

  s
• 我们不用在关键事件中进行任何计算，而是使用一个变量来跟踪按下的按钮。然后在每帧发生的游戏循环中，如果按住箭头键，我们可以将玩家移动几个像素

为您准备的练习：

• 动画速度快得惊人，因为玩家帧在每一个游戏帧中都是高级的。慢点
• 如果一台速度更快的计算机以每秒60帧的速度运行，播放器将每秒移动60*4=240像素。如果速度较慢的计算机以20fps的速度运行，则播放器每秒仅移动20*4=80像素。这实际上是一个巨大的差异。要使游戏在任何平台上都能始终如一地运行，您应该根据游戏运行的速度多多少少移动玩家。开始游戏。此外，文档也会有所帮助

代码如下：

var playerSprite = new Image();
playerSprite.src = "male.png";

var playerWidth = 64;
var playerHeight = 64;
var currentFrame = 0;
var totalFrames = 8;

var direction = 2; // south, options: 0 - 3
var moveDistance = 4; // move 4 pixels
var xPosition = 300;
var yPosition = 200;

var left = 0,
    right = 0,
    up = 0,
    down = 0;

var canvas, context;

window.addEventListener("keydown", keyPress);
window.addEventListener("keyup", keyRelease);
window.addEventListener("load", function(){
    canvas = document.getElementById('map');
    context = canvas.getContext('2d');

    // tells the browser to call update() as soon as it's ready
    // this prevents lockups, and also the browser regulates the FPS
    window.requestAnimationFrame(update);
});

function update() {
    // EVERYTHING game related happens in update (except listening for key events).
    // This keeps everything organized, and prevents any lag/slowdown issues

    // handles player movement and animation
    movePlayer();

    // handles all drawing
    draw();

    // lets the browser know we're ready to draw the next frame
    window.requestAnimationFrame(update);
}

function movePlayer() {
    if(left) {
        xPosition -= moveDistance;
        direction = 1;
    }
    if(right) {
        xPosition += moveDistance;
        direction = 3;
    }
    if(up) {
        yPosition -= moveDistance;
        direction = 0;
    }
    if(down) {
        yPosition += moveDistance;
        direction = 2;
    }

    // all this code happens every frame
    // in english: if we're moving, advance to the next frame
    if(left || right || up || down) {
        currentFrame ++;
        if(currentFrame == totalFrames) currentFrame = 0;
    }
}

function draw() {
    // clear the map
    context.clearRect(0, 0, canvas.width, canvas.height);

    // draw the next frame
    context.drawImage(playerSprite, currentFrame * playerWidth, direction * playerHeight,
                                    playerWidth, playerHeight,
                                    xPosition, yPosition,
                                    playerWidth, playerHeight);
}

// keyPress and keyRelease ensure that the variables are
//  equal to 1 if pressed and 0 otherwise.
function keyPress(e)
{
    switch(e.keyCode){
        case 38: up = 1; break;
        case 40: down = 1; break;
        case 39: right = 1; break;
        case 37: left = 1; break;
    }
}

function keyRelease(e)
{
    switch(e.keyCode){
        case 38: up = 0; break;
        case 40: down = 0; break;
        case 39: right = 0; break;
        case 37: left = 0; break;
    }
}

我改变的要点是：

• 任何地方都不能使用

  setInterval

  。相反，我们让浏览器使用

  requestAnimationFrame

  处理FPS的速率
• 一个中央游戏循环

  ---

  • [canvas]相关文章推荐
  • Canvas 正确的HTML5画布控制点 canvas
  • Canvas 画布-能否将坐标设置为新的原点，以相对地定位元素？ canvas
  • Canvas 使用画布渲染器的点光源照亮具有不同纹理面的ThreeJS立方体？ canvasthree.js
  • Canvas 带有画布对象的自定义Unity预览窗口 canvasunity3d
  • Canvas 使用isPointInStroke更改线条的颜色 canvashtml5-canvas
  • Canvas 如何修复偶数单元格的画布网格？ canvashtml5-canvas

  ---

  • 随机文章推荐
  • 在sparql中搜索部分匹配的字符串 sparql
  • Sparql 如何在fuseki中使用用户定义的函数？ sparql
  • 为什么我必须在SPARQL查询中过滤图形URI？ sparqlrdf
  • SPARQL-Max（）不工作 sparql
  • Sparql 将Sesame存储库复制到新存储库中 sparql
  • Sparql DBpedia获取世界上所有城市-缺少一些 sparql
  • ApacheFuseki：仅公开SPARQL端点接口 sparql
  • Sparql中的属性路径 sparqlrdf
  • SPARQL-从skos中选择：类别-大师37000 sparql
  • Sparql Programmaticali将数据集上载到fuseki sparql
  • 使用Sparql从RDF文件中提取规则 sparqlrdf
  • DBpedia SPARQL为特定球队效力的球员的职业生涯 sparql
  • 如何在另一个sparql查询中进行sparql查询？ sparql
  • Sparql 从OWL本体查询限制值 sparql
  • Sparql Can'；t通过GraphDB API从URL加载一些本体 sparql
  • 如何使用Python确定两个SPARQL查询是否相同？ sparql
  • wikidata SPARQL查询以确定某事物是否是博物馆展览 sparql
  • Sparql Proté中具有相同数据属性的相邻线路部分的区域；gé；5. sparql
  • SparQL查询返回id的类似结果 sparqlrdf
  • SPARQL查询以构造与主题关联的图形 sparqlrdf