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 相关文章推荐
$()JS小技巧
Jul 21 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 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
PHP 7.0.2 正式版发布
2016/01/08 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
Vue2.0如何发布项目实战
2017/07/27 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
python数据结构之链表详解
2017/09/12 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
Python内置异常类型全面汇总
2020/05/28 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
优秀毕业大学生推荐信
2013/11/13 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
夏季药店促销方案
2014/08/22 职场文书
个人四风问题整改措施
2014/10/24 职场文书
简爱读书笔记
2015/06/26 职场文书
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL