使用buttonjavascript的随机卡/图像_Javascript_Html_Css_Button

使用buttonjavascript的随机卡/图像

javascript html css button

使用buttonjavascript的随机卡/图像,javascript,html,css,button,Javascript,Html,Css,Button,我想用java脚本创建一个纸牌游戏。作为java脚本的初学者，我发现很难找到适合我所要做的事情的教程。选择“开始游戏”按钮后，我希望计算机生成一张随机卡。我尝试了很多方法，但都没有成功。这是我的密码 <html> <head> <title> Christmas Assignment </title> <link rel="stylesheet" type="text/css" href="xmasass_1.css"

我想用java脚本创建一个纸牌游戏。作为java脚本的初学者，我发现很难找到适合我所要做的事情的教程。选择“开始游戏”按钮后，我希望计算机生成一张随机卡。我尝试了很多方法，但都没有成功。这是我的密码

<html>

<head>      

<title>   Christmas Assignment  </title>

<link rel="stylesheet" type="text/css" href="xmasass_1.css">


                <script type = "text/javascript">

            function randomImg(){   
    var myimages= [];

    myimages[1] = "cards/1.gif";
    myimages[2] = "cards/2.gif";
    myimages[3] = "cards/3.gif";
    myimages[4] = "cards/4.gif";
    myimages[5] = "cards/5.gif";
    myimages[6] = "cards/6.gif";
    myimages[7] = "cards/7.gif";
    myimages[8] = "cards/8.gif";
    myimages[9] = "cards/9.gif";
    myimages[10] = "cards/10.gif";
    myimages[11] = "cards/11.gif";
    myimages[12] = "cards/12.gif";
    myimages[13] = "cards/13.gif";

    function oddTrivia(){

        var randomImg = Math.floor(Math.random()*(oddtrivia.length));
        document.getElementById('comp').InnerHTML=myimages[randomImg]; 
    }


    ar total = 0;
    function randomImg(){

         var x = Math.floor(Math.random()*13)+1;
        document.getElementById('img1').src = 'die'+x+'.gif';
        document.getElementById('img2').src = 'die'+y+'.gif';
        document.getElementById('score').innerHTML = total;

     }

    var card1Image;
    var card2Image;
    var card3Image;
    var card4Image;
    var card5Image;
    var card6Image;

    function start(){
        var button = document.getElementById("startButton");
        button.addEventListener("click", pickCards, false);
        card1Image = document.getElementById("1");
        card2Image = document.getElementById("2");
        card3Image = document.getElementById("3");
        card4Image = document.getElementById("4");
        card5Image = document.getElementById("5");
        card6Image = document.getElementById("6");
    }
    function pickCards(){
        setImage(card1Image);
        setImage(card2Image);
        setImage(card3Image);
        setImage(card4Image);
        setImage(card5Image);
        setImage(card6Image);
    }
    function setImage(cardImg){
        var cardValue = Math.floor(1 + Math.random() * 13);
        cardImg.setAttribute("src", "C:Xmas Assignment/cards/" + cardValue + ".gif");
    }
    window.addEventListener("load", start, false);
                </script>


    </head>


<body>





<div id = "settings">

<img src = "settings_img.png" width = "60" height = "60">


</div>



<div id = "bodydiv">


<h1> Card Game</h1>

<div id = "computer">

<img src = " cards/back.gif">


</div>

<div id = "comp" > Computer </div>


<div id ="arrow">

<img src ="arrow2.png" width = "100" height="100">

</div>

<div id = "player">

<img src = " cards/back.gif">

</div>

<div id = "play"> Player </div>

<div id = "kittens">

<button id = "startButton" onclick ="randomImg" >   Start Game  </button>


<div id = "buttons_1">
<button id ="higher"> Higher

</button>

<button id = "equal">   Equal 

</button>


<button id = "lower"> Lower
</button>
</div>



<button id = "draw"> Draw your Card
</button>



<div id = "resetscore"> <a href = "url">Reset Score </a>
</div>
</div>

<div id = "score">
</div>


</div>




</body>



</html>


body {
    background:#66ccff;


}

h1 {


    text-align:center;




}

#settings   {


    float:right;
    margin-top:10px;


}


#bodydiv    {

    width: 800px;
    height:600px;
    margin-left:200px;
    margin-top:40px;
    margin-bottom:60px;
    background:#ffccff;
    border-radius: 10px;
}


#computer   {


            border-radius: 10px;
            position: absolute;
            left:35%;
            top:27%;

}


#player {

            border-radius: 10px;
            position: absolute;
            left:55%;
            top:27%;


}

#start_game {

    width :120px;
    height: 55px;
    margin-left: 350px;
    margin-top:50px;
    background:white;
    border:1px solid black;

}

#buttons_1 {
    text-align: center;
    margin-top:20px;
}


#higher {

        width:140px;
        height:50px;
        font-size: 15px;
        border-radius:10px;
        font-weight:bold;
}


#equal {
        width:140px;
        height:50px;
        font-size: 15px;
        border-radius:10px;
        font-weight:bold;

}


#lower {
        width:140px;
        height:50px;
        font-size: 15px;
        border-radius:10px;
        font-weight:bold;

}


#draw {
    width:160px;
    height:30px;
    margin-left:325px;
    margin-top: 30px;
    border:1px solid black;
    background:#FFFFCC;
}


#resetscore {
    text-align: center;
    margin-top: 40px;
}


#arrow {

    margin-left:370px;
    margin-top:-130px;
}

#comp {
    margin-top:240px;
    margin-left:265px;
}

#play{
    margin-top:10px;
    margin-left:540px;
}


圣诞节任务
函数randomImg（）{
var myimages=[]；
myimages[1]=“cards/1.gif”；
myimages[2]=“cards/2.gif”；
myimages[3]=“cards/3.gif”；
myimages[4]=“cards/4.gif”；
myimages[5]=“cards/5.gif”；
myimages[6]=“cards/6.gif”；
myimages[7]=“cards/7.gif”；
myimages[8]=“cards/8.gif”；
myimages[9]=“cards/9.gif”；
myimages[10]=“cards/10.gif”；
myimages[11]=“cards/11.gif”；
myimages[12]=“cards/12.gif”；
myimages[13]=“cards/13.gif”；
函数oddTrivia（）{
var randomImg=Math.floor（Math.random（）*（oddtrivia.length））；
document.getElementById（'comp'）.InnerHTML=myimages[randomImg]；
}
应收账款总额=0；
函数randomImg（）{
VARx=Math.floor（Math.random（）*13）+1；
document.getElementById（'img1'）.src='die'+x+'.gif'；
document.getElementById（'img2'）.src='die'+y+'.gif'；
document.getElementById（'score'）.innerHTML=total；
}
var-card1图像；
var-card2Image；
var-card3Image；
var-card4Image；
var-card5Image；
var-card6Image；
函数start（）{
var按钮=document.getElementById（“startButton”）；
按钮。addEventListener（“单击”，pickCards，false）；
card1Image=document.getElementById（“1”）；
card2Image=document.getElementById（“2”）；
card3Image=document.getElementById（“3”）；
card4Image=document.getElementById（“4”）；
card5Image=document.getElementById（“5”）；
card6Image=document.getElementById（“6”）；
}
函数pickCards（）{
设置图像（card1Image）；
设置图像（card2Image）；
setImage（card3Image）；
setImage（card4Image）；
setImage（card5Image）；
setImage（card6Image）；
}
函数设置映像（cardImg）{
var cardValue=Math.floor（1+Math.random（）*13）；
setAttribute（“src”，“C:Xmas Assignment/cards/”+cardValue+“.gif”）；
}
window.addEventListener（“加载”，开始，错误）；
纸牌游戏
电脑类
玩家
开始比赛
较高的
相等的
降低
抽牌
身体{
背景：#66ccff；
}
h1{
文本对齐：居中；
}
#背景{
浮动：对；
边缘顶部：10px；
}
#bodydiv{
宽度：800px；
高度：600px；
左边距：200px；
边缘顶端：40px；
边缘底部：60px；
背景：#ffccff；
边界半径：10px；
}
#计算机{
边界半径：10px；
位置：绝对位置；
左：35%；
最高：27%；
}
#玩家{
边界半径：10px；
位置：绝对位置；
左：55%；
最高：27%；
}
#开始游戏{
宽度：120px；
高度：55px；
左边距：350px；
边缘顶部：50px；
背景：白色；
边框：1px纯黑；
}
#按钮1{
文本对齐：居中；
边缘顶部：20px；
}
#更高{
宽度：140px；
高度：50px；
字体大小：15px；
边界半径：10px；
字体大小：粗体；
}
#相等的{
宽度：140px；
高度：50px；
字体大小：15px；
边界半径：10px；
字体大小：粗体；
}
#降低{
宽度：140px；
高度：50px；
字体大小：15px；
边界半径：10px；
字体大小：粗体；
}
#画{
宽度：160px；
高度：30px；
左边距：325px；
边缘顶部：30px；
边框：1px纯黑；
背景：#FFFFCC；
}
#重设分数{
文本对齐：居中；
边缘顶端：40px；
}
#箭{
左边距：370px；
利润上限：-130px；
}
#公司{
边缘顶部：240px；
左边距：265px；
}
#玩{
边缘顶部：10px；
左边距：540px；
}

您的代码有点难读

您忘记关闭主函数的“{”

在“randomImg”函数体中再次声明“randomImg”（使用不同的名称）

你写的

ar总计=0；

我想你是想写：

var总计=0；

未定义函数“oddtrivia”中的

oddtrivia

未定义内部随机img函数中的

在对代码进行了一点探索之后，这里有几件事：

问题1:

randomImg（）

很难知道您的意图，但您应该首先删除第一个函数的开头

randomImg（）{

因为1）它没有结束，2）如果它实际上跨越了所有内容，那么这一行

窗口。addEventListener（“load”，start，false）；

将不会在启动时加载（因为在执行randomImg（）之前它不会被执行，到那时页面已经加载）

问题2：

无法将属性“src”设置为null“

现在，当第一个问题解决后，如果在控制台中查看，您应该会看到

“Uncaught TypeError:无法将属性'src'设置为null”

。是的，使用控制台。单击错误以显示其原因。如下所示：

cardImg.setAttribute("src", "C:Xmas Assignment/cards/" + cardValue + ".gif");

这意味着

cardImg

是

null

。我们回溯

setImage（）

的第一个调用，发现变量

card1Image

被传入。因此这一定意味着

card1Image

也是

null

。您可以通过添加

控制台.log（'card1Image'，card1Image>）来检查它；

在代码中。或者在该点添加断点。（使用chrome开发工具中的“源”选项卡，单击行号以添加断点。刷新页面，它将在断点处停止。现在，您可以将鼠标悬停在变量上以查看其值。）

让我们看看“card1Image”我在哪里

card1Image = document.getElementById("1");

var cards = [ 
    { src : 'cards/1.gif', value: 1 },
    { src : 'cards/2.gif', value: 2 },
    { src : 'cards/3.gif', value: 3 },
    { src : 'cards/4.gif', value: 4 }
]; // (You can of course use code to generate it.)

// Then a function to put cards in the player's hand.
var playerHand = _.sample(cards, 2);
console.log(playerHand);