مكتبة أكواد HTML

صفحة تقديم أكواد html جاهزة للإستخدام في مقالاتك او في قالبك

04/09/2024

كود لعبة الديناصور

Dinosaur Game

body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: ;
}

{
position: relative;
width: 600px;
height: 200px;
background-color: ;
border: 1px solid ;
overflow: hidden;
}

{
position: absolute;
bottom: 0;
width: 40px;
height: 40px;
background-color: #333;
}

.obstacle {
position: absolute;
bottom: 0;
width: 20px;
height: 40px;
background-color: #555;
}

const dino = document.getElementById('dino');
const game = document.getElementById('game');
let isJumping = false;
let gravity = 0.9;
let jumpHeight = 150;
let position = 0;

function handleKeyUp(event) {
if (event.keyCode === 32) {
if (!isJumping) {
jump();
}
}
}

function jump() {
isJumping = true;

let upInterval = setInterval(() => {
if (position >= jumpHeight) {
clearInterval(upInterval);

let downInterval = setInterval(() => {
if (position {
if (obstaclePosition < -20) {
clearInterval(leftInterval);
game.removeChild(obstacle);
} else if (obstaclePosition > 0 && obstaclePosition < 40 && position < 40) {
clearInterval(leftInterval);
document.body.innerHTML = 'Game Over';
} else {
obstaclePosition -= 10;
obstacle.style.left = obstaclePosition + 'px';
}
}, 20);

setTimeout(createObstacle, randomTime);
}

createObstacle();
document.addEventListener('keyup', handleKeyUp);

19/01/2022

19/01/2022

04/01/2022

العد التنازلي

body{ text-align: center; background: ; font-family: sans-serif; font-weight: 100; } h1{ color: #396; font-weight: 100; font-size: 40px; margin: 40px 0px 20px; } { font-family: sans-serif; color: ; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; } > div{ padding: 10px; border-radius: 3px; background: ; display: inline-block; } div > span{ padding: 15px; border-radius: 3px; background: ; display: inline-block; }.smalltext{ padding-top: 5px; font-size: 16px; }

Countdown Clock

Days

Hours

Minutes

Seconds

POWERED BY ADEN WEB

function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 12));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total