—
туту
Страница: 1
Сообщений 1 страница 5 из 5
Поделиться12021-08-09 11:42:27
- Администратор
- плашка:
КРАСИВЫЙ УМНЫЙ и от cкромности не помрет - ЛЗ:
КИТО ОРТЕГА, 38
Correr con el viento rumbo a la libertad твой текст - принадлежность: мамкин телепузик
- Сообщений: 64
- Уважение: +1
- посты: 777
- валюта: 13200$
Поделиться22025-09-16 17:26:26
- Администратор
- плашка:
КРАСИВЫЙ УМНЫЙ и от cкромности не помрет - ЛЗ:
КИТО ОРТЕГА, 38
Correr con el viento rumbo a la libertad твой текст - принадлежность: мамкин телепузик
- Сообщений: 64
- Уважение: +1
- посты: 777
- валюта: 13200$
[html]
<style>
@import url("https://fonts.googleapis.com/css?family=Lato:300,900");
container4 {
background-color: #222;
font-family: Lato, sans-serif;
color: rgba(255, 255, 255, 0.75);
text-align: center; display: block;
}
#c {
display: block;
width: 320px;
height: 480px;
margin: 1rem auto;
border-bottom: 1px solid;
}
#score {
font-size: 6rem;
font-weight: 900;
}
#restart {
margin: 1rem;
border: 1px solid;
border-radius: 0.5rem;
padding: 0.25em 0.3em 0.25em 0.5em;
font-family: inherit;
font-size: 2rem;
font-weight: 300;
color: inherit;
text-transform: uppercase;
letter-spacing: 0.2em;
background: transparent;
transition: background-color 0.2s ease;
&:hover {
background: rgba(255, 255, 255, 0.25);
}
&:focus {
outline: 1px dotted;
outline-offset: 2px;
}
}
</style>
<script>
var TILE_SIZE = 64;
var TILE_PADDING = 8;
var canvas = document.getElementById('c');
var scoreCounter = document.getElementById('score');
var restartButton = document.getElementById('restart');
var ctx = canvas.getContext('2d');
// off-screen canvas for tile prerendering
var osc = document.createElement('canvas');
osc.width = 4 * TILE_SIZE;
osc.height = TILE_SIZE;
var canvasW = canvas.width;
var canvasH = canvas.height;
var boardW = Math.floor(canvasW / TILE_SIZE);
var boardH = Math.floor(canvasH / TILE_SIZE);
var clickable = true;
var score = 0;
var board = [];
function resetBoard() {
score = 0;
clickable = true;
scoreCounter.innerHTML = score;
for (var i = 0; i < boardW * boardH; ++i) {
board[i] = 1 + Math.floor(Math.random() * 4);
}
}
function prerenderTiles() {
var ctx = osc.getContext('2d');
ctx.lineWidth = 3;
ctx.lineJoin = 'bevel';
var colors = [
'mediumslateblue',
'cornflowerblue',
'darkslateblue',
'royalblue'
];
for (var color = 0; color < 4; ++color) {
ctx.strokeStyle = colors[color];
ctx.fillStyle = 'rgba(127, 127, 255, 0.1)';
ctx.save(); {
ctx.translate(color * TILE_SIZE, 0);
if (color > 1) ctx.translate(0, TILE_SIZE);
if (color && color < 3) ctx.translate(TILE_SIZE, 0);
ctx.rotate(color * Math.PI / 2);
ctx.beginPath();
ctx.moveTo(TILE_PADDING, TILE_PADDING);
ctx.lineTo(TILE_SIZE - TILE_PADDING, 1.5 * TILE_PADDING);
ctx.lineTo(TILE_SIZE - TILE_PADDING, TILE_SIZE / 2);
ctx.lineTo(TILE_SIZE / 2, TILE_SIZE - TILE_PADDING);
ctx.lineTo(1.5 * TILE_PADDING, TILE_SIZE - TILE_PADDING);
ctx.closePath();
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.moveTo(1.5 * TILE_PADDING, TILE_SIZE - TILE_PADDING);
ctx.lineTo(3 * TILE_PADDING, TILE_SIZE - 3 * TILE_PADDING);
ctx.lineTo(TILE_PADDING, TILE_PADDING);
ctx.lineTo(TILE_SIZE - 3 * TILE_PADDING, 3 * TILE_PADDING);
ctx.lineTo(TILE_SIZE - TILE_PADDING, 1.5 * TILE_PADDING);
ctx.moveTo(TILE_SIZE - TILE_PADDING, TILE_SIZE / 2);
ctx.lineTo(TILE_SIZE - 3 * TILE_PADDING, 3 * TILE_PADDING);
ctx.lineTo(TILE_SIZE * 0.75 - TILE_PADDING / 2, TILE_SIZE * 0.75 - TILE_PADDING / 2);
ctx.lineTo(3 * TILE_PADDING, TILE_SIZE - 3 * TILE_PADDING);
ctx.lineTo(TILE_SIZE / 2, TILE_SIZE - TILE_PADDING);
ctx.moveTo(TILE_SIZE - 3 * TILE_PADDING, 3 * TILE_PADDING);
ctx.lineTo(3 * TILE_PADDING, TILE_SIZE - 3 * TILE_PADDING);
ctx.stroke();
}
ctx.restore();
}
}
function drawTile(x, y, color) {
if (!color) return;
ctx.drawImage(osc, (color - 1) * TILE_SIZE, 0, TILE_SIZE, TILE_SIZE, x, y, TILE_SIZE, TILE_SIZE);
}
function drawBoard() {
ctx.clearRect(0, 0, canvasW, canvasH);
for (var i = 0; i < boardW; ++i) {
for (var j = 0; j < boardH; ++j) {
drawTile(i * TILE_SIZE, j * TILE_SIZE, board[j * boardW + i]);
}
}
window.requestAnimationFrame(drawBoard);
}
function handleClick(e) {
var rect = canvas.getBoundingClientRect();
var scaleX = canvasW / rect.width / TILE_SIZE;
var scaleY = canvasH / rect.height / TILE_SIZE;
var i = Math.floor((e.clientX - rect.left) * scaleX);
var j = Math.floor((e.clientY - rect.top) * scaleY);
if (clickable) floodRemove(i, j);
}
function shouldRemove(i, j, color, removed) {
if (i < 0 || i >= boardW) return false;
if (j < 0 || j >= boardH) return false;
if (board[j * boardW + i] !== color) return false;
return removed.indexOf(j * boardW + i) < 0;
}
function swapTiles(a, b) {
var tmp = board[a];
board[a] = board[b];
board[b] = tmp;
}
function swapColumns(a, b) {
for (var j = 0; j < boardH; ++j) {
swapTiles(j * boardW + a, j * boardW + b);
}
}
function compactColumn(i) {
var sum = 0;
for (var j = boardH - 1; j > 0; --j) {
for (var k = 0; k < j; ++k) {
if (board[k * boardW + i] && !board[(k + 1) * boardW + i]) {
swapTiles(k * boardW + i, (k + 1) * boardW + i);
}
}
sum += !!board[j * boardW + i];
}
return sum + !!board[i];
}
function compactColumns() {
var columnSums = [];
for (var i = 0; i < boardW; ++i) {
columnSums.push(compactColumn(i));
}
for (var i = boardW - 1; i > 0; --i) {
for (var k = 0; k < i; ++k) {
if (!columnSums[k] && columnSums[k + 1]) {
columnSums[k] = columnSums[k + 1];
columnSums[k + 1] = 0;
swapColumns(k, k + 1);
}
}
}
}
function floodRemove(i, j) {
var color = board[j * boardW + i];
if (!color) return;
var q = [[i, j]];
var rq = [j * boardW + i];
while (q.length) {
var currentTile = q.shift();
var ci = currentTile[0];
var cj = currentTile[1];
if (shouldRemove(ci - 1, cj, color, rq)) {
q.push([ci - 1, cj]);
rq.push(cj * boardW + ci - 1);
}
if (shouldRemove(ci + 1, cj, color, rq)) {
q.push([ci + 1, cj]);
rq.push(cj * boardW + ci + 1);
}
if (shouldRemove(ci, cj - 1, color, rq)) {
q.push([ci, cj - 1]);
rq.push((cj - 1) * boardW + ci);
}
if (shouldRemove(ci, cj + 1, color, rq)) {
q.push([ci, cj + 1]);
rq.push((cj + 1) * boardW + ci);
}
}
if (rq.length <= 2) return;
var scoreStep = rq.length - 2;
clickable = false;
(function removeTile() {
if (rq.length) {
var idx = rq.shift();
score += scoreStep;
scoreCounter.innerHTML = score;
board[idx] = 0;
setTimeout(removeTile, 50);
} else {
compactColumns();
clickable = true;
}
})();
}
prerenderTiles();
resetBoard();
canvas.addEventListener('click', handleClick);
restartButton.addEventListener('click', resetBoard);
window.requestAnimationFrame(drawBoard);
</script>
<container4>
<canvas id="c" width="640" height="960"></canvas>
<div id="score">0</div>
<button id="restart" type="button">Play again</button>
</container4>
[/html]
Поделиться32025-09-16 18:22:05
- Администратор
- плашка:
КРАСИВЫЙ УМНЫЙ и от cкромности не помрет - ЛЗ:
КИТО ОРТЕГА, 38
Correr con el viento rumbo a la libertad твой текст - принадлежность: мамкин телепузик
- Сообщений: 64
- Уважение: +1
- посты: 777
- валюта: 13200$
[html]
<style>
/* import font(s) */
@import url("https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,900");
/* detail root variables
--color-theme cascades to most html elements, and will be later updated in JavaScript
*/
:root {
--font: "Alegreya Sans SC", sans-serif;
--color-bg: #000b14;
--color-theme: #70a9fe;
}
/* heading centered atop the page */
h17 {
text-align: center;
margin: 1rem 0 0;
font-size: 3rem;
transition: all 0.25s ease-in-out;
display: block;
position: absolute;
right: 110px;
top: 160px;
border: 3px solid currentColor;
padding: 10px;
background: #fff;
color: var(--color-theme);
}
/* shown/hidden through an dedicated class */
h17.isHidden {
opacity: 0;
visibility: hidden;
transform: translateY(-1rem) scale(0);
}
/* wheel positioned to the left of the page, and occupying 50% of whichever dimension is the biggest */
svg#wheel {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 500px;
height: 500px;
}
/* arrow positioned to the right of the wheel, and pointing at the very middle section */
svg#pin {
position: absolute;
left: 500px;
width: calc(50vmax / 25);
height: calc(50vmax / 25);
top: 50%;
transform: translateY(-50%);
fill: var(--color-theme);
}
/* instructions displayed on the right side, in a single column layout */
.instructions {
min-height: 600px;
color: var(--color-theme);
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding: 1rem;
}
.instructions h2 {
font-size: 1rem;
letter-spacing: 0.1rem;
position: relative;
}
/* beside a silly exclamation point add a simple word in the middle of the sentence hinting at the innocent nature of the project */
.instructions h2:after {
content: "!";
}
.instructions h2:before {
position: absolute;
content: "suspicious";
font-size: 0.75rem;
opacity: 0.6;
bottom: 100%;
left: 50%;
transform: translateX(-50%) rotate(-12deg);
}
.instructions button {
margin-top: 1rem;
padding: 0.25rem 0.75rem;
font-size: 1.55rem;
font-family: inherit;
color: inherit;
border: none;
border-radius: 10px;
box-shadow: 0 0 0 2px currentColor;
background: var(--color-bg);
/* transition for a simple hover and active state */
transition: all 0.5s ease-out;
}
.instructions button:hover {
box-shadow: 0 0 0 1px var(--color-bg), 0 0 0 3px currentColor,
0 0 0 5px var(--color-bg), 0 0 0 7px currentColor;
}
.instructions button:active {
box-shadow: 0 0 0 2px currentColor, 0 0 0 4px var(--color-bg),
0 0 0 6px currentColor;
transform: scale(0.95) translateY(0.1rem);
}
/* cursor customized to grab, and not allowed when the wheel is spinning (class added in JS) */
.instructions button,
svg#pin {
cursor: grab;
}
.instructions button.isSpinning,
svg#pin.isSpinning {
cursor: not-allowed;
}
/*
animation for the pin, to have it soundly move up and down alongside the spinning wheel
the duration of the animation is customized in JS to have it run a certain number of times
*/
@keyframes pinWheel {
33% {
transform: translateY(-50%) rotate(-10deg);
}
67% {
transform: translateY(-50%) rotate(10deg);
}
}
</style>
<script>
// target the SVG and the pin right next to it
const containerSlices = document.querySelector('g#slices');
const pin = document.querySelector('svg#pin');
// immediately add simple dots around the wheel
for (let i = 0; i < 48; i += 1) {
const transform = `rotate(${360 / 48 * i}), translate(0 -49.5), rotate(${-360 / 48 * i})`;
const dot = `<circle r="0.5" cx="50" cy="50" fill="currentColor" transform="${transform}"/>`;
containerSlices.innerHTML += dot;
}
// target the heading and the button
const heading = document.querySelector('h17');
const spinButton = document.querySelector('button');
// variable updated for the timeout
let timeoutID = 0;
// utility functions returning a random integer in a range and a random hex value
const randomInt = (min = 0, max = 16) => Math.floor(Math.random() * (max - min) + min);
const randomHex = () => randomInt().toString(16);
// object used throughout the script, describing the colors and 3 particular rotation values
// the idea is to include the three slices aroud the wheel and have the arrow point always at one of them
const suspicious = [
{
rotation: 45,
color: 'A2CCB6'
},
{
rotation: 180,
color: 'FCEEB5'
},
{
rotation: 315,
color: 'EE786E'
}
];
// add a random fill color to the circle behind the slices
let randomFill = '';
for (let i = 0; i < 6; i += 1) {
randomFill += randomHex();
}
document.querySelector('svg circle#slice').style.fill = randomFill;
// create the slices, 24 in total, using a bit of trigonometry to compute the appropriate arc coordinates
for (let i = 360; i > 0; i -= 15) {
// values for the path element
const xCoor = 50 + Math.sin(i * Math.PI / 180) * 47;
const yCoor = 50 - Math.cos(i * Math.PI / 180) * 47;
const flags = i > 180 ? '0 1 1' : '0 0 1';
// initialize a variable for the fill color
let fill = '';
// create six random hex values for the fill color
// ! the look might be rather jarring
for (let j = 0; j < 6; j += 1) {
fill += randomHex();
}
// if the de-cremented variable matches the arbitrary rotation value of one of the objects, find the specific object
const suspect = suspicious.find(pairing => pairing.rotation === i);
// if existing, substitute the random hex with the value specified in said object
if (suspect) {
fill = suspect.color;
}
// create the path element and append it to the SVG container
const path = `
<path d="M 50 50 L 50 3 A 47 47 ${flags} ${xCoor} ${yCoor}" fill=#${fill} />
`;
containerSlices.innerHTML += path;
}
// function spinning the wheel
function spinWheel() {
// remove the event listener from the button and the wheel, to avoid running the function twice at the same time
spinButton.removeEventListener('click', spinWheel);
pin.removeEventListener('click', spinWheel);
// immediately hide the heading showing the matching color
heading.classList.add('isHidden');
// add a class to the pin and the button to show how they should not be clicked
pin.classList.add('isSpinning');
spinButton.classList.add('isSpinning');
// create variables for the duration of the rotation, as whell as the number of rotations achieved by the wheel
const randomDuration = randomInt(4, 10);
const randomRotate = randomInt(10, 20);
// crate a variable to pick from one of the objects at random
const randomSuspect = randomInt(0, 3);
// apply the transition and the transform properties
containerSlices.style.transformOrigin = '50%';
containerSlices.style.transition = `transform ${randomDuration}s ease-out`;
/* for the rotation, beside an arbitrary x360 rotation, remember to
- add 90 to match the position of the arrow (to the very right of the wheel)
- subtract the rotation of the slices
- add up to a slice as to have the arrow point within the slice's boundaries
*/
containerSlices.style.transform = `rotate(${randomRotate * 360 - suspicious[randomSuspect].rotation + 90 + randomInt(0, 360 / 24)}deg)`;
pin.style.animation = `pinWheel ${randomDuration / 10}s 10 ease-in-out`;
// after the time allocated for the rotation show the heading with the "random" color, update the custom property with its value
timeoutID = setTimeout(() => {
heading.textContent = `#${suspicious[randomSuspect].color}`;
heading.classList.remove('isHidden');
pin.style.animation = '';
document.documentElement.style.setProperty('--color-theme', `#${suspicious[randomSuspect].color}`);
// remove the class on the pin and button showing the forbidden cursor
pin.classList.remove('isSpinning');
spinButton.classList.remove('isSpinning');
// reset the event listener on the button and the pin
spinButton.addEventListener('click', spinWheel);
pin.addEventListener('click', spinWheel);
// clear the interval and set the boolean back to false
clearInterval(timeoutID);
}, randomDuration * 1000);
}
// attach a click event listener on the button, at which point call the spinWheel function
spinButton.addEventListener('click', spinWheel);
// call the same function when pressing the pin
pin.addEventListener('click', spinWheel);
</script>
<!--
project's structure
- svg for the color wheel (consisting of circle elements, and a group in which the slices are added)
- svg for the arrow pointing at the selected color (positioned to the right of the circle)
- heading in which to show the color selected through the wheel (hidden by default)
- container for the simple instructions and the button spinning the wheel
-->
<svg id="wheel" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="48"
fill="none"
stroke-width="1"
stroke="currentColor"
/>
<!-- add an id to the underlying circle as this depicts the final slice, and as to add a random color -->
<circle id="slice" cx="50" cy="50" r="47" fill="рука зомби" />
<g id="slices"></g>
</svg>
<svg id="pin" viewBox="0 0 50 50"><path d="M 0 25 L 50 0 V 50" /></svg>
<h17 class="isHidden" style="user-select: all;">пуля</h17>
<div class="instructions">
<h2>Spin that color <span>wheel</span></h2>
<button>Spin!</button>
</div>
[/html]
Поделиться42025-09-16 18:34:02
- Администратор
- плашка:
КРАСИВЫЙ УМНЫЙ и от cкромности не помрет - ЛЗ:
КИТО ОРТЕГА, 38
Correr con el viento rumbo a la libertad твой текст - принадлежность: мамкин телепузик
- Сообщений: 64
- Уважение: +1
- посты: 777
- валюта: 13200$
[html]
<style>
.kontainer {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.roullete {
width: 300px;
height: 300px;
border-radius: 50%;
background: white;
border: 3px solid black;
position: relative;
}
.roullete.loop {
animation: rotation 7s ease-in-out forwards;
}
.fill {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
border-radius: 50%;
clip: rect(0px, 300px, 300px, 150px);
}
.fill::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
border-radius: 50%;
clip: rect(0px, 150px, 200px, 0px);
transform: rotate(45deg);
}
.fill_1::after {
background: lightcoral;
}
.fill_2 {
transform: rotate(90deg);
}
.fill_2::after {
background: lightgreen;
}
.fill_3 {
transform: rotate(135deg);
}
.fill_3::after {
background: lightseagreen;
}
.fill_4 {
transform: rotate(225deg);
}
.fill_4::after {
background: lightsalmon;
}
.fill_5 {
transform: rotate(270deg);
}
.fill_5::after {
background: lightpink;
}
.line {
width: 300px;
height: 3px;
background: black;
position: absolute;
top: 149px;
left: 0;
}
.line_1 {
transform: rotate(45deg);
}
.line_2 {
transform: rotate(90deg);
}
.line_3 {
transform: rotate(135deg);
}
.line_4 {
transform: rotate(180deg);
}
.content {
font-size: 30px;
font-weight: bold;
padding-top: 20px;
height: 280px;
position: absolute;
width: 100%;
text-align: center;
}
.content_1 {
transform: rotate(22deg);
}
.content_2 {
transform: rotate(67deg);
}
.content_3 {
transform: rotate(112deg);
}
.content_4 {
transform: rotate(157deg);
}
.content_5 {
transform: rotate(202deg);
}
.content_6 {
transform: rotate(247deg);
}
.content_7 {
transform: rotate(292deg);
}
.content_8 {
transform: rotate(337deg);
}
.trigger {
margin-top: 20px;
font-size: 30px;
border-radius: 15px;
padding: 10px 20px;
border: 3px solid black;
cursor: pointer;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(7045deg);
}
}
</style>
<script src="https://forumstatic.ru/files/001c/80/ee/67321.js"></script>
<div class="kontainer">
<div class="roullete">
<!-- fill color -->
<div class="fill fill_1"></div>
<div class="fill fill_2"></div>
<div class="fill fill_3"></div>
<div class="fill fill_4"></div>
<div class="fill fill_5"></div>
<!-- line -->
<div class="line line_1"></div>
<div class="line line_2"></div>
<div class="line line_3"></div>
<div class="line line_4"></div>
<!-- content -->
<div class="content content_1">100</div>
<div class="content content_2">0</div>
<div class="content content_3">400</div>
<div class="content content_4">200</div>
<div class="content content_5">0</div>
<div class="content content_6">1000</div>
<div class="content content_7">100</div>
<div class="content content_8">0</div>
</div>
<button class="trigger">крутить</button>
</div>
[/html]
Поделиться52025-09-16 18:46:26
- Администратор
- плашка:
КРАСИВЫЙ УМНЫЙ и от cкромности не помрет - ЛЗ:
КИТО ОРТЕГА, 38
Correr con el viento rumbo a la libertad твой текст - принадлежность: мамкин телепузик
- Сообщений: 64
- Уважение: +1
- посты: 777
- валюта: 13200$
[html]
<style>
#container{
text-align:center;
width:340px;
height:480px;
margin:auto;
position:relative;
background:#006f81;
}
#menu{
padding-top:10px;
padding-left:20px;
font-size:55px;
width:100%;
}
#game{
padding-top:10px;
font-size:55px;
width:100%;
display:none;
}
#opcje{
padding-top:10px;
font-size:55px;
width:100%;
display:none;
}
#autor{
font-size:55px;
width:100%;
display:none;
}
.txt{
font-size:24px;
width:80%;
margin:auto;
}
.txt a{
text-decoration:none;
color:#000;
}
svg line{
stroke:#000;
stroke-width:5
}
#back{
text-align:center;
width:140px;
margin:auto;
background-color: #008499;
color: white;
font-size:24px;
cursor:pointer;
display:none;
}
#back:hover{
background-color:#4c9aa6;
}
#pass{
font-size:24px;
width:250px;
margin:5px auto 5px auto;
border-radius:10px;
background-color:#008499;
border: 1px black;
padding:4px 0;
cursor:default;
}
.title{
color:#ededed;
width:340px;
font-size:48px;
font-family:nosifer;
}
ul{
list-style-type: none;
margin:auto;
margin-top: 0;
width: 300px;
padding:0;
}
li a, li a.lock:hover{
width: 300px;
position:relative;
left:0;
font-size:24px;
margin:5px 0;
display: block;
color: white;
padding: 6px 0 6px 0;
text-decoration: none;
background-color: #005968;
cursor:pointer;
border-radius:5px;
}
li a:hover {
background-color:#008499
;
color: white;
width: 320px;
position:relative;
left:-10px;
cursor:hand;
}
li a.lock{
opacity:0.5;
}
#alphabet{
color:#fff;
font-size:18px;
margin: auto;
margin-bottom:5px;
display: flex;
flex-wrap: wrap;
width:90%;
justify-content: center;
}
#alphabet span{
background-color:#008499;
margin: 3px 5px;
height:25px;
width:25px;
padding:4px;
border-radius:30%;
cursor:pointer;
}
.red{
opacity:0.4 !important;
background:red !important;
}
.green{
opacity:0.4 !important;
background:lime !important;
}
#svg{
margin:auto;
background-color:#008499;
width:280px;
height:220px;
}
svg{
position:absolute;
left:50px;
}
.tb1{
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
stroke-linecap:round;
}
@keyframes dash {
to { stroke-dashoffset: 0; }
}
#stickman{
position:absolute;
left:190px;
bottom:0;
cursor:pointer;
}
@keyframes jmp{
0% { }
11%{ transform: rotate(270deg); bottom:30px; left:260px;}
22%{ transform: rotate(450deg); bottom:100px; left:0;}
33%{ transform: rotate(630deg); bottom:150px; left:260px;}
44%{ transform: rotate(810deg); bottom:210px; left:0;}
55%{ transform: rotate(990deg); bottom:250px; left:260px;}
66%{ transform: rotate(1170deg); bottom:200px; left:0;}
77%{ transform: rotate(1350deg); bottom:150px; left:260px;}
88%{ transform: rotate(1530deg); bottom:40px; left:0;}
100%{ transform: rotate(1800deg); }
}
</style>
<script>
errors=0;
pkt=0;
toggle=0;
word = [
"слово", "слово", "слово", "слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово", "слово"
];
$(document).ready(function(){
$("#alphabet span").click(function(){
var input = $(this).html();
var styyl = $(this).attr("id");
check(input, styyl);
});
});
function gra(){
startgame();
startpass();
hide();
$("#menu").hide();
$("#game").show();
$(".title").hide();
$("#back").toggle();
}
function showMenu() {
$("#menu").show();
$("#game").hide();
$("#opcje").hide();
$("#autor").hide();
$(".title").show();
$("#back").toggle();
}
function showOptions() {
$("#back").toggle();
$("#menu").hide();
$("#opcje").show();
}
function showInfo() {
$("#back").toggle();
$("#menu").hide();
$("#autor").show();
}
function exit(){
c=confirm("Are you sure?");
if (c==true){
window.location.href = "#";
}
}
function hide() {
$("#svg svg").hide();
}
function startpass(){
boxy = new Array();
hiden="";
hub=wordp;
i=hub.length;
for(i=0; i<hub.length; i++)
{
hiden=hiden+"*";
boxy[i]="*";
}
$("#pass").text(hiden);
}
function startgame(){
errors=0;
n=Math.floor(Math.random() * 110);
wordp=word[n];
clearAlphabet();
}
function jump(){
if(toggle==0){
$("#stickman").css("animation","jmp 4s ease-out ");
toggle=1;
}
else{
$("#stickman").css("animation","none");
toggle=0;
}
}
function szubienica(){
errors++;
if(errors<11){
$("#t"+errors).show();
}
else{
$("#t"+errors).show();
alert("You lost! \nWord is: "+wordp+"\nFinal score is: "+pkt);
window.setTimeout(gameOver, 600);
}
}
function gameOver(){
pkt=0;
hide();
showMenu();
}
function clearAlphabet(){
$("#alphabet span").removeClass("red green");
}
function check(val,styl){
if (wordp.indexOf(val) > -1){
$("#"+styl).addClass("green");
slowa(val);
}
else{
$("#"+styl).addClass("red");
szubienica();
}
}
function slowa(val){
n=wordp.length;
for(i=0; i<n; i++){
st=wordp.indexOf(val, i);
boxy[st]=val;}
hiden='';
for(d=0; d<n; d++){
hiden+=boxy[d];
$("#pass").text(hiden);
}
win();
}
function wygrana(){
pkt++;
alert("Congratulations! \nYour score is: "+pkt+"\nLet's continue!");
gra();
$("#back").toggle();
}
function win(){
if(hiden==wordp){
window.setTimeout(wygrana, 600);
}
}
</script>
<html>
<head>
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<title>Виселица</title>
</head>
<body onselectstart="return false">
<div class="container">
<div id="container">
<div class="title">ВИСЕЛИЦА</div>
<!-- Menu start -->
<div id="menu">
<div id="opt">
<ul>
<li><a onClick="gra();" id="play">PLAY</a></li>
<li><a onClick="showInfo();" id="auth">INFORMATIONS</a></li>
<li><a onClick="exit();" id="exit">EXIT</a></li>
</ul>
</div>
<svg id="stickman" onclick="jump()" width="80px" height="100px">
<circle cx="40" cy="20" r="13" stroke="black" stroke-width="5" fill="white" />
<line x1="40" y1="35" x2="40" y2="70" />
<line x1="40" y1="50" x2="10" y2="20" />
<line x1="40" y1="50" x2="70" y2="20" />
<line x1="40" y1="70" x2="20" y2="100" />
<line x1="40" y1="70" x2="60" y2="100" />
</svg>
</div>
<div id="game">
<div id="svg">
<svg id="t1" width="280px" height="250px" style="display:none">
<line class="tb1" x1="20" y1="200" x2="20" y2="20" />
</svg>
<svg id="t2" width="280px" height="250px" style="display:none">
<line class="tb1" x1="20" y1="20" x2="160" y2="20" />
</svg>
<svg id="t3" width="280px" height="250px" style="display:none">
<line class="tb1" x1="21" y1="160" x2="60" y2="200" />
</svg>
<svg id="t4" width="280px" height="250px" style="display:none">
<line class="tb1" x1="20" y1="50" x2="50" y2="20" />
</svg>
<svg id="t5" width="280px" height="250px" style="display:none">
<line class="tb1" x1="140" y1="20" x2="140" y2="50" />
</svg>
<svg id="t6" width="280px" height="250px" style="display:none">
<circle class="tb1" cx="140" cy="50" r="15" stroke="black" stroke-width="5" fill="white" />
</svg>
<svg id="t7" width="280px" height="250px" style="display:none">
<line class="tb1" x1="140" y1="65" x2="140" y2="100" />
</svg>
<svg id="t8" width="280px" height="250px" style="display:none">
<line class="tb1" x1="140" y1="70" x2="120" y2="100" />
</svg>
<svg id="t9" width="280px" height="250px" style="display:none">
<line class="tb1" x1="140" y1="70" x2="160" y2="100" />
</svg>
<svg id="t10" width="280px" height="250px" style="display:none">
<line class="tb1" x1="140" y1="100" x2="120" y2="130" />
</svg>
<svg id="t11" width="280px" height="250px" style="display:none">
<line class="tb1" x1="140" y1="100" x2="160" y2="130" />
</svg>
</div>
<div id="pass"></div>
<div id="alphabet">
<span id="а">а</span><span id="б">б</span>
<span id="в">в</span><span id="г">г</span>
<span id="д">д</span><span id="и">и</span>
<span id="к">к</span><span id="л">л</span>
<span id="м">м</span><span id="н">н</span>
<span id="о">о</span><span id="п">п</span>
<span id="р">р</span><span id="с">с</span>
<span id="т">т</span><span id="у">у</span>
<span id="ф">ф</span><span id="х">х</span>
<span id="ц">ц</span><span id="ш">ш</span>
<span id="щ">щ</span><span id="ы">ы</span>
<span id="ь">ь</span><span id="ъ">ъ</span>
<span id="э">э</span><span id="ю">ю</span>
<span id="я">я</span>
</div>
</div>
<div id="opcje">
<div id="opt">
<ul>
<li><a class="lock" id="lang">LANGUAGE</a></li>
<li><a class="lock" id="sound">DIFFICULTY</a></li>
<li><a class="lock" id="login">LOGIN</a></li>
</ul>
</div>
</div>
<div id="autor">
<div class="txt">
Hangman game ...
<br>
<p>©Created by<br>AOULI Oussama<a target='_blank' href='#'></a></p>
</div>
</div>
<div onClick="showMenu();" id="back">MENU</div>
</div>
</div>
</body>
</html>
[/html]
Страница: 1
