//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 );

JavaScript--面向对象--猜拳游戏的更多相关文章

  1. 用javascript编写猜拳游戏（函数）

    const readline = require('readline-sync')//引用readline-sync console.log('欢迎进入猜拳游戏'); //电脑随机出拳 let fn ...

  2. C#面向对象编程实例-猜拳游戏

    1.需求 现在要制作一个游戏,玩家与计算机进行猜拳游戏,玩家出拳,计算机出拳,计算机自动判断输赢. 2.需求分析 根据需求,来分析一下对象,可分析出:玩家对象(Player).计算机对象(Comput ...

  3. JavaScript 面向对象(二) —— 案例篇

    看案例前可以先看看基础篇:JavaScript 面向对象(一) —— 基础篇 案例——面向对象的选项卡:把面向过程的程序一步步改成面向对象的形式,使其能够更加的通用(但是通用的东西,一般会比较臃肿). ...

  4. ajax简单手写了一个猜拳游戏

    使用ajax简单写一个猜拳游戏 HTML代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <me ...

  5. JavaScript学习笔记(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  6. JavaScript学习总结(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  7. Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

    Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...

  8. javascript面向对象系列第四篇——选项卡的实现

    前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...

  9. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

随机推荐

  1. mysql-5.6.34 Installation from Source code

    Took me a while to suffer from the first successful souce code installation of mysql-5.6.34. Just pu ...

  2. linux下 lvm 磁盘扩容

    打算给系统装一个oracle,发现磁盘空间不足.在安装系统的时候我选择的是自动分区,系统就会自动以LVM的方式分区.为了保证系统后期的可用性,建议所有新系统安装都采用LVM,之后生产上的设备我也打算这 ...

  3. IIS启动失败，启动Windows Process Activation Service时，出现错误13：数据无效 ;HTTP 错误 401.2 - Unauthorized 由于身份验证头无效，您无权查看此页

    因为修改过管理员账号的密码后重启服务器导致IIS无法启动,出现已下异常 1.解决:"启动Windows Process Activation Service时,出现错误13:数据无效&quo ...

  4. <程序员从入门到精通> -- How

    定位 自己才是职业生涯的管理者,想清楚自己的发展路径: 远期的理想是什么?近期的规划是什么?今日的任务和功课又是什么? 今日之任务或功课哪些有助于近期之规划的实现,而近期之规划是否有利于远期之理想? ...

  5. 搭建一套自己实用的.net架构(3)续 【ORM Dapper+DapperExtensions+Lambda】

    前言 继之前发的帖子[ORM-Dapper+DapperExtensions],对Dapper的扩展代码也进行了改进,同时加入Dapper 对Lambda表达式的支持. 由于之前缺乏对Lambda的知 ...

  6. 四、可空类型Nullable<T>到底是什么鬼

    值类型为什么不可以为空 首先我们都知道引用类型默认值都是null,而值类型的默认值都有非null. 为什么引用类型可以为空?因为引用类型变量都是保存一个对象的地址引用(就像一个url对应一个页面),而 ...

  7. Vue.js——60分钟组件快速入门（下篇）

    概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...

  8. 监督学习 VS 无监督学习

    监督学习 就是人们常说的分类,通过已有的训练样本(即已知数据以及其对应的输出)去训练得到一个最优模型(这个模型属于某个函数的集合,最优则表示在某个评价准则下是最佳的),再利用这个模型将所有的输入映射为 ...

  9. iOS开发系列--通讯录、蓝牙、内购、GameCenter、iCloud、Passbook系统服务开发汇总

    --系统应用与系统服务 iOS开发过程中有时候难免会使用iOS内置的一些应用软件和服务,例如QQ通讯录.微信电话本会使用iOS的通讯录,一些第三方软件会在应用内发送短信等.今天将和大家一起学习如何使用 ...

  10. 浅谈跨域以及WebService对跨域的支持

    跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问.也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源. 在 ...