为什么有时在这个二十一点游戏中 img 会跳跃 [英] Why sometimes does the img jump in this Blackjack game
问题描述
在这个二十一点游戏中(https://schaulcode.github.io/blackjack/)有时在发牌时用 javaScript 编写，img 会跳跃.看起来代码执行得更快，浏览器可以绘制图片.有趣的是，这只发生在网上，在开发过程中，当整个程序在我的机器上本地时，这个问题没有发生.
In this Blackjack game (https://schaulcode.github.io/blackjack/) written in javaScript sometimes when the cards get dealt the img jumps. it looks like the code gets executed faster the the browser can paint the picture. Interestingly this only happens online, during development when the whole program was locally on my machine this issue didn't occur.
谁能解释一下背后的原因以及解决问题的最佳方法是什么?
Could anyone explain the reason behind it and what is the best way to solve the problem?
这里是github上源代码的链接:https://github.com/schaulcode/blackjack/blob/master/js/script.js
here is a link to the source code on github: https://github.com/schaulcode/blackjack/blob/master/js/script.js
负责翻牌的函数称为turnCard()，由函数moveCard()调用
the function responsible for turning the card is called turnCard() and its called by the function moveCard()
这是相关的代码:
moveCard(posX,posY){
let card = document.getElementById("deck-cards-container").lastChild;
card.classList.add("card-dealing");
card.classList.remove("card-on-deck")
card.style.top = posY + "px";
card.style.left = posX + "px";
if(this.type != "com" || this.hand.length == 1 || turn == "com"){
this.turnCard(card)
}else{
card.lastChild.lastChild.classList.remove("card-back");
card.lastChild.lastChild.classList.add("card-back-com");
}
var promise = new Promise((res)=>{
card.addEventListener("transitionend",(e)=>{
if(e.propertyName == "top") res(card)
})
})
return promise
}
turnCard(card){
let pic = this.hand[this.hand.length-1][Object.keys(this.hand[this.hand.length-1])[0]]
card = card.lastChild
card.style.transform = "rotate3d(0,100,0,90deg)";
card.style.transition = "transform 250ms linear";
card.addEventListener("transitionend",()=>{
card.lastChild.classList.remove("card-back");
card.lastChild.classList.add("card-front");
// let pic = this.hand[this.hand.length-1][Object.keys(this.hand[this.hand.length-1])[0]]
card.lastChild.src = "./cards/PNG/" + pic;
card.style.transform = "rotate3d(0,1,0,180deg)";
card.style.transition = "transform 250ms linear";
})
return new Promise(res => setTimeout(()=>res("done"),1650));
}
推荐答案
正如我在问题中所指出的，这个问题只在应用程序上线时发生，但在本地机器上开发期间从未发生过.所以每次玩新卡时，浏览器都不能这么快地下载图像.
As I pointed out in the question, this issue only happend once the application was online but during development on the local machine it never happened. So it seemed that the browser couldn't download the image so fast every time a new card was played.
为了解决这个问题，我在
To fix that problem I added this piece of code in the <head>
<link rel="preload" as="image" href="cards/PNG/2C.png">
<link rel="preload" as="image" href="cards/PNG/3C.png">
<link rel="preload" as="image" href="cards/PNG/4C.png">
<link rel="preload" as="image" href="cards/PNG/5C.png">
<link rel="preload" as="image" href="cards/PNG/6C.png">
<link rel="preload" as="image" href="cards/PNG/7C.png">...
现在我在页面加载时直接预加载所有图像，浏览器不再需要单独下载每个图像，从而加快发牌时的显示时间.因此，图像不再有跳转.
Now I Preload all images straight when the page loads and there is no need anymore for the browser to download each image individually, speeding up the display time when the card is dealt. And therefore there is no jump int the images anymore.
这篇关于为什么有时在这个二十一点游戏中 img 会跳跃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
