124 lines
4.1 KiB
HTML
124 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Rock Paper Scissors Card Game</title>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://pyscript.net/releases/2025.3.1/core.css"
|
|
/>
|
|
<script
|
|
type="module"
|
|
src="https://pyscript.net/releases/2025.3.1/core.js"
|
|
></script>
|
|
</head>
|
|
<body>
|
|
<h1>Rock Paper Scissors Card Game</h1>
|
|
<p>
|
|
Play Rock Paper Scissors with a twist! Use a 52-card deck with an
|
|
uneven distribution of cards. Both you and the AI get three cards,
|
|
and the AI selects randomly. The rules follow the classic game, but
|
|
with an added element of chance!
|
|
</p>
|
|
<p>Select a card to play against the AI! Best out of 5 game mode.</p>
|
|
|
|
<h3>Score</h3>
|
|
<p>
|
|
You: <span id="user-score">0</span> - AI:
|
|
<span id="ai-score">0</span>
|
|
</p>
|
|
|
|
<h3 id="result">Generating deck, please wait...</h3>
|
|
|
|
<style>
|
|
.card-button {
|
|
width: 120px; /* Keep button size */
|
|
height: 120px;
|
|
background-size: contain; /* Ensures full image fits */
|
|
background-repeat: no-repeat; /* Prevents tiling */
|
|
background-position: center; /* Centers image */
|
|
border: none;
|
|
cursor: pointer;
|
|
border-radius: 10px;
|
|
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Default unknown card */
|
|
#card-0,
|
|
#card-1,
|
|
#card-2 {
|
|
background-image: url("images/card-back.png");
|
|
}
|
|
|
|
/* Reset button */
|
|
#reset-game {
|
|
margin-top: 15px;
|
|
width: 100px;
|
|
height: 50px;
|
|
font-size: 16px;
|
|
border-radius: 8px;
|
|
background-color: red;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<div id="card-buttons">
|
|
<button
|
|
id="card-0"
|
|
index="0"
|
|
py-click="game.play_card"
|
|
class="card-button"
|
|
></button>
|
|
<button
|
|
id="card-1"
|
|
index="1"
|
|
py-click="game.play_card"
|
|
class="card-button"
|
|
></button>
|
|
<button
|
|
id="card-2"
|
|
index="2"
|
|
py-click="game.play_card"
|
|
class="card-button"
|
|
></button>
|
|
</div>
|
|
|
|
<button id="reset-game" py-click="game.reset_game">Reset Game</button>
|
|
|
|
<div
|
|
id="attribution"
|
|
style="margin-top: 20px; font-size: 14px; text-align: center"
|
|
>
|
|
<p><strong>Attribution for the used icons:</strong></p>
|
|
<a
|
|
href="https://www.flaticon.com/free-icons/playing-card"
|
|
title="playing card icons"
|
|
>Playing card icons by ArtBit - Flaticon</a
|
|
><br />
|
|
<a
|
|
href="https://www.flaticon.com/free-icons/rock-paper-scissors"
|
|
title="rock paper scissors icons"
|
|
>Rock paper scissors icons by iconading - Flaticon</a
|
|
><br />
|
|
<a
|
|
href="https://www.flaticon.com/free-icons/hands-and-gestures"
|
|
title="hands and gestures icons"
|
|
>Hands and gestures icons by Voysla - Flaticon</a
|
|
><br />
|
|
<a
|
|
href="https://www.flaticon.com/free-icons/fist"
|
|
title="fist icons"
|
|
>Fist icons by Cuputo - Flaticon</a
|
|
><br />
|
|
<a
|
|
href="https://www.flaticon.com/free-icons/rock-paper-scissors"
|
|
title="rock-paper-scissors icons"
|
|
>Rock-paper-scissors icons created by Freepik - Flaticon</a
|
|
><br />
|
|
</div>
|
|
|
|
<script type="py" src="./main.py"></script>
|
|
</body>
|
|
</html>
|