With HTML you can create your own Website.
This tutorial teaches you everything about HTML.
HTML is easy to learn - You will enjoy it.
Source Code live clock
new.html | |
File Size: | 6 kb |
File Type: | html |
HTML part
|
Css part /* Created by 🇳🇬 Power'f GOD⚡⚡ */ html, body { margin: 0; height: 100%; width: 100%; background: #222; overflow: auto; text-align: center; font-family: Sans; } * { box-sizing: border-box; } #clock-wrapper { width: 320px; height: 320px; background: #3058d0; border-radius: 50%; position: relative; margin: 70px auto 70px auto; border: 10px outset royalblue; box-shadow: 5px 5px 10px #161616; } span, #clock-center, #clock-second, #clock-minute, #clock-hour, #inner-circle { display: inline-block; position: absolute; } #clock-center { height: 15px; width: 15px; margin: auto; background: #ff7af9; top: 142.5px; left: 143px; border-radius: 50%; z-index: 5; } #clock-second { width: 1px; height: 130px; background: white; top: 19px; left: 150px; z-index: 4; border-radius: 0.5px; } #clock-minute { width: 3.5px; height: 127.5px; background: #ff7af9; top: 22px; left: 149px; z-index: 3; border-radius: 1.75px; } #clock-hour { width: 5.5px; height: 85px; background: yellow; top: 64.5px; left: 148px; border-radius: 2.75px; z-index: 2; } #clock-second, #clock-minute, #clock-hour { -webkit-transform: rotate(0deg); -webkit-transform-origin: 50% 100%; -webkit-transition: -webkit-transform 0.75s; transform: rotate(0deg); transform-origin: 50% 100%; transition: transform 0.75s; } .digits { width: 3px; height: 18px; background: yellow; border-radius: 1.5px; z-index: 2; } .displayed-digits { color: gainsboro; font-weight: bolder; font-size: 22px; font-family: Sans; z-index: 0; } span:nth-of-type(1) { top: 16px; left: 138px; } span:nth-of-type(2) { top: 137px; right: 20px; } span:nth-of-type(3) { bottom: 18px; left: 144px; } span:nth-of-type(4) { top: 137px; left: 22px; } #inner-circle { top: 39px; left: 40px; width: 220px; height: 220px; border: 2px solid royalblue; border-radius: 50%; } .mini-digits { width: 1.5px; height: 6px; border-radius: 0.75px; background: gainsboro; } #am-pm { left: 130px; top: 170px; color: royalblue; background: darkblue; padding: 3px 10px; border-radius: 3px; z-index: 0; font-weight: bolder; font-size: 85%; letter-spacing: 2px; } #my-name { display: inline-block; background: #333; padding: 7px 13px; position: relative; border-radius: 20px; font-size: 80%; color: #777; } Java script part // Created by 🇳🇬 Power'f GOD⚡⚡ var ID = document.getElementById.bind(document); this.onload = function() { var sec, min, hr, clock, secondHand, minuteHand, hourHand, secDeg, minDeg, hrDeg, i, top, right, spanDeg, radius; //loading clock -----> function loadClock() { sec = new Date().getSeconds() + 2; min = new Date().getMinutes(); hr = new Date().getHours(); clock = ID("clock-wrapper");; secondHand = ID("clock-second"); minuteHand = ID("clock-minute"); hourHand = ID("clock-hour"); secDeg = (sec * 6); minDeg = (min + (sec / 60)) * 6; hrDeg = ((hr - 12) * 30) + ((min / 60) * 30); } document.addEventListener("visibilitychange", loadClock); loadClock(); radius = ((clock.offsetWidth - 20) / 2) //starting clock -----> setInterval(function() { secondHand.style.WebkitTransform = "rotate(" + secDeg + "deg)"; minuteHand.style.WebkitTransform = "rotate(" + minDeg + "deg)"; hourHand.style.WebkitTransform = "rotate(" + hrDeg + "deg)"; secondHand.style.transform = "rotate(" + secDeg + "deg)"; minuteHand.style.transform = "rotate(" + minDeg + "deg)"; hourHand.style.transform = "rotate(" + hrDeg + "deg)"; secDeg += 6; minDeg += 0.1; hrDeg += 0.1/60; hr = new Date().getHours(); if (hr > 11) ID("am-pm").innerHTML = "PM"; else ID("am-pm").innerHTML = "AM"; }, 1000); //creating hours strokes (with the tag) -----> for (i = 0, spanDeg = 0; i < 12; i++, spanDeg += 30) { top = (Math.cos(spanDeg * Math.PI/180) * (radius - 10)).toFixed(6); right = (Math.sin(spanDeg * Math.PI/180) * (radius - 10)).toFixed(6); clock.insertAdjacentHTML("beforeend", ""); clock.getElementsByClassName("d"+i)[0].style.WebkitTransform = "rotate(" + spanDeg + "deg)"; clock.getElementsByClassName("d"+i)[0].style.transform = "rotate(" + spanDeg + "deg)"; clock.getElementsByClassName("d"+i)[0].style.top = ((radius - 9.5) - top) + "px"; clock.getElementsByClassName("d"+i)[0].style.right = ((radius - 1.5) - right) + "px"; } //creating minutes strokes (with the tag) -----> for (i = 0, spanDeg = 0; i < 60; i++, spanDeg += 6) { if (spanDeg % 30 != 0) { top = (Math.cos(spanDeg * Math.PI/180) * (radius - 10)).toFixed(6); right = (Math.sin(spanDeg * Math.PI/180) * (radius - 10)).toFixed(6); clock.insertAdjacentHTML("beforeend", ""); clock.getElementsByClassName("md"+i)[0].style.WebkitTransform = "rotate(" + spanDeg + "deg)"; clock.getElementsByClassName("md"+i)[0].style.transform = "rotate(" + spanDeg + "deg)"; clock.getElementsByClassName("md"+i)[0].style.top = ((radius - 4) - top) + "px"; clock.getElementsByClassName("md"+i)[0].style.right = ((radius - 0.5) - right) + "px"; } else continue; } } //END -----> alert("Waaaaooh!😮 Code Of The Day!😀 Thank you so much, SoloLearn, for this. What a great honour!🤗 \n\nAnd thanks, guys. You all did it!😊 \n\nWaoh! This is great!😊") |
space battle
Java script part
/*-----------ONLOAD INITIALIZATION-----------*/
window.onload = function(){
var c = document.querySelector("canvas");
var canvas = document.querySelector("canvas");
c.width = innerWidth;
c.height = innerHeight;
c = c.getContext("2d");
/*-----------MOUSE/TOUCH & CONTROLS-----------*/
//mouse and touch objects
function startGame(){
mouse = {
x: innerWidth/2,
y: innerHeight-33
};
touch = {
x: innerWidth/2,
y: innerHeight-33
};
//event listener for mouse object
canvas.addEventListener("mousemove", function(event){
mouse.x = event.clientX;
//mouse.y = event.clientY;
});
//eventListener for touch object
canvas.addEventListener("touchmove", function(event){
var rect = canvas.getBoundingClientRect();
var root = document.documentElement;
var touch = event.changedTouches[0];
var touchX = parseInt(touch.clientX);
var touchY = parseInt(touch.clientY) - rect.top - root.scrollTop;
event.preventDefault();
mouse.x = touchX;
//mouse.y = touchY;
});
/*-----------GAME VARIABLES-----------*/
//player
var player_width = 32;
var player_height = 32;
var playerImg = new Image();
var score = 0;
var health = 100;
function choosePlayer(){
var orangeShip = "https://image.ibb.co/n8rayp/rocket.png";
var blueShip = "https://image.ibb.co/dfbD1U/heroShip.png";
var userInput = prompt("🚀SELECT BATTLESHIP!🚀\n1 is for orange and 2 is for blue ship", 1);
if(userInput==1){
playerImg.src = orangeShip;
}
else if(userInput==2){
playerImg.src = blueShip;
}
else{
playerImg.src = orangeShip;
}
}choosePlayer();
//bullet array
var _bullets = []; //array to hold n bullets
var bullet_width = 6;
var bullet_height = 8;
var bullet_speed = 8;
//enemy array
var _enemies = []; //array to hold n enemies
var enemyImg = new Image();
enemyImg.src = "https://image.ibb.co/bX9UuU/ufo_1.png"; //"https://image.ibb.co/gi6ZpU/ufo.png";
var enemy_width = 32;
var enemy_height = 32;
//health array
var _healthkits = []; //array to hold n health kits
var healthkitImg = new Image();
healthkitImg.src = "https://image.ibb.co/iTrjuU/hospital.png"; //"https://image.ibb.co/gFvSEU/first_aid_kit.png";
var healthkit_width = 32;
var healthkit_height = 32;
//sounds
var shot = new Audio();
shot.src = "https://www.dropbox.com/s/w70c8hyryak6w40/Laser-SoundBible.com-602495617.mp3?dl=0";
/*-----------GAME OBJECTS-----------*/
//Player object
function Player(x, y, width, height){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.draw = function(){
c.beginPath();
c.drawImage(playerImg, mouse.x-player_width, mouse.y-player_height); //draw player and center cursor
};
this.update = function(){
this.draw();
};
}
//Bullet object
function Bullet(x, y, width, height, speed){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.speed = speed;
this.draw = function(){
c.beginPath();
c.rect(this.x, this.y, this.width, this.height);
c.fillStyle = "#fff";
c.fill();
c.stroke();
};
this.update = function(){
this.y -= this.speed;
this.draw();
};
}
//Enemy object
function Enemy(x, y, width, height, speed){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.speed = speed;
this.draw = function(){
c.beginPath();
c.drawImage(enemyImg, this.x, this.y);
};
this.update = function(){
this.y += this.speed;
this.draw();
};
}
//Health kit object
function Healthkit(x, y, width, height, speed){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.speed = speed;
this.draw = function(){
c.beginPath();
c.drawImage(healthkitImg, this.x, this.y);
};
this.update = function(){
this.y += this.speed;
this.draw();
};
}
/*-----------_new OBJECT-----------*/
//draw Player
var __player = new Player(mouse.x, mouse.y, player_width, player_height);
//draw n enemies into enemies array
function drawEnemies(){
for (var _ = 0; _<4; _++){ //enemy with random x axis, -32 as y axis, enemy_width, enemy_height, random speed
var x = Math.random()*(innerWidth-enemy_width);
var y = -enemy_height; //-height to draw above canvas for smooth income
var width = enemy_width;
var height = enemy_height;
var speed = Math.random()*4.5;
var __enemy = new Enemy(x, y, width, height, speed);
_enemies.push(__enemy); //push enemy to my array of enemies
}
}setInterval(drawEnemies, 1234);
//draw health kits
function drawHealthkits(){
for (var _ = 0; _<1; _++){ //health with random x axis, -32 as y axis, healthkit_width, healthkit_height, random speed
var x = Math.random()*(innerWidth-enemy_width);
var y = -enemy_height; //-height to draw above canvas for smooth income
var width = healthkit_width;
var height = healthkit_height;
var speed = Math.random()*2.6;
var __healthkit = new Healthkit(x, y, width, height, speed);
_healthkits.push(__healthkit); //push healthkit to my array of healthkits
}
}setInterval(drawHealthkits, 15000);
//draw bullet
//var __bullet = new Bullet(mouse.x-bullet_width/2, mouse.y-player_height, bullet_width, bullet_height, bullet_speed);
//fire bullet function
function fire(){ //fire bullet from mouse.x on x axis, y axis, width, height, speed
for (var _ = 0; _<1; _++){
var x = mouse.x-bullet_width/2;
var y = mouse.y-player_height;
var __bullet = new Bullet(x, y, bullet_width, bullet_height, bullet_speed);
_bullets.push(__bullet); //push bullet to my array of bullets
//shot.play();
}
}setInterval(fire, 200);
//event listener for fire function
canvas.addEventListener("click", function(){
//fire();
});
/*-----------COLLISION DETECTION-----------*/
function collision(a,b){
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}
/*-----------SCORE-----------*/
c.fillStyle = "white";
c.font = "1em Arial";
/*-----------DIRTY ERROR HANDLING-----------*/
function stoperror() {
return true;
}
window.onerror = stoperror;
/*-----------GAME LOOP-----------*/
function animate(){
requestAnimationFrame(animate); //animate
c.beginPath(); //begin
c.clearRect(0,0,innerWidth,innerHeight); //clear canvas
c.fillText("Health: " + health, 5, 20); //health
c.fillText("Score: " + score, innerWidth-100, 20); //score
/*-----------__player, __bullet, __enemy update, __healthkit update-----------*/
//update _player
__player.update();
//update bullets from bullets array
for (var i=0; i < _bullets.length; i++){
_bullets[i].update();
if (_bullets[i].y < 0){
_bullets.splice(i, 1);
}
}
//update enemies from enemies array
for (var k=0; k < _enemies.length; k++){
_enemies[k].update();
//if enemy is below canvas, delete it
if(_enemies[k].y > innerHeight){
_enemies.splice(k, 1);
health -= 10;
if(health == 0){
alert("You DIED!\nYour score was "+score);
startGame();
}
}
}
//loop over both enemies and bullets to detect collisions
for(var j = _enemies.length-1; j >= 0; j--){
for(var l = _bullets.length-1; l >= 0; l--){
if(collision(_enemies[j], _bullets[l])){
_enemies.splice(j, 1);
_bullets.splice(l, 1);
score++;
}
}
}
//draw healthkits
for(var h=0; h < _healthkits.length; h++){
_healthkits[h].update();
}
//loop over both healthkits and bullets to detect collisions
for(var hh = _healthkits.length-1; hh >= 0; hh--){
for(var hhh = _bullets.length-1; hhh >= 0; hhh--){
if(collision(_healthkits[hh], _bullets[hhh])){
_healthkits.splice(hh, 1);
_bullets.splice(hhh, 1);
health += 10;
}
}
}
} //animate func
animate();
}startGame();//startGame function starts/restarts game
}; //end of onload func
Css part
* {
padding: 0;
margin: 0;
overflow: hidden;
background: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-680455.jpg");
}
* {
padding: 0;
margin: 0;
overflow: hidden;
background: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-680455.jpg");
}