Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@mifthulyn07
mifthulyn07 committed Apr 22, 2024
0 parents commit 0da936d
Show file tree
Hide file tree
Showing 3 changed files with 346 additions and 0 deletions.
147 changes: 147 additions & 0 deletions rock-paper-scissors-game.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body{
background-color: #FAEEE7;
}

/**/

.wrap{
display: flex;
flex-direction: column;
align-items: center;
}
h1{
margin: 30px 0px;
font-size: 45px;
}
main{
width: 400px;
padding: 5px;
background-color: #21325E;
box-shadow: inset 5px 5px 12px #355197, 5px 5px 12px rgb(0,0,0,0.16);
border-radius: 20px;
}

/**/

.topbar{
display: flex;
justify-content: space-between;
padding: 5px;
}
.control{
display: flex;
justify-content: center;
align-items: center;
}
.control div{
margin: 0px 5px;
}
.control .reset img{
width: 30px;
}
.control .reset button{
background: transparent;
border: none;
color: white;
}
.score{
display: flex;
justify-content: center;
align-items: center;
background-color: #EFEFEF;
box-shadow: inset 2px 3px 11px rgb(0,0,0,0.16), 5px 5px 12px #355197;
border-radius: 10px;
padding: 0px 5px;
}
.score .scorecomputer,
.score .scoreuser{
display: flex;
}
.score p{
margin: 0px 5px;
}

/**/

.userChoice{
display: flex;
justify-content: space-around;
box-shadow: inset 5px 5px 12px #f38458, 5px 5px 12px rgb(0,0,0,0.16);
background-color: #ee4f11;/*orange*/
border-radius: 20px;
padding: 10px;
margin: 30px 5px 5px;
}
.userChoice div{
border-radius: 50%;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: #EFEFEF;/*hijau*/
box-shadow: inset 2px 3px 11px rgb(0,0,0,0.16), 5px 5px 12px #f38458;
overflow: hidden;
}
.userChoice button{
background: transparent;
border: none;
cursor: pointer;
}
.userChoice div img{
width: 80px;
height: 80px;
}
.userChoice div img:hover{
transform: scale(0.98);
transition: 0.2s;
}

/**/
.computerChoice{
display: flex;
justify-content: center;
align-items: center;
}
.computer{
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
margin: 15px;
border-radius: 50%;
background-color: #EFEFEF;
box-shadow: inset 2px 3px 11px rgb(0,0,0,0.16), 5px 5px 12px #355197;
}
.computer img{
width: 85px;
margin: 15px 0px;
}

/**/

.info{
margin: 15px;
display: flex;
justify-content: center;
align-items: center;
}

.info .desc{
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 40px;
border-radius: 10px;
background-color: #EFEFEF;
box-shadow: inset 2px 3px 11px rgb(0,0,0,0.16), 5px 5px 12px #355197;
font-size: 22px;
font-weight: bold;
}
57 changes: 57 additions & 0 deletions rock-paper-scissors-game.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="5.LatihanGameSuit.css">
</head>
<body>
<div class="container">
<div class="wrap">
<h1>Rock Paper Scissors Game</h1>
<main>
<div class="topbar">
<div class="control">
<div class="reset">
<button><img src="../../0.OtherStuff/image/icon/redo.png" alt="reset"></button>
</div>
</div>
<div class="score">
<div class="scorecomputer">
<p>Computer:</p>
<p>0</p>
</div>
<div class="scoreuser">
<p>User:</p>
<p>0</p>
</div>
</div>
</div>
<div class="computerChoice">
<div class="computer">
<img>
</div>
</div>
<div class="info">
<div class="desc">
<p></p>
</div>
</div>
<div class="userChoice">
<div class="scissors">
<button id="scissors"><img src="../../0.OtherStuff/image/icon/scissors.png" alt="scissors"></button>
</div>
<div class="rock">
<button id="rock"><img src="../../0.OtherStuff/image/icon/rock.png" alt="rock"></button>
</div>
<div class="paper">
<button id="paper"><img src="../../0.OtherStuff/image/icon/paper.png" alt="paper"></button>
</div>
</div>
</main>
</div>
</div>
</body>
<script type="text/javascript" src="5.LatihanGameSuit.js"></script>
</html>
142 changes: 142 additions & 0 deletions rock-paper-scissors-game.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
//reset
document.querySelector('.control .reset button').addEventListener('click', function(){
classreset = document.querySelector('.control .reset button img');
classreset.style.transform = 'rotate(360deg)';
classreset.style.transition = '0.8s';
setTimeout(function(){//menunggu dulu dalam 0.8 detik baru menjalankan fungsi ini
location.reload();
},800);
});

let user, computer;
function computerChoice(){
computer = Math.round(Math.random() * 100 + 1) //memanggil library js yaitu bilangan random yang dibulatkan dari 1-100
if(computer <= 33){
computer = 'scissors';
document.querySelector('.computerChoice .computer img').setAttribute('src', '../../0.OtherStuff/image/icon/scissors.png');
}else if(computer > 33 && computer <= 66){
computer = 'rock';
document.querySelector('.computerChoice .computer img').setAttribute('src', '../../0.OtherStuff/image/icon/rock.png');
}else{
computer = 'paper';
document.querySelector('.computerChoice .computer img').setAttribute('src', '../../0.OtherStuff/image/icon/paper.png');

}
}

function result(computer, user){
let userValue, computerValue;
if(computer == user){
user=0;
computer=0;
document.querySelector('.info .desc p').innerHTML = "DRAW";
}else if(computer == "scissors"){
if(user == "rock"){
user=1;
computer=0;
document.querySelector('.info .desc p').innerHTML = "WIN";
}else if(user == "paper"){
user=0;
computer=1;
document.querySelector('.info .desc p').innerHTML = "LOSE";
}
}else if(computer == "rock"){
if(user == "scissors"){
user=0;
computer=1;
document.querySelector('.info .desc p').innerHTML = "LOSE";
}else if(user == "paper"){
user=1;
computer=0;
document.querySelector('.info .desc p').innerHTML = "WIN";
}
}else if(computer == "paper"){
if(user == "scissors"){
user=1;
computer=0;
document.querySelector('.info .desc p').innerHTML = "WIN";
}else if(user == "rock"){
user=0;
computer=1;
document.querySelector('.info .desc p').innerHTML = "LOSE";
}
}

function colorWinLose(){
if (user == 1){
document.querySelector('.info .desc').style.boxShadow = "inset 2px 3px 24px rgb(6, 255, 0,0.6), 5px 5px 12px #355197";
}else if(computer == 1){
document.querySelector('.info .desc').style.boxShadow = "inset 2px 3px 24px rgb(255, 23, 0,0.6), 5px 5px 12px #355197";
}else{
document.querySelector('.info .desc').style.boxShadow = "inset 2px 3px 24px rgb(251, 255, 0,0.6), 5px 5px 12px #355197";
}
}

score(user, computer);
colorWinLose();
}

let score1 = 0, score2 = 0;
function score(user,computer){
score1 = computer + score1;
computer = score1;
document.querySelector('.scorecomputer p:nth-child(2)').innerHTML = score1;

score2 = user + score2;
user = score2;
document.querySelector('.scoreuser p:nth-child(2)').innerHTML = score2;
}


let userChoice = document.querySelectorAll('.userChoice button');//menseleksi 3 image sekaligus
userChoice.forEach(function(choice){//menampilkan dengan cara looping
//choice berisi 3 image gunting, batu, kertas
choice.addEventListener('click', function(){//kita kelik maka yang tampil gambar yang kita klik
user = choice.id;//user = nama id
colorUserChoice();
shuffleImg();

setTimeout(function(){//menunggu dulu dalam 1 detik baru menjalankan gungsi ini
computerChoice();
result(computer,user);
},1000);
});
});


function colorUserChoice(){
if (user == 'scissors'){
document.querySelector('.userChoice .scissors').style.boxShadow = "inset 2px 3px 24px rgb(0, 234, 211,0.6), 5px 5px 12px #f27340";
document.querySelector('.userChoice .rock').style.boxShadow = "inset 2px 3px 11px rgb(0, 0, 0,0.16), 5px 5px 12px #f27340";
document.querySelector('.userChoice .paper').style.boxShadow = "inset 2px 3px 11px rgb(0, 0, 0,0.16), 5px 5px 12px #f27340";
}else if(user == 'rock'){
document.querySelector('.userChoice .scissors').style.boxShadow = "inset 2px 3px 11px rgb(0, 0, 0,0.16), 5px 5px 12px #f27340";
document.querySelector('.userChoice .rock').style.boxShadow = "inset 2px 3px 24px rgb(0, 234, 211,0.6), 5px 5px 12px #f27340";
document.querySelector('.userChoice .paper').style.boxShadow = "inset 2px 3px 11px rgb(0, 0, 0,0.16), 5px 5px 12px #f27340";
}else if(user =='paper'){
document.querySelector('.userChoice .scissors').style.boxShadow = "inset 2px 3px 11px rgb(0, 0, 0,0.16), 5px 5px 12px #f27340";
document.querySelector('.userChoice .rock').style.boxShadow = "inset 2px 3px 11px rgb(0, 0, 0,0.16), 5px 5px 12px #f27340";
document.querySelector('.userChoice .paper').style.boxShadow = "inset 2px 3px 24px rgb(0, 234, 211,0.6), 5px 5px 12px #f27340";
}
}

function shuffleImg(){
let imgComputer = document.querySelector('.computerChoice .computer img');
let img = ['scissors', 'rock', 'paper'];//array
let i = 0;

let startTiming = new Date().getTime();
//fungsi new Date() untuk mendapatkan tanggal dan waktu saat dari komputer kita
// getTime() mengembalikan angka mulai dari January 1, 1970 dengan satuan milidetik(1 detik = 1000 milidetik)


setInterval(function(){//fungsi untuk melakukan sesuatu secara berulang ulang selama interval waktu tertentu, interval 100 = 0,1 detik, setiap 0,1 detik gambar berganti
if(new Date().getTime()-startTiming>1000){//jika jumlah (1/1/1970-waktuSekarang)-jumlah(1/1/1970-waktuDiKlik > 1 detik) maka berputar selama 1 detik kemudian berhenti. (fungsi untuk memberhentikan putaran)
clearInterval;
return;//keluar dari function
}
imgComputer.setAttribute('src', '../../0.OtherStuff/image/icon/'+img[i++]+'.png');//mengganti gambar sesuai array
if(i == img.length) i = 0;//jika gambar sudah diganti sebanyak 3x, maka balik ke 0
}, 100);
}

0 comments on commit 0da936d

Please sign in to comment.