California Tower Skydiving Game
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>
NEW APPS
These are apps made by the community!