A Pen by 💡oneplusuniverse
How do I make an a pen by 💡oneplusuniverse?
What is a a pen by 💡oneplusuniverse? How do you make a a pen by 💡oneplusuniverse? This script and codes were developed by on 12 January 2023, Thursday.
A Pen by 💡oneplusuniverse - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by
A Pen by 💡oneplusuniverse - Script Codes CSS Codes
body { background: #202028; color: #fff; font-family: sans-serif; font-size: 2em; text-align: center;
}
canvas { border: solid .2em #fff; height: 90vh;
}
A Pen by 💡oneplusuniverse - Script Codes JS Codes
const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');
context.scale(20, 20);
function arenaSweep() { let rowCount = 1; outer: for (let y = arena.length -1; y > 0; --y) { for (let x = 0; x < arena[y].length; ++x) { if (arena[y][x] === 0) { continue outer; } } const row = arena.splice(y, 1)[0].fill(0); arena.unshift(row); ++y; player.score += rowCount * 10; rowCount *= 2; }
}
function collide(arena, player) { const m = player.matrix; const o = player.pos; for (let y = 0; y < m.length; ++y) { for (let x = 0; x < m[y].length; ++x) { if (m[y][x] !== 0 && (arena[y + o.y] && arena[y + o.y][x + o.x]) !== 0) { return true; } } } return false;
}
function createMatrix(w, h) { const matrix = []; while (h--) { matrix.push(new Array(w).fill(0)); } return matrix;
}
function createPiece(type)
{ if (type === 'I') { return [ [0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0], ]; } else if (type === 'L') { return [ [0, 2, 0], [0, 2, 0], [0, 2, 2], ]; } else if (type === 'J') { return [ [0, 3, 0], [0, 3, 0], [3, 3, 0], ]; } else if (type === 'O') { return [ [4, 4], [4, 4], ]; } else if (type === 'Z') { return [ [5, 5, 0], [0, 5, 5], [0, 0, 0], ]; } else if (type === 'S') { return [ [0, 6, 6], [6, 6, 0], [0, 0, 0], ]; } else if (type === 'T') { return [ [0, 7, 0], [7, 7, 7], [0, 0, 0], ]; }
}
function drawMatrix(matrix, offset) { matrix.forEach((row, y) => { row.forEach((value, x) => { if (value !== 0) { context.fillStyle = colors[value]; context.fillRect(x + offset.x, y + offset.y, 1, 1); } }); });
}
function draw() { context.fillStyle = '#000'; context.fillRect(0, 0, canvas.width, canvas.height); drawMatrix(arena, {x: 0, y: 0}); drawMatrix(player.matrix, player.pos);
}
function merge(arena, player) { player.matrix.forEach((row, y) => { row.forEach((value, x) => { if (value !== 0) { arena[y + player.pos.y][x + player.pos.x] = value; } }); });
}
function rotate(matrix, dir) { for (let y = 0; y < matrix.length; ++y) { for (let x = 0; x < y; ++x) { [ matrix[x][y], matrix[y][x], ] = [ matrix[y][x], matrix[x][y], ]; } } if (dir > 0) { matrix.forEach(row => row.reverse()); } else { matrix.reverse(); }
}
function playerDrop() { player.pos.y++; if (collide(arena, player)) { player.pos.y--; merge(arena, player); playerReset(); arenaSweep(); updateScore(); } dropCounter = 0;
}
function playerMove(offset) { player.pos.x += offset; if (collide(arena, player)) { player.pos.x -= offset; }
}
function playerReset() { const pieces = 'TJLOSZI'; player.matrix = createPiece(pieces[pieces.length * Math.random() | 0]); player.pos.y = 0; player.pos.x = (arena[0].length / 2 | 0) - (player.matrix[0].length / 2 | 0); if (collide(arena, player)) { arena.forEach(row => row.fill(0)); player.score = 0; updateScore(); }
}
function playerRotate(dir) { const pos = player.pos.x; let offset = 1; rotate(player.matrix, dir); while (collide(arena, player)) { player.pos.x += offset; offset = -(offset + (offset > 0 ? 1 : -1)); if (offset > player.matrix[0].length) { rotate(player.matrix, -dir); player.pos.x = pos; return; } }
}
let dropCounter = 0;
let dropInterval = 1000;
let lastTime = 0;
function update(time = 0) { const deltaTime = time - lastTime; dropCounter += deltaTime; if (dropCounter > dropInterval) { playerDrop(); } lastTime = time; draw(); requestAnimationFrame(update);
}
function updateScore() { document.getElementById('score').innerText = player.score;
}
document.addEventListener('keydown', event => { if (event.keyCode === 37) { playerMove(-1); } else if (event.keyCode === 39) { playerMove(1); } else if (event.keyCode === 40) { playerDrop(); } else if (event.keyCode === 81) { playerRotate(-1); } else if (event.keyCode === 32 ) { playerRotate(1); }
});
const colors = [ null, '#FF0D72', '#0DC2FF', '#0DFF72', '#F538FF', '#FF8E0D', '#FFE138', '#3877FF',
];
const arena = createMatrix(12, 20);
const player = { pos: {x: 0, y: 0}, matrix: null, score: 0,
};
playerReset();
updateScore();
update();
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Slow laggy attempt | 5,947 Kb |
Simple toggle | 2,684 Kb |
Angular attempts | 7,167 Kb |
Vkapi | 2,787 Kb |
AlbumBack | 2,821 Kb |
Audio Drumpad Sampler | 6,931 Kb |
Ambitheater | 9,605 Kb |
KYIVSTONER_KEYPAD | 6,702 Kb |
Rotating rainbow preloader | 3,043 Kb |
AlbumFront | 3,100 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
FCC Portfolio | Cmwebby | 4,304 Kb |
Chuck Norris Background | Manz | 1,967 Kb |
A Pen by Patrick Cox | Pcridesagain | 2,899 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Calendar | Miroot | 2,033 Kb |
Loading animation - freedom purchase | Rocbear | 2,567 Kb |
Drawing a Terminal with CSS | Lachlanjc | 3,185 Kb |
The Monty Hall Problem | Melatonind | 4,360 Kb |
Underlined form fields | Mitchdot | 2,323 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!