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使用prototype定义对象类型
Feb 07 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
Bootstrap表单布局
Jul 19 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 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中的函数嵌套层数限制分析
2011/06/13 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php实现图片缩放功能类
2013/12/18 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
理解JavaScript中的对象 推荐
2011/01/09 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
简单的Vue SSR的示例代码
2018/01/12 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
使用浏览器访问python写的服务器程序
2019/10/10 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
django queryset相加和筛选教程
2020/05/18 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
大学生毕业自荐信
2013/10/10 职场文书
机关会计岗位职责
2014/04/08 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
文明礼仪主题班会
2015/08/13 职场文书
公开致歉信
2019/06/24 职场文书
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js