原生JS實戰:寫了個鬥牛游戲,分享給大家一起玩!

来源:http://www.cnblogs.com/susufufu/archive/2016/09/13/5869953.html
-Advertisement-
Play Games

本文是蘇福的原創文章,轉載請註明出處:蘇福CNblog:http://www.cnblogs.com/susufufu/p/5869953.html 該程式是本人的個人作品,寫的不好,未經本人允許,請不要用於其它用途! 奮戰一天一夜終於把鬥牛游戲給寫出來了(主要是除bug時間用的多!若大家發現新的b ...


本文是蘇福的原創文章,轉載請註明出處:蘇福CNblog:http://www.cnblogs.com/susufufu/p/5869953.html

該程式是本人的個人作品,寫的不好,未經本人允許,請不要用於其它用途!

奮戰一天一夜終於把鬥牛游戲給寫出來了(主要是除bug時間用的多!若大家發現新的bug歡迎留言)

這是游戲規則:百度牛牛規則

點擊查看演示:

我是新手,代碼寫的有點亂,計算邏輯有點複雜,但最終還是實現了游戲效果!真的好開心,也深刻體會到一點就是,敲代碼的時候註意力一定要十分集中,不然後期除bug真的很頭痛!其實大部分bug都是一些小錯誤引起的!

作為新生之一,多寫點代碼,是最能提高自己的能力的!不管要寫什麼,寫多大的程式,把想法、規則、流程先寫出來,然後再敲代碼,這樣才不會亂!
多寫代碼的最大好處就是可以熟練API的使用,本人還沒學任何第三方類庫呢,連JQ都沒學過,到現在還一直擼原生,暫時是ES5,過段時間再練習ES6,據說,學好原生,再學別的都很容易上手,我一直很相信這句話,就是不知道靠不靠譜,求前輩們指點迷津!很煩惱的一個問題:選NG呢?還是react呢?

正題開始

HTML、CSS的代碼都是用的比較基礎的知識,大家應該都能看懂,就不多廢話了;

JS代碼部分:

根據游戲規則(這裡我只寫了支持4個玩家),比較核心的有幾個:創建一副撲克牌、創建玩家、計算出牛幾

  1. 創建一副撲克牌,我定義了Game類,下麵是代碼+註釋

    //=================Game類
    function Game() {
        this.systemCards = Game.createCards();
    }
    //靜態方法createCards創建一副牌並返回亂序後的牌
    Game.createCards = function(){
        var cards = [],
            cardType = [1, 2, 3, 4], //牌的花色,為了便於比較不同花色的大小,採用數值代替黑桃、紅桃等文字
            cardPoint = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]; //牌面值,J、Q、K分別為11,12,13,這裡沒有大小王
        cardPoint.forEach(function (p) { //兩個forEach迴圈為每個花色創建一組牌,共四組,合計52張牌
            cardType.forEach(function (t) {
                var card = {};
                card[t] = p;
                cards.push(card)
            })
        });
        return this.disorder(cards);
    };
    //亂序方法,互相替換位置i的元素和隨機位置的元素(中間變數temp保存值),這是很基礎的用法,必須掌握
    Game.disorder = function (cards){
        var temp,len = cards.length;
        for(var i = 0; i < len; i++){
            var r = getRandom(0,len);
            temp = cards[i];
            cards[i] = cards[r];
            cards[r] = temp;
        }
        return cards;
    };
  2. 創建玩家類Player

    //=================Player類
    var Player = function () {
        this.banker = false; //是否為莊家
        this.money = 1000;
    };
    //返回一副牌中的前5張牌,後期用於發牌給玩家
    Player.prototype.getCards = function (g) {
        g.systemCards = g.systemCards.length < 20 ? Game.createCards() : g.systemCards;//牌不夠發時重新拿一副牌,4個人*5=20
        return g.systemCards.splice(0,5);
    };
  3. 計算出牛幾:這個問題我想了很久,感覺有點複雜,其實真正動手去寫的時候感覺不是太難!(被這麼點小學演算法難倒了,還怎麼在這個圈混啊!)

    //計算核心函數`sufuCaculate`,這裡擴展了`Array`類,只是為了方便調用,前提是得取個個性一點的名字,不然哪一天官方也出個同名的內置方法,你的項目就悲催了!
    Array.prototype.sufuCaculate = function () {
        if((!this)||this.length<5){throw new Error('sufuCaculate()參數錯誤')}
        var card5 = this, before10Count = 0, after10Count = 0, maxSameCount = getMaxSameCount(this);
        if(maxSameCount == 4){return 14} //4張相同的,返回'炸彈'
        if(this.every(function (x) {return x<5;})){return 13}//5張牌都小於5,返回'五小'
        if(this.every(function (x) {return x>10;})){return 12}//5張牌全為花,返回'五花'
    
        turnTrueValue(card5);//把大於10的牌變成10,並計算等於10的牌的數量
        if(before10Count == 1 && after10Count == 5){return 11}//5張牌中一張為10,另外4張為花,返回'四花'
    //用了三層的for迴圈才實現了,求前輩們指點好一點的邏輯!
        for(var i = 0; i<3; i++){
            for(var j = i+1;j<4;j++){
                for(var k = j+1;k<5;k++){
                    if(sum([card5[i],card5[j],card5[k]]) == 0){
                        var copy = card5.slice();
                        delete copy[i];
                        delete copy[j];
                        delete copy[k];
                        var a = sum(copy.filter(function(){return true}));
                        if(a == 0){return 10}//牛牛
                        else{return a}//a牛
                    }
                }
            }
        }
        return 0;//'無牛'
        //求和並求於10
        function sum(arr){
            return arr.reduce(function(a,b){return a+b})%10
        }
        //獲得最大相同牌數
        function getMaxSameCount(card5){
            var count = 1, sameCardCount = 1;
            for(var i = 0; i<5; i++){
                for(var j = 0; j<5;j++){
                    if(j == i){continue}
                    if(card5.indexOf(card5[i],j)>0){
                        count++;
                    }
                }
                sameCardCount = Math.max(count,sameCardCount);
                count = 1;
            }
            return sameCardCount;
        }
        //把大於10的牌全部轉為10
        function turnTrueValue(card5){
            for(var i = 0; i<5; i++){
                if(card5[i] === 10){before10Count++}
                card5[i] = card5[i]>=10 ? 10 : card5[i];
                if(card5[i] === 10){after10Count++}
            }
        }
    };

    接下來,怎麼寫呢?本人是這樣的,先從程式入口出發,一步一步往前推,寫到感覺會被重覆用到的代碼就拿出來,放進一個單獨的工具函數,方便重覆使用,可以大大地減少代碼量!註意工具函數放的位置,如果它只被用在某函數內部,且依賴該函數的變數的話就毫不客氣的放在這個函數裡面吧,省的傳參等的麻煩,要是它會被大於2個函數使用,就放在外面吧,把參數設置成通用的。

游戲入口函數start(),游戲要開始,得有個按鈕按吧,好吧來個按鈕綁定事件beginBtn.onclick,點擊後進入游戲界面(顯示基本元素)

//點擊開始按鈕執行
        beginBtn.onclick = function () {
            var str = prompt('請輸入游戲名字','玩家');
            player3Name.innerHTML = (str||'玩家')+' 金錢:';
            begin();
            firstBanker();
            showOrHide('none',beginBtn);
            showOrHide('block',player1Money,player2Money,player3Money,player4Money,player3Bg);
            showOrHide.bind(null,'block').apply(null,playerCards); //這是我為了偷懶,突發奇想寫出來的,居然能用,呵呵了!如果看不懂,就去蘇福的博客園看bind,apply的文章
            showOrHide.bind(null,'block').apply(null,playerNameMoneys);
            runing();
        };

開始後得有玩家吧,好吧,創建4個玩家,放進一個數組裡面,方便訪問

//創建四個玩家
        function begin(){
            for(var i = 0; i<4 ; i++){
                players.push(new Player());
            }
        }

第一輪先隨機確定莊家firstBanker(),不介紹了,自己看源碼。

然後呢,得來個倒計時函數 runTime(msg,t),這個函數比較通用,在start()範圍內會被重覆使用,設計如下:

//倒計時函數,看不懂?多翻翻我的博客,有相關知識介紹的文章
        function runTime(msg,t){
            t--;
            if(t<0){clearTimeout(timeId);timeId=null;return}
            info.innerHTML = msg;
            timeInfo.innerHTML = t;
            timeId = setTimeout(function () {
                runTime(msg,t);
            },1000);
        }

在點擊開始按鈕時,會啟動游戲的流程,事件回調函數內調用runing()

function runing(){
            runTime('請押註',4);
            callIn(); //押註函數
            waiting(deal,5);//等待delay時間到時,執行deal發牌方法
        }

是的,需要個押註函數callIn(),補貼代碼了,比較簡單,電腦玩家給個隨機數,主角通過按鈕來取值,而莊家不取值(其它代碼就是界面元素的顯示與隱藏)

接下來就是deal()方法,發牌方法,取出玩家的手牌的數據,把花色值、牌面值、牛幾分別存進單獨的數組,以便使用。

function deal() {
            for(var i = 0; i<4 ; i++){
                cs[i] = players[i].getCards(g);
                keys[i] = getKeyValue(cs[i]).keys;
                values[i] = getKeyValue(cs[i]).values;
                results[i] = getCow(values[i])
            }
            showOrHide('none',player3InBtn);
            setCard('set',keys,values,player1Card,player2Card,player3Card,player4Card);
            runTime('計算結果',4);
            waiting(function(){showResult(results)},5);
        }

上面這個deal()方法又需要調用顯示或隱藏元素的showOrHide()方法,看名字就知道啦,所以函數的命名很關鍵,不然代碼長了,自己都不知道這是什麼鬼了!showOrHide()這個方法用的最多,所以必須寫成通用的格式:

//改變元素的display屬性,看不懂?多翻翻我的博客,有相關知識介紹的文章
    function showOrHide(str){
        var len = arguments.length;
        for(var i=1;i<len;i++){
            arguments[i].style.display = str;
        }
    }

這裡先貼個工具函數:

//獲得某一張牌的類型和值`getKeyValue()`,用來取牌的花色值和牌面值,內置的`Object.keys()`方法不支持IE9以下
    var getKeyValue = function (cards){
        var keys = [],values = [];
        cards.forEach(function (n) {
            var key = +Object.keys(n);
            keys.push(key);
            values.push(n[key]);
        });
        return {
            keys:keys,
            values:values
        };
    };

發牌函數里調用了setCard(),顯示或重置所有玩家的牌,我寫的這個鬥牛游戲的牌不是用的圖片,而是用了CSS,下麵的changeClassName()就是用來應用樣式的函數

//顯示所有玩家的牌
        function setCard(str,ks,vs){  //str='set' or 'reset'
            var args = Array.prototype.slice.call(arguments,3),len = args.length;
            for(var j=0;j<len;j++){
                var n = args[j].id.charAt(6)-1;
                for(var i = 0;i<5;i++){
                    if(str === 'reset'){
                        changeClassName(args[j].children[i],'card-'+ks[n][i],false);
                        args[j].children[i].innerHTML = '';
                    }else if(str === 'set'){
                        changeClassName(args[j].children[i],'card-'+ks[n][i],true);
                        args[j].children[i].innerHTML = vs[n][i];
                    }
                }
            }
        }

玩家壓完註後,得顯示結果了,showResult(),這裡又用到了showOrHide()runTime()waiting()

//顯示所有玩家的結果
        function showResult(results){
            var resultsStr = [];
            for(var i=0;i<4;i++){
                resultsStr.push(getResultInfo(results[i]));
            }
            showOrHide('block',result1,result2,result3,result4);
            result1.innerHTML = resultsStr[0];
            result2.innerHTML = resultsStr[1];
            result3.innerHTML = resultsStr[2];
            result4.innerHTML = resultsStr[3];
            var str = pay(); //pay()就是付錢的意思啦
            runTime(str,10);
            waiting(function(){showOrHide('block',restartBtn);},11) //延時時間到後顯示下一局按鈕
        }

第一局完了,要開始下一局了(以後的所有下一局都將一樣),restartBtn.onclick = restart;,好吧,定義個回調函數restart()

function restart(){
            showOrHide('none',restartBtn);
            resetBanker(); //根據上一局結果,根據游戲規則,重選莊家
            setCard('reset',keys,values,player1Card,player2Card,player3Card,player4Card);
            clearArrays(results,cs,keys,values,playerCallIns); //清楚上一局保存的所有數據
            showOrHide('none',result1,result2,result3,result4); 
            runing(); //迴圈開始了!!!
        }

就這樣,游戲就可以一直玩下去了,一直可以點下一局!

這個游戲我定義了好多變數,用了好多ID,整了不少函數,感覺邏輯偏複雜了,雖然定義了Game和Player,有點面向對象了,但整體來說都是函數哦!請前輩們多指點指點在下啊!!!QQ: 553150580


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、介紹 Java流程式控制制包括順序控制、條件控制和迴圈控制。 順序控制,就是從頭到尾依次執行每條語句操作。條件控制,基於條件選擇執行語句,比方說,如果條件成立,則執行操作A,或者如果條件成立,則執行操作A,反之則執行操作B。迴圈控制,又稱為迴路控制,根據迴圈初始條件和終結要求,執行迴圈體內的操作。 ...
  • 用FPGA設計了數據接收和發送模塊,FIFO模塊 用串口調試工具發送數據,數據接收模塊將接收到的串列數據轉換為並行數據(串轉並),並存入FIFO中,當FIFO中的數據個數大於某個值的時候,讀出數據,通過發送模塊將並行數據轉換為串列數據(並轉串),然後就可以在串口調試工具上看到接收到的數據。 註意的點 ...
  • 一、引入本地庫 1、File -> Project Structure -> Libraries,點擊+,新增本地lib庫。 2、File -> Project Structure -> Modules -> Dependencies,新增Library,選擇第一步創建的lib庫。 二、將本地庫wa ...
  • 需求從何而來?對於一個項目來說,應該是從設計需求文檔中而絕不是頁面。之所以說國內的產品經理技術偏低,很大部分因為他們把過多的熱情放在了畫原型的上面。 從頁面走出,實現真正的業務驅動。 PDD 一切以頁面為核心,每個程式員針對每個頁面來找到功能點,從而以頁面為單位進行任務交付。開發未動,頁面先行,這也 ...
  • 最近在學習釘釘(一個協作應用)桌面應用的前端源碼時候,發現其js源碼是用browserify做模塊開發。於是想還原其源碼的原本的目錄結構,學習它的目錄分類以及業務劃分。 前言 用過browserify構建工具的應該清楚,在壓縮合併後的代碼的最前面,有處理模塊依賴關係的代碼: 目錄結構解析 我寫了一個 ...
  • 我們的項目使用了bootstrapValidator來作為前端校驗,但是表單裡面有一個UEditor,它用bootstrapValidator是沒有效果的,為了頁面風格統一,只要修修改改咯 首先來看一下修改後的效果 上面的UEditor是我們的業務需要調整成這樣的,首先我們我們先把基本的結構寫一寫 ...
  • 最近都沒有更,就來幾個效果充實一下。 都沒有進行美化這步。 手風琴: 純css: css3手風琴: javascript實現的手風琴: 接下來的都是會使用到動畫效果,既然這樣就把封裝好運動: 輪播圖: 這個是使用插件做的:responsiveslides.js 基於jquery 圖片滑動: 到此為止 ...
  • 1.移動端開發視視窗的添加 h5端開發下麵這段話是必須配置的 meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 其它相關配置內容如下: width viewport 寬度(數值/ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...