Fatal编程技术网
  • javascript/
  • Javascript 如何删除图像并重新使用它

Javascript 如何删除图像并重新使用它

javascript

Javascript 如何删除图像并重新使用它,javascript,Javascript,我正在尝试用javascript创建一个21点游戏，所有东西都可以很好地绘制卡片，并在达到21点后停止。 我在开始新游戏时遇到问题，我需要删除现有的卡并显示新卡 我试图将显示更改为隐藏，但当我再次将显示更改为可见时，所有旧卡也会弹出。我尝试使用.parentNode.removeChild，但出现了一个问题，即参数为NULL，无法再次使用。。如何删除已存在的参数并使用相同的参数重新开始 它还没有完成，现在是草稿** JavaScript代码： var cards = [1, 2, 3, 4, 5

我正在尝试用javascript创建一个21点游戏，所有东西都可以很好地绘制卡片，并在达到21点后停止。 我在开始新游戏时遇到问题，我需要删除现有的卡并显示新卡 我试图将显示更改为隐藏，但当我再次将显示更改为可见时，所有旧卡也会弹出。我尝试使用.parentNode.removeChild，但出现了一个问题，即参数为NULL，无法再次使用。。如何删除已存在的参数并使用相同的参数重新开始

它还没有完成，现在是草稿**

JavaScript代码：

var cards = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
var images =
    ["media/cards/AC.jpg", "media/cards/2.jpg", "media/cards/3C.jpg", "media/cards/4C.jpg",
        "media/cards/5C.jpg", "media/cards/6C.jpg", "media/cards/7C.jpg", "media/cards/8C.jpg",
        "media/cards/9C.jpg", "media/cards/10C.jpg", "media/cards/JC.jpg", "media/cards/QC.jpg",
        "media/cards/KC.jpg"
    ];
var upside = "media/cards/UpsideDown.jpg";
var Check2Cards = 0;
var Check2Cards2 = true;
var checkUserScore = 0;
var newgame;
function deal()
{
    if (Check2Cards2) {
        var random = Math.floor((Math.random() * 13));
       
var UserCards = document.getElementById('user');
        var card = document.createElement('img');
        card.setAttribute("width", 250);
        card.setAttribute("src", images[random]);
        UserCards.appendChild(card);
        checkUserScore += cards[random];
        
        if (checkUserScore > 21) {
            Check2Cards2 = false;
            checkUserScore = 0;
            newgame = true;
        }
    }

    if (newgame == true) {
        UserCards.parentNode.removeChild(UserCards);
        
        UserCards.parentNode.appendChild(UserCards);
    }
    
        
    Check2Cards2 = true;
    newgame = false;
            
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="game.js"></script>
    <!--<link href="StyleSheet1.css" rel="stylesheet" />-->
    <style>
        .hidden {
            display: none;
        }
        .show {
            display: inline-block;
        }
    </style>
</head>
<body style="background-image:url(media/background5.jpg);background-size:100%;text-align:center">
    <center>
        <table border="1" width="100%" height="100%" style="text-align: center">
            <tr><td style="height:300pt;width:100%;font-size:100pt;color:white"><p id="dealer">TOP</p></td></tr>
            <tr><td style="height:400pt;width:50%;font-size:100pt;color:white;float:left">left</td><td style="height:400pt;width:49%;font-size:100pt;color:white;float:right"><button style="font-size:100pt" id="deal" onclick="deal()">deal</button></td></tr>
            <tr><td style="height:350pt;width:100%;font-size:100pt;color:white"><div id="user" ></div></td></tr>
        </table>
        <!--<img id="img2" src="media/cards/2.jpg"onclick="document.getElementById('img2').className='hidden'"/>-->
      
    </center>

</body>
</html>
html代码：

var cards = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
var images =
    ["media/cards/AC.jpg", "media/cards/2.jpg", "media/cards/3C.jpg", "media/cards/4C.jpg",
        "media/cards/5C.jpg", "media/cards/6C.jpg", "media/cards/7C.jpg", "media/cards/8C.jpg",
        "media/cards/9C.jpg", "media/cards/10C.jpg", "media/cards/JC.jpg", "media/cards/QC.jpg",
        "media/cards/KC.jpg"
    ];
var upside = "media/cards/UpsideDown.jpg";
var Check2Cards = 0;
var Check2Cards2 = true;
var checkUserScore = 0;
var newgame;
function deal()
{
    if (Check2Cards2) {
        var random = Math.floor((Math.random() * 13));
       
var UserCards = document.getElementById('user');
        var card = document.createElement('img');
        card.setAttribute("width", 250);
        card.setAttribute("src", images[random]);
        UserCards.appendChild(card);
        checkUserScore += cards[random];
        
        if (checkUserScore > 21) {
            Check2Cards2 = false;
            checkUserScore = 0;
            newgame = true;
        }
    }

    if (newgame == true) {
        UserCards.parentNode.removeChild(UserCards);
        
        UserCards.parentNode.appendChild(UserCards);
    }
    
        
    Check2Cards2 = true;
    newgame = false;
            
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="game.js"></script>
    <!--<link href="StyleSheet1.css" rel="stylesheet" />-->
    <style>
        .hidden {
            display: none;
        }
        .show {
            display: inline-block;
        }
    </style>
</head>
<body style="background-image:url(media/background5.jpg);background-size:100%;text-align:center">
    <center>
        <table border="1" width="100%" height="100%" style="text-align: center">
            <tr><td style="height:300pt;width:100%;font-size:100pt;color:white"><p id="dealer">TOP</p></td></tr>
            <tr><td style="height:400pt;width:50%;font-size:100pt;color:white;float:left">left</td><td style="height:400pt;width:49%;font-size:100pt;color:white;float:right"><button style="font-size:100pt" id="deal" onclick="deal()">deal</button></td></tr>
            <tr><td style="height:350pt;width:100%;font-size:100pt;color:white"><div id="user" ></div></td></tr>
        </table>
        <!--<img id="img2" src="media/cards/2.jpg"onclick="document.getElementById('img2').className='hidden'"/>-->
      
    </center>

</body>
</html>


.隐藏{
显示：无；
}
.表演{
显示：内联块；
}

顶部

左撇子
按照@Kinglish的建议去做

if (newgame == true) {
    UserCards.innerHtml = "";
}
或者一张接一张地取出卡片

if (newgame == true) {
   while(UserCards.firstChild){
       UserCards.removeChild(UserCards.firstChild);
   }
}
只需清除innerHTML:
if（newgame==true）UserCards.innerHTML=“”它可以工作，但是隐藏的图像会占用空间吗？它会在某个时候减慢比赛速度吗？感谢alotIt删除用户卡的内容。您在任何地方都找不到它们，如果要存储它们，应该使用其他方法。但是，将游戏历史记录存储在前端不是最好的做法抱歉，我不知道什么是前端我对javascript不熟悉。这是我第一次构建一个游戏，请给我一些提示如何改进我的代码。你将一步一步地学习，从使用let和const开始，而不是var