[html]<!DOCTYPE html>
<html>
<!---
UNDEAD MAGIKARP THEMES
iii | retro arcade
http://undeadmagikarp.tumblr.com/
General theme/page rules apply. Thank you!
--->
<head>
<title>{Title}</title>
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<link rel="shorcut icon" href="{Favicon}" />
<!---FONTS--->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
<!-- script on DOM load -->
<script>
document.addEventListener("DOMContentLoaded", function () {
// Number leaderboard
var numbers = document.getElementsByClassName("col-number");
for (var i = 1; i < numbers.length; i++) {
numbers[i].innerHTML = i;
}
// Randomly generate follow and message points
var following = document.getElementsByClassName("following");
for (var j = 0; j < following.length; j++) {
var nameLength = following[j].getElementsByClassName("name")[0].innerText.length;
var followPoints = nameLength * 13 + 24;
var messagePoints = nameLength * 2 + 23;
following[j].getElementsByClassName("follow-link")[0].innerHTML = "+" + followPoints.toString();
following[j].getElementsByClassName("message-link")[0].innerHTML = "-" + messagePoints.toString();
}
});
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
word-wrap: break-word;
color: black;
background-color: black;
font-family: "Press Start 2P", cursive;
}
/**gets rid of iframe**/
body > iframe:first-child {
display: none !important;
}
a {
text-decoration: none;
}
#container {
position: absolute;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
background-color: black;
background-image: url(https://static.tumblr.com/bkdoxe7/8ysqw … tars-2.gif);
background-repeat: repeat;
border-radius: 65px;
}
/**line effect across screen**/
#container:after {
content: "";
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, rgba(0, 0, 0, 0.25)));
background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.25) 0);
background-size: 100% 4px;
opacity: 0.5;
z-index: 100;
pointer-events: none;
}
#title {
position: absolute;
top: 50%;
left: 50%;
z-index: 90;
transform: translate(-50%, calc(-50% - 30px));
color: white;
width: 700px;
text-align: center;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
#title h1 {
color: white;
font-size: 58px;
animation: glow 3s ease-in-out infinite alternate;
-webkit-animation: glow 3s ease-in-out infinite alternate;
-moz-animation: glow 3s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 5px #ff006c, 0 0 10px #ff006c, 0 0 15px #ff006c, 0 0 20px #ff417d, 0 0 35px #ff417d, 0 0 40px #ff417d, 0 0 50px #ff417d, 0 0 75px #ff417d;
}
to {
text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
}
.subtitle1 {
position: absolute;
bottom: 90%;
color: #00ff38;
font-family: inherit;
font-size: 32px;
width: 700px;
height: auto;
}
.subtitle2 {
position: absolute;
top: 90%;
color: #ccc;
font-family: inherit;
font-size: 16px;
width: 700px;
height: auto;
}
.navbar {
position: absolute;
top: 0;
display: flex;
justify-content: space-evenly;
overflow: hidden;
width: 100%;
height: 75px;
z-index: 50;
}
/* Style the buttons that are used to open the tab content */
.navbar button {
background-color: inherit;
border: none;
outline: none;
cursor: pointer; /**CHANGE***/
padding: 14px 5px;
text-transform: uppercase;
}
.navbar button.active p {
text-decoration: underline 3px white;
text-shadow: 0 0 5px #ff006c, 0 0 10px #ff006c, 0 0 15px #ff006c, 0 0 20px #ff417d, 0 0 25px #ff417d;
}
.navbar button p,
.navbar button a {
font-family: "Press Start 2P", cursive;
display: inline-block;
font-size: 16px;
color: white;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.navbar button p:hover,
.navbar button a:hover {
text-shadow: 0 0 5px #ff006c, 0 0 10px #ff006c, 0 0 15px #ff006c, 0 0 20px #ff417d, 0 0 25px #ff417d;
}
/* Style the tab content */
.tabcontent {
display: none;
position: absolute;
top: 75px;
height: calc(100% - 105px); /* note: takes up space behind navbar */
width: 100%;
animation: fadeIn 1s;
color: white;
font-size: 13px;
overflow: hidden;
overflow-y: scroll;
padding-bottom: 30px;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.tabcontent::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.tabcontent table {
margin: 0 auto;
width: 95%;
border-collapse: separate;
border-spacing: 4px;
border-radius: 0;
border: 2px solid black;
background: none;
}
.tabcontent th {
border: 0;
margin-bottom: 2px;
text-align: center;
vertical-align: middle;
padding: 0.5em;
background: black;
padding: 12px;
}
.tabcontent a {
color: #00ff38;
text-decoration: underline;
}
.tabcontent a:hover {
color: white;
}
.col-number,
.follow,
.message {
width: 0;
}
.avatar {
width: 0;
padding-top: 2px;
padding-bottom: 2px;
}
.avatar img {
border-radius: 50%;
height: 37px;
width: 37px;
}
.name {
word-break: break-all;
min-width: 55px;
max-width: 250px;
}
.catchphrase {
min-width: 143px;
word-break: break-word;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.emoji {
position: relative;
font-family: inherit;
font-size: 16px;
display: inline-block;
line-height: 16px;
top: -3px;
margin-right: 7px;
}
.emoji img {
position: relative;
width: 20px;
height: 20px;
display: inline-block;
margin-right: 4px;
top: 4px;
}
.number {
font-family: "Press Start 2P", cursive;
font-size: 16px;
color: #00ff38;
margin-left: 8px;
}
#play {
text-transform: uppercase;
background-color: #ffdd57;
border-radius: 290486px;
color: rgba(0, 0, 0, 0.7);
position: absolute;
top: calc(90% + 75px);
font-family: inherit;
font-size: 16px;
padding: 12px;
width: max-content;
height: auto;
display: block;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding-left: 18px;
cursor: pointer;
}
#back {
margin-left: 15px;
}
canvas {
display: block;
height: 100%;
width: 100%;
border-radius: 65px;
animation: fadeIn 1s;
}
.dialogue__content h1 {
font-size: 3rem;
margin-bottom: 0.5em;
line-height: 1.2em;
color: white;
animation: glow 3s ease-in-out infinite alternate;
-webkit-animation: glow 3s ease-in-out infinite alternate;
-moz-animation: glow 3s ease-in-out infinite alternate;
}
.dialogue__content ul {
margin-bottom: 2rem;
}
.dialogue__content li {
color: #00ff38;
font-size: 0.8rem;
margin-bottom: 1em;
text-transform: uppercase;
list-style-type: none;
}
.dialogue__content button {
border-radius: 5px;
appearance: none;
background-color: white;
border: 1px solid white;
cursor: pointer;
font-family: inherit;
font-size: 1rem;
outline: none;
padding: 0.7em 0.85em 0.6em 1em;
text-transform: uppercase;
transition: all 0.2s linear;
}
.dialogue__content button:hover,
.dialogue__content button:active {
background-color: transparent;
border: 1px solid #00ff38;
color: #00ff38;
}
.dialogue {
z-index: 20;
align-items: center;
background-color: transparent;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
opacity: 1;
position: fixed;
right: 0;
text-align: center;
top: 0;
transform: translateX(0);
animation: fadeIn 1s;
}
.dialogue--hidden {
$duration: 0.3s;
opacity: 0;
transform: translateX(-100vw);
transition: opacity $duration linear 0s, transform 0s linear $duration;
}
.dialogue__content {
max-width: 31.25rem; // 500px / 16px
padding: 18px;
}
.key {
border: 1px solid white;
border-radius: 5px;
display: inline-block;
padding: 0.8em;
border-color: white;
color: white;
}
.key--arrow {
font-size: 1.8rem;
padding: 0.35em 0.1em 0.6em;
position: relative;
line-height: 0.3;
top: 0.05em;
}
.hud {
box-sizing: border-box;
display: flex;
justify-content: flex-start;
margin-top: 0;
margin-left: 15px;
list-style-type: none;
color: #00ff38;
opacity: 1;
padding: 1rem;
position: fixed;
transition: opacity 0.07s linear 0.5s;
width: 100%;
}
.hud--hidden {
opacity: 0;
}
.hud__score {
margin: 0;
}
</style>
</head>
<body>
<div id="container">
<!-- Navbar links -->
<div class="navbar">
<button class="tablinks" onclick="openCity(event, 'Home')" id="defaultOpen"><p>home</p></button>
<button class="tablinks" title="Blogroll" onclick="openCity(event, 'Leaderboard')">
<span class="emoji">🏆</span>
<p>leaderboard</p>
</button>
<button class="tablinks">
<span class="emoji"><img src="https://static.tumblr.com/bkdoxe7/Bgyqs5z1p/coin.gif" /></span>
<!---CUSTOM LINK HERE--->
<a href="/">link 1</a>
</button>
<button class="tablinks"><span class="emoji">⭐</span><a href="http://undeadmagikarp.tumblr.com/">credits</a><span class="number">1</span></button><!---DO NOT REMOVE THE CREDIT.--->
<button class="tablinks" id="quit"><a href="/" title="Return to blog">quit</a></button>
</div>
<!-- Navbar content -->
<div id="Home" class="tabcontent">
<div id="title">
<div class="subtitle1">SUBTITLE 1</div>
<h1>PAGE TITLE</h1>
<div class="subtitle2">SUBTITLE 2</div>
<button id="play">Play now!</button>
</div>
</div>
<div id="Leaderboard" class="tabcontent">
<table>
<tr>
<th class="col-number">#</th>
<th class="avatar">Avatar</th>
<th class="name" title="Username">Name</th>
<th class="catchphrase" title="Blog title">Catchphrase</th>
<th class="follow">Follow</th>
<th class="message">Message</th>
</tr>
{block:Following} {block:Followed}
<tr class="following">
<th class="col-number"></th>
<th class="avatar" style="padding: 8px;"><img src="{FollowedPortraitURL-40}" /></th>
<th class="name"><a href="{FollowedURL}">{FollowedName}</a></th>
<th class="catchphrase">{FollowedTitle}</th>
<th class="follow"><a class="follow-link" title="Follow {FollowedName}" href="https://tumblr.com/follow/{FollowedName}">+0</a></th>
<th class="message"><a class="message-link" title="Message {FollowedName}" href="https://www.tumblr.com/message/{FollowedName}">-0</a></th>
</tr>
{/block:Followed} {/block:Following}
</table>
</div>
</div>
<!---JAVASCRIPT STARTS HERE--->
<script>
function openCity(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
var homePage;
function clearHome(store) {
var parent = document.getElementById("Home");
if (store) {
homePage = parent.innerHTML;
};
while (parent.firstChild) parent.removeChild(parent.firstChild);
return parent;
}
function goBackHome() {
document.getElementById("container").removeChild(stage);
const parent = clearHome(false);
parent.innerHTML = homePage;
document.getElementById("play").addEventListener("click", playNow);
}
// game code start
const DEV_MODE = false;
const stage = document.createElement("canvas");
var ctx;
var dialogue;
var hud;
var scoreNode;
let ship,
lasers = [],
enemies = [],
playing = false,
gameStarted = false,
speedMultiplier,
enemySeedFrameInterval,
score = 0,
tick = 0,
laserTick = 0;
function randomBetween(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function calcScore(x) {
return Math.floor((1 / x) * 500);
}
function Ship(options) {
this.radius = 15;
this.x = options.x || stage.width * 0.5 - this.radius - 0.5;
this.y = options.y || stage.height - this.radius - 30;
this.width = this.radius * 2;
this.height = this.width;
this.color = options.color || "red";
this.left = false;
this.right = false;
this.speed = 10;
this.active = true;
document.addEventListener("keydown", this.onKeyDown.bind(this));
document.addEventListener("keyup", this.onKeyUp.bind(this));
}
Ship.prototype.update = function (x) {
this.x = x;
this.y = stage.height - this.radius - 30;
};
Ship.prototype.draw = function () {
ctx.save();
if (DEV_MODE) {
ctx.fillStyle = "skyblue";
ctx.fillRect(this.x, this.y, this.width, this.width);
}
ctx.fillStyle = this.color;
ctx.fillRect(this.x + this.radius - 5, this.y, 10, this.radius);
ctx.fillRect(this.x, this.y + this.radius, this.width, 10);
ctx.fillRect(this.x, this.y + this.radius + 10, 10, 5);
ctx.fillRect(this.x + this.width - 10, this.y + this.radius + 10, 10, 5);
ctx.restore();
};
Ship.prototype.onKeyDown = function (e) {
if (ship.active) {
if (e.keyCode === 39) this.right = true;
else if (e.keyCode === 37) this.left = true;
if (e.keyCode == 32 && !this.shooting) {
this.shooting = true;
laserTick = 0;
}
}
};
Ship.prototype.onKeyUp = function (e) {
if (e.key === "ArrowRight") this.right = false;
else if (e.key === "ArrowLeft") this.left = false;
else if (e.keyCode == 32) this.shooting = false;
};
function Laser(options) {
this.x = options.x - 0.5;
this.y = options.y || stage.height - 50;
this.width = 6;
this.height = 20;
this.speed = 15;
this.color = options.color || "white";
this.active = true;
}
Laser.prototype.update = function (y) {
this.y = y;
};
Laser.prototype.draw = function () {
ctx.save();
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.rect(this.x, this.y, this.width, this.height);
ctx.closePath();
ctx.fill();
ctx.restore();
};
function Enemy(options) {
this.radius = randomBetween(10, 40);
this.width = this.radius * 2;
this.height = this.width;
this.x = randomBetween(0, stage.width - this.width);
this.y = -this.radius * 2;
this.color = options != undefined && options.color ? options.color : "#896ce5";
this.speed = 2;
this.active = true;
}
Enemy.prototype.update = function (x, y) {
this.x = x;
this.y = y;
};
Enemy.prototype.draw = function () {
if (DEV_MODE) {
ctx.fillStyle = "skyblue";
ctx.fillRect(this.x, this.y, this.width, this.width);
}
ctx.save();
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x + this.radius, this.y + this.radius, this.radius, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.restore();
};
function hitTest(item1, item2) {
let collision = true;
if (item1.x > item2.x + item2.width || item1.y > item2.y + item2.height || item2.x > item1.x + item1.width || item2.y > item1.y + item1.height) {
collision = false;
}
return collision;
}
function handleLaserCollision() {
for (let enemy of enemies) {
for (let laser of lasers) {
let collision = hitTest(laser, enemy);
if (collision && laser.active) {
console.log("you destroyed an enemy");
enemy.active = false;
laser.active = false;
// increase enemy speed and frequency of enemy spawns
speedMultiplier += 0.025;
if (enemySeedFrameInterval > 20) {
enemySeedFrameInterval -= 2;
}
// increase score
score += calcScore(enemy.radius);
scoreNode.textContent = score;
}
}
}
}
function handleShipCollision() {
// check for collisions between ship and enemies
if (enemies.length) {
for (let enemy of enemies) {
let collision = hitTest(ship, enemy);
if (collision) {
console.log("your ship was destroyed");
ship.active = false;
setTimeout(() => {
ship.active = true;
speedMultiplier = 1;
enemySeedFrameInterval = 100;
score = 0;
scoreNode.textContent = score;
}, 2000);
}
}
}
}
function drawShip(xPosition) {
if (ship.active) {
ship.update(xPosition);
ship.draw();
}
}
function drawEnemies() {
if (enemies.length) {
for (let enemy of enemies) {
// draw an enemy if it's active
if (enemy.active) {
enemy.update(enemy.x, (enemy.y += enemy.speed * speedMultiplier));
enemy.draw();
}
}
}
}
function enemyCleanup() {
if (enemies.length) {
enemies = enemies.filter((enemy) => {
let visible = enemy.y < stage.height + enemy.width;
let active = enemy.active === true;
return visible && active;
});
}
}
function drawLasers() {
if (lasers.length) {
for (let laser of lasers) {
if (laser.active) {
laser.update((laser.y -= laser.speed));
laser.draw();
}
}
}
}
function laserCleanup() {
lasers = lasers.filter((laser) => {
let visible = laser.y > -laser.height;
let active = laser.active === true;
return visible && active;
});
}
function render(delta) {
if (playing) {
let xPos = ship.x;
// seed new enemies
if (tick % enemySeedFrameInterval === 0 && ship.active) {
const enemy = new Enemy();
enemies.push(enemy);
console.log({ enemySeedFrameInterval, speedMultiplier });
}
// background
ctx.save();
ctx.fillStyle = "#272744";
ctx.fillRect(0, 0, stage.width, stage.height);
ctx.restore();
// ship movement
if (ship.left) xPos = ship.x -= ship.speed;
else if (ship.right) xPos = ship.x += ship.speed;
// stage boundaries
if (gameStarted) {
if (xPos < 0) xPos = 0;
else if (xPos > stage.width - ship.width) xPos = stage.width - ship.width;
}
// create lasers, if shooting
if (ship.active && ship.shooting) {
if (laserTick === 0 || laserTick % 10 === 0) {
let laser = new Laser({
color: "skyblue",
x: ship.x + ship.radius - 3,
});
lasers.push(laser);
}
}
drawShip(xPos);
handleShipCollision();
handleLaserCollision();
drawLasers();
drawEnemies();
enemyCleanup();
laserCleanup();
if (ship.shooting) laserTick++;
tick++;
}
requestAnimationFrame(render);
}
function quitGame() {
console.log("stopping game");
const quit = document.getElementById("quit");
quit.title = "";
quit.style.textShadow = "none";
quit.innerHTML = '<a href="/" title="Return to blog">quit</a>';
window.removeEventListener("resize", onResize);
ship.x = -100;
ship.y = -100;
gameStarted = false;
playing = false;
goBackHome();
}
function startGame(e) {
console.log("starting game");
// redo quit button
const quit = document.getElementById("quit");
quit.addEventListener("click", quitGame);
quit.innerHTML = "<p>quit</p>";
quit.title = "Quit game";
quit.style.textShadow = "0 0 5px #ff006c, 0 0 10px #ff006c, 0 0 15px #ff006c, 0 0 20px #ff417d, 0 0 25px #ff417d";
dialogue.classList.add("dialogue--hidden");
hud.classList.remove("hud--hidden");
e.currentTarget.blur();
// reset the demo/intro to the actual game settings:
speedMultiplier = 1;
enemySeedFrameInterval = 100;
ship.x = stage.width * 0.5 - ship.radius - 0.5;
ship.y = stage.height - ship.radius - 30;
enemies = [];
gameStarted = true;
}
function onResize() {
stage.width = window.innerWidth;
stage.height = window.innerHeight;
}
// game code end
function playNow() {
// clear out home panel
const parent = clearHome(true);
// add start menu instructions
parent.innerHTML =
'<div class="dialogue"><div class="dialogue__content"><h1>Space Shooter</h1><ul><li>Use the <span class="key key--arrow">←</span> and <span class="key key--arrow">→</span> keys to move.</li><li>Use <span class="key">spacebar</span> to fire lasers.</li></ul><button id="start">Start</button><button id="back">Back</button></div></div><ul class="hud hud--hidden"><li class="hud__score">Score: <span>0</span></li></ul>';
document.getElementById("start").addEventListener("click", startGame);
document.getElementById("back").addEventListener("click", goBackHome);
(ctx = stage.getContext("2d")), (dialogue = document.querySelector(".dialogue"));
(hud = document.querySelector(".hud")), (scoreNode = hud.querySelector(".hud__score span"));
window.addEventListener("resize", onResize);
document.getElementById("container").appendChild(stage);
onResize();
//start the ship off-screen:
ship = new Ship({ color: "#FF3188", x: -100, y: -100 });
// up some ridiculous enemy speeds for the intro:
(speedMultiplier = 6), (enemySeedFrameInterval = 20);
playing = true;
render();
}
document.getElementById("defaultOpen").click();
document.getElementById("play").addEventListener("click", playNow);
</script>
</body>
</html>[/html]
<br>
так что спасибо всем, что скрашиваете дни приятной беседой! я вас всех очень успел полюбить, вы чудо. продолжайте в том же духе. давайте сделаем седьмое небо вместе еще комфортнее.<br><br>
(хороший шанс заработать деньжат и разных плюшек, не проходите мимо). так как скоро уже два месяца, как мы с вами вместе то близиться очередная смена дизайна, а значит самое время проверить свою интуицию и попробовать <a href="https://seventheaven.rusff.me/viewtopic.php?id=601"><b>угадать цвет дизайна</b></a>. мы стали довольно близки и мне кажется, можно поучаствовать в <a href="https://seventheaven.rusff.me/viewtopic.php?id=599"><b>эстафете</b></a>, что поможет нам узнать друг друга еще ближе. ну и на последок можно отправится на <a href="http://seventheaven.rusff.me/viewtopic.php?id=600"><b>поиски</b></a> эксклюзивной плашки.<br><br>
<br><br>