php - 在主循环中加载 ajax 请求
问题描述
大家好,我正在研究用 JavaScript 编码的多人游戏,我想从数据库中获取数据(x,y 坐标)并将其插入 JavaScript 中,这将是流畅的动画,问题是 ajax 不能加载数据如此之快(25 fps)任何想法如何插入数据?
首先,boatPosX 和boatPosY 在文件的开头被硬编码为 canvas.width/2 和 canvas.height/2 让我们说。然后是单击按钮事件,它检查当您向右移动时,boatPosX 在画布上增加 5px。每次移动后,xy 坐标都会使用 ajax 发送到数据库。现在其他玩家必须在轮到他的时候看到对手在画布上移动,因此我们需要在 render() 主循环中几乎实时地从数据库中获取 xy 数据,并使用数据库中的 xy 数据绘制图形。
function render(viewport) {
context.save();
// if(Math.floor(boatPosX / 36) < 10) {
context.translate(view.x, view.y);
//}
//if(Math.floor(boatPosX / 36) == mapArray.length)
requestAnimationFrame(render);
var oldPosX = boatPosX;
var oldPosY = boatPosY;
var oldViewX = view.x;
var oldViewY = view.y;
for (let i = 0; i < mapArray.length; i++) {
for (let j = 0; j < mapArray[i].length; j++) {
if (mapArray[i][j] == 0 || 3) {
this.sprite.draw(
background,
190,
230,
26,
26,
j * this.sprite.width,
i * this.sprite.height,
this.sprite.width,
this.sprite.height
);
}
if (mapArray[i][j] == 1) {
this.sprite.draw(
background,
30,
30,
26,
26,
j * this.sprite.width,
i * this.sprite.height,
this.sprite.width,
this.sprite.height
);
}
if (mapArray[i][j] == 2) {
this.sprite.draw(
background,
200,
20,
26,
26,
j * this.sprite.width,
i * this.sprite.height,
this.sprite.width,
this.sprite.height
);
}
if(Math.floor(boatPosX / 36) == mapArray[i].length - 2) {
//console.log("finish");
//boatPosX = Math.floor(mapArray[i].length * 36);
moveCharacter = false;
boatPosX = 580;
endGame();
}
}
//console.log(Math.floor(mapArray[i].length * 36));
}
$.ajax({
method: 'get',
url : 'multiplayer/x.php',
success : function(data){
this.ship.drawimage(boat, data, boatPosY, 50, 50);
}
})
this.ship.drawimage(boat, boatPosX, boatPosY, 50, 50);
this.ship2.drawimage(boat, boatPosX2, boatPosY2, 50, 50);
if (view.x == -105) {
view.x = -105;
}
//console.log(view.x)
var lineHeight = 16 * 2.286;
var textWidth = context.measureText(theArray[moveCount].question).width * 3;
context.textAlign = 'left';
context.textBaseline = 'top';
context.font="14px Verdana";
context.fillStyle = 'rgba(0, 0, 0 ,0.9)';
context.fillRect(boatPosX + ship.width / 2, boatPosY - ship.height / 2, textWidth, lineHeight);
context.fillStyle = 'white';
if(moveCount < theArray.length) {
context.fillText(theArray[moveCount].question, boatPosX + ship.width / 2, boatPosY - ship.height / 2);
}
context.fillText(theArray[moveCount].question, boatPosX + ship.width / 2, boatPosY - ship.height / 2);
answerBtn1.innerHTML = theArray[moveCount].answer1;
answerBtn2.innerHTML = theArray[moveCount].answer2;
if(isPositionWall(boatPosX + 36, boatPosY)) {
//boatPosX = oldPosY;
console.log("collision");
}
if(foundGold(boatPosX + 36, boatPosY)) {
goldAmount+= 1;
gold.innerHTML = goldAmount;
}
checkMoveCounter();
//console.log(mapArray[Math.floor(boatPosX / 36)]);
//console.log(mapArray[Math.floor(boatPosX / 36)][Math.floor(boatPosX / 36)]);
//RENDER FUNCTION END
context.restore();
};
解决方案
推荐阅读
- c# - 在检查器中设置值与在 Unity 中设置默认值相同吗?
- .net - 获取“BotAuthenticator 无法验证传入请求!” 在示例应用程序中
- python - 导入 3D 网格并输出其 2D 投影
- php - Symfony4 UserInterface 缺失 ->getId() 如何访问用户 ID
- c++11 - 自动化方法调用 C++
- python - 如何从静态外部类中构造内部类
- ios - 如何引用以编程方式添加的 TextFields 从 Swift 内部获取数据?
- java - 如果我们在运行时在 HBase 中创建 NameSpaces 和 Tables,它会影响应用程序的性能吗?
- servicestack - ServiceStack.OrmLite:ServiceStack.Text.AssemblyUtils.ToTypeString(类型类型)中的 NullReferenceException
- lucene - 如何从 lucene 索引数据中查找电子邮件 ID