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

本文实例讲述了JavaScript基于面向对象实现的猜拳游戏。分享给大家供大家参考，具体如下：

html代码：

猜拳游戏

• 我：name

• 电脑：name

开始

请开始游戏...

• 石头

• 剪刀

• 布

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 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;

}

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 );

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：