Calculator Tools Calculator Tools
Create

2D BMX Bike Game

Oct 7, 2023

About this app

Ride your BMX bike and perform stunts in this 2D bike game.

2D BMX Bike 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>2D BMX Bike Game</title>
<meta name="description" content="Ride your BMX bike and perform stunts in this 2D bike game.">
<meta name="keywords" content="bmx, bike, game, 2d, stunts">

<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 {
document.addEventListener("DOMContentLoaded", function() {
// Game initialization code
var canvas = document.getElementById("game-canvas");
var ctx = canvas.getContext("2d");

var bike = {
x: 50,
y: canvas.height / 2,
width: 50,
height: 50,
speed: 5,
dy: 0,
gravity: 0.5
};

var keys = {};

function drawBike() {
ctx.fillStyle = "orange";
ctx.fillRect(bike.x, bike.y, bike.width, bike.height);
}

function updateBike() {
if (keys.ArrowUp || keys.Space) {
bike.dy = -bike.speed;
} else {
bike.dy += bike.gravity;
}

bike.y += bike.dy;

if (bike.y + bike.height > canvas.height) {
bike.y = canvas.height - bike.height;
bike.dy = 0;
}
}

function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function draw() {
clearCanvas();
drawBike();
updateBike();

requestAnimationFrame(draw);
}

document.addEventListener("keydown", function(e) {
keys[e.code] = true;
});

document.addEventListener("keyup", function(e) {
keys[e.code] = false;
});

draw();
});

} catch (error) {
throw error;
}
</script>

<style>
#game-canvas {
background-color: #222;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<canvas id="game-canvas" width="800" height="400"></canvas>
</div>
</body>
</html>