Calculator Tools Calculator Tools
Create

California Tower Skydiving Game

Nov 11, 2023

About this app

Experience the thrill of skydiving from the top of California's highest towers with Adam Levine!

California Tower Skydiving Game

Related apps

Put this on your site

Source

                    <html>
<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>California Tower Skydiving Game</title>
<meta name="description" content="Experience the thrill of skydiving from the top of California's highest towers with Adam Levine!">
<meta name="keywords" content="California, tower, skydiving, game, Adam Levine">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gill+MT&display=swap" rel="stylesheet">

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.

// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
var towers = [
{ name: "Tower A", height: 1000 },
{ name: "Tower B", height: 900 },
{ name: "Tower C", height: 800 },
{ name: "Tower D", height: 700 },
{ name: "Tower E", height: 600 },
{ name: "Tower F", height: 500 },
{ name: "Tower G", height: 400 },
{ name: "Tower H", height: 300 },
{ name: "Tower I", height: 200 },
{ name: "Tower J", height: 100 }
];

function skydive(towerHeight) {
$("#main-container").html("");
var crackText = "CALIFORNIA";
var crackFont = "Gill MT";
var crackColor = "white";
var crackSize = 100;

var crackElement = $("<h1>")
.addClass("crack-text")
.text(crackText)
.css({
"font-family": crackFont,
"color": crackColor,
"font-size": crackSize + "px"
});

var lionIcon = $("<i>")
.addClass("fa fa-paw lion-icon");

var towerElement = $("<div>")
.addClass("tower")
.css("height", towerHeight + "px")
.append(crackElement)
.append(lionIcon);

$("#main-container").append(towerElement);
}

function teleportToTower(towerName) {
var tower = towers.find(function(t) {
return t.name == towerName;
});

if (tower) {
skydive(tower.height);
}
}

// Create teleportation buttons for each tower
towers.forEach(function(tower) {
var teleportButton = $("<button>")
.addClass("teleport-button")
.text(tower.name)
.click(function() {
teleportToTower(tower.name);
});

$("#main-container").append(teleportButton);
});
});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
/* App CSS Goes Here */
body {
background-color: #f1f1f1;
font-family: 'Arial', sans-serif;
}

#main-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
margin-top: 50px;
}

.tower {
position: relative;
width: 200px;
margin: 20px;
background-color: #3498db;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 20px;
}

.crack-text {
transform: rotate(-45deg);
position: absolute;
top: 0;
left: -60px;
white-space: nowrap;
margin: 0;
}

.lion-icon {
font-size: 40px;
color: #f1c40f;
margin-bottom: 10px;
}

.teleport-button {
margin: 10px;
padding: 10px 20px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}

.teleport-button:hover {
background-color: #27ae60;
}
</style>
</head>
<body>
<div id="main-container" class="container">
</div>
</body>
</html>