【JQuery】西蒙游戏（Simon Game）

虽然我是一名实打实的产品喵，但是为了能够和程序猿们愉快地沟通（让撕逼再和谐一点），我自学了一些代码知识，写了一些不入流不靠谱不成熟的“三不”应用，随便扔在这里分享一下。

简介

西蒙游戏（Simon Game）算是风靡西方数十年的一款游戏了，在N久N久以前的电子游戏的萌芽期他就已经出现了，因为他规则简单，而且玩起来能让人上瘾...

它的游戏规则是，让玩家记住不同颜色的灯的亮灯顺序后，依次点击灯，如果次序与AI给予的次序相同，则游戏继续并增加难度，否则游戏结束，重置游戏。

例如：

• STEP 1：电脑-红灯，玩家-红灯，PASS，增加一次闪灯。
• STEP 2：电脑-红灯、黄灯，玩家-红灯、黄灯，PASS，增加一次闪灯。
• STEP 3：电脑-红灯、黄灯、绿灯，玩家-红灯、黄灯、红灯，游戏结束。（因为最后一个颜色错了）

截图

暂时玩到第6关

代码

HTML+CSS框架使用的是bootstrap 3，不过这里主要分享一下js部分的代码，使用的是JQuery：

window.onload = function () {
    $(document).ready(function() {
    //定义游戏中需要用到的对象属性
    //游戏等级、方块颜色、游戏顺序数组、玩家顺序数组、方块颜色对应的音效
    var game = {
        level: 0,
        colorArr: ["#green","#red","#blue","#yellow"],
        currentGame: [],
        player: [],
        sound:{
            green: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3'), 
            red: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3'), 
            blue: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3'), 
            yellow: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3')
        },
    }
    //开始一局新游戏，就是把所有属性重置还原
    function newGame(){
        clearGame();
    }
    function clearGame(){
        game.currentGame = [];
        game.level = 0;
        addCount();
    }
    //游戏等级自加后继续游戏
    function addCount(){
        game.level++;
        $("#level").text(game.level);
        generateMove();
    }
    //随机获取一个颜色，让它闪烁
    function generateMove(){
        game.currentGame.push(game.colorArr[Math.floor(Math.random()*4)]);
        showMoves();
    }
    //按先后次序轮流闪烁游戏顺序数组中的所有颜色方块
    //全部闪烁完后，清空玩家顺序数组
    function showMoves(){
        var i = 0;
        var moves = setInterval(function(){
            playGame(game.currentGame[i]);
            i++;
            if(i >= game.currentGame.length){
                clearInterval(moves);
            }
        },800);
        clearPlayer();
    }
    //闪烁方块动效及音效
    function playGame(block){
        $(block).fadeOut(150).fadeIn(150);
        sound(block);
    }
    //播放音效函数
    function sound(block){
        switch(block) {
            case "#green": game.sound.green.play(); break;
            case "#red": game.sound.red.play(); break;
            case "#blue": game.sound.blue.play(); break;
            case "#yellow": game.sound.yellow.play(); break;
        }
    }
    //重置玩家顺序数组
    function clearPlayer(){
        game.player = [];
    }
    //点击任意方块时执行该函数
    //获取被点击方块的id后，播放音效，并把id放入玩家顺序数组后，开始判断是否与游戏顺序数组匹配
    addToPlayer = function(id){
        var block = "#"+id;
        sound(block);
        game.player.push(block);
        console.log(game.currentGame + "||" + game.player);
        playerTurn();
    }
    //每点击一次方块，被点击的方块都会被记录在玩家顺序数组的尾部
    function playerTurn(){
        //判断每一次点击的方块，和游戏顺序数组内相对应的那个方块颜色是否一致，同则继续游戏，不同则重新开始游戏
        if(game.player[game.player.length-1]!==game.currentGame[game.player.length-1]){
            alert("走错啦！请重头再来吧！");
            newGame();
        } else {
            console.log("走得漂亮！");
            //让玩家点玩该点的次数之后，判断是否够20次
            var check = game.player.length === game.currentGame.length;
            if(check){
                if(game.count === 20){
                    alert("恭喜您！可以去参加《最强大脑》了！");
                } else {
                    //不够20次，则等级提升，继续游戏
                    alert("Let's 继续！");
                    addCount();
                }
            }
        }
    }
    newGame();
    //重置游戏
    $("#reset").click(newGame);
});
}

相关

想看源代码的童鞋可以来CODING.NET获取，也可以直接去DEMO体验一下。

---

THE END.