adding game with logic and a bit of graphics

scissors-paper-rock/assets/css/style.css

@@ -0,0 +1,81 @@
+* {
+ padding: 0;
+ margin: 0;
+}
+
+.slots {
+ background-color: red;
+ height: 5vw;
+ min-height: 50px;
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: nowrap;
+ align-items: center;
+}
+
+.blocks {
+ width: 20vw;
+ margin: 3px;
+ min-width: 15px;
+ /*
+ margin: 10px;
+ width: 20vw;
+
+ max-width: 600px;
+ min-width: 25px;
+ */
+ height: 34%;
+}
+
+.btn {
+
+ padding: 6px 12px;
+ margin-bottom: 0;
+ font-size: 14px;
+ font-weight: 400;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ -ms-touch-action: manipulation;
+ touch-action: manipulation;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ background-image: none;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ text-decoration: none;
+ color: #333;
+ background-color: #fff;
+ border-color: #ccc;
+}
+
+.imgs {
+ display: flex;
+ background-color: orange;
+ height: 60vh;
+ justify-content: space-around;
+ flex-wrap: nowrap;
+ align-items: center;
+
+}
+.img-slots{
+ width: 40vw;
+ height: 80%;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ border-color: #ccc;
+}
+
+.img-player {
+ background: #fff url(../imgs/scissors.svg) no-repeat center;
+ background-size: contain;
+}
+
+.img-pc {
+ background: #fff url(../imgs/scissors.svg) no-repeat center;
+ background-size: contain;
+ transform: rotateY(180deg);
+}

scissors-paper-rock/assets/js/script.js

@@ -0,0 +1,32 @@
+//setInterval(function(){ console.log("Hello"); }, 1000);
+let btns = document.querySelectorAll(".btn");
+
+combs = [];
+points_pc = 0;
+points_you = 0;
+btns.forEach(function (element, human) {
+ slot = element.getAttribute("data-game-slot");
+ combs.push(slot);
+ element.addEventListener("click", function () {
+ console.log("you: " + element.getAttribute("data-game-slot") + " " + human);
+ //change imgs here
+ pc = Math.floor(Math.random() * 3);
+ console.log("pc: " + combs[pc] + " " + pc);
+ console.log(check(human, pc));
+ });
+});
+function check(a,b){
+ if (a == b){
+ return "equal";
+ }
+ if ((a == 0 && b == 1) || (a == 1 && b == 2) || (a == 2 && b == 0)){
+ points_you++;
+ console.log("you: "+points_you);
+ return "you win";
+ }
+ else{
+ points_pc++;
+ console.log("pc: "+points_pc);
+ return "you loose";
+ }
+}