18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

百度微信小程序开发_JavaScript基于面向对象完成的

2021-01-11分享 "> 对不起,没有下一图集了!">
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 
 div id="game" 
 p 我:name /p 
 div /div 
 /li 
 p 电脑:name /p 
 div /div 
 /li 
 /ul 
 div 
 button id="play" onclick = "game.Caiquan();" 开始 /button 
 /div 
 div id="text" 请开始游戏... /div 
 ul id="guess" 
 div 石头 /div 
 /li 
 div 剪刀 /div 
 /li 
 div 布 /div 
 /li 
 /ul 
 /div 
 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);
 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 div{
 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 div:hover{
 background-color:#ff6699;
 color:#fff;
div.guess0{
 background-image:url('../img/0.png');
div.guess1{
 background-image:url('../img/1.png');
div.guess2{
 background-image:url('../img/2.png');
#game div.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;
 p = 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 = 'p guess' + ( ( This.num ++ ) % 3 ) ;
 },500)
//初始化名字
Game.prototype.init = function(){
 this.classN[0].innerHTML = '我:' + this.user.name;
 this.classN[1].innerHTML = '电脑:' + p.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);
 pGu = comp.guess();
 this.anim[0].className = 'anim user guess' + userGu;
 this.anim[1].className = 'p 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( '锐雯' );
p = new Comp( '拉克丝' );
var game = new Game( user , comp );

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》及《》

希望本文所述对大家JavaScript程序设计有所帮助。


"> 对不起,没有下一图集了!">
在线咨询