使用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> <ul class="panel"> <li> 我：name </li> <li> 电脑：name </li> </ul> <button id="play" onclick = "game.caiquan();">开始</button> 请开始游戏... <ul id="guess" class="guess"> <li> 石头 </li> <li> 剪刀 </li> <li> 布 </li> </ul> <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 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 );
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
详细解读vue-admin和后端(flask)分离结合
使用jquery+css3如何实现熊猫tv导航
在jquery中如何实现定时隐藏对话框
在js/jquery中如何实现div延时几秒后消失或显示
使用原生js实现省市区三级联动
以上就是使用javascript如何实现猜拳游戏（详细教程）的详细内容。

使用JavaScript如何实现猜拳游戏（详细教程）

推荐信息