JavaScript--面向對象--猜拳游戲

来源:http://www.cnblogs.com/jessical626/archive/2016/09/28/5917498.html
-Advertisement-
Play Games

...


//html代碼
<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>猜拳游戲</title>
  <link rel="stylesheet" href="css/game.css"></link>
 </head>
 <body>
    <div id="game">
        <ul class="panel">
            <li>
                <p class="name">我:name</p>
                <div class="anim user"></div>
            </li>
            <li>
                <p class="name">電腦:name</p>
                <div class="anim comp"></div>
            </li>
        </ul>
        <div class="op">
            <button id="play" onclick = "game.Caiquan();">開始</button>
        </div>
        <div id="text" class="text">請開始游戲...</div>
        <ul id="guess" class="guess">
            <li>
                <div class="guess0" onclick="game.verdict(0)">石頭</div>
            </li>
            <li>
                <div class="guess1" onclick="game.verdict(1)">剪刀</div>
            </li>
            <li>
                <div class="guess2" onclick="game.verdict(2)"></div>
            </li>
        </ul>
    </div>
    <script type="text/javascript" src="js/game.js"></script>
    
 </body>
</html>
//css樣式(字體:迷你簡卡通)
*{
    margin:0px;
    padding:0px;
    font-family:'迷你簡卡通';
    font-size:28px;
}
html,body{
    width:100%;
    height:100%;
    background:rgba(244, 184, 202, 1);
}
ul{
    list-style:none;
}
#game{
    width:800px;
    height:600px;
    margin:auto;
    top:20%;
}
#game ul{
    width:100%;
    height:415px;
}
#game ul li{
    width:50%;
    height:100%;
    float:left;
    text-align:center;
}
#game ul li .anim{
    width:223px;
    height:337px;
    border:10px solid #ff6699;
    border-radius:50%;
    margin:20px auto 0;
    background-position:center;
    background-repeat:no-repeat;
}
.user{
    background:url('../img/readyl.png');
}
.comp{
    background:url('../img/readyr.png');
}
#game .op{
    width:100%;
    text-align:center;
}
#game .op button{
    width:200px;
    height:60px;
    border:10px solid #ff6699;
    background:rgb(253, 217, 227);
    border-radius:50%;
    outline:none;
    cursor:pointer;
    font-weight:bold;
}
#game .op button:hover{
    border-color:#ff0000;
    background-color:#ff0000;
    font-size:36px;
    color:rgb(253, 217, 227);
}
#game .op button.disabled{
    border-color:#bbb;
    color:#bbb;
    background-color:#ccc;
    font-size:28px;
    cursor:default;
}
#game .guess{
    width:220px;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    display:none;
}
#game ul.guess li{
    width:100%;
    height:32%;
}
#game ul.guess li div{
    width:100%;
    height:90%;
    border:10px solid #ff6699;
    border-radius:50%;
    background-position:center;
    background-repeat:no-repeat;
    cursor:pointer;
    background-color:rgba(244, 184, 202, 1);
}
#game ul.guess li div:hover{
    background-color:#ff6699;
    color:#fff;
}
div.guess0{
    background-image:url('../img/0.png');
}
div.guess1{
    background-image:url('../img/1.png');
}
div.guess2{
    background-image:url('../img/2.png');
}
#game div.text{
    margin-top:20px;
    text-align:center;
    font-size:50px;
    font-weight:bold;
}
//js代碼
Function.prototype.extend = function( fn ){
        for( var attr in fn.prototype ){
            this.prototype[attr] = fn.prototype[attr];
        }
    }
    
        //父級構造函數用於繼承,共有屬性
        function Caiquan( name ){
            this.name = name;
            this.point = 0;
        }
        //用於繼承下麵衍生,共有方法
        Caiquan.prototype.guess = function(){}
        
        //繼承父,玩家的構造函數
        function User( name ){
            Caiquan.call(this,name);
        }
        User.extend( Caiquan );
        User.prototype.guess = function( point ){
            return this.point = point;
        }
        //電腦的構造函數
        function Comp( name ){
            Caiquan.call(this,name);
        }
        Comp.extend( Caiquan ) ;
        //電腦的猜拳方法,隨機
        Comp.prototype.guess = function(){
            return this.point = Math.floor( Math.random()*3 );
        }
        //裁判構造函數
        function Game( u , c ){
            this.text = document.getElementById('text');
            this.btn = document.getElementById("play");
            this.user = u;
            this.comp = c;
            this.classN =document.getElementsByClassName('name');
            this.guess = document.getElementById("guess");
            this.anim = document.getElementsByClassName("anim");
            this.num = 0;
            this.init();
            this.tiemr = null;
        }
        Game.prototype.Caiquan = function(){
            this.textValue( '請出拳...' );
            this.BtnDisable();
            this.start();
            this.guess.style.display = 'block';
            
        }
        //怎麼玩
        Game.prototype.start = function(){
            var This = this;
            this.timer = setInterval(function(){
                This.anim[0].className = 'anim user guess' +( ( This.num ++ ) % 3 );
                This.anim[1].className = 'anim comp guess' + ( ( This.num ++ ) % 3 ) ;
            },500)
            
        }
        //初始化名字
        Game.prototype.init = function(){
            this.classN[0].innerHTML = '我:' + this.user.name;
            this.classN[1].innerHTML = '電腦:' + this.comp.name;
            
        }
        //提示面板區域的修改
        Game.prototype.textValue = function( val ){
            this.text.innerHTML = val;
        }
        //按鈕失效
        Game.prototype.BtnDisable = function(){
            if( this.btn.disabled ){
                this.btn.disabled = false;
                this.btn.className ='';
                this.btn.innerHTML = '再來一次'
            }else{
                this.btn.disabled = true;
                this.btn.className ='disabled';
            }
            
        }
        Game.prototype.verdict = function( point ){
            clearInterval(this.timer);
            var userGu = user.guess(point);
            var compGu = comp.guess();
            this.anim[0].className = 'anim user guess' + userGu;
            this.anim[1].className = 'anim comp guess' + compGu;
            var res = userGu - compGu;
            switch (res){
                case 0:
                this.textValue('平局!!!')
                    break;
                case 1:
                case -2:
                this.textValue('lose~~~');
                break;
                case 2:
                case -1:
                this.textValue('win!!!')
                    break;
            }
            this.guess.style.display = 'none';
            this.BtnDisable();
            
        }
        var user = new User( '銳雯' );
        var comp = new Comp( '拉克絲' );
        var game = new Game( user , comp );

 


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

-Advertisement-
Play Games
更多相關文章
  • (-1)寫在前面 這兩天讀《javaweb開發王者歸來》,學到Spring的PropertyPlaceholderConfigurer時出現一個問題,我已${jdbc.name}的形式賦值給bean中的屬性,用main方法測試後,輸出屬性的值仍然是${jdbc.name}。 (0)解決問題之路 a. ...
  • 感謝原作者:Vamei 出處:http://www.cnblogs.com/vamei 怎麼能快速地掌握Python?這是和朋友閑聊時談起的問題。 Python包含的內容很多,加上各種標準庫、拓展庫,亂花漸欲迷人眼。我一直希望寫一個快速的、容易上手的Python教程,而且言語簡潔,循序漸進,讓沒有背 ...
  • 感謝原作者:Vamei 出處:http://www.cnblogs.com/vamei Java是面向對象語言。這門語言其實相當年輕,於1995年才出現,由Sun公司出品。James Gosling領導了Java的項目小組。該項目的最初只想為家電設計一門容易移植的語言。然而,在獲得了Netscape ...
  • tail命令也是一個非常常用的文件查看類的命令,今天就為大家介紹下Linux tail命令的用法。 更多Linux命令詳情請看:Linux命令速查手冊 Linux tail命令主要用來從指定點開始將文件寫到標準輸出。很多人喜歡使用tail –f 來監控日誌文件。 一、Linux tail命令格式 L ...
  • 1.說明:Idea 下,項目對應於 Eclipse 下的 workspace,Module 對應於 Eclipse 下的項目。Idea 下,新添加的項目既可以單獨作為一個 Project,也可以作為一個 Project 下的 Module。 2.本篇文章介紹內容: (1)如何在 Project 新建 ...
  • 初學swift 但是網上只有很多swift用xib創建的cell,就算是有也不是我想要的。今天自己弄了一個不用xib純代碼寫的,來上代碼 自定義cell 下麵是controller 例外說一點懶載入 OC的懶載入 @property (nonatomic, strong) NSMutableArra ...
  • 裡面主要包含了一些與字元串關聯的函數的聲明,這些函數有如下的命名規則: 以"mem"開頭的函數操作任意的字元序列 以"strn"開頭的函數操作非空字元序列 以"str"開頭的函數操作空字元結尾的字元序列 數據類型 size_t 巨集 NULL 函數 複製 memcpy() memmove() strc ...
  • 有人常問,雲巴實時通信系統到底提供了一種怎樣的服務,與其他提供推送或 IM 服務的廠商有何本質區別。其實,從技術角度分析,雲巴與其它同類廠商都是面向開發者的通信服務,巨集觀的編程模型都是大同小異,真正差異則聚焦於產品定位,業務模式,基礎技術水平等諸多細節上。本文暫不討論具體產品形態上的差異,著重從技術... ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...