The hero caelum1infernum
Some of you may know that I've been trying and failing multiple times to make a video game for Hive. This is because I keep failing at learning to code, which just makes me miserable. Some friends have told me that I'm a hands-on, physical guy, not the patient type. But with the help of AI, I am sure I can pull this off.
I just want to make a simple game, nothing crazy. It would be a simple game for Hive that everyone can enjoy and buy in-game weapons if they wish. There would be no paywalls. It would be something like a simpler version of Runescape, of course.
You would spend a lot of time and finish as many quests as possible to receive gear. This way, older players can show the newbies that it takes hard work to achieve gear, unlike today's games where whoever has the biggest wallet or credit card wins. I'm talking about the old version of Runescape, not the new one.
You would spend thousands of hours grinding and slowly grow stronger. That's the best part of that game. It's my childhood game and the first MMORPG I ever played.
Anyway so let's try to make some pixel arts using chatgpt.
First picture is good turn my logo into a hero.
Second we need it pixelated version of my hero.
So far so good exactly what I wanted.
Okey, this is where it start making things wrong. Suddenly I have a belt if you see from the picture. One of them doesn't have a sword I guess someone might ate them. Also the play sign from my logo from its shield is missing sigh but it's all right we use what we can.
Because I don't know much how to create pixel characters and how to move them. But I do have an idea I see some old games where they seperated the sword, shield and armor. What I mean is the shield armor and sword is not linked to it's player it's a seperate image.
So I'm guessing I seperate all of it and I can create it myself on Canva edit it until I'm satisfied with it. From there I have more control over the images and to make the movement smoother.
I'm thinking a 3 frame attack and defend will do and for the monsters I will do like the old final fantasy game where the enemy just lights up and slash the players to make it look like it's attacking you. Let's see how it goes.
As for the coding let's see
Code below 👇
Idle Side-Walker Prototype// Canvas setup
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;
// Pixel scaling (you can scale canvas via CSS but keep pixelated look)
ctx.imageSmoothingEnabled = false;
// Game state
let lastTime = 0;
let distance = 0; // meters/units travelled
let baseSpeed = 80; // pixels per second of world scroll (tweak)
let speedMultiplier = 1; // for dash / upgrades
let walkingCycle = 0; // animation timer
const player = {
x: 140, // fixed x position on screen
y: H - 90, // baseline y
width: 32,
height: 48,
frameCount: 6, // placeholder frames for walking animation
frame: 0,
frameSpeed: 8 // frames per second
};
// Parallax layers (simple colored placeholder tiles). Replace with images.
const layers = [
{ speedFactor: 0.2, tiles: [], color:'#0b1f2b', height: 110 }, // far mountains
{ speedFactor: 0.45, tiles: [], color:'#172a36', height: 70 }, // mid background
{ speedFactor: 0.9, tiles: [], color:'#222b36', height: 40 } // near ground
];
// Ground (collision free for now)
const ground = { y: H - 28, color:'#0f1115' };
// Simple obstacles/coins arrays for later extension
let obstacles = [];
let coins = [];
// Helper: generate placeholder tiles for each layer
function initLayers(){
layers.forEach(layer => {
const tileWidth = 160;
const count = Math.ceil(W / tileWidth) + 2;
layer.tiles = [];
for(let i=0;i<count;i++){
layer.tiles.push({ x: i * tileWidth, w: tileWidth });
}
});
}
initLayers();
// Input / UI
document.getElementById('btnDash').addEventListener('click', () => { triggerDash(); });
// Idle behaviour: player always walking, world scrolls left automatically
let dashTimer = 0;
function triggerDash(){ speedMultiplier = 2.5; dashTimer = 0.35; } // dash lasts 0.35s
// Drawing helpers
function drawPixelRect(x,y,w,h,color){
ctx.fillStyle = color;
ctx.fillRect(Math.round(x), Math.round(y), Math.round(w), Math.round(h));
}
// Game loop
function update(dt){
// update distance & speed
const worldSpeed = baseSpeed * speedMultiplier; // px/s
distance += (worldSpeed * dt) / 100; // convert px to "meters" (tweak divisor as you like)
document.getElementById('dist').textContent = Math.floor(distance);
document.getElementById('spd').textContent = Math.round(worldSpeed);
// update layers tile positions (scroll left)
layers.forEach(layer => {
layer.tiles.forEach(tile => {
tile.x -= (worldSpeed * layer.speedFactor) * (dt/1000);
});
// recycle tiles that moved off-screen
const tileW = layer.tiles[0]?.w || 160;
while(layer.tiles.length && layer.tiles[0].x + tileW < 0){
const last = layer.tiles[layer.tiles.length-1];
layer.tiles.shift();
layer.tiles.push({ x: last.x + tileW, w: tileW });
}
});
// animate player walking (frame timer)
walkingCycle += dt/1000;
const frameDuration = 1 / player.frameSpeed;
if(walkingCycle >= frameDuration){
player.frame = (player.frame + 1) % player.frameCount;
walkingCycle -= frameDuration;
}
// dash timer handling
if(dashTimer > 0){
dashTimer -= dt;
if(dashTimer <= 0){ speedMultiplier = 1; dashTimer = 0; }
}
}
function draw(){
// clear
ctx.clearRect(0,0,W,H);
// background solid (night)
drawPixelRect(0,0,W,H,'#071017');
// draw parallax layers
layers.forEach((layer, idx) => {
const baseY = H - ground.height - layer.height - (layers.length - idx)8;
layer.tiles.forEach(tile => {
// placeholder: draw rectangle tile with slight variations
drawPixelRect(Math.round(tile.x), baseY, tile.w, layer.height, layer.color);
// accent: simple triangles or blocks for "trees" or "rocks"
for(let t=0;t<3;t++){
const px = Math.round(tile.x + 12 + t40);
drawPixelRect(px, baseY + layer.height - 10, 8, 10, '#0a1419');
}
});
});
// ground
drawPixelRect(0, ground.y, W, H-ground.y, ground.color);
// obstacles and coins (placeholder draw)
obstacles.forEach(obs => {
drawPixelRect(obs.x, obs.y, obs.w, obs.h, '#8b2e2e');
});
coins.forEach(c => {
drawPixelRect(c.x, c.y, c.w, c.h, '#ffd166');
});
// draw player (pixel-art style placeholder)
// Body
drawPixelRect(player.x, player.y - player.height, player.width, player.height, '#111827');
// Boots
drawPixelRect(player.x, player.y - 6, player.width, 6, '#ff7a18');
// Helmet / flaming C (placeholder circle + flame block style)
const headX = player.x + player.width/2;
const headY = player.y - player.height - 6;
// draw "C" emblem as two rectangles to mimic logo
drawPixelRect(headX - 14, headY - 14, 28, 28, '#0b1220'); // head base
// outer C
drawPixelRect(headX - 10, headY - 8, 20, 6, '#ff8a1c'); // mid bar top
drawPixelRect(headX - 10, headY, 6, 10, '#ff8a1c');
drawPixelRect(headX + 4, headY, 6, 10, '#ff8a1c');
// small "flame" pixels over the head to suggest fire
drawPixelRect(headX + 12, headY - 18, 6, 6, '#ffb84d');
drawPixelRect(headX - 16, headY - 12, 6, 6, '#ff9a2e');
// sword (player holds sword to front, slashing effect drawn as curved white trail)
const swordBaseX = player.x + player.width - 6;
const swordBaseY = player.y - player.height/2 - 6;
// blade
drawPixelRect(swordBaseX, swordBaseY - 8, 6, 28, '#dfe7ec');
drawPixelRect(swordBaseX - 6, swordBaseY + 18, 14, 4, '#ffb84d'); // hilt
// add slashing trail: simple white curved rectangle depending on animation frame
const trailLen = 90;
const trailX = player.x - 20;
const trailY = player.y - 14;
// Slashing animation: show if player frame matches a certain frame
if(player.frame === 3 || player.frame === 4){
// draw a slashing arc / trail using rectangles (pixel style)
for(let i=0;i<8;i++){
const alpha = 1 - i0.12;
ctx.fillStyle = rgba(255,255,255,${alpha});
ctx.fillRect(trailX - i10, trailY + i*4, 20, 6);
}
}
}
// main loop
function loop(ts){
if(!lastTime) lastTime = ts;
const dt = ts - lastTime;
lastTime = ts;
update(dt);
draw();
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
// convenience: resize canvas to fit view while preserving pixel look (optional)
function fitCanvas(){
const maxW = Math.min(window.innerWidth-20, 960);
const scale = Math.floor(maxW / W) || 1;
canvas.style.width = (Wscale) + 'px';
canvas.style.height = (Hscale) + 'px';
}
window.addEventListener('resize', fitCanvas);
fitCanvas();
Anyway I have no idea what that is. It says that's the code is for idle runner and what am I doing the pictures tells all so to simplify it's an idle game character move sideways to the right and environment will move to the left.
I wanna keep it simple at first then when the game can be played I wanna make the game more complex but let's finish up the basic stuff first.
That's all I have today if you're a coder or a game builder give me all the advice you can because I'm learning as I go through this.
Thanks again for reading have a great day ahead.
🎧House music Infernal Pulse by Caelum1Infernum on sale now🎼
🎼🎼🎼🎼🎼🎼🎼🎼🎼🎼🎼🎼🎼🎼🎼🎼
🐣🐥🐤🐔🍗 If you want to support my chicken farm project you can Support me, On Ko-fi
📚 Infernal Bonds by Caelum1Infernum fuses Broken Bonds and Fragments of Fire into one powerful book, packed with raw emotion. Plus, get an exclusive sneak peek at my newest projects.
☕ Order now on Ko-fi
🏞️ Follow me on social media 🏞️
🐔 Check out my Chicken Farm on Facebook
🪙 Sign up with Binance to withdraw your Hive
🐝 Haven't joined Hive yet? Sign up here PeakD sign up
Or
🃏 Play-to-earn game: Splinterlands 🃏
🎸 Play-to-earn game: Rising Star 🎸
🏃💨 Earn AFIT coins with Actifit
- Goals in Hive: Raise HP, stake more alive tokens and Build my chicken farm business to success.
