小贝子编程

我用javascript做了一个石头剪刀布游戏，但我在记分方面遇到了麻烦，我真的输了



function computerPlay() {
let [min, max] = [1, 3]
let randomNumber =  Math.floor(Math.random() * (max - min + 1)) + min;
if(randomNumber == 1) return 'ROCK'
else if(randomNumber == 2) return 'PAPER'
else return 'SCISSORS'
}

function play(playerSelection, computerSelection) {
let move = playerSelection;
let com = computerSelection;
if(move == 'ROCK' &&  com == 'SCISSORS') return 'ROCK beats SCISSORS';
else if(move == 'ROCK' && com == 'PAPER') return 'PAPER beats ROCK'
else if(move == 'SCISSORS' && com == 'ROCK') return 'ROCK beats SCISSORS'
else if(move == 'SCISSORS' && com == 'PAPER') return 'SCISSORS beat PAPER'
else if(move == 'PAPER' && com == 'SCISSORS') return 'SCISSORS beat PAPER'
else if(move == 'PAPER' && com == 'ROCK') return 'PAPER beats ROCK'
else if(move == com) return 'DRAW'
}

let playBtn = document.querySelector('.play-btn');
let container1 = document.querySelector('.container1');
playBtn.addEventListener('click', makeContainer);



// This is the function that creates the page that needs the player's input(rock, paper or scissors)
function makeContainer() {
container1.remove();
let con = document.createElement('div');
con.classList.add('container');
let h1 = document.createElement('h1');
h1.classList.add('one');
h1.textContent = 'ROCK PAPER SCISSORS';
let h12 = document.createElement('h1');
h12.classList.add('two');
h12.textContent = 'ROUND 1';
let h13 = document.createElement('h1');
h13.classList.add('three');
h13.textContent = 'MAKE YOUR MOVE';
let buttons = document.createElement('div');
buttons.classList.add('buttons');
let btn1 = document.createElement('div');
btn1.classList.add('rock');
let span = document.createElement('span');
span.textContent = 'ROCK';
btn1.append(span);
let btn2 = document.createElement('div');
btn2.classList.add('paper');
let span2 = document.createElement('span');
span2.textContent = 'PAPER';
btn2.append(span2);
let btn3 = document.createElement('div');
btn3.classList.add('scissors');
let span3 = document.createElement('span');
span3.textContent = 'SCISSORS';
btn3.append(span3);
buttons.append(btn1, btn2, btn3);
con.append(h1, h12, h13, buttons);

document.body.append(con);

const container = document.querySelector('.container');
const rock = document.querySelector('.rock');
const paper = document.querySelector('.paper');
const scissors = document.querySelector('.scissors');
[rock, paper, scissors].forEach((c) => c.addEventListener('click', (e) => {
// console.log(e.target);
containerDisappear(container, c)
}));
}


// This function removes the makeContainer page(the one that shows rock paper scissors) and adds a transition to it
function containerDisappear(con, r) {
let choi = r;
con.style.transitionProperty = 'opacity';
con.style.transitionDuration = '1s';
con.style.opacity = '0';
setTimeout(() => con.remove('container'), 1000); 
animation(choi);
}

// This function displays the animation that pops up after the the makeContainer page has disappeared
function animation(r) {
let choic = r;
const waitdiv = document.createElement('div');
waitdiv.classList.add('waitdiv');
const div1 = document.createElement('div');
const div2 = document.createElement('div');
const div3 = document.createElement('div');    
div1.classList.add('div1');
div2.classList.add('div2');        
div3.classList.add('div3');
div1.textContent = 'ROCK...';
div2.textContent = 'PAPER...';
div3.textContent = 'SCISSORS...';
waitdiv.append(div1, div2, div3);
document.body.append(waitdiv);    

setTimeout(() => {
div1.style.transitionProperty = 'opacity';
div1.style.transitionDuration = '.6s';
div1.style.opacity = '1';
}, 600);

setTimeout(() => {
div2.style.transitionProperty = 'opacity';
div2.style.transitionDuration = '.6s';
div2.style.opacity = '1';
}, 1200);

setTimeout(() => {
div3.style.transitionProperty = 'opacity';
div3.style.transitionDuration = '.6s';
div3.style.opacity = '1';
}, 1800); 


setTimeout(() => {
waitdiv.style.transitionProperty = 'opacity';
waitdiv.style.transitionDuration = '.3s';
waitdiv.style.opacity = '0';
waitdiv.remove();
}, 2400);

setTimeout(() => {
results(choic)
}, 2400);
}

// This function displays the player's move vs the computer's move and then displays information about who lost
/* Theres a 0:1 right at the bottom of this page, it's static, it doesn't update after each move, it's actually one of the things I'm
struggling with */
function results(c) {
const cShoot = document.createElement('div');
cShoot.classList.add('container-shoot');
const shoot = document.createElement('h1');
shoot.classList.add('shoot');
const round = document.createElement('h1');
round.classList.add('round');
const versus = document.createElement('div');
versus.classList.add('versus');
const v = document.createElement('div');
v.classList.add('v');
const h6 = document.createElement('h6');
const choice = document.createElement('div');
choice.classList.add('choice');
const vs = document.createElement('div');
vs.classList.add('v');
const v2 = document.createElement('div');
v2.classList.add('v');
const choice2 = document.createElement('div');
choice2.classList.add('choice');
const h62 = document.createElement('h6');

// ----------------second part---------------------------------------
const info = document.createElement('div');
info.classList.add('info');
const h2 = document.createElement('h2');
const h3 = document.createElement('h3');
const span = document.createElement('span');


// ---------------------third part------------------------------------
const score = document.createElement('div');
score.classList.add('score');
const span2 = document.createElement('span');
span2.classList.add('player');
const span3 = document.createElement('span');
span3.classList.add('colon');
const span4 = document.createElement('span');
span4.classList.add('com');

// ---------------------time to append stuff--------------------------------------------
cShoot.append(shoot, round, versus, info, score);
versus.append(v, vs, v2);
v.append(h6, choice);
vs.textContent = 'VS';
v2.append(choice2, h62);
info.append(h2, h3);
h3.append(span);
span2.textContent = '0';
span3.textContent = ':';
span4.textContent = '1';
score.append(span2, span3, span4);

// ----------------adding text--------------------------------------------
shoot.textContent = 'SHOOT!!!';
round.textContent = 'ROUND 1';
h6.textContent = 'YOU';
choice.textContent = (c.classList.value == 'rock') ? 'ROCK' :
c.classList.value == 'paper' ? 'PAPER' : 
c.classList.value == 'scissors' ? 'SCISSORS' : null;
vs.textContent = 'VS';
choice2.textContent = computerPlay();
h62.textContent = 'COM';
h2.textContent = play(choice.textContent, choice2.textContent);
span.textContent = s();
if(span.textContent == 'YOU WIN THIS ROUND') span.style.color = 'green';
else span.style.color = 'red'
// -------------------------function-------------------------------------------------
function s() {
if(choice.textContent == 'ROCK' && choice2.textContent == 'SCISSORS') {
return 'YOU WIN THIS ROUND'
}
else if(choice.textContent == 'ROCK' && choice2.textContent == 'PAPER') {
return 'YOU LOSE THIS ROUND'
}
else if(choice.textContent == 'SCISSORS' && choice2.textContent == 'ROCK') {
return 'YOU LOSE THIS ROUND'
}
else if(choice.textContent == 'SCISSORS' && choice2.textContent == 'PAPER') {
return 'YOU WIN THIS ROUND'
}
else if(choice.textContent == 'PAPER' && choice2.textContent == 'SCISSORS') {
return 'YOU LOSE THIS ROUND'
}
else if(choice.textContent == 'PAPER' && choice2.textContent == 'ROCK') {
return 'YOU WIN THIS ROUND'
}
}
// --------------------------------------------------------------------------

document.body.append(cShoot);
// cShoot is the first variable that was created inside this function, it's the div tha holds everything on this page

}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
}
body {
background-color: #333;
}
.container {
height: 100vh;
text-align: center;
position: relative;
opacity: 1;
}
.buttons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
column-gap: 30px;
}
.rock {
border-radius: 20px;
height: 150px;
width: 200px;
border: 2px solid red;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.05s;
}
.rock:hover {
cursor: pointer;
transform: scale(1.05);
}
.paper {
border-radius: 20px;
height: 150px;
width: 200px;
border: 2px solid red;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.05s;
}
.paper:hover {
cursor: pointer;
transform: scale(1.05);
}
.scissors {
border-radius: 20px;
height: 150px;
width: 200px;
border: 2px solid red;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.05s;
}
.scissors:hover {
cursor: pointer;
transform: scale(1.05);
}
span {
font-size: 22px;
}

.one {
position: relative;
top: 40px;
}
.two {
position: relative;
top: 60px;
}
.three {
position: relative;
top: 80px;
font-size: 23px;
}
.waitdiv {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.div1 {
opacity: 0;
font-size: 75px;
}
.div2 {
opacity: 0;
font-size: 75px;
}
.div3 {
opacity: 0;
font-size: 75px;
}
.container-shoot {
height: 100vh;
text-align: center;
position: relative;
}
.shoot {
font-size: 80px;
position: relative;
top: 50px;
}
.round {
position: relative;
top: 55px;
}
.versus {
display: flex;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
width: 80%;
}
.v {
display: flex;
text-align: center;
flex-basis: 100%;
justify-content: space-evenly;
align-items: center;
}
.choice {
border-radius: 20px;
text-align: center;
border: 2px solid red;
/* font-size: 30px; */
height: 100px;
display: flex;
align-items: center;
}
.info {
position: absolute;
bottom: 150px;
left: 50%;
transform: translate(-50%, -70px);
}
.info h3 span {
color: white;
}
.score {
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%, -20px); 
}
.score span {
font-size: 70px;
}
.container1 {
height: 100vh;
position: relative;
}
.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px 30px;
cursor: pointer;
color: black;
font-size: 16px;
border-radius: 12px;
border: none;
}
.next {
border-radius: 17px;
border: none;
position: absolute;
left: 90%;
top: 90%;
transform: translate(-50%, -50%);
cursor: pointer;
padding: 12px 18px;
color: black;
}
<div class="container1">
<button class="play-btn">PLAY</button>
</div>

我用javascript做了一个石头剪刀布游戏，我在记分方面遇到了麻烦。 我需要一种方法来跟踪玩家和计算机之间谁赢了，该分数应该显示在页面底部。 如果你运行整个代码(html，css和javascript)，你将在最后一页的底部看到这个例子。 我鼓励你运行整个代码

这是我的 HTML 文件：

<div class="container1"><button class="play-btn">PLAY</button></div>

这是我在JAVASCRIPT文件中编写的代码：

function computerPlay() {
let [min, max] = [1, 3]
let randomNumber =  Math.floor(Math.random() * (max - min + 1)) + min;
if(randomNumber == 1) return 'ROCK'
else if(randomNumber == 2) return 'PAPER'
else return 'SCISSORS'

}

function play(playerSelection, computerSelection) {
let move = playerSelection;
let com = computerSelection;
if(move == 'ROCK' && com == 'SCISSORS') return 'ROCK beats SCISSORS';
else if(move == 'ROCK' && com == 'PAPER') return 'PAPER beats ROCK'
else if(move == 'SCISSORS' && com == 'ROCK') return 'ROCK beats SCISSORS'
else if(move == 'SCISSORS' && com == 'PAPER') return 'SCISSORS beat PAPER'
else if(move == 'PAPER' && com == 'SCISSORS') return 'SCISSORS beat PAPER'
else if(move == 'PAPER' && com == 'ROCK') return 'PAPER beats ROCK'
else if(move == com) return 'DRAW'

}

let arr = [];
let playBtn = document.querySelector('.play-btn');
let container1 = document.querySelector('.container1');
playBtn.addEventListener('click', makeContainer);

这是创建需要玩家输入的页面(石头、纸或剪刀)

的功能
function makeContainer() {
container1.remove();
let con = document.createElement('div');
con.classList.add('container');
let h1 = document.createElement('h1');
h1.classList.add('one');
h1.textContent = 'ROCK PAPER SCISSORS';
let h12 = document.createElement('h1');
h12.classList.add('two');
h12.textContent = 'ROUND 1';
let h13 = document.createElement('h1');
h13.classList.add('three');
h13.textContent = 'MAKE YOUR MOVE';
let buttons = document.createElement('div');
buttons.classList.add('buttons');
let btn1 = document.createElement('div');
btn1.classList.add('rock');
let span = document.createElement('span');
span.textContent = 'ROCK';
btn1.append(span);
let btn2 = document.createElement('div');
btn2.classList.add('paper');
let span2 = document.createElement('span');
span2.textContent = 'PAPER';
btn2.append(span2);
let btn3 = document.createElement('div');
btn3.classList.add('scissors');
let span3 = document.createElement('span');
span3.textContent = 'SCISSORS';
btn3.append(span3);
buttons.append(btn1, btn2, btn3);
con.append(h1, h12, h13, buttons);

document.body.append(con);

const container = document.querySelector('.container');
const rock = document.querySelector('.rock');
const paper = document.querySelector('.paper');
const scissors = document.querySelector('.scissors');
[rock, paper, scissors].forEach((c) => c.addEventListener('click', (e) => {
// console.log(e.target);
containerDisappear(container, c)
}));
}

此函数删除 makeContainer 页面(显示石头剪刀布的页面)并向其添加过渡

function containerDisappear(con, r) {
let choi = r;
con.style.transitionProperty = 'opacity';
con.style.transitionDuration = '1s';
con.style.opacity = '0';
setTimeout(() => con.remove('container'), 1000); 
animation(choi);
}

此函数显示 makeContainer 页面消失后弹出的动画

function animation(r) {
let choic = r;
const waitdiv = document.createElement('div');
waitdiv.classList.add('waitdiv');
const div1 = document.createElement('div');
const div2 = document.createElement('div');
const div3 = document.createElement('div');    
div1.classList.add('div1');
div2.classList.add('div2');        
div3.classList.add('div3');
div1.textContent = 'ROCK...';
div2.textContent = 'PAPER...';
div3.textContent = 'SCISSORS...';
waitdiv.append(div1, div2, div3);
document.body.append(waitdiv);    

setTimeout(() => {
div1.style.transitionProperty = 'opacity';
div1.style.transitionDuration = '.6s';
div1.style.opacity = '1';
}, 600);

setTimeout(() => {
div2.style.transitionProperty = 'opacity';
div2.style.transitionDuration = '.6s';
div2.style.opacity = '1';
}, 1200);

setTimeout(() => {
div3.style.transitionProperty = 'opacity';
div3.style.transitionDuration = '.6s';
div3.style.opacity = '1';
}, 1800); 


setTimeout(() => {
waitdiv.style.transitionProperty = 'opacity';
waitdiv.style.transitionDuration = '.3s';
waitdiv.style.opacity = '0';
waitdiv.remove();
}, 2400);

setTimeout(() => {
results(choic)
}, 2400);
}

此功能显示玩家的移动与计算机的移动，然后显示有关谁输了的信息 这个页面的底部有一个0：1，它是静态的，每次移动后都不会更新，这实际上是我正在努力的事情之一

function results(c) {
const cShoot = document.createElement('div');
cShoot.classList.add('container-shoot');
const shoot = document.createElement('h1');
shoot.classList.add('shoot');
const round = document.createElement('h1');
round.classList.add('round');
const versus = document.createElement('div');
versus.classList.add('versus');
const v = document.createElement('div');
v.classList.add('v');
const h6 = document.createElement('h6');
const choice = document.createElement('div');
choice.classList.add('choice');
const vs = document.createElement('div');
vs.classList.add('v');
const v2 = document.createElement('div');
v2.classList.add('v');
const choice2 = document.createElement('div');
choice2.classList.add('choice');
const h62 = document.createElement('h6');

// ----------------second part---------------------------------------
const info = document.createElement('div');
info.classList.add('info');
const h2 = document.createElement('h2');
const h3 = document.createElement('h3');
const span = document.createElement('span');


// ---------------------third part------------------------------------
const score = document.createElement('div');
score.classList.add('score');
const span2 = document.createElement('span');
span2.classList.add('player');
const span3 = document.createElement('span');
span3.classList.add('colon');
const span4 = document.createElement('span');
span4.classList.add('com');

// ---------------------time to append stuff--------------------------------------------
cShoot.append(shoot, round, versus, info, score);
versus.append(v, vs, v2);
v.append(h6, choice);
vs.textContent = 'VS';
v2.append(choice2, h62);
info.append(h2, h3);
h3.append(span);
span2.textContent = '0';
span3.textContent = ':';
span4.textContent = '1';
score.append(span2, span3, span4);

// ----------------adding text--------------------------------------------
shoot.textContent = 'SHOOT!!!';
round.textContent = 'ROUND 1';
h6.textContent = 'YOU';
choice.textContent = (c.classList.value == 'rock') ? 'ROCK' :
c.classList.value == 'paper' ? 'PAPER' : 
c.classList.value == 'scissors' ? 'SCISSORS' : null;
vs.textContent = 'VS';
choice2.textContent = computerPlay();
h62.textContent = 'COM';
h2.textContent = play(choice.textContent, choice2.textContent);
span.textContent = s();
if(span.textContent == 'YOU WIN THIS ROUND') span.style.color = 'green';
else span.style.color = 'red'
// -------------------------function-------------------------------------------------
function s() {
if(choice.textContent == 'ROCK' && choice2.textContent == 'SCISSORS') {
return 'YOU WIN THIS ROUND'
}
else if(choice.textContent == 'ROCK' && choice2.textContent == 'PAPER') {
return 'YOU LOSE THIS ROUND'
}
else if(choice.textContent == 'SCISSORS' && choice2.textContent == 'ROCK') {
return 'YOU LOSE THIS ROUND'
}
else if(choice.textContent == 'SCISSORS' && choice2.textContent == 'PAPER') {
return 'YOU WIN THIS ROUND'
}
else if(choice.textContent == 'PAPER' && choice2.textContent == 'SCISSORS') {
return 'YOU LOSE THIS ROUND'
}
else if(choice.textContent == 'PAPER' && choice2.textContent == 'ROCK') {
return 'YOU WIN THIS ROUND'
}
}
// --------------------------------------------------------------------------

document.body.append(cShoot);
// cShoot is the first variable that was created inside this function, it's the div tha holds everything on this page

}

这是我的 css 文件：

* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
}
body {
background-color: #333;
}
.container {
height: 100vh;
text-align: center;
position: relative;
opacity: 1;
}
.buttons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
column-gap: 30px;
}
.rock {
border-radius: 20px;
height: 150px;
width: 200px;
border: 2px solid red;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.05s;
}
.rock:hover {
cursor: pointer;
transform: scale(1.05);
}
.paper {
border-radius: 20px;
height: 150px;
width: 200px;
border: 2px solid red;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.05s;
}
.paper:hover {
cursor: pointer;
transform: scale(1.05);
}
.scissors {
border-radius: 20px;
height: 150px;
width: 200px;
border: 2px solid red;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.05s;
}
.scissors:hover {
cursor: pointer;
transform: scale(1.05);
}
span {
font-size: 22px;
}

.one {
position: relative;
top: 40px;
}
.two {
position: relative;
top: 60px;
}
.three {
position: relative;
top: 80px;
font-size: 23px;
}
.waitdiv {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.div1 {
opacity: 0;
font-size: 75px;
}
.div2 {
opacity: 0;
font-size: 75px;
}
.div3 {
opacity: 0;
font-size: 75px;
}
.container-shoot {
height: 100vh;
text-align: center;
position: relative;
}
.shoot {
font-size: 80px;
position: relative;
top: 50px;
}
.round {
position: relative;
top: 55px;
}
.versus {
display: flex;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
width: 80%;
}
.v {
display: flex;
text-align: center;
flex-basis: 100%;
justify-content: space-evenly;
align-items: center;
}
.choice {
border-radius: 20px;
text-align: center;
border: 2px solid red;
/* font-size: 30px; */
height: 100px;
display: flex;
align-items: center;
}
.info {
position: absolute;
bottom: 150px;
left: 50%;
transform: translate(-50%, -70px);
}
.info h3 span {
color: white;
}
.score {
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%, -20px); 
}
.score span {
font-size: 70px;
}
.container1 {
height: 100vh;
position: relative;
}
.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px 30px;
cursor: pointer;
color: black;
font-size: 16px;
border-radius: 12px;
border: none;
}
.next {
border-radius: 17px;
border: none;
position: absolute;
left: 90%;
top: 90%;
transform: translate(-50%, -50%);
cursor: pointer;
padding: 12px 18px;
color: black;
}

问题

"...我在记分方面遇到问题。我需要一种方法来跟踪玩家和计算机之间的谁赢了,...">

我不能具体说出OP(O刚性Post)代码中的问题是什么，因为它太臃肿了。我没有梳理 200 行并最终重写 80% 的代码，而是制作了一个 roshambo 游戏，它的行为和看起来与 OP 代码类似(参见示例 B)。

解决 方案

<form>& Form Controls

简单游戏的最佳 HTML 布局是<form>和表单控件。HTMLFormElement 和 HTMLFormControlsCollection 接口允许我们使用简洁而通用的语法(参见图IA和图 IB)

图 IA-<form>和表单控件的简单 HTML 布局

<form id='contacts'>
<fieldset name='group'>
<label>First Name:
<input id='firstname' value='zer0'>
</label>
<label>Last Name:
<input id='lastname' value='0ne'>
</label>
</fieldset>
<fieldset name='group'>
<output id='fullname'></output>
</fieldset>
<fieldset name='group'>
<label>Phone: <input id='phone' type='tel'></label>
<button type='reset'>Reset</button>
<button>Submit</button>
</fieldset>
</form>

图 IB- DOM 接口之间的比较

Common DOM Methodsstyle="text-align： left;"><form>>const C = document.getElementById('contacts')style="文本对齐：左;">所有表单控件>const sets = C.querySelectorAll('fieldset')style="text-align： left;">获取<input id='phone'>的值
ObjectiveHTMLFormElement
const C = document.forms.contacts
const all = C.elementsconst all = C.querySelectorAll('fieldset, input, button')
"text-align： left;">All<fieldset>sconst sets = all.group
let cell = all.phone.valuelet cell = C.querySelector('#phone').value

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium