In diesem Artikel wird hauptsächlich die objektorientierte Implementierung des Ratespiels in JavaScript vorgestellt und anhand eines vollständigen Beispiels das spezifische Seitenlayout, der Stil und die funktionsbezogenen Bedienfähigkeiten der objektorientierten Implementierung des Ratespiels in JavaScript analysiert . Freunde, die es brauchen, können darauf verweisen.
Das Beispiel in diesem Artikel beschreibt das objektorientierte Ratespiel auf Basis von JavaScript. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
HTML-Code:
<!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>Nach dem Login kopieren
CSS-Stil (Schriftart: Mini Simple Cartoon)
*{
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 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('../img/0.png');
}
p.guess1{
background-image:url('../img/1.png');
}
p.guess2{
background-image:url('../img/2.png');
}
#game p.text{
margin-top:20px;
text-align:center;
font-size:50px;
font-weight:bold;
}Nach dem Login kopieren
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('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 );Nach dem Login kopieren
Verwandte Empfehlungen:
Native JS zur Implementierung von HTML5-Brick -Breaking-Game-Methode
Beispiel für die gemeinsame Nutzung von jQuery zur Implementierung des Puzzlespiels
Beispiel für die gemeinsame Nutzung von jQuery+vue.js Implementierung des Neun-Quadrats Puzzlespiel
Das obige ist der detaillierte Inhalt vonObjektorientierte JavaScript-Implementierung eines Ratespiels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
