JavaScript基于面向对象实现的猜拳游戏


Posted in Javascript onJanuary 03, 2018

本文实例讲述了JavaScript基于面向对象实现的猜拳游戏。分享给大家供大家参考,具体如下:

html代码:

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>猜拳游戏</title>
 <link rel="stylesheet" href="css/game.css" rel="external nofollow" ></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程序设计有所帮助。

Javascript 相关文章推荐
csdn 论坛技术区平均给分功能
Nov 07 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
JavaScript分页组件使用方法详解
Jul 26 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 #Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 #Javascript
vue项目中用cdn优化的方法
Jan 03 #Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 #Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 #Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 #Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 #Javascript
You might like
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
vue实现购物车列表
2020/06/30 Javascript
Python切片用法实例教程
2014/09/08 Python
python分割文件的常用方法
2014/11/01 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python装饰器语法糖
2019/01/02 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
python读取Kafka实例
2019/12/23 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
会议开场欢迎词
2014/01/15 职场文书
网站出售协议书范文
2014/10/10 职场文书
学校食品安全责任书
2015/01/29 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
客户付款通知书
2015/04/23 职场文书