0

我得到了很好的答案，但还有更多问题。:) 有人告诉我，在两个不同的地方声明 javascript 既糟糕又混乱（您可以在下面的答案中看到），但是我现在正在从一本书中学习，它告诉我要放置变量、数组、函数等. 在 html 的头部和正文中的其余部分。（这就是为什么我在两个不同的地方声明了 javascript）这是错误的，为什么？他还建议使用开发人员工具。一般来说，我对编码很陌生，对这些不太了解，有人可以推荐一个用于 chrome 的开发人员工具吗？开发者工具还能做什么？谢谢！

这是固定的：

嗨，我正在转换纸牌战争游戏，因此它可以在页面上而不是在控制台中运行，这是我的原始代码http://pastebin.com/AgLgy97F。我试图用document.write在网络上写出代码，但我发现document.write重写了整个页面并删除了我放在那里的按钮以进入下一个回合。

我查看了论坛并查看了在线结果，得出的结论是我应该使用这个<div id="play"></div>和 document.getElementById("play").innerHTML="I'm a string!". 所以我做了这个http://pastebin.com/29mVqp67。我试了一下，什么也没发生-_-。替换document.write我做错了什么？

我制作的新代码也在这里：

<html>
    <head>  
        <script language="JavaScript">
        <!--
var disp = function() {
    document.getElementByID("play").innerHTML="You drew a "+user_disp+".";
    document.getElementByID("play").innerHTML="Your opponent drew a "+cpu_disp+".";
    document.getElementByID("play").innerHTML=statement;
};
var war = function() {
    document.getElementByID("play").innerHTML="W-A-R spells WAR!";
    disp();
};

var full = [1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,6,6,6,6,7,7,7,7,8,8,8,8,9,9,9,9,10,10,10,10,11,11,11,11,12,12,12,12,13,13,13,13];
var user = [];
var cpu = [];
var rand = 0;
//Shuffles and deals the deck
var shuffled = [];
for (var i=0;i<52;i++) {
    rand=Math.floor(Math.random()*full.length);
    shuffled.push(full[rand]);
    full.splice(rand,1);    
}
for (var j=0;j<52;j++) {
    if (j%2===0) {
        user[user.length]=shuffled.pop();
    } else {
        cpu[cpu.length]=shuffled.pop();
    }
}
//Creates a bunch of variables and functions that will be needed in the game
var cpu_card=0;
var cpu_warcard=0;
var cpu_war1=0;
var cpu_war2=0;
var cpu_war3=0;
var cpu_disp=0;
var user_card=0;
var user_warcard=0;
var user_war1=0;
var user_war2=0;
var user_war3=0;
var user_disp=0;
var statement=0;

var card_name = function(cpuc,userc) {
     switch (cpuc) {
        case 13:
            cpu_disp="K";
            break;
        case 12:
            cpu_disp="Q";
            break;
        case 11:
            cpu_disp="J";
            break;
        case 1:
            cpu_disp="A";
            break;
        default:
            cpu_disp=cpuc;
            break;
    }
    switch (userc) {
        case 13:
            user_disp="K";
            break;
        case 12:
            user_disp="Q";
            break;
        case 11:
            user_disp="J";
            break;
        case 1:
            user_disp="A";
            break;
        default:
            user_disp=userc;
            break;
    }
};
//Lets play the game!
        //-->
        </script>
    </head>

    <body>
        <form>
            <input type="Button" value="Click to Take Your Turn" onClick="playWar()"></input>
        </form>
        <p>
        <h1>This Is War Lets Play!!!!</h1>
        <br>
        <div id="play"></div>
        <script language="JavaScript">
        <!--

function playWar(){
if(user.length<52 && user.length>1) {
    //Picks out the cards that are used
    cpu_card=cpu.shift();
    user_card=user.shift();
    card_name(cpu_card,user_card);
    //Figures out if you win, lose, or go to war
    if (user_card<cpu_card) {
        statement="You lost!";
        cpu[cpu.length]=cpu_card;
        cpu[cpu.length]=user_card;
    } else {
        if (user_card>cpu_card) {
            statement="You won!";
            user[user.length]=user_card;
            user[user.length]=cpu_card;
        } else {
            if(cpu.length<3 || user.length<3){
                user[user.length]=user_card;
                cpu[cpu.length]=cpu_card;
            }
            else{
                statement="You tied! TO WAR!";
            }

        }
    }
    disp();
    //This is what happens when you go to war
    if (statement==="You tied! TO WAR!") {
        cpu_war1=cpu.shift();
        cpu_war2=cpu.shift();
        cpu_war3=cpu.shift();
        cpu_warcard=cpu.shift();
        user_war1=user.shift();
        user_war2=user.shift();
        user_war3=user.shift();
        user_warcard=user.shift();
        card_name(cpu_warcard,user_warcard);
        if (user_warcard<cpu_warcard) {
            statement="You lost the war to your opponent!";
            cpu[cpu.length]=cpu_war1;
            cpu[cpu.length]=cpu_war2;
            cpu[cpu.length]=cpu_war3;
            cpu[cpu.length]=cpu_warcard;
            cpu[cpu.length]=cpu_card;
            cpu[cpu.length]=user_war1;
            cpu[cpu.length]=user_war2;
            cpu[cpu.length]=user_war3;
            cpu[cpu.length]=user_warcard;
            cpu[cpu.length]=cpu_card;
        }   else {
            if(user_warcard>cpu_warcard) {
                statement="You crushed your opponent in war!";
                user[user.length]=user_war1;
                user[user.length]=user_war2;
                user[user.length]=user_war3;
                user[user.length]=user_warcard;
                user[user.length]=user_card;
                user[user.length]=cpu_war1;
                user[user.length]=cpu_war2;
                user[user.length]=cpu_war3;
                user[user.length]=cpu_warcard;
                user[user.length]=cpu_card;
            } else {
                statement="The war resulted in a stalemate!";
                user[user.length]=user_war1;
                user[user.length]=user_war2;
                user[user.length]=user_war3;
                user[user.length]=user_warcard;
                user[user.length]=user_card;
                cpu[cpu.length]=cpu_war1;
                cpu[cpu.length]=cpu_war2;
                cpu[cpu.length]=cpu_war3;
                cpu[cpu.length]=cpu_warcard;
                cpu[cpu.length]=cpu_card;
            }
        }
        war();
    }
}
//When you are done, here it finds if you win or lose this game
 else if (user.length===52) {
    document.getElementByID("play").innerHTML="You have crushed your opponent.  Feel free to steal all of his belongings!";
} else {
    document.getElementByID("play").innerHTML="Unfortunatly, you have fallen victim to your opponent's wrath and have been conquered.;
}
}

        //-->
        </script>
    </body>

4

1 回答 1

1

你有几个问题在这里开始。

  • 您在两个不同的地方声明了您的 javascript，并且在这两种情况下，您都在污染全局命名空间。这应该清理干净，可能有助于发现一些问题。

  • 您在此行的末尾有一个未终止的字符串文字：

    you have fallen victim to your opponent's wrath and have been conquered. <===

  • getElementByID需要为 getElementById

  • 您的 disp() 函数不正确。正如它所写的那样，每一行都在替换前面的文本。

    var disp = function() { document.getElementByID("play").innerHTML="你画了一个"+user_disp+"。"; document.getElementByID("play").innerHTML="你的对手画了一个"+cpu_disp+"。"; document.getElementByID("play").innerHTML=statement; };

这可以通过在设置 innerHtml 之前将字符串连接在一起来解决，或者，为了更好地控制输出，您可以使用单独的元素。伪代码：

else.innerHTML = string1 + string2 + string3;

我建议对您用于开发的任何浏览器都大量使用开发人员工具。通过观察控制台输出或单步执行代码，它将帮助您发现许多这些问题。

我也把你的代码放在了jsFiddle中。

那应该让你开始。祝你好运！

于 2013-07-25T01:49:45.407 回答