Motorcycle Game
About this app
A fun motorcycle game where you control a circle using W, A, S, D keys.
Motorcycle Game
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
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>Motorcycle Game</title>
<meta name="description" content="A fun motorcycle game where you control a circle using W, A, S, D keys.">
<meta name="keywords" content="motorcycle game, circle, ramps, levels">
<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">
<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() {
// Variables
var circle;
var speed = 5;
var level = 1;
var maxLevels = 2;
var ramps = [
{ x: 100, y: 300 },
{ x: 400, y: 200 }
];
// Function to create the circle element
function createCircle() {
circle = $('<div class="circle"></div>');
circle.css({
'position': 'absolute',
'top': '100px',
'left': '100px',
'width': '50px',
'height': '50px',
'border-radius': '50%',
'background-color': 'red'
});
$('#main-container').append(circle);
}
// Function to move the circle
function moveCircle(x, y) {
var top = parseInt(circle.css('top'));
var left = parseInt(circle.css('left'));
circle.css({
'top': top + y + 'px',
'left': left + x + 'px'
});
}
// Function to check collision with ramps
function checkCollision() {
var top = parseInt(circle.css('top'));
var left = parseInt(circle.css('left'));
for (var i = 0; i < ramps.length; i++) {
var ramp = ramps[i];
if (left >= ramp.x && left <= ramp.x + 100 && top >= ramp.y && top <= ramp.y + 20) {
return true;
}
}
return false;
}
// Function to handle keydown events
function handleKeyDown(event) {
var key = event.which || event.keyCode;
var x = 0;
var y = 0;
switch (key) {
case 87: // W key
y = -speed;
break;
case 83: // S key
y = speed;
break;
case 65: // A key
x = -speed;
break;
case 68: // D key
x = speed;
break;
}
moveCircle(x, y);
if (checkCollision()) {
alert('You crashed!');
resetLevel();
}
if (parseInt(circle.css('top')) >= 400) {
if (level < maxLevels) {
alert('Level ' + level + ' completed!');
level++;
resetLevel();
} else {
alert('Game completed!');
resetGame();
}
}
}
// Function to reset the level
function resetLevel() {
circle.css({
'top': '100px',
'left': '100px'
});
}
// Function to reset the game
function resetGame() {
level = 1;
resetLevel();
}
// Event listener for keydown events
$(document).on('keydown', handleKeyDown);
// Create the circle
createCircle();
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
background-color: #f5f5f5;
}
#main-container {
position: relative;
width: 600px;
height: 400px;
margin: 0 auto;
border: 2px solid #333;
background-color: #fff;
}
.circle {
position: absolute;
top: 100px;
left: 100px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
}
.ramp {
position: absolute;
width: 100px;
height: 20px;
background-color: #333;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<!-- App HTML Goes Here -->
</div>
</body>
</html>
NEW APPS
These are apps made by the community!