Search the Community
Showing results for tags 'html'.
Found 13 results
-
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%; }
-
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); })
-
Username:cReTzUUUU Creator (sau editor):cReTzUUUU Poze/Video în care prezinți index-ul: Versiune dextop: Versiune pentru mobil: Link Virustotal:https://www.virustotal.com/gui/file/f08aa2fee5900f452562db01fd2a17d78f5c4de1ee29f32cdf70fb2fea45f357/detection Link download : https://www66.zippyshare.com/v/YEIkj31G/file.html Alte precizări: 1.Index-ul conține elemente de css, html, javascrip, jquery, bootstrap. 2.Index-ul este optimizat SEO , mobile SEO consta in optimizarea unui site si pentru celelalte device-uri, respectiv smartphone si tableta. Optimizarea SEO a site-ului pentru mobil inseamna de asemenea ca resursele site-ului tau vor fi accesibile motoarelor de cautare.
- 2 replies
-
- 6
-
-
- tehnologie
- www.gamelife.ro
- (and 2 more)
-
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>
-
Script: <!DOCTYPE html> <html> <style> #text {display:none;color:red} </style> <body> <h3>Detect Caps Lock</h3> <p>Press the "Caps Lock" key inside the input field to trigger the function.</p> <input id="myInput" value="Some text.."> <p id="text">WARNING! Caps lock is ON.</p> <script> var input = document.getElementById("myInput"); var text = document.getElementById("text"); input.addEventListener("keyup", function(event) { if (event.getModifierState("CapsLock")) { text.style.display = "block"; } else { text.style.display = "none" } }); </script> </body> </html>
-
- 1
-
-
- tehnologie
- html
- (and 2 more)
-
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 }
-
- 1
-
-
- tehnologie
- html
- (and 4 more)
-
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>
-
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>
-
<!DOCTYPE html> <html> <head> <title></title> <style> html, body { height: 100%; margin: 0; } body { background: black; display: flex; align-items: center; justify-content: center; } canvas { border: 1px solid white; } </style> </head> <body> <canvas width="320" height="640" id="game"></canvas> <script> // https://tetris.fandom.com/wiki/Tetris_Guideline // get a random integer between the range of [min,max] // @see https://stackoverflow.com/a/1527820/2124254 function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } // generate a new tetromino sequence // @see https://tetris.fandom.com/wiki/Random_Generator function generateSequence() { const sequence = ['I', 'J', 'L', 'O', 'S', 'T', 'Z']; while (sequence.length) { const rand = getRandomInt(0, sequence.length - 1); const name = sequence.splice(rand, 1)[0]; tetrominoSequence.push(name); } } // get the next tetromino in the sequence function getNextTetromino() { if (tetrominoSequence.length === 0) { generateSequence(); } const name = tetrominoSequence.pop(); const matrix = tetrominos[name]; // I and O start centered, all others start in left-middle const col = playfield[0].length / 2 - Math.ceil(matrix[0].length / 2); // I starts on row 21 (-1), all others start on row 22 (-2) const row = name === 'I' ? -1 : -2; return { name: name, // name of the piece (L, O, etc.) matrix: matrix, // the current rotation matrix row: row, // current row (starts offscreen) col: col // current col }; } // rotate an NxN matrix 90deg // @see https://codereview.stackexchange.com/a/186834 function rotate(matrix) { const N = matrix.length - 1; const result = matrix.map((row, i) => row.map((val, j) => matrix[N - j][i]) ); return result; } // check to see if the new matrix/row/col is valid function isValidMove(matrix, cellRow, cellCol) { for (let row = 0; row < matrix.length; row++) { for (let col = 0; col < matrix[row].length; col++) { if (matrix[row][col] && ( // outside the game bounds cellCol + col < 0 || cellCol + col >= playfield[0].length || cellRow + row >= playfield.length || // collides with another piece playfield[cellRow + row][cellCol + col]) ) { return false; } } } return true; } // place the tetromino on the playfield function placeTetromino() { for (let row = 0; row < tetromino.matrix.length; row++) { for (let col = 0; col < tetromino.matrix[row].length; col++) { if (tetromino.matrix[row][col]) { // game over if piece has any part offscreen if (tetromino.row + row < 0) { return showGameOver(); } playfield[tetromino.row + row][tetromino.col + col] = tetromino.name; } } } // check for line clears starting from the bottom and working our way up for (let row = playfield.length - 1; row >= 0; ) { if (playfield[row].every(cell => !!cell)) { // drop every row above this one for (let r = row; r >= 0; r--) { for (let c = 0; c < playfield[r].length; c++) { playfield[r][c] = playfield[r-1][c]; } } } else { row--; } } tetromino = getNextTetromino(); } // show the game over screen function showGameOver() { cancelAnimationFrame(rAF); gameOver = true; context.fillStyle = 'black'; context.globalAlpha = 0.75; context.fillRect(0, canvas.height / 2 - 30, canvas.width, 60); context.globalAlpha = 1; context.fillStyle = 'white'; context.font = '36px monospace'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText('GAME OVER!', canvas.width / 2, canvas.height / 2); } const canvas = document.getElementById('game'); const context = canvas.getContext('2d'); const grid = 32; const tetrominoSequence = []; // keep track of what is in every cell of the game using a 2d array // tetris playfield is 10x20, with a few rows offscreen const playfield = []; // populate the empty state for (let row = -2; row < 20; row++) { playfield[row] = []; for (let col = 0; col < 10; col++) { playfield[row][col] = 0; } } // how to draw each tetromino // @see https://tetris.fandom.com/wiki/SRS const tetrominos = { 'I': [ [0,0,0,0], [1,1,1,1], [0,0,0,0], [0,0,0,0] ], 'J': [ [1,0,0], [1,1,1], [0,0,0], ], 'L': [ [0,0,1], [1,1,1], [0,0,0], ], 'O': [ [1,1], [1,1], ], 'S': [ [0,1,1], [1,1,0], [0,0,0], ], 'Z': [ [1,1,0], [0,1,1], [0,0,0], ], 'T': [ [0,1,0], [1,1,1], [0,0,0], ] }; // color of each tetromino const colors = { 'I': 'cyan', 'O': 'yellow', 'T': 'purple', 'S': 'green', 'Z': 'red', 'J': 'blue', 'L': 'orange' }; let count = 0; let tetromino = getNextTetromino(); let rAF = null; // keep track of the animation frame so we can cancel it let gameOver = false; // game loop function loop() { rAF = requestAnimationFrame(loop); context.clearRect(0,0,canvas.width,canvas.height); // draw the playfield for (let row = 0; row < 20; row++) { for (let col = 0; col < 10; col++) { if (playfield[row][col]) { const name = playfield[row][col]; context.fillStyle = colors[name]; // drawing 1 px smaller than the grid creates a grid effect context.fillRect(col * grid, row * grid, grid-1, grid-1); } } } // draw the active tetromino if (tetromino) { // tetromino falls every 35 frames if (++count > 35) { tetromino.row++; count = 0; // place piece if it runs into anything if (!isValidMove(tetromino.matrix, tetromino.row, tetromino.col)) { tetromino.row--; placeTetromino(); } } context.fillStyle = colors[tetromino.name]; for (let row = 0; row < tetromino.matrix.length; row++) { for (let col = 0; col < tetromino.matrix[row].length; col++) { if (tetromino.matrix[row][col]) { // drawing 1 px smaller than the grid creates a grid effect context.fillRect((tetromino.col + col) * grid, (tetromino.row + row) * grid, grid-1, grid-1); } } } } } // listen to keyboard events to move the active tetromino document.addEventListener('keydown', function(e) { if (gameOver) return; // left and right arrow keys (move) if (e.which === 37 || e.which === 39) { const col = e.which === 37 ? tetromino.col - 1 : tetromino.col + 1; if (isValidMove(tetromino.matrix, tetromino.row, col)) { tetromino.col = col; } } // up arrow key (rotate) if (e.which === 38) { const matrix = rotate(tetromino.matrix); if (isValidMove(matrix, tetromino.row, tetromino.col)) { tetromino.matrix = matrix; } } // down arrow key (drop) if(e.which === 40) { const row = tetromino.row + 1; if (!isValidMove(tetromino.matrix, row, tetromino.col)) { tetromino.row = row - 1; placeTetromino(); return; } tetromino.row = row; } }); // start the game rAF = requestAnimationFrame(loop); </script> </body> </html>
-
Bomberman <!DOCTYPE html> <html> <head> <title></title> <style> html, body { height: 100%; margin: 0; } body { background: black; display: flex; align-items: center; justify-content: center; } canvas { background: forestgreen; } </style> </head> <body> <canvas width="960" height="832" id="game"></canvas> <script> const canvas = document.getElementById('game'); const context = canvas.getContext('2d'); const grid = 64; const numRows = 13; const numCols = 15; // create a new canvas and draw the soft wall image. then we can use this // canvas to draw the images later on const softWallCanvas = document.createElement('canvas'); const softWallCtx = softWallCanvas.getContext('2d'); softWallCanvas.width = softWallCanvas.height = grid; softWallCtx.fillStyle = 'black'; softWallCtx.fillRect(0, 0, grid, grid); softWallCtx.fillStyle = '#a9a9a9'; // 1st row brick softWallCtx.fillRect(1, 1, grid - 2, 20); // 2nd row bricks softWallCtx.fillRect(0, 23, 20, 18); softWallCtx.fillRect(22, 23, 42, 18); // 3rd row bricks softWallCtx.fillRect(0, 43, 42, 20); softWallCtx.fillRect(44, 43, 20, 20); // create a new canvas and draw the soft wall image. then we can use this // canvas to draw the images later on const wallCanvas = document.createElement('canvas'); const wallCtx = wallCanvas.getContext('2d'); wallCanvas.width = wallCanvas.height = grid; wallCtx.fillStyle = 'black'; wallCtx.fillRect(0, 0, grid, grid); wallCtx.fillStyle = 'white'; wallCtx.fillRect(0, 0, grid - 2, grid - 2); wallCtx.fillStyle = '#a9a9a9'; wallCtx.fillRect(2, 2, grid - 4, grid - 4); // create a mapping of object types const types = { wall: '▉', softWall: 1, bomb: 2 }; // keep track of all entities let entities = []; // keep track of what is in every cell of the game using a 2d array. the // template is used to note where walls are and where soft walls cannot spawn. // '▉' represents a wall // 'x' represents a cell that cannot have a soft wall (player start zone) let cells = []; const template = [ ['▉','▉','▉','▉','▉','▉','▉','▉','▉','▉','▉','▉','▉','▉','▉'], ['▉','x','x', , , , , , , , , ,'x','x','▉'], ['▉','x','▉', ,'▉', ,'▉', ,'▉', ,'▉', ,'▉','x','▉'], ['▉','x', , , , , , , , , , , ,'x','▉'], ['▉', ,'▉', ,'▉', ,'▉', ,'▉', ,'▉', ,'▉', ,'▉'], ['▉', , , , , , , , , , , , , ,'▉'], ['▉', ,'▉', ,'▉', ,'▉', ,'▉', ,'▉', ,'▉', ,'▉'], ['▉', , , , , , , , , , , , , ,'▉'], ['▉', ,'▉', ,'▉', ,'▉', ,'▉', ,'▉', ,'▉', ,'▉'], ['▉','x', , , , , , , , , , , ,'x','▉'], ['▉','x','▉', ,'▉', ,'▉', ,'▉', ,'▉', ,'▉','x','▉'], ['▉','x','x', , , , , , , , , ,'x','x','▉'], ['▉','▉','▉','▉','▉','▉','▉','▉','▉','▉','▉','▉','▉','▉','▉'] ]; // populate the level with walls and soft walls function generateLevel() { cells = []; for (let row = 0; row < numRows; row++) { cells[row] = []; for (let col = 0; col < numCols; col++) { // 90% chance cells will contain a soft wall if (!template[row][col] && Math.random() < 0.90) { cells[row][col] = types.softWall; } else if (template[row][col] === types.wall) { cells[row][col] = types.wall; } } } } // blow up a bomb and its surrounding tiles function blowUpBomb(bomb) { // bomb has already exploded so don't blow up again if (!bomb.alive) return; bomb.alive = false; // remove bomb from grid cells[bomb.row][bomb.col] = null; // explode bomb outward by size const dirs = [{ // up row: -1, col: 0 }, { // down row: 1, col: 0 }, { // left row: 0, col: -1 }, { // right row: 0, col: 1 }]; dirs.forEach((dir) => { for (let i = 0; i < bomb.size; i++) { const row = bomb.row + dir.row * i; const col = bomb.col + dir.col * i; const cell = cells[row][col]; // stop the explosion if it hit a wall if (cell === types.wall) { return; } // center of the explosion is the first iteration of the loop entities.push(new Explosion(row, col, dir, i === 0 ? true : false)); cells[row][col] = null; // bomb hit another bomb so blow that one up too if (cell === types.bomb) { // find the bomb that was hit by comparing positions const nextBomb = entities.find((entity) => { return ( entity.type === types.bomb && entity.row === row && entity.col === col ); }); blowUpBomb(nextBomb); } // stop the explosion if hit anything if (cell) { return; } } }); } // bomb constructor function function Bomb(row, col, size, owner) { this.row = row; this.col = col; this.radius = grid * 0.4; this.size = size; // the size of the explosion this.owner = owner; // which player placed this bomb this.alive = true; this.type = types.bomb; // bomb blows up after 3 seconds this.timer = 3000; // update the bomb each frame this.update = function(dt) { this.timer -= dt; // blow up bomb if timer is done if (this.timer <= 0) { return blowUpBomb(this); } // change the size of the bomb every half second. we can determine the size // by dividing by 500 (half a second) and taking the ceiling of the result. // then we can check if the result is even or odd and change the size const interval = Math.ceil(this.timer / 500); if (interval % 2 === 0) { this.radius = grid * 0.4; } else { this.radius = grid * 0.5; } }; // render the bomb each frame this.render = function() { const x = (this.col + 0.5) * grid; const y = (this.row + 0.5) * grid; // draw bomb context.fillStyle = 'black'; context.beginPath(); context.arc(x, y, this.radius, 0, 2 * Math.PI); context.fill(); // draw bomb fuse moving up and down with the bomb size const fuseY = (this.radius === grid * 0.5 ? grid * 0.15 : 0); context.strokeStyle = 'white'; context.lineWidth = 5; context.beginPath(); context.arc( (this.col + 0.75) * grid, (this.row + 0.25) * grid - fuseY, 10, Math.PI, -Math.PI / 2 ); context.stroke(); }; } // explosion constructor function function Explosion(row, col, dir, center) { this.row = row; this.col = col; this.dir = dir; this.alive = true; // show explosion for 0.3 seconds this.timer = 300; // update the explosion each frame this.update = function(dt) { this.timer -= dt; if (this.timer <=0) { this.alive = false; } }; // render the explosion each frame this.render = function() { const x = this.col * grid; const y = this.row * grid; const horizontal = this.dir.col; const vertical = this.dir.row; // create a fire effect by stacking red, orange, and yellow on top of // each other using progressively smaller rectangles context.fillStyle = '#D72B16'; // red context.fillRect(x, y, grid, grid); context.fillStyle = '#F39642'; // orange // determine how to draw based on if it's vertical or horizontal // center draws both ways if (center || horizontal) { context.fillRect(x, y + 6, grid, grid - 12); } if (center || vertical) { context.fillRect(x + 6, y, grid - 12, grid); } context.fillStyle = '#FFE5A8'; // yellow if (center || horizontal) { context.fillRect(x, y + 12, grid, grid - 24); } if (center || vertical) { context.fillRect(x + 12, y, grid - 24, grid); } }; } // player character (just a simple circle) const player = { row: 1, col: 1, numBombs: 1, bombSize: 3, radius: grid * 0.35, render() { const x = (this.col + 0.5) * grid; const y = (this.row + 0.5) * grid; context.save(); context.fillStyle = 'white'; context.beginPath(); context.arc(x, y, this.radius, 0, 2 * Math.PI); context.fill(); } } // game loop let last; let dt; function loop(timestamp) { requestAnimationFrame(loop); context.clearRect(0,0,canvas.width,canvas.height); // calculate the time difference since the last update. requestAnimationFrame // passes the current timestamp as a parameter to the loop if (!last) { last = timestamp; } dt = timestamp - last; last = timestamp; // update and render everything in the grid for (let row = 0; row < numRows; row++) { for (let col = 0; col < numCols; col++) { switch(cells[row][col]) { case types.wall: context.drawImage(wallCanvas, col * grid, row * grid); break; case types.softWall: context.drawImage(softWallCanvas, col * grid, row * grid); break; } } } // update and render all entities entities.forEach((entity) => { entity.update(dt); entity.render(); }); // remove dead entities entities = entities.filter((entity) => entity.alive); player.render(); } // listen to keyboard events to move the snake document.addEventListener('keydown', function(e) { let row = player.row; let col = player.col; // left arrow key if (e.which === 37) { col--; } // up arrow key else if (e.which === 38) { row--; } // right arrow key else if (e.which === 39) { col++; } // down arrow key else if (e.which === 40) { row++; } // space key (bomb) else if ( e.which === 32 && !cells[row][col] && // count the number of bombs the player has placed entities.filter((entity) => { return entity.type === types.bomb && entity.owner === player }).length < player.numBombs ) { // place bomb const bomb = new Bomb(row, col, player.bombSize, player); entities.push(bomb); cells[row][col] = types.bomb; } // don't move the player if something is already at that position if (!cells[row][col]) { player.row = row; player.col = col; } }); // start the game generateLevel(); requestAnimationFrame(loop); </script> </body> </html>
-
- 1
-
-
- tehnologie
- html
- (and 1 more)
-
Code: <!DOCTYPE html> <html> <style> body {font-family: Arial, Helvetica, sans-serif;} form { border: 3px solid #f1f1f1; font-family: Arial; } .container { padding: 20px; background-color: #f1f1f1; } input[type=text], input[type=submit] { width: 100%; padding: 12px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } input[type=checkbox] { margin-top: 16px; } input[type=submit] { background-color: blue; color: white; border: none; } input[type=submit]:hover { opacity: 0.8; } </style> <body> <form action="/action_page.php"> <div class="container"> <h2>Subscribe to our Newsletter</h2> </div> <div class="container" style="background-color:white"> <input type="text" placeholder="Name" name="name" required> <input type="text" placeholder="Email address" name="mail" required> <label> <input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter </label> </div> <div class="container"> <input type="submit" value="Subscribe"> </div> </form> </body> </html>
-
- 4
-
-
- tehnologie
- html
- (and 1 more)
-
Html sau HyperText Markup Language este unul dintre cele mai vechi limbaje de marcare web. Acesta sta la baza crearii unui site web. Cu alte cuvinte, inainte de a invata alte limbaje de programare trebuie sa cunosti cel putin HTML. Acest sir de tutoriale html este conceput pentru a-ti oferi putina experienta, pentru ca tu sa fi capabil sa citesti si sa scri in HTML, sa poti salva corect documentele si sa poti, dupa aceea sa vizualizezi toata "osteneala" intr-un browser web. Din pacate aceeasta pagina nu detine o rubrica pentru a te invata sa folosesti functiile de baza ale unui calculator, asa ca in acest sens poti sa ceri ajutorul unui prieten pentru a putea fii initiat in urmatoarele: - Sa stii ce este un notepad si cum se foloseste - Sa stii sa deschizi un fisier folosind Internet Explorer (sau oricare alt browser la alegere, vezi mai jos o lista cu cele mai folosite browsere) - Sa stii ce este si cum se face un copy/paste Prima pagina web Pentru inceput copiaza urmatorul cod HTML in notepad. Aigurate ca operatiunea a fost executata corect, in caz contrar pagina nu va functiona. <html> <head> </head> <body> <h2>Prima mea pagina web!</h2> </body> </html> Codul HTML de mai sus, este tot ceea ce iti trebuie pentru a crea o pagina web de baza. Acum poti salva documentul in notepad selectand din meniul "File", optiunea "Save As". In fereastra care se deschide, selecteaza "All Files". Vom da un nume fisierului, de exemplu "index.html", fara ghilimele. Verifica de doua ori innainte de a apasa butonul "Save". O sa te rog sa incerci sa iti aduci aminte unde ai salvat fisierul deoarece vom lucra cu acest fisier ceva mai tarziu. Vizualizarea primei pagini web - Browsers Pentru a putea vedea pagina, va trebuii sa folosesti un browser. Browser-ele sunt programele de internet care interpreteaza codurile HTML, asemanatoare cu acele pe care le-ai copiat si salvat in notepad. Acestea transforma codul HTML intr-o pagina web care poate fi citita de orice internaut. Cele mai folosite browsere sunt: - Chrome - FireFox - Safari - Opera - Internet Explorer Vizualizarea primei pagini Pentru a putea vizualiza pagina web, trebuie sa deschizi fisierul "index.html" intr-un browser. In acest sens, poti face clik dreapta pe fisier si selecta optiunea "Open with.." (deschide cu..), alegand unul din browser-ele enumerate mai sus. Felicitari! Tocmai ai vazut prima ta pagina web. Sursa: Click Aici
-
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
