<!--Space Invaders Kernal coded for fun 2026 -->
<div id="tp-spaceinvader" style="width:320px; height:400px; background:#000; position:relative; overflow:hidden; border:2px solid #ccc; border-radius:5px;">
<canvas id="invaderCanvas" width="320" height="400"></canvas>
<div id="scoreDisplay" style="position:absolute; top:5px; left:5px; color:#fff; font-family:monospace; font-size:14px;">Score: 0</div>
</div>
<script>
(function(){
const canvas = document.getElementById('invaderCanvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('scoreDisplay');
const WIDTH = canvas.width;
const HEIGHT = canvas.height;
// Player
const player = {
x: WIDTH/2 - 15,
y: HEIGHT - 30,
width: 30,
height: 10,
color: 'lime',
speed: 5,
dx: 0
};
// Bullets
const bullets = [];
// Invader settings
const rows = 3;
const cols = 6;
const invaderWidth = 25;
const invaderHeight = 15;
const invaderSpacingX = 10;
const invaderSpacingY = 20;
let invaderDirection = 1; // 1 = right, -1 = left
let invaderSpeed = 0.5;
// Game state
let invaders = [];
let score = 0;
let gameOver = false;
let gameWon = false;
function initInvaders(){
invaders = [];
for(let r=0;r<rows;r++){
for(let c=0;c<cols;c++){
invaders.push({
x: c*(invaderWidth+invaderSpacingX)+20,
y: r*(invaderHeight+invaderSpacingY)+20,
width: invaderWidth,
height: invaderHeight,
alive: true,
color: 'red'
});
}
}
}
initInvaders();
// Key controls
document.addEventListener('keydown', e => {
if(e.key === 'ArrowLeft') player.dx = -player.speed;
if(e.key === 'ArrowRight') player.dx = player.speed;
if((e.key === ' ' || e.key === 'ArrowUp') && !gameOver) shoot();
if(e.key === 'r' && (gameOver || gameWon)) restart();
});
document.addEventListener('keyup', e => {
if(e.key === 'ArrowLeft' || e.key === 'ArrowRight') player.dx = 0;
});
// Mobile touch controls
canvas.addEventListener('touchstart', e => {
const touch = e.touches[0];
if(touch.clientX < WIDTH/2) player.dx = -player.speed;
else player.dx = player.speed;
shoot();
e.preventDefault();
});
canvas.addEventListener('touchend', e => {
player.dx = 0;
e.preventDefault();
});
function shoot(){
bullets.push({x: player.x + player.width/2 - 2, y: player.y, width: 4, height: 10, color:'yellow'});
}
function update(){
if(gameOver || gameWon) return;
// Move player
player.x += player.dx;
if(player.x < 0) player.x = 0;
if(player.x + player.width > WIDTH) player.x = WIDTH - player.width;
// Move bullets
for(let i = bullets.length-1;i>=0;i--){
bullets[i].y -= 6;
if(bullets[i].y < 0) bullets.splice(i,1);
}
// Move invaders
let moveDown = false;
for(let inv of invaders){
if(!inv.alive) continue;
inv.x += invaderDirection * invaderSpeed;
if(inv.x + inv.width >= WIDTH || inv.x <=0) moveDown = true;
}
if(moveDown){
invaderDirection *= -1;
for(let inv of invaders){
inv.y += 10;
if(inv.y + inv.height >= player.y) gameOver = true;
}
}
// Collision detection
for(let i = bullets.length-1;i>=0;i--){
for(let j = 0;j<invaders.length;j++){
let inv = invaders[j];
if(inv.alive && bullets[i].x < inv.x+inv.width && bullets[i].x+bullets[i].width>inv.x && bullets[i].y<inv.y+inv.height && bullets[i].y+bullets[i].height>inv.y){
inv.alive = false;
bullets.splice(i,1);
score += 10;
break;
}
}
}
// Check victory
if(invaders.every(inv=>!inv.alive)) gameWon = true;
scoreDisplay.textContent = "Score: " + score;
}
function draw(){
ctx.clearRect(0,0,WIDTH,HEIGHT);
// Draw player
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
// Draw bullets
for(let b of bullets){
ctx.fillStyle = b.color;
ctx.fillRect(b.x,b.y,b.width,b.height);
}
// Draw invaders
for(let inv of invaders){
if(inv.alive){
ctx.fillStyle = inv.color;
ctx.fillRect(inv.x,inv.y,inv.width,inv.height);
}
}
// Game over / victory text
if(gameOver || gameWon){
ctx.fillStyle = 'white';
ctx.font = '20px monospace';
ctx.textAlign = 'center';
if(gameOver) ctx.fillText("GAME OVER Sucker lol! Press R", WIDTH/2, HEIGHT/2);
if(gameWon) ctx.fillText("YOU WIN Dam! Press R", WIDTH/2, HEIGHT/2);
}
}
function loop(){
update();
draw();
requestAnimationFrame(loop);
}
function restart(){
bullets.length = 0;
player.x = WIDTH/2 - player.width/2;
player.dx = 0;
score = 0;
gameOver = false;
gameWon = false;
initInvaders();
}
loop();
})();
</script>
<!-- TinyPortal Simple Multi-Time Banners Kernal Coded 2026 -->
<div id="tpBanners" style="text-align:center; margin:10px 0;"></div>
<script>
(function() {
var now = new Date();
var currentDay = now.getDay(); // 0=Sun, 1=Mon...
var currentHour = now.getHours(); // 0-23
// ===== CONFIGURE YOUR BANNERS HERE OK =====
var banners = [
{
image: "BANNER1-IMAGE.jpg",
day: 1, // Monday
start: 19, // 7pm
end: 23 // 11pm
},
{
image: "BANNER2-IMAGE.jpg",
day: 5, // Friday
start: 18, // 6pm
end: 22 // 10pm
}
// Add more banners here as needed simple
];
// ========================================
var container = document.getElementById("tpBanners");
banners.forEach(function(banner) {
if(currentDay === banner.day && currentHour >= banner.start && currentHour < banner.end){
var div = document.createElement("div");
div.style.margin = "10px 0";
div.style.textAlign = "center";
div.innerHTML = '<img src="' + banner.image + '" alt="Event Banner" style="max-width:100%; height:auto;">';
container.appendChild(div);
}
});
})();
</script>
Page created in 0.044 seconds with 19 queries.