本文實例講述了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"> <ul class="panel"> <li> <p class="name">我：name</p> <div class="anim user"></div> </li> <li> <p class="name">電腦：name</p> <div class="anim comp"></div> </li> </ul> <div class="op"> <button id="play" onclick = "game.Caiquan();">開始</button> </div> <div id="text" class="text">請開始游戲...</div> <ul id="guess" class="guess"> <li> <div class="guess0" onclick="game.verdict(0)">石頭</div> </li> <li> <div class="guess1" onclick="game.verdict(1)">剪刀</div> </li> <li> <div class="guess2" onclick="game.verdict(2)">布</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);}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 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; 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 );希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
