JavaScript를 사용하여 추측 게임을 구현하는 방법(자세한 튜토리얼)-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript를 사용하여 추측 게임을 구현하는 방법(자세한 튜토리얼)

亚连

Jun 13, 2018 pm 05:44 PM

javascript 객체지향

이 글에서는 주로 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 code

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 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7715

자바 튜토리얼

1640

Cakephp 튜토리얼

1395

라라벨 튜토리얼

1289

PHP 튜토리얼

1232

Related knowledge

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

Go의 객체 지향 프로그래밍 살펴보기 Apr 04, 2024 am 10:39 AM

Go 언어는 유형 정의 및 메소드 연관을 통해 객체 지향 프로그래밍을 지원합니다. 전통적인 상속을 지원하지 않지만 구성을 통해 구현됩니다. 인터페이스는 유형 간의 일관성을 제공하고 추상 메소드를 정의할 수 있도록 합니다. 실제 사례에서는 OOP를 사용하여 고객 운영 생성, 획득, 업데이트 및 삭제를 포함하여 고객 정보를 관리하는 방법을 보여줍니다.

PHP 고급 기능: 객체 지향 프로그래밍의 모범 사례 Jun 05, 2024 pm 09:39 PM

PHP의 OOP 모범 사례에는 명명 규칙, 인터페이스 및 추상 클래스, 상속 및 다형성, 종속성 주입이 포함됩니다. 실제 사례에는 웨어하우스 모드를 사용하여 데이터를 관리하고 전략 모드를 사용하여 정렬을 구현하는 것이 포함됩니다.

Golang에 클래스와 유사한 객체지향 기능이 있나요? Mar 19, 2024 pm 02:51 PM

Golang(Go 언어)에는 전통적인 의미의 클래스 개념이 없지만, 클래스와 유사한 객체지향 기능을 구현할 수 있는 구조체라는 데이터 형식을 제공합니다. 이 기사에서는 구조를 사용하여 객체 지향 기능을 구현하는 방법을 설명하고 특정 코드 예제를 제공합니다. 구조의 정의와 사용법 먼저 구조의 정의와 사용법을 살펴보자. Golang에서는 type 키워드를 통해 구조를 정의한 다음 필요한 곳에 사용할 수 있습니다. 구조에는 속성이 포함될 수 있습니다.

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가

Go 언어의 객체지향적 특징 분석 Apr 04, 2024 am 11:18 AM

Go 언어는 객체 지향 프로그래밍, 구조체를 통한 객체 정의, 포인터 수신기를 사용한 메서드 정의, 인터페이스를 통한 다형성 구현을 지원합니다. 객체 지향 기능은 Go 언어에서 코드 재사용, 유지 관리 용이성 및 캡슐화를 제공하지만 클래스 및 상속 및 메서드 시그니처 캐스트에 대한 전통적인 개념이 부족하다는 제한 사항도 있습니다.

PHP 객체 지향 프로그래밍에 대한 심층적인 이해: 객체 지향 프로그래밍을 위한 디버깅 기술 Jun 05, 2024 pm 08:50 PM

개체 상태 추적, 중단점 설정, 예외 추적 및 xdebug 확장 활용을 마스터하면 PHP 개체 지향 프로그래밍 코드를 효과적으로 디버그할 수 있습니다. 1. 객체 상태 추적: var_dump() 및 print_r()을 사용하여 객체 속성 및 메소드 값을 확인합니다. 2. 중단점 설정: 개발 환경에서 중단점을 설정하면 실행이 중단점에 도달하면 디버거가 일시 중지되므로 개체 상태를 쉽게 확인할 수 있습니다. 3. 예외 추적: 예외 발생 시 스택 추적 및 메시지를 가져오려면 try-catch 블록과 getTraceAsString()을 사용합니다. 4. 디버거 사용: xdebug_var_dump() 함수는 코드 실행 중에 변수의 내용을 검사할 수 있습니다.

JavaScript 및 WebSocket: 효율적인 실시간 검색 엔진 구축 Dec 17, 2023 pm 10:13 PM

JavaScript 및 WebSocket: 효율적인 실시간 검색 엔진 구축 소개: 인터넷이 발전함에 따라 사용자는 실시간 검색 엔진에 대한 요구 사항이 점점 더 높아지고 있습니다. 기존 검색 엔진으로 검색할 때 사용자는 검색 버튼을 클릭해야 결과를 얻을 수 있습니다. 이 방법은 실시간 검색 결과에 대한 사용자의 요구를 충족할 수 없습니다. 따라서 JavaScript와 WebSocket 기술을 활용하여 실시간 검색 엔진을 구현하는 것이 화두가 되었습니다. 이 기사에서는 JavaScript의 사용법을 자세히 소개합니다.

See all articles

JavaScript를 사용하여 추측 게임을 구현하는 방법(자세한 튜토리얼)

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제