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 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
jQuery 跨域访问问题解决方法
Dec 02 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
js密码强度检测
Jan 07 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
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
操作Oracle的php类
2006/10/09 PHP
php网页后退不再出现过期
2007/03/08 PHP
php字符串分割函数用法实例
2015/03/17 PHP
php计算一个文件大小的方法
2015/03/30 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
详解Python3 pickle模块用法
2019/09/16 Python
使用python实现kNN分类算法
2019/10/16 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
python下载的库包存放路径
2020/07/27 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
小学德育工作经验交流材料
2014/05/22 职场文书
司法局火灾防控方案
2014/06/05 职场文书
环保小标语
2014/06/13 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android