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 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 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简单浏览目录内容的实现代码
2013/06/07 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
js 编程笔记 无名函数
2011/06/28 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
jquery获取节点名称
2015/04/26 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
了解前端理论:rscss和rsjs
2019/05/23 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
极简的HTML5模版
2015/07/09 HTML / CSS
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
学习标兵获奖感言
2014/02/20 职场文书
工作迟到检讨书
2014/02/21 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
中秋节主题班会
2015/08/14 职场文书
七年级作文之冬景
2019/11/07 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
详解如何使用Nginx解决跨域问题
2022/05/06 Servers