Nahrání kódu od kolegy do větve test_web
This commit is contained in:
archos
56
index/games/fractal/index.html
Executable file
56
index/games/fractal/index.html
Executable file
@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Fractal</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../style/style.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./style.css" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/x-icon"
|
||||
href="../../../res/site/icons/favicon.ico"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="page-header" role="banner">
|
||||
<h1 class="project-name">Fractal</h1>
|
||||
<h2 class="project-tagline">
|
||||
Interactive fractal using
|
||||
<a href="https://github.com/xaos-project/XaoSjs">XaoS.js</a>.
|
||||
</h2>
|
||||
|
||||
<a href="../../../" class="btn">Home</a>
|
||||
<a href="../" class="btn">Games</a>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<canvas id="canvas">
|
||||
<p>
|
||||
Your browser doesn't seem to support the <canvas> tag. Try
|
||||
<a href="http://firefox.com">Firefox</a>.
|
||||
</p>
|
||||
</canvas>
|
||||
<div id="controls">
|
||||
<button
|
||||
id="fullScreenButton"
|
||||
class="btn btn-primary"
|
||||
onclick="goFullScreen();"
|
||||
></button>
|
||||
<a href="./" id="resetButton" class="btn btn-danger">Reset</a>
|
||||
<a
|
||||
href="#"
|
||||
id="saveCanvasButton"
|
||||
class="btn btn-primary"
|
||||
download="fractal.png"
|
||||
onclick="saveCanvas()"
|
||||
>Capture</a
|
||||
><br />
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script/xaos.js"></script>
|
||||
<script src="./script/starter-template.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
12
index/games/fractal/script/starter-template.js
Executable file
12
index/games/fractal/script/starter-template.js
Executable file
@ -0,0 +1,12 @@
|
||||
function saveCanvas() {
|
||||
saveCanvasButton.download = "image.png";
|
||||
saveCanvasButton.href = canvas
|
||||
.toDataURL("image/png")
|
||||
.replace("image/png", "image/octet-stream");
|
||||
}
|
||||
|
||||
function goFullScreen() {
|
||||
if (canvas.requestFullScreen) canvas.requestFullScreen();
|
||||
else if (canvas.webkitRequestFullScreen) canvas.webkitRequestFullScreen();
|
||||
else if (canvas.mozRequestFullScreen) canvas.mozRequestFullScreen();
|
||||
}
|
||||
1518
index/games/fractal/script/xaos.js
Executable file
1518
index/games/fractal/script/xaos.js
Executable file
File diff suppressed because it is too large
Load Diff
67
index/games/fractal/style.css
Executable file
67
index/games/fractal/style.css
Executable file
@ -0,0 +1,67 @@
|
||||
#controls {
|
||||
position: relative;
|
||||
margin-bottom: 2.5em;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin-bottom: 0.5em;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
#fullScreenButton {
|
||||
position: absolute;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
bottom: 3rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
#fullScreenButton {
|
||||
visibility: visible;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#saveCanvasButton {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
#resetButton {
|
||||
position: absolute;
|
||||
left: 0em;
|
||||
}
|
||||
|
||||
#saveCanvasButton {
|
||||
position: absolute;
|
||||
right: 0.1em;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
81
index/games/index.html
Executable file
81
index/games/index.html
Executable file
@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Games</title>
|
||||
<link rel="stylesheet" href="../../style/style.css" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/x-icon"
|
||||
href="../../res/site/icons/favicon.ico"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="page-header" role="banner">
|
||||
<h1 class="project-name">Games</h1>
|
||||
<h2 class="project-tagline">
|
||||
Games I programmed or implemented. <br />
|
||||
(Warning: They suck.)
|
||||
</h2>
|
||||
|
||||
<a href="../../" class="btn">Home</a>
|
||||
</header>
|
||||
|
||||
<main id="content" class="main-content" role="main">
|
||||
<section id="rps">
|
||||
<h3>
|
||||
<a href="./rps/">Rock Paper Scissors 🪨📄✂️<sup>⨳</sup></a>
|
||||
</h3>
|
||||
<code>
|
||||
The first game I ever made! I wrote this when I first began learning
|
||||
Javascript, to be specific I wrote the logic during that time. The
|
||||
game was only playable through the terminal, now its fairly portable
|
||||
and can be integrated into anything.
|
||||
</code>
|
||||
</section>
|
||||
|
||||
<br />
|
||||
|
||||
<section id="es">
|
||||
<h3>
|
||||
<a href="./eternal-space/web">Eternal Space<sup>⨳</sup></a>
|
||||
</h3>
|
||||
<code>
|
||||
Currently only playable on a pc, I haven't tried figuring out how to
|
||||
scale down the game lol. I participated in the Opera GX + GameMaker
|
||||
game jam and created this monstrosity. The game jam was alien themed,
|
||||
however I never got that far. Before taking part in this game jam I
|
||||
have never programmed an actual game nor have been in a game jam. I
|
||||
learned how to program in GameMaker Language (basically Javascript)
|
||||
during the event.
|
||||
</code>
|
||||
</section>
|
||||
|
||||
<br />
|
||||
|
||||
<section id="fractal">
|
||||
<h3>
|
||||
<a href="./fractal/">Fractal<sup>⨳</sup></a>
|
||||
</h3>
|
||||
<code>
|
||||
Interactive Javascript real-time fractal renderer using XaoS.js. Works
|
||||
best on a PC.
|
||||
</code>
|
||||
</section>
|
||||
|
||||
<!-- <section id="#">
|
||||
<h3><a href="#">title</a></h3>
|
||||
<code>
|
||||
Description
|
||||
</code>
|
||||
</section> -->
|
||||
|
||||
<footer class="site-footer">
|
||||
You have reached the end of the page. (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
51
index/games/rps/index.html
Executable file
51
index/games/rps/index.html
Executable file
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Rock Paper Scissors</title>
|
||||
<link rel="stylesheet" href="../../../style/style.css" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/x-icon"
|
||||
href="../../../res/site/icons/favicon.ico"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="page-header" role="banner">
|
||||
<h1 class="project-name">Rock Paper Scissors</h1>
|
||||
<h2 class="project-tagline">Made using Javascript.</h2>
|
||||
|
||||
<a href="../../../" class="btn">Home</a>
|
||||
<a href="../" class="btn">Games</a>
|
||||
</header>
|
||||
|
||||
<main id="content" class="main-content" role="main">
|
||||
<section class="game">
|
||||
<div id="gameScore">
|
||||
<p><span id="scorePlayer"></span> <span id="scoreCPU"></span></p>
|
||||
<p><span id="round"></span></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<script src="./script/script.js"></script>
|
||||
<button class="btn gameButton" onclick="play('rock')">🪨</button>
|
||||
<button class="btn gameButton" onclick="play('paper')">📄</button>
|
||||
<button class="btn gameButton" onclick="play('scissors')">✂️</button>
|
||||
</div>
|
||||
|
||||
<div id="evaluation">
|
||||
<p id="choice">
|
||||
<span id="choicePlayer"></span> <span id="choiceCPU"></span>
|
||||
</p>
|
||||
<p><strong id="gameWinner"> </strong></p>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="site-footer">
|
||||
You have reached the end of the page. (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
93
index/games/rps/script/script.js
Executable file
93
index/games/rps/script/script.js
Executable file
@ -0,0 +1,93 @@
|
||||
let userChoice = "";
|
||||
|
||||
const getUserChoice = (userInput) => {
|
||||
userChoice = userInput;
|
||||
};
|
||||
|
||||
function getComputerChoice() {
|
||||
let cpuChoice = Math.floor(Math.random() * 3);
|
||||
if (cpuChoice === 0) {
|
||||
return "rock";
|
||||
} else if (cpuChoice === 1) {
|
||||
return "paper";
|
||||
} else if (cpuChoice === 2) {
|
||||
return "scissors";
|
||||
}
|
||||
}
|
||||
|
||||
function determineWinner(userChoice, computerChoice) {
|
||||
if (userChoice === computerChoice) {
|
||||
return "Tie";
|
||||
}
|
||||
if (userChoice === "rock") {
|
||||
if (computerChoice === "paper") {
|
||||
return "Computer";
|
||||
} else {
|
||||
return "Player";
|
||||
}
|
||||
}
|
||||
if (userChoice === "paper") {
|
||||
if (computerChoice === "scissors") {
|
||||
return "Computer";
|
||||
} else {
|
||||
return "Player";
|
||||
}
|
||||
}
|
||||
if (userChoice === "scissors") {
|
||||
if (computerChoice === "rock") {
|
||||
return "Computer";
|
||||
} else {
|
||||
return "Player";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const score = {
|
||||
player: 0,
|
||||
cpu: 0,
|
||||
ties: 0,
|
||||
rounds: 0,
|
||||
};
|
||||
|
||||
function playGame() {
|
||||
var computerChoice = getComputerChoice();
|
||||
const winner = determineWinner(userChoice, computerChoice);
|
||||
|
||||
score.rounds++;
|
||||
switch (winner) {
|
||||
case "Player":
|
||||
score.player++;
|
||||
break;
|
||||
case "Computer":
|
||||
score.cpu++;
|
||||
break;
|
||||
case "Tie":
|
||||
score.ties++;
|
||||
break;
|
||||
}
|
||||
|
||||
console.log("\nPlayer: " + userChoice);
|
||||
console.log("CPU: " + computerChoice);
|
||||
if (winner != "Tie") {
|
||||
console.log("Winner: " + winner);
|
||||
} else {
|
||||
console.log("Tie game!");
|
||||
}
|
||||
console.log(score);
|
||||
|
||||
scorePlayer.textContent = `Player wins: ${score.player}` + " ";
|
||||
scoreCPU.textContent = `Computer wins: ${score.cpu}`;
|
||||
round.textContent = `Round ${score.rounds}`;
|
||||
choicePlayer.textContent = `You: ${userChoice}`;
|
||||
choiceCPU.textContent = `CPU: ${computerChoice}`;
|
||||
if (winner != "Tie") {
|
||||
gameWinner.textContent = "Winner: " + winner;
|
||||
} else {
|
||||
gameWinner.textContent = "Tie game!";
|
||||
}
|
||||
}
|
||||
|
||||
function play(input) {
|
||||
getUserChoice(input);
|
||||
playGame();
|
||||
}
|
||||
Reference in New Issue
Block a user