-
Notifications
You must be signed in to change notification settings - Fork 0
/
rock-paper-scissor-lizard-spock.html
35 lines (30 loc) · 3.59 KB
/
rock-paper-scissor-lizard-spock.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissor Spock Game</title>
<!--<link rel="stylesheet" type="text/css" href="rsp.css">-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&family=Tourney:wght@900&display=swap');
</style>
</head>
<body>
<div class="main">
<!-- <svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#000000"></rect><path d="M0 245L16.7 237.3C33.3 229.7 66.7 214.3 100 207.3C133.3 200.3 166.7 201.7 200 209.3C233.3 217 266.7 231 300 234.5C333.3 238 366.7 231 400 230.2C433.3 229.3 466.7 234.7 500 225.3C533.3 216 566.7 192 600 179.5C633.3 167 666.7 166 700 181.7C733.3 197.3 766.7 229.7 800 250.2C833.3 270.7 866.7 279.3 883.3 283.7L900 288L900 0L883.3 0C866.7 0 833.3 0 800 0C766.7 0 733.3 0 700 0C666.7 0 633.3 0 600 0C566.7 0 533.3 0 500 0C466.7 0 433.3 0 400 0C366.7 0 333.3 0 300 0C266.7 0 233.3 0 200 0C166.7 0 133.3 0 100 0C66.7 0 33.3 0 16.7 0L0 0Z" fill="#08260c"></path><path d="M0 117L16.7 132.5C33.3 148 66.7 179 100 183.2C133.3 187.3 166.7 164.7 200 155.7C233.3 146.7 266.7 151.3 300 148.2C333.3 145 366.7 134 400 146C433.3 158 466.7 193 500 207.3C533.3 221.7 566.7 215.3 600 208.7C633.3 202 666.7 195 700 181C733.3 167 766.7 146 800 135.2C833.3 124.3 866.7 123.7 883.3 123.3L900 123L900 0L883.3 0C866.7 0 833.3 0 800 0C766.7 0 733.3 0 700 0C666.7 0 633.3 0 600 0C566.7 0 533.3 0 500 0C466.7 0 433.3 0 400 0C366.7 0 333.3 0 300 0C266.7 0 233.3 0 200 0C166.7 0 133.3 0 100 0C66.7 0 33.3 0 16.7 0L0 0Z" fill="#154517"></path><path d="M0 108L16.7 117.8C33.3 127.7 66.7 147.3 100 156.3C133.3 165.3 166.7 163.7 200 152.2C233.3 140.7 266.7 119.3 300 119.5C333.3 119.7 366.7 141.3 400 149.7C433.3 158 466.7 153 500 144.5C533.3 136 566.7 124 600 116.7C633.3 109.3 666.7 106.7 700 108.3C733.3 110 766.7 116 800 116.5C833.3 117 866.7 112 883.3 109.5L900 107L900 0L883.3 0C866.7 0 833.3 0 800 0C766.7 0 733.3 0 700 0C666.7 0 633.3 0 600 0C566.7 0 533.3 0 500 0C466.7 0 433.3 0 400 0C366.7 0 333.3 0 300 0C266.7 0 233.3 0 200 0C166.7 0 133.3 0 100 0C66.7 0 33.3 0 16.7 0L0 0Z" fill="#2a661e"></path><path d="M0 82L16.7 81.5C33.3 81 66.7 80 100 80.5C133.3 81 166.7 83 200 85.3C233.3 87.7 266.7 90.3 300 82.8C333.3 75.3 366.7 57.7 400 50.3C433.3 43 466.7 46 500 56.2C533.3 66.3 566.7 83.7 600 90.5C633.3 97.3 666.7 93.7 700 93.8C733.3 94 766.7 98 800 90.8C833.3 83.7 866.7 65.3 883.3 56.2L900 47L900 0L883.3 0C866.7 0 833.3 0 800 0C766.7 0 733.3 0 700 0C666.7 0 633.3 0 600 0C566.7 0 533.3 0 500 0C466.7 0 433.3 0 400 0C366.7 0 333.3 0 300 0C266.7 0 233.3 0 200 0C166.7 0 133.3 0 100 0C66.7 0 33.3 0 16.7 0L0 0Z" fill="#468820"></path></svg>-->
<h1>Get ready to play Rock Paper Scissor Lizard Spock!</h1>
<div class="maintwo">
<h2 class="choice">Make your choice:</h2>
<button id="rock" class="btn1" >Rock</button>
<button id="paper" class="btn2">Paper</button>
<button id="scissors" class="btn3">Scissors</button>
<button id="spock" class="btn4">Spock</button>
<button id="lizard" class="btn5">Lizard</button>
<h2 class="user">User Choice: <span id="user_choice"></span></h2>
<h2 class="computer">Computer generated: <span id="computer_choice"></span></h2>
<h2 class="res">Result: <span id="result"></span></h2>
<script src="rock-paper-scissor-lizard-rock.js" charset="utf-8"></script>
</div>
</div>
</body>
</html>