493 Academy

CHAT

TREE

can you make a game were you are a cat and you can explor

BUDDY

Let's build a cat exploring game! You can walk your cat around a fun world with grass, trees, and flowers using the arrow keys. Try walking near the flowers to see what happens!

TREE

but you explor the house and is pixle ated and i want you to genorate the art

BUDDY

Ooh a pixel-art house explorer sounds awesome! I turned your cat game into a blocky pixel house you can walk around in — check out the rooms, furniture, and your pixel cat! Want me to add more rooms next, like a bedroom or a backyard?

TREE

the veiw should be different

BUDDY

Let's zoom the view in so it feels more like a real pixel game! Now the camera follows your cat around the house instead of showing everything at once. Try walking around - the world moves with you! What should we add next, maybe a mini-map or more rooms?

CODE

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pixel Cat House Explorer</title>
<style>
  html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #222;
    font-family: monospace;
    touch-action: none;
    image-rendering: pixelated;
  }
  * { image-rendering: pixelated; }
  #viewport {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #world {
    position: absolute;
    left: 0;
    top: 0;
    background: #3a3a4e;
    transform-origin: 0 0;
  }
  .tile {
    position: absolute;
    width: 40px;
    height: 40px;
  }
  .thing {
    position: absolute;
    font-size: 32px;
    user-select: none;
    pointer-events: none;
    line-height: 40px;
    text-align: center;
  }
  #cat {
    position: absolute;
    width: 40px;
    height: 40px;
    user-select: none;
    z-index: 10;
  }
  #catCanvas {
    width: 40px;
    height: 40px;
  }
  #score {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    z-index: 20;
    border: 2px solid #fff;
  }
  #msg {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 20;
    max-width: 240px;
    border: 2px solid #fff;
  }
  #controls {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 60px 60px 60px;
    grid-template-rows: 60px 60px;
    gap: 5px;
    z-index: 20;
  }
  #controls button {
    font-size: 24px;
    border-radius: 8px;
    border: 2px solid #fff;
    background: rgba(0,0,0,0.6);
    color: #fff;
    box-shadow: 0 3px 0 rgba(0,0,0,0.4);
  }
  #up { grid-column: 2; grid-row: 1; }
  #left { grid-column: 1; grid-row: 2; }
  #down { grid-column: 2; grid-row: 2; }
  #right { grid-column: 3; grid-row: 2; }
</style>
</head>
<body>
<div id="world">
  <div id="score">🐾 Rooms found: 0</div>
  <div id="msg">Walk your pixel cat around the house! Use arrows or buttons.</div>
  <div id="cat"><canvas id="catCanvas" width="8" height="8"></canvas></div>
  <div id="controls">
    <button id="up">⬆️</button>
    <button id="left">⬅️</button>
    <button id="down">⬇️</button>
    <button id="right">➡️</button>
  </div>
</div>

<script>
const world = document.getElementById('world');
const cat = document.getElementById('cat');
const scoreEl = document.getElementById('score');
const msgEl = document.getElementById('msg');
const catCanvas = document.getElementById('catCanvas');
const ctx = catCanvas.getContext('2d');

// --- Draw a simple pixel cat sprite on an 8x8 grid ---
// 0 = empty, 1 = orange body, 2 = black outline, 3 = white belly, 4 = pink ear/nose
const catPixels = [
  [0,2,0,0,0,0,2,0],
  [0,2,1,2,2,1,2,0],
  [2,1,1,1,1,1,1,2],
  [2,1,4,1,1,4,1,2],
  [2,1,1,1,1,1,1,2],
  [2,3,3,1,1,3,3,2],
  [0,2,3,3,3,3,2,0],
  [0,0,2,2,2,2,0,0]
];
const catColors = { 0: null, 1: '#f0a04b', 2: '#3a2415', 3: '#fff6e3', 4: '#f4b6c2' };
function drawCat() {
  for (let y = 0; y < 8; y++) {
    for (let x = 0; x < 8; x++) {
      const c = catColors[catPixels[y][x]];
      if (c) {
        ctx.fillStyle = c;
        ctx.fillRect(x, y, 1, 1);
      } else {
        ctx.clearRect(x, y, 1, 1);
      }
    }
  }
}
drawCat();

let catX = window.innerWidth / 2;
let catY = window.innerHeight / 2;
let facing = 1;
let roomsVisited = new Set();

cat.style.left = catX + 'px';
cat.style.top = catY + 'px';

// --- Build pixel-art floor using tiles (checkerboard wood look) ---
const tileSize = 40;
const cols = Math.ceil(window.innerWidth / tileSize) + 1;
const rows = Math.ceil(window.innerHeight / tileSize) + 1;
for (let r = 0; r < rows; r++) {
  for (let c = 0; c < cols; c++) {
    const t = document.createElement('div');
    t.className = 'tile';
    t.style.left = (c * tileSize) + 'px';
    t.style.top = (r * tileSize) + 'px';
    t.style.background = ((r + c) % 2 === 0) ? '#d9b482' : '#c9a06f';
    world.appendChild(t);
  }
}

// --- Furniture / room decorations placed around the house ---
const furniture = [
  {emoji:'🛋️', x: 100, y: 100}, {emoji:'📺', x: 220, y: 90},
  {emoji:'🪴', x: 40, y: 200}, {emoji:'🖼️', x: 300, y: 60},
  {emoji:'🛏️', x: window.innerWidth - 250, y: 120},
  {emoji:'🪟', x: window.innerWidth - 100, y: 60},
  {emoji:'🚪', x: window.innerWidth/2, y: 40},
  {emoji:'🍳', x: 150, y: window.innerHeight - 200},
  {emoji:'🧊', x: 260, y: window.innerHeight - 220},
  {emoji:'🍽️', x: window.innerWidth - 220, y: window.innerHeight - 180},
  {emoji:'🚽', x: window.innerWidth - 100, y: window.innerHeight - 260},
  {emoji:'🛁', x: window.innerWidth - 200, y: window.innerHeight - 300},
  {emoji:'📚', x: 60, y: window.innerHeight - 100},
  {emoji:'🕰️', x: window.innerWidth/2, y: window.innerHeight - 80},
  {emoji:'🧸', x: window.innerWidth/2 + 100, y: 150},
];
furniture.forEach(f => {
  const d = document.createElement('div');
  d.className = 'thing';
  d.textContent = f.emoji;
  d.style.left = f.x + 'px';
  d.style.top = f.y + 'px';
  world.appendChild(d);
});

// --- Rooms to discover (invisible zones) ---
const rooms = [
  {name:'Living Room', x: 100, y: 100, r: 150},
  {name:'Bedroom', x: window.innerWidth - 200, y: 150, r: 150},
  {name:'Kitchen', x: 200, y: window.innerHeight - 180, r: 150},
  {name:'Bathroom', x: window.innerWidth - 150, y: window.innerHeight - 250, r: 150},
];

function checkRooms() {
  rooms.forEach(room => {
    const dx = catX - room.x;
    const dy = catY - room.y;
    const dist = Math.sqrt(dx*dx + dy*dy);
    if (dist < room.r && !roomsVisited.has(room.name)) {
      roomsVisited.add(room.name);
      scoreEl.textContent = '🐾 Rooms found: ' + roomsVisited.size + '/' + rooms.length;
      msgEl.textContent = 'You found the ' + room.name + '! 🎉';
      if (roomsVisited.size === rooms.length) {
        setTimeout(() => {
          msgEl.textContent = 'You explored the whole house! Great job! 🏠';
        }, 800);
      }
    }
  });
}

const keys = {};
window.addEventListener('keydown', e => { keys[e.key] = true; });
window.addEventListener('keyup', e => { keys[e.key] = false; });

const btnState = { up: false, down: false, left: false, right: false };
function bindBtn(id, key) {
  const el = document.getElementById(id);
  const on = (e) => { e.preventDefault(); btnState[key] = true; };
  const off = (e) => { e.preventDefault(); btnState[key] = false; };
  el.addEventListener('mousedown', on);
  el.addEventListener('touchstart', on);
  el.addEventListener('mouseup', off);
  el.addEventListener('mouseleave', off);
  el.addEventListener('touchend', off);
}
bindBtn('up', 'up');
bindBtn('down', 'down');
bindBtn('left', 'left');
bindBtn('right', 'right');

const speed = 4;
function loop() {
  let dx = 0, dy = 0;
  if (keys['ArrowUp'] || keys['w'] || btnState.up) dy -= speed;
  if (keys['ArrowDown'] || keys['s'] || btnState.down) dy += speed;
  if (keys['ArrowLeft'] || keys['a'] || btnState.left) { dx -= speed; facing = -1; }
  if (keys['ArrowRight'] || keys['d'] || btnState.right) { dx += speed; facing = 1; }

  catX += dx;
  catY += dy;

  catX = Math.max(0, Math.min(window.innerWidth - 40, catX));
  catY = Math.max(0, Math.min(window.innerHeight - 40, catY));

  cat.style.left = catX + 'px';
  cat.style.top = catY + 'px';
  catCanvas.style.transform = 'scaleX(' + facing + ')';

  checkRooms();
  requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pixel Cat House Explorer</title>
<style>
  html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #222;
    font-family: monospace;
    touch-action: none;
    image-rendering: pixelated;
  }
  * { image-rendering: pixelated; }
  #viewport {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #world {
    position: absolute;
    left: 0;
    top: 0;
    background: #3a3a4e;
    transform-origin: 0 0;
  }
  .tile {
    position: absolute;
    width: 40px;
    height: 40px;
  }
  .thing {
    position: absolute;
    font-size: 32px;
    user-select: none;
    pointer-events: none;
    line-height: 40px;
    text-align: center;
  }
  #cat {
    position: absolute;
    width: 40px;
    height: 40px;
    user-select: none;
    z-index: 10;
  }
  #catCanvas {
    width: 40px;
    height: 40px;
  }
  #score {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    z-index: 20;
    border: 2px solid #fff;
  }
  #msg {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 20;
    max-width: 240px;
    border: 2px solid #fff;
  }
  #controls {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 60px 60px 60px;
    grid-template-rows: 60px 60px;
    gap: 5px;
    z-index: 20;
  }
  #controls button {
    font-size: 24px;
    border-radius: 8px;
    border: 2px solid #fff;
    background: rgba(0,0,0,0.6);
    color: #fff;
    box-shadow: 0 3px 0 rgba(0,0,0,0.4);
  }
  #up { grid-column: 2; grid-row: 1; }
  #left { grid-column: 1; grid-row: 2; }
  #down { grid-column: 2; grid-row: 2; }
  #right { grid-column: 3; grid-row: 2; }
</style>
</head>
<body>
<div id="world">
  <div id="score">🐾 Rooms found: 0</div>
  <div id="msg">Walk your pixel cat around the house! Use arrows or buttons.</div>
  <div id="cat"><canvas id="catCanvas" width="8" height="8"></canvas></div>
  <div id="controls">
    <button id="up">⬆️</button>
    <button id="left">⬅️</button>
    <button id="down">⬇️</button>
    <button id="right">➡️</button>
  </div>
</div>

<script>
const world = document.getElementById('world');
const cat = document.getElementById('cat');
const scoreEl = document.getElementById('score');
const msgEl = document.getElementById('msg');
const catCanvas = document.getElementById('catCanvas');
const ctx = catCanvas.getContext('2d');

// --- Draw a simple pixel cat sprite on an 8x8 grid ---
// 0 = empty, 1 = orange body, 2 = black outline, 3 = white belly, 4 = pink ear/nose
const catPixels = [
  [0,2,0,0,0,0,2,0],
  [0,2,1,2,2,1,2,0],
  [2,1,1,1,1,1,1,2],
  [2,1,4,1,1,4,1,2],
  [2,1,1,1,1,1,1,2],
  [2,3,3,1,1,3,3,2],
  [0,2,3,3,3,3,2,0],
  [0,0,2,2,2,2,0,0]
];
const catColors = { 0: null, 1: '#f0a04b', 2: '#3a2415', 3: '#fff6e3', 4: '#f4b6c2' };
function drawCat() {
  for (let y = 0; y < 8; y++) {
    for (let x = 0; x < 8; x++) {
      const c = catColors[catPixels[y][x]];
      if (c) {
        ctx.fillStyle = c;
        ctx.fillRect(x, y, 1, 1);
      } else {
        ctx.clearRect(x, y, 1, 1);
      }
    }
  }
}
drawCat();

let catX = window.innerWidth / 2;
let catY = window.innerHeight / 2;
let facing = 1;
let roomsVisited = new Set();

cat.style.left = catX + 'px';
cat.style.top = catY + 'px';

// --- Build pixel-art floor using tiles (checkerboard wood look) ---
const tileSize = 40;
const cols = Math.ceil(window.innerWidth / tileSize) + 1;
const rows = Math.ceil(window.innerHeight / tileSize) + 1;
for (let r = 0; r < rows; r++) {
  for (let c = 0; c < cols; c++) {
    const t = document.createElement('div');
    t.className = 'tile';
    t.style.left = (c * tileSize) + 'px';
    t.style.top = (r * tileSize) + 'px';
    t.style.background = ((r + c) % 2 === 0) ? '#d9b482' : '#c9a06f';
    world.appendChild(t);
  }
}

// --- Furniture / room decorations placed around the house ---
const furniture = [
  {emoji:'🛋️', x: 100, y: 100}, {emoji:'📺', x: 220, y: 90},
  {emoji:'🪴', x: 40, y: 200}, {emoji:'🖼️', x: 300, y: 60},
  {emoji:'🛏️', x: window.innerWidth - 250, y: 120},
  {emoji:'🪟', x: window.innerWidth - 100, y: 60},
  {emoji:'🚪', x: window.innerWidth/2, y: 40},
  {emoji:'🍳', x: 150, y: window.innerHeight - 200},
  {emoji:'🧊', x: 260, y: window.innerHeight - 220},
  {emoji:'🍽️', x: window.innerWidth - 220, y: window.innerHeight - 180},
  {emoji:'🚽', x: window.innerWidth - 100, y: window.innerHeight - 260},
  {emoji:'🛁', x: window.innerWidth - 200, y: window.innerHeight - 300},
  {emoji:'📚', x: 60, y: window.innerHeight - 100},
  {emoji:'🕰️', x: window.innerWidth/2, y: window.innerHeight - 80},
  {emoji:'🧸', x: window.innerWidth/2 + 100, y: 150},
];
furniture.forEach(f => {
  const d = document.createElement('div');
  d.className = 'thing';
  d.textContent = f.emoji;
  d.style.left = f.x + 'px';
  d.style.top = f.y + 'px';
  world.appendChild(d);
});

// --- Rooms to discover (invisible zones) ---
const rooms = [
  {name:'Living Room', x: 100, y: 100, r: 150},
  {name:'Bedroom', x: window.innerWidth - 200, y: 150, r: 150},
  {name:'Kitchen', x: 200, y: window.innerHeight - 180, r: 150},
  {name:'Bathroom', x: window.innerWidth - 150, y: window.innerHeight - 250, r: 150},
];

function checkRooms() {
  rooms.forEach(room => {
    const dx = catX - room.x;
    const dy = catY - room.y;
    const dist = Math.sqrt(dx*dx + dy*dy);
    if (dist < room.r && !roomsVisited.has(room.name)) {
      roomsVisited.add(room.name);
      scoreEl.textContent = '🐾 Rooms found: ' + roomsVisited.size + '/' + rooms.length;
      msgEl.textContent = 'You found the ' + room.name + '! 🎉';
      if (roomsVisited.size === rooms.length) {
        setTimeout(() => {
          msgEl.textContent = 'You explored the whole house! Great job! 🏠';
        }, 800);
      }
    }
  });
}

const keys = {};
window.addEventListener('keydown', e => { keys[e.key] = true; });
window.addEventListener('keyup', e => { keys[e.key] = false; });

const btnState = { up: false, down: false, left: false, right: false };
function bindBtn(id, key) {
  const el = document.getElementById(id);
  const on = (e) => { e.preventDefault(); btnState[key] = true; };
  const off = (e) => { e.preventDefault(); btnState[key] = false; };
  el.addEventListener('mousedown', on);
  el.addEventListener('touchstart', on);
  el.addEventListener('mouseup', off);
  el.addEventListener('mouseleave', off);
  el.addEventListener('touchend', off);
}
bindBtn('up', 'up');
bindBtn('down', 'down');
bindBtn('left', 'left');
bindBtn('right', 'right');

const speed = 4;
function loop() {
  let dx = 0, dy = 0;
  if (keys['ArrowUp'] || keys['w'] || btnState.up) dy -= speed;
  if (keys['ArrowDown'] || keys['s'] || btnState.down) dy += speed;
  if (keys['ArrowLeft'] || keys['a'] || btnState.left) { dx -= speed; facing = -1; }
  if (keys['ArrowRight'] || keys['d'] || btnState.right) { dx += speed; facing = 1; }

  catX += dx;
  catY += dy;

  catX = Math.max(0, Math.min(window.innerWidth - 40, catX));
  catY = Math.max(0, Math.min(window.innerHeight - 40, catY));

  cat.style.left = catX + 'px';
  cat.style.top = catY + 'px';
  catCanvas.style.transform = 'scaleX(' + facing + ')';

  checkRooms();
  requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>

PREVIEW

PICTURES0/50

No pictures yet. Add one, then ask your buddy to put it in your app!