Jump to content

Search the Community

Showing results for tags 'scripts'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Gamelife - Linkuri Sociale
    • Facebook Page
    • Instagram Page
    • Steam Group
    • Gametracker Clan
  • Gamelife - Development
    • Community
    • Staff Only
    • Server Management
    • Competitions / Free games
  • Gamelife - Public Servers
    • Servers Counter-Strike:Global Offensive
    • Servers Counter-Strike 1.6
    • TeamSpeak 3
    • Discord
  • Design
    • Design
  • Gamelife - World of blogging
    • Descopera
    • Cinema
    • Lifestyle & Entertainment Hub
    • Music Lounge
  • Gamelife - IT Area
    • General Zone
    • Operating Systems
    • Python
    • Programming Languages
    • Index gaming
    • Help
  • Gamelife - General Zone
    • Projects / keys steam free / other games
    • Other Games
  • GAMELIFE - COMMUNITY's Bun venit in Clubul Gamelife
  • GAMELIFE - COMMUNITY's Discutii Libere
  • Valorant Team GL's Prezentare!
  • RESPAWN's Topics

Categories

  • Counter Strike 1.6
    • Addons
    • Plugins
    • Maps
    • Others
  • Counter Strike Global Offensive
    • Maps
    • Plugins
    • Others
  • Skins , cfg , GUIs
  • Productia Gamelife
  • Design

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Facebook


Instagram


Steam Profile ID


Gender


Location


Interests


About Me

Found 11 results

  1. HTML: <div class="box"> <div class="glass"> <div class="wine"> </div> </div> <div class="rod"> </div> <div class="base"> </div> </div> CSS: body{ background:#8e44ad; } .box{ height:450px; width:350px; margin:auto; position:relative; border:3px solid white; box-sizing:border-box; padding-top:30px; } .glass{ height:200px; width:200px; background:white; margin:30px auto; -webkit-clip-path: polygon(0 1%, 100% 0, 95% 100%, 6% 100%); clip-path: polygon(0 1%, 100% 0, 95% 100%, 6% 100%); border-radius: 50% 50% 0 0; transform: rotate(180deg); overflow:hidden; } .wine{ background-color:rgba(255,0,0, 0.7); height:100px; border-radius: 50% 50% 0 0; } .rod{ height:130px; width:15px; background:white; margin:-32px auto; border-radius:0 0 5px 5px; } .base{ width:100px; height:30px; background-color:white; margin:10px auto; border-radius:50%; }
  2. HTML: <body> <div class="light"> <ul class="line"> <li class="red"></li> <li class="yellow"></li> <li class="blue"></li> <li class="pink"></li> <li class="red"></li> <li class="green"></li> <li class="blue"></li> <li class="yellow"></li> <li class="red"></li> <li class="pink"></li> <li class="blue"></li> <li class="yellow"></li> <li class="red"></li> <li class="green"></li> <li class="blue"></li> <li class="yellow"></li> <li class="red"></li> <li class="pink"></li> <li class="green"></li> <li class="blue"></li> <li class="pink"></li> <li class="red"></li> <li class="green"></li> <li class="blue"></li> </ul> </div> <h1>Merry Christmas ! </h1> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> </body> CSS: $green: #24D024; $yellow: #fff952; $pink: #f53896; $red: #fb4545; $blue: #0A53DE; @import url('https://fonts.googleapis.com/css?family=Cookie'); body { background-color: #000000; } h1 { font-family: 'Cookie', cursive; font-size: 80px; text-align: center; color: white; letter-spacing: 3px; } .drop { position: absolute; top: 0; z-index: 1; border-radius: 100%; background-color: #fff; box-shadow: 0 0 10px #FFF } .animate { animation: falling 5.5s infinite ease-in; } @keyframes falling { 0% { top: -10px; // opacity: 1; } 10% { transform: translateX(-5px) } 20% { transform: translateX(5px) } 30% { transform: translateX(-5px) } 40% { transform: translateX(5px) } 60% { transform: translateX(-5px) } 70% { transform: translateX(5px) } 80% { transform: translateX(-5px) } 90% { transform: translateX(5px) } 95% { opacity: 1 } 100% { top: 95vh; opacity: 0; } } .line{ text-align: center; } li { position: relative; margin: 0 15px; list-style: none; padding: 0; display: inline-block; width: 12px; height: 28px; border-radius: 50%; top: 35px; background: #fff; &:before { content: ""; position: absolute; background: #222; width: 10px; height: 9px; border-radius: 3px; top: -4px; left: 1px; } &:after { content: ""; top: -14px; left: 9px; position: absolute; width: 52px; height: 19px; border-bottom: solid #222 2px; border-radius: 30%; } } .red { background-color: $red; animation: lightningRed 1s infinite; } .green { background-color: $green; animation: lightningGreen 0.8s infinite; } .yellow { background-color: $yellow; animation: lightningYellow 0.9s infinite; } .blue { background-color: $blue; animation: lightningBlue 1.1s infinite; } .pink { background-color: $pink; animation: lightningPink 1.2s infinite; } @keyframes lightningRed { 0% { box-shadow: 5px 10px 35px 10px $red; } 50% { box-shadow: none; } 100% { box-shadow: 5px 10px 35px 10px $red; } } @keyframes lightningGreen { 0% { box-shadow: 5px 0 35px 10px $green; } 50% { box-shadow: none; } 100% { box-shadow: 5px 0 35px 10px $green; } } @keyframes lightningYellow { 0% { box-shadow: 5px 0 35px 10px $yellow; } 50% { box-shadow: none; } 100% { box-shadow: 5px 0 35px 10px $yellow; } } @keyframes lightningBlue { 0% { box-shadow: 5px 0 35px 10px $blue; } 50% { box-shadow: none; } 100% { box-shadow: 5px 0 35px 10px $blue; } } @keyframes lightningPink { 0% { box-shadow: 5px 0 35px 10px $pink; } 50% { box-shadow: none; } 100% { box-shadow: 5px 0 35px 10px $pink; } } @media (max-width: 1024px) { .line{ padding: 0; } li { margin: 0 15px 20px 15px; } } Javascript : $(function() { function randomInt(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; var limit_flake = 50; setInterval(function() { let dimension = randomInt(3, 9) + "px"; var flake = "<div class='drop animate' style='left:" + randomInt(10, window.innerWidth - 20) + "px;width:" + dimension + ";height:" + dimension + "'></div>"; $('body').append(flake); var list_flake = $('.drop'); if (list_flake.length > limit_flake) list_flake[list_flake.length - 1].remove(); }, 200); })
  3. Script: <script type="text/javascript"> today = new Date(); BigDay= new Date("December 25, 2020"); msPerDay = 24 * 60 * 60 * 1000; timeLeft = (BigDay.getTime() - today.getTime()); e_daysLeft = timeLeft / msPerDay; daysLeft = Math.floor(e_daysLeft); e_hrsLeft = (e_daysLeft - daysLeft)*24; hrsLeft = Math.floor(e_hrsLeft); minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60); document.write("There are only <BR> <H4>" + daysLeft + " days " + hrsLeft + " hours and " + minsLeft + " minutes left </H4> Until Christmas<P>"); </script>
  4. Script: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .fa { font-size: 50px; cursor: pointer; user-select: none; } .fa:hover { color: darkblue; } </style> </head> <body> <p>Click on the icon to toggle between thumbs-up and thumbs-down (like/dislike):</p> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i> <script> function myFunction(x) { x.classList.toggle("fa-thumbs-down"); } </script> </body> </html>
  5. Script: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } body { font: 16px Arial; } /*the container must be positioned relative:*/ .autocomplete { position: relative; display: inline-block; } input { border: 1px solid transparent; background-color: #f1f1f1; padding: 10px; font-size: 16px; } input[type=text] { background-color: #f1f1f1; width: 100%; } input[type=submit] { background-color: DodgerBlue; color: #fff; cursor: pointer; } .autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; /*position the autocomplete items to be the same width as the container:*/ top: 100%; left: 0; right: 0; } .autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; } /*when hovering an item:*/ .autocomplete-items div:hover { background-color: #e9e9e9; } /*when navigating through the items using the arrow keys:*/ .autocomplete-active { background-color: DodgerBlue !important; color: #ffffff; } </style> </head> <body> <h2>Autocomplete</h2> <p>Start typing:</p> <!--Make sure the form has the autocomplete function switched off:--> <form autocomplete="off" action="/action_page.php"> <div class="autocomplete" style="width:300px;"> <input id="myInput" type="text" name="myCountry" placeholder="Country"> </div> <input type="submit"> </form> <script> function autocomplete(inp, arr) { /*the autocomplete function takes two arguments, the text field element and an array of possible autocompleted values:*/ var currentFocus; /*execute a function when someone writes in the text field:*/ inp.addEventListener("input", function(e) { var a, b, i, val = this.value; /*close any already open lists of autocompleted values*/ closeAllLists(); if (!val) { return false;} currentFocus = -1; /*create a DIV element that will contain the items (values):*/ a = document.createElement("DIV"); a.setAttribute("id", this.id + "autocomplete-list"); a.setAttribute("class", "autocomplete-items"); /*append the DIV element as a child of the autocomplete container:*/ this.parentNode.appendChild(a); /*for each item in the array...*/ for (i = 0; i < arr.length; i++) { /*check if the item starts with the same letters as the text field value:*/ if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) { /*create a DIV element for each matching element:*/ b = document.createElement("DIV"); /*make the matching letters bold:*/ b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>"; b.innerHTML += arr[i].substr(val.length); /*insert a input field that will hold the current array item's value:*/ b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>"; /*execute a function when someone clicks on the item value (DIV element):*/ b.addEventListener("click", function(e) { /*insert the value for the autocomplete text field:*/ inp.value = this.getElementsByTagName("input")[0].value; /*close the list of autocompleted values, (or any other open lists of autocompleted values:*/ closeAllLists(); }); a.appendChild(b); } } }); /*execute a function presses a key on the keyboard:*/ inp.addEventListener("keydown", function(e) { var x = document.getElementById(this.id + "autocomplete-list"); if (x) x = x.getElementsByTagName("div"); if (e.keyCode == 40) { /*If the arrow DOWN key is pressed, increase the currentFocus variable:*/ currentFocus++; /*and and make the current item more visible:*/ addActive(x); } else if (e.keyCode == 38) { //up /*If the arrow UP key is pressed, decrease the currentFocus variable:*/ currentFocus--; /*and and make the current item more visible:*/ addActive(x); } else if (e.keyCode == 13) { /*If the ENTER key is pressed, prevent the form from being submitted,*/ e.preventDefault(); if (currentFocus > -1) { /*and simulate a click on the "active" item:*/ if (x) x[currentFocus].click(); } } }); function addActive(x) { /*a function to classify an item as "active":*/ if (!x) return false; /*start by removing the "active" class on all items:*/ removeActive(x); if (currentFocus >= x.length) currentFocus = 0; if (currentFocus < 0) currentFocus = (x.length - 1); /*add class "autocomplete-active":*/ x[currentFocus].classList.add("autocomplete-active"); } function removeActive(x) { /*a function to remove the "active" class from all autocomplete items:*/ for (var i = 0; i < x.length; i++) { x[i].classList.remove("autocomplete-active"); } } function closeAllLists(elmnt) { /*close all autocomplete lists in the document, except the one passed as an argument:*/ var x = document.getElementsByClassName("autocomplete-items"); for (var i = 0; i < x.length; i++) { if (elmnt != x[i] && elmnt != inp) { x[i].parentNode.removeChild(x[i]); } } } /*execute a function when someone clicks in the document:*/ document.addEventListener("click", function (e) { closeAllLists(e.target); }); } /*An array containing all the country names in the world:*/ var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"]; /*initiate the autocomplete function on the "myInput" element, and pass along the countries array as possible autocomplete values:*/ autocomplete(document.getElementById("myInput"), countries); </script> </body> </html>
  6. Script: 1.Html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Neon Light Button Hover</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <script src="main.js"></script> </head> <body> <a href="#"> <span></span> <span></span> <span></span> <span></span> Neon Button </a> </body> </html> 2.CSS body{ margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #031321; font-family: consolas; } a{ position: relative; display: inline-block; padding: 15px 30px; color: #2196f3; text-transform: uppercase; letter-spacing: 4px; text-decoration: none; font-size: 24px; overflow: hidden; transition: 0.2s; } a:hover{ color: #255784; background: #2196f3; box-shadow: 0 0 10px #2196f3,0 0 40px #2196f3,0 0 80px #2196f3; transition-delay: 1s; } a span{ position: absolute; display: block; } a span:nth-child(1){ top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg,transparent,#2196f3); } a:hover span:nth-child(1){ left: 100%; transition: 1s; } a span:nth-child(3){ bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg,transparent,#2196f3); } a:hover span:nth-child(3){ right: 100%; transition: 1s; transition-delay: 0.5s; } a span:nth-child(2){ top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg,transparent,#2196f3); } a:hover span:nth-child(2){ top: 100%; transition: 1s; transition-delay: 0.25s; } a span:nth-child(4){ bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg,transparent,#2196f3); } a:hover span:nth-child(4){ bottom: 100%; transition: 1s; transition-delay: 0.75s; }
  7. Creați un buton care va duce utilizatorul în partea de sus a paginii atunci când faceți clic pe el."Scroll Back To Top Button" Pasul 1. Add HTML: Exemplu: <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> Pasul 2: Pasul 2. Add CSS: #myBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: red; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ } #myBtn:hover { background-color: #555; /* Add a dark-grey background on hover */ } Pasul 3. Add JavaScript: //Get the button: mybutton = document.getElementById("myBtn"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera }
  8. Demo: Script: <!DOCTYPE html> <html> <body> <p>Click on the "Choose File" button to upload a file:</p> <form action="/action_page.php"> <input type="file" id="myFile" name="filename"> <input type="submit"> </form> </body> </html>
  9. Script: <!DOCTYPE html> <html> <body> <p>Click the radio button to toggle between password visibility:</p> Password: <input type="password" value="FakePSW" id="myInput"><br><br> <input type="checkbox" onclick="myFunction()">Show Password <script> function myFunction() { var x = document.getElementById("myInput"); if (x.type === "password") { x.type = "text"; } else { x.type = "password"; } } </script> </body> </html>
  10. Gun Fight HTML Game: Script: <!DOCTYPE html> <html> <head> <title></title> <style> html, body { height: 100%; margin: 0; } body { background: black; display: flex; align-items: center; justify-content: center; } </style> </head> <body> <canvas width="565" height="500" id="game"></canvas> <script> const canvas = document.getElementById('game'); const context = canvas.getContext('2d'); const grid = 15; const playerHeight = grid * 3; // 45 const maxPlayerY = canvas.height - grid - playerHeight; var playerSpeed = 4; const leftPlayer = { // start in the middle of the game on the left side x: grid * 2, y: canvas.height / 2 - playerHeight / 2, width: grid, height: playerHeight, // shooting cooldown cooldown: 0, // player velocity dy: 0 }; const rightPlayer = { // start in the middle of the game on the right side x: canvas.width - grid * 3, y: canvas.height / 2 - playerHeight / 2, width: grid, height: playerHeight, // shooting cooldown cooldown: 0, // player velocity dy: 0 }; const bullets = { speed: 5, array: [] } // check for collision between two objects using axis-aligned bounding box (AABB) // @see https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection function collides(obj1, obj2) { return obj1.x < obj2.x + obj2.width && obj1.x + obj1.width > obj2.x && obj1.y < obj2.y + obj2.height && obj1.y + obj1.height > obj2.y; } // game loop function loop() { requestAnimationFrame(loop); context.clearRect(0,0,canvas.width,canvas.height); // bullet cooldowns // left player if (leftPlayer.cooldown > 0) { leftPlayer.cooldown--; } // right player if (rightPlayer.cooldown > 0) { rightPlayer.cooldown--; } // move players by their velocity leftPlayer.y += leftPlayer.dy; rightPlayer.y += rightPlayer.dy; // prevent players from going through walls if (leftPlayer.y < grid) { leftPlayer.y = grid; } else if (leftPlayer.y > maxPlayerY) { leftPlayer.y = maxPlayerY; } if (rightPlayer.y < grid) { rightPlayer.y = grid; } else if (rightPlayer.y > maxPlayerY) { rightPlayer.y = maxPlayerY; } // draw bullets context.fillStyle = 'yellow'; bullets.array.forEach(function(bullet, index) { context.fillRect(bullet.x, bullet.y, 10, 5); // check if the bullet hits a player // left player if (collides(bullet, leftPlayer)) { bullets.array.splice(index, 1); leftPlayer.y = canvas.height / 2 - playerHeight / 2; rightPlayer.y = canvas.height / 2 - playerHeight / 2; bullets.array.length = 0; } // right player else if (collides(bullet, rightPlayer)) { bullets.array.splice(index, 1); leftPlayer.y = canvas.height / 2 - playerHeight / 2; rightPlayer.y = canvas.height / 2 - playerHeight / 2; bullets.array.length = 0; } // move bullets bullet.x += bullet.dx; // remove bullets that leave the screen if (bullet.x < 0 || bullet.x > canvas.width) { bullets.array.splice(index, 1); } }); // draw paddles context.fillStyle = 'gold'; context.fillRect(leftPlayer.x, leftPlayer.y, leftPlayer.width, leftPlayer.height); context.fillRect(rightPlayer.x, rightPlayer.y, rightPlayer.width, rightPlayer.height); // draw walls context.fillStyle = 'lightgray'; context.fillRect(0, 0, canvas.width, grid); context.fillRect(0, canvas.height - grid, canvas.width, canvas.height); } // listen to keyboard events to move the players document.addEventListener('keydown', function(e) { // up arrow key if (e.which === 38) { rightPlayer.dy = -playerSpeed; } // down arrow key else if (e.which === 40) { rightPlayer.dy = playerSpeed; } // w key if (e.which === 87) { leftPlayer.dy = -playerSpeed; } // a key else if (e.which === 83) { leftPlayer.dy = playerSpeed; } // shooting // left arrow key if (e.which === 37 && rightPlayer.cooldown === 0) { bullets.array.push({ x: rightPlayer.x - 10, y: rightPlayer.y + 20, width: 10, height: 5, dx: -bullets.speed }); rightPlayer.cooldown = 25; } // d key if (e.which === 68 && leftPlayer.cooldown === 0) { bullets.array.push({ x: leftPlayer.x + 15, y: leftPlayer.y + 20, width: 10, height: 5, dx: bullets.speed }); leftPlayer.cooldown = 25; } }); // listen to keyboard events to stop the player if key is released document.addEventListener('keyup', function(e) { if (e.which === 38 || e.which === 40) { rightPlayer.dy = 0; } if (e.which === 83 || e.which === 87) { leftPlayer.dy = 0; } }); // start the game requestAnimationFrame(loop); </script> </body> </html> sursa:github.com
  11. Saalutare, mai jos o sa va pun cod-ul pentru un Analog Clock. HTML <!DOCTYPE html> <html> <head> <title>Analog Clock - GameLife Romania</title> </head> <body bgcolor="yellow"> <div id="cont"> <h id="twelve"></h> <h id="six"></h> <h id="nine"></h> <h id="three"></h> <div id="hour"></div> <div id="min"></div> <div id="sec"></div> <div id="cir"></div> </div> </body> </html> CSS #cont{ height:270px; width:270px; border-radius:50%; background-color:#000; position:absolute; overflow:hidden; left:0;right:0;top:0;bottom:0; margin:auto; box-shadow:0 0 9px 5px red; } #hour{ height:60px; width:5px; background-color:white; position:absolute ; top:-60px; left:0; right:0; bottom:0; margin:auto; transform:rotate(90deg); transform-origin: bottom; box-shadow:0 0 9px 5px orange; border-radius:30%; } #min{ height:80px; width:5px; background-color:white; position:absolute ; top:-80px; left:0; right:0; bottom:0; margin:auto; transform:rotate(0deg); transform-origin: bottom; box-shadow:0 0 9px 5px orange; border-radius:30%; opacity:1; } #sec{ height:110px; width:5px; background-color:white; position:absolute ; top:-110px; left:0; right:0; bottom:0; margin:auto; transform:rotate(-45deg); box-shadow:0 0 9px 5px orange; transform-origin:bottom; border-radius:30%; } #cir{ height:15px; width:15px; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; background-color:white; box-shadow:0 0 9px 5px deeppink; border-radius:50%; opacity:1; } h{ position:absolute ; height:20px; width:5px; margin:auto; background:white; box-shadow:0 0 9px 5px deeppink; } #twelve{ right:0; left:0; top:0; } #six{ right:0; left:0; bottom:0; } #nine{ top:0; bottom:0; left:0; height:5px; width:20px; } #three{ top:0; bottom:0; right:0; height:5px; width:20px; } JAVASCRIPT function setDeg(){ var date= new Date(); var hours = ( date.getHours() + date.getMinutes()/60) / 12 * 360; var mins = date.getMinutes() / 60 * 360; var secs = ( date.getSeconds() + date.getMilliseconds()/1000) /60 * 360; document.getElementById('hour').style.transform = 'rotate('+hours+'deg)'; document.getElementById('min').style.transform = 'rotate('+mins+'deg)'; document.getElementById('sec').style.transform = 'rotate('+secs+'deg)'; } setInterval(setDeg,1); DOVADA
×
×
  • Create New...