JavaScript面向对象实现猜拳游戏-js教程-PHP中文网

首页

web前端

js教程

JavaScript面向对象实现猜拳游戏

小云云

Jan 05, 2018 am 09:47 AM

javascript js

本文主要介绍了JavaScript基于面向对象实现的猜拳游戏,结合完整实例形式分析了javascript基于面向对象实现猜拳游戏的具体页面布局、样式及功能相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。

本文实例讲述了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>
  <p id="game">
    <ul class="panel">
      <li>
        <p class="name">我：name</p>
        <p class="anim user"></p>
      </li>
      <li>
        <p class="name">电脑：name</p>
        <p class="anim comp"></p>
      </li>
    </ul>
    <p class="op">
      <button id="play" onclick = "game.Caiquan();">开始</button>
    </p>
    <p id="text" class="text">请开始游戏...</p>
    <ul id="guess" class="guess">
      <li>
        <p class="guess0" onclick="game.verdict(0)">石头</p>
      </li>
      <li>
        <p class="guess1" onclick="game.verdict(1)">剪刀</p>
      </li>
      <li>
        <p class="guess2" onclick="game.verdict(2)">布</p>
      </li>
    </ul>
  </p>
  <script type="text/javascript" src="js/game.js"></script>
 </body>
</html>

登录后复制

css样式(字体：迷你简卡通)

*{
  margin:0px;
  padding:0px;
  font-family:&#39;迷你简卡通&#39;;
  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(&#39;../img/readyl.png&#39;);
}
.comp{
  background:url(&#39;../img/readyr.png&#39;);
}
#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 p{
  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 p:hover{
  background-color:#ff6699;
  color:#fff;
}
p.guess0{
  background-image:url(&#39;../img/0.png&#39;);
}
p.guess1{
  background-image:url(&#39;../img/1.png&#39;);
}
p.guess2{
  background-image:url(&#39;../img/2.png&#39;);
}
#game p.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(&#39;text&#39;);
  this.btn = document.getElementById("play");
  this.user = u;
  this.comp = c;
  this.classN =document.getElementsByClassName(&#39;name&#39;);
  this.guess = document.getElementById("guess");
  this.anim = document.getElementsByClassName("anim");
  this.num = 0;
  this.init();
  this.tiemr = null;
}
Game.prototype.Caiquan = function(){
  this.textValue( &#39;请出拳...&#39; );
  this.BtnDisable();
  this.start();
  this.guess.style.display = &#39;block&#39;;
}
//怎么玩
Game.prototype.start = function(){
  var This = this;
  this.timer = setInterval(function(){
    This.anim[0].className = &#39;anim user guess&#39; +( ( This.num ++ ) % 3 );
    This.anim[1].className = &#39;anim comp guess&#39; + ( ( This.num ++ ) % 3 ) ;
  },500)
}
//初始化名字
Game.prototype.init = function(){
  this.classN[0].innerHTML = &#39;我:&#39; + this.user.name;
  this.classN[1].innerHTML = &#39;电脑:&#39; + 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 =&#39;&#39;;
    this.btn.innerHTML = &#39;再来一次&#39;
  }else{
    this.btn.disabled = true;
    this.btn.className =&#39;disabled&#39;;
  }
}
Game.prototype.verdict = function( point ){
  clearInterval(this.timer);
  var userGu = user.guess(point);
  var compGu = comp.guess();
  this.anim[0].className = &#39;anim user guess&#39; + userGu;
  this.anim[1].className = &#39;anim comp guess&#39; + compGu;
  var res = userGu - compGu;
  switch (res){
    case 0:
    this.textValue(&#39;平局!!!&#39;)
      break;
    case 1:
    case -2:
    this.textValue(&#39;lose~~~&#39;);
    break;
    case 2:
    case -1:
    this.textValue(&#39;win!!!&#39;)
      break;
  }
  this.guess.style.display = &#39;none&#39;;
  this.BtnDisable();
}
var user = new User( &#39;锐雯&#39; );
var comp = new Comp( &#39;拉克丝&#39; );
var game = new Game( user , comp );

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7323

Java教程

1625

CakePHP 教程

1350

Laravel 教程

1262

PHP教程

1209

显示更多

Related knowledge

如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代，越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统，并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

PHP与JS开发技巧：掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

See all articles

JavaScript面向对象实现猜拳游戏

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题