我想用java脚本创建一个纸牌游戏。作为java脚本的初学者，我发现很难找到适合我正在尝试的教程。当“开始游戏”时＃39;按钮被选中，我希望计算机生成随机卡。我已经尝试了很多方法来做到这一点并且无济于事。这是我的代码。
<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;
}
答案 0 :(得分：1)
你的代码很难阅读。
你写道
ar total = 0;
我想你打算写：
var total = 0;
oddtrivia＆＃34; OddTrivia＆＃34;未定义。
y未定义。答案 1 :(得分：0)
在代码中略微探讨了一下，这里有几点：
randomImg() 很难知道你的意图，但你应该从删除第一个函数randomImg(){的开头开始。
因为1）它没有结束和2）如果它实际上跨越了所有内容，那么这行window.addEventListener("load", start, false);将不会在启动时加载（因为它在执行randomImg（）之前不会被执行，并且到那时页面已经加载。）
Cannot set property 'src' of null" 现在，当第一个问题出现时，如果您在控制台中查看，则应该看到"Uncaught TypeError: Cannot set property 'src' of null"。是的，使用你的控制台。单击错误以显示导致错误的原因。这是：
cardImg.setAttribute("src", "C:Xmas Assignment/cards/" + cardValue + ".gif");
这意味着cardImg为null。我们回溯了setImage()的第一次调用，发现变量card1Image已被传入。因此，这必须意味着card1Image也是null。您可以在代码中添加console.log('card1Image', card1Image);来自行检查。或者您在该点添加断点。 （使用chrome dev工具中的sources-tab，单击行号以添加断点。刷新页面，它将在断点处停止。现在，您可以将鼠标悬停在变量上以查看其值。）
让我们看一下'card1Image'的设置位置。
card1Image = document.getElementById("1");
那为什么这会返回null？我们甚至在html中有一个id="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);
这里我假设lodash，一个轻量级的库，供你不想重新发明轮子时使用。