Imgflip Logo Icon

if it doesn't load or loads wrong tell me https://cheze-burgur.github.io/htmlEditor/

if it doesn't load or loads wrong tell me https://cheze-burgur.github.io/htmlEditor/ | take a break from imgflip and check out a thing I made | image tagged in cheze cool ahh temp | made w/ Imgflip meme maker
54 views 3 upvotes Made by Burgurgeist 4 days ago in MS_memer_group
cheze cool ahh temp memeCaption this Meme
9 Comments
0 ups, 4d,
2 replies
https://cheze-burgur.github.io/htmlEditor/
0 ups, 4d,
1 reply
loads wrong
0 ups, 4d,
1 reply
what was the problem
0 ups, 4d,
1 reply
Nothing, just not used to a site looking like that
0 ups, 4d,
1 reply
hmm ok
try inputting this into the text field
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Minimal Pong</title>
<style>
html,
body {
margin: 0;
height: 100%;
overflow: hidden;
background: #000;
color: #fff;
}

canvas {
display: block;
margin: 0 auto;
background: #000;
}
</style>
</head>

<body>
<canvas id="pong"></canvas>
<script>
const canvas = document.getElementById('pong');
const ctx = canvas.getContext('2d');

canvas.width = 600;
canvas.height = 400;

const paddleWidth = 10;
const paddleHeight = 80;
const ballSize = 10;

let playerY = canvas.height / 2 - paddleHeight / 2;
let botY = canvas.height / 2 - paddleHeight / 2;

let ballX = canvas.width / 2 - ballSize / 2;
let ballY = canvas.height / 2 - ballSize / 2;
let ballSpeedX = 4;
let ballSpeedY = 3;

// Track mouse movement for player paddle
canvas.addEventListener('mousemove', e => {
const rect = canvas.getBoundingClientRect();
playerY = e.clientY - rect.top - paddleHeight / 2;
if (playerY < 0) playerY = 0;
if (playerY > canvas.height - paddleHeight) playerY = canvas.height - paddleHeight;
});

// Simple bot AI
function moveBot() {
const center = botY + paddleHeight / 2;
if (center < ballY) botY += 3;
if (center > ballY) botY -= 3;
if (botY < 0) botY = 0;
if (botY > canvas.height - paddleHeight) botY = canvas.height - paddleHeight;
}

function resetBall() {
ballX = canvas.width / 2 - ballSize / 2;
ballY = canvas.height / 2 - ballSize / 2;
ballSpeedX = -ballSpeedX;
ballSpeedY = 3 * (Math.random() > 0.5 ? 1 : -1);
}
0 ups, 4d,
1 reply
function resetBall() {
ballX = canvas.width / 2 - ballSize / 2;
ballY = canvas.height / 2 - ballSize / 2;
ballSpeedX = -ballSpeedX;
ballSpeedY = 3 * (Math.random() > 0.5 ? 1 : -1);
}

function update() {
// Move ball
ballX += ballSpeedX;
ballY += ballSpeedY;

// Collisions with top/bottom walls
if (ballY < 0 || ballY + ballSize > canvas.height) ballSpeedY = -ballSpeedY;

// Collisions with paddles
if (ballX < paddleWidth && ballY + ballSize > playerY && ballY < playerY + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
if (ballX + ballSize > canvas.width - paddleWidth && ballY + ballSize > botY && ballY < botY + paddleHeight) {
ballSpeedX = -ballSpeedX;
}

// Ball out of bounds
if (ballX < 0 || ballX + ballSize > canvas.width) resetBall();

moveBot();
}

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

// Draw paddles
ctx.fillStyle = 'white';
ctx.fillRect(0, playerY, paddleWidth, paddleHeight);
ctx.fillRect(canvas.width - paddleWidth, botY, paddleWidth, paddleHeight);

// Draw ball
ctx.fillRect(ballX, ballY, ballSize, ballSize);
}

function loop() {
update();
draw();
requestAnimationFrame(loop);
}

loop();
</script>
</body>

</html>
0 ups, 4d,
1 reply
i'm on mobile, plus idk how any of that would work anyway.
0 ups, 4d
oh ok nvm then
0 ups, 4d
wait nvm
cheze cool ahh temp memeCaption this Meme
Created with the Imgflip Meme Generator
IMAGE DESCRIPTION:
take a break from imgflip and check out a thing I made