教老婆学JavaScript-(1)

首先下载一个Chrome, 在随便一个页面按下键盘F12(或者在页面空白处按鼠标右键会弹出菜单, 点击inspect或者检查), 然后你会看到弹出了一个框，这个框里面写着一堆密密麻麻的源代码，不用管它，在这个框的上边边的地方，写着一排Elements,Console,Sources,Network...等的标签, 选Console那个标签点击.

你会看到一大片空白的地方有个小>箭头, 点>的右边会出现光标, 可以在这里输入代码.

好了准备功夫做好了，那么我们来做一个非常简单的游戏程序——剪刀石头布。

把下面代码复制，粘贴在 Chrome 的Console里，然后按 Enter 回车。

function game(inputs) {
    var map = ['剪刀', '石头', '布'];
    var computer = map[Math.floor(Math.random() * 3)];
    if(computer == '石头' && inputs == '布') {
        console.log('你赢了');
    }
    else if(computer == '剪刀' && inputs == '石头') {
        console.log('你赢了');
    }
    else if(computer == '布' && inputs == '剪刀') {
        console.log('你赢了');
    }
    else {
        console.log('你输了');
    }
}

你会发现啥也没有，别急，然后再输入game('剪刀')，你会发现弹出了一句你赢了或者你输了。

这个game('剪刀')就是你出的拳，也就是剪刀。

这些代码写了什么，其实现在没必要全部知道，你现在只要知道，刚刚粘贴的被function game(inputs)用花括号{}是计算机处理的逻辑，而你刚刚输入的game('剪刀')是调用这个逻辑的输入。

如果你仔细看看这些用英语写成的句子，也是有可能看懂个大概。后面会一步步告诉你每一行的作用。

计算机就是靠这样让你定制逻辑，让你输入，它负责处理逻辑然后输出结果的东西，万变不离其中。

编程就是定制这些逻辑的事情。

再说说刚刚咱们做的这个剪刀石头布游戏，试试不同的输入，例如game('石头')，game('布')

不对啊，只告诉我们结果是输是赢，我也不知道计算机出了什么，凭什么说这结果就是对的呢？

我们得让计算机在输入结果的同时也输出它出了什么，对吧？

那么我们就在输入结果的那一行上边多写一行console.log(computer);，变成下面这样：

function game(inputs) {
    var map = ['剪刀', '石头', '布'];
    var computer = map[Math.floor(Math.random() * 3)];
    if(computer == '石头' && inputs == '布') {
        // 就是这里加一行
        console.log(computer);
        console.log('你赢了');
    }
    else if(computer == '剪刀' && inputs == '石头') {
        // 这里也加一行
        console.log(computer);
        console.log('你赢了');
    }
    else if(computer == '布' && inputs == '剪刀') {
        // 继续奏乐继续加
        console.log(computer);
        console.log('你赢了');
    }
    else {
        // 好了，加上最后一行
        console.log(computer);
        console.log('你输了');
    }
}

好了，把上面这些代码复制粘贴到Console里，回车，再试试输入game('剪刀')看看。

这时候输出的是多了一行，

但是不对啊！我们出剪刀，计算机也出的剪刀，凭什么我们输了，对吧？这是bug！

准备好了吗？我们来一起修复人生中第一个bug。

在修复bug之前，我们来看看，计算机到底是根据什么规则来给出它的结果的。

我们来看第4行

    if(computer == '石头' && inputs == '布') {
        // 就是这里加一行
        console.log(computer);
        console.log('你赢了');
    }

if这个指令，顾名思义，就是"如果"的意思，如果什么呢？
就是后面括号()括起来的部分，computer == '石头' && inputs == '布'，
如果computer是石头，
而且哦( && 这个表示而且的意思 )我们的输入input是布的话，
那么，就执行花括号{}里面的代码。

也就是，如果电脑出石头，而你出布，那你就赢了。就这么简单。

好我们继续看下面的：

    else if(computer == '剪刀' && inputs == '石头') {
        // 这里也加一行
        console.log(computer);
        console.log('你赢了');
    }
    else if(computer == '布' && inputs == '剪刀') {
        // 继续奏乐继续加
        console.log(computer);
        console.log('你赢了');
    }
    else {
        // 好了，加上最后一行
        console.log(computer);
        console.log('你输了');
    }

else if 表示否则如果的意思，也就是上边if的结果不满足，就看看else if的()括号内容满不满足。直到最下面的else {}，意思是上边都不满足，那就执行else{}括起来的代码。

你发现了吗？这里没有处理如果平手的情况，平手就是电脑跟我们出的一样，怎么写呢？

我们在最后的else{}上一行插入下面的代码：

    else if(computer == inputs) {
        // 平手的情况
        console.log(computer);
        console.log('平手了');
    }

最后整个程序变成下面这样：

function game(inputs) {
    var map = ['剪刀', '石头', '布'];
    var computer = map[Math.floor(Math.random() * 3)];
    if(computer == '石头' && inputs == '布') {
        // 就是这里加一行
        console.log(computer);
        console.log('你赢了');
    }
    else if(computer == '剪刀' && inputs == '石头') {
        // 这里也加一行
        console.log(computer);
        console.log('你赢了');
    }
    else if(computer == '布' && inputs == '剪刀') {
        // 继续奏乐继续加
        console.log(computer);
        console.log('你赢了');
    }
    else if(computer == inputs) {
        // 平手的情况
        console.log(computer);
        console.log('平手了');
    }
    else {
        // 好了，加上最后一行
        console.log(computer);
        console.log('你输了');
    }
}

复制上面代码到 Chrome 浏览器的 Console 里，按照之前的用法试试看吧。

到这里一个健全的剪刀石头布游戏就做好了。编程是不是也没有那么难？

评论