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 相关文章推荐
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 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开发工具
2015/11/09 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
python调用新浪微博API项目实践
2014/07/28 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Python实现的归并排序算法示例
2017/11/21 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
python实现顺时针打印矩阵
2019/03/02 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
德国网上花店:Valentins
2018/08/15 全球购物
土木工程师岗位职责
2013/11/24 职场文书
工业学校毕业生自荐书
2014/01/03 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
2014年科技工作总结
2014/11/26 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python