Home >Web Front-end >JS Tutorial >How to implement a guessing game using JavaScript (detailed tutorial)
This article mainly introduces the object-oriented implementation of the guessing game in JavaScript, and analyzes the specific page layout, style and function-related operation skills of the object-oriented implementation of the guessing game in JavaScript based on a complete example. Friends in need can refer to the following
The example in this article describes the guessing game based on object-oriented implementation in JavaScript. Share it with everyone for your reference, the details are as follows:
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>css style (font: mini 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;
}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 );The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Detailed interpretation of the separation and combination of vue-admin and backend (flask)
How to implement panda tv using jquery css3 Navigation
How to implement timed hiding dialog box in jQuery
How to implement DIV to disappear or display after a few seconds delay in JS/jQuery
Use native js to realize three-level linkage between provinces and municipalities
The above is the detailed content of How to implement a guessing game using JavaScript (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!