实现剪刀石头布

<head>
    <meta charset="UTF-8">
    <meta name="Author" content="maoxin">
    <mate name="Description" content="网页设计 ，2019上学期，Assingment=#8. ">
    <title>剪刀石头布</title>
    <link rel="stylesheet" href="css/css.css">
  
    
</head>
<body>
    <header>
        
        <h1>大战 三百 回合</h1>
    </header>
    <div class="sorce-board">
        <div id="user-lable"class="badge">user</div>
        <div id="computer-lable"class="badge">computer</div>
        <span id="user-score">0</span>:<span id="computer-score">0</span>
    </div>
    <div class="result">
        <p>Paper covers rocks. You win!!</p>
    </div>
    <div class="choices">
        <div class="choice" id="r">
            <img src="images/rock.png" alt="">
        </div>
        <div class="choice" id="p">
            <img src="images/paper.png"alt="">
        </div>
        <div class="choice" id="s">
            <img src="images/scissors.png"alt="">
        </div>
    </div>
    <p id="action-massage">Make your move</p>
    <script type="text/javascript" src="js/js.js"></script>
</body>

let userSocer = 0;
let computerSocer=0;

const userScore_span = document.getElementById(“user-score”); //玩家分数块
const ComputerScore_span = document.getElementById(“computer-score”);//电脑分数
const scoreBoard_div = document.querySelector(".score-board"); //分数块
const result_p = document.querySelector(".result > p "); //结果
const rock = document.getElementById(“r”);
const paper = document.getElementById(“p”);
const scissors = document.getElementById(“s”);

function convertToWrod(letter){
if(letter === “r”) return “Rock”;
if(letter === “p”) return “Paper”;

return "Scissors";

}

function getComputerSocer(){
const choices = [‘r’ , ‘p’ , ‘s’];
const randomNumber = Math.floor(Math.random() * 3);
return choices[randomNumber];
}

function draw(userChoice , computerChoice){
const smallCompWord = “comp”.fontsize(3);
const smallUserWord = “user”.fontsize(3);
result_p.innerHTML = convertToWrod(computerChoice) + smallCompWord + “draw” + convertToWrod(userChoice) + smallUserWord + “！！！！”;
console.log(“dwwwwww”);
}

function game(userChoice){
const computerChoice = getComputerSocer();
switch(userChoice+computerChoice){
case ‘rs’:
case ‘pr’:
case ‘sp’:
win(userChoice,computerChoice);
break;
case ‘sr’:
case ‘rp’:
case ‘ps’:
lost(userChoice,computerChoice);
break;
case ‘rr’:
case ‘ss’:
case ‘pp’:
draw(userChoice , computerChoice);
break;
}
}

function main(){
rock.addEventListener(‘click’,function(){
game(‘r’) ;
})
paper.addEventListener(‘click’,function(){
game(‘p’) ;
})

scissors.addEventListener('click',function(){
game('s') ;

})
}

main();

@import url(‘http://fonts.googleapis.com/css?family=Asap:400,500,700’);
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
animation: flash 2s ease 0s infinite alternate;
}
@keyframes flash{
from{background: deepskyblue;}
to{background: pink;}
}
header{
padding: 20px;
background: white;
}
header > h1{
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font:bold;
}
header >p{
color:red;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font:bolder;
font-style: initial;
}
.sorce-board{
width: 200px;
margin-top: 20px;
margin:20px auto;
border: 3px solid white;
font-size: 36px;
border-radius: 4px;
position: relative;
padding:15px 20px;
color: aliceblue;
text-align: center;
}
.badge{
color:red;
font-size:14px;
background: #8d3e4f;
padding: 2px 10px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#user-lable{
position: absolute;
top: 20px;
left: -25px;
}
#computer-lable{
position:absolute;
top: 20px;
right: -40px;
}
.result{
color: aliceblue;
font-size: 24px;
}
.result >p{
text-align: center;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.choices{
margin-top: 50px;
text-align: center;
}
.choice{
border: 4px solid white;
border-radius: 50%;
margin:0 20px;
display: inline-block;
padding: 20px;
transition: all 0.3s ease;

}
.choice:hover{
cursor: pointer;
background: springgreen;
}
#action-massage{
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 30px;
color: white;
font-weight: bold;
margin-top: 20px;

}

在这里插入图片描述

实现剪刀石头布

实现剪刀石头布

猜你喜欢