Member Avatar for Octet

I am looking to create a PBBG game using HTML and CSS for the display and then PHP and MySQL to handle the game itself. It shall only be simple, click on this item and upgrade it if you have enough resources e.t.c.

I am hoping to make it a bit more interactive, and I was thinking that I could use a viewport to only display a certain amount of the map and then allow them to use the arrow keys (or WASD) to scroll around the rest of the map. I am not really sure what language I would need to do this, I am thinking it is going to be a bit of Javascript but to be on the safe side I stuck it in the general sort of HTML area (so sorry if it is in the wrong bit).

If anyone could provide any tips or information as to how I could do this then it would be most appreciated.
Thank you

  • 2 Contributors
  • 1 Reply
  • 242 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by dany12

Dani AI

Generated

A practical, modern solution is to keep the map and viewport as plain HTML/CSS and drive the scrolling with JavaScript. This matches ’s plan (front end in HTML/CSS, server logic in PHP/MySQL) and avoids ’s ActionScript suggestion — Flash/ActionScript is not a good choice for contemporary web games. The basic pattern: a fixed-size container with overflow: hidden (the viewport) and a larger positioned element for the map; move the map with CSS transforms and a JS animation loop for smooth, GPU-accelerated movement.

Example structure and minimal styles:

#viewport { width:800px; height:600px; overflow:hidden; position:relative; }
#map { position:absolute; left:0; top:0; transform:translate3d(0,0,0); will-change:transform; }

Key-handling and animation notes (keeps input smooth, prevents page scrolling, clamps to map bounds):

let x=0,y=0,speed=4,keys={};
window.addEventListener('keydown', e=>{keys[e.key]=true; e.preventDefault();});
window.addEventListener('keyup', e=>{keys[e.key]=false;});

function loop(){
  if(keys['ArrowLeft']||keys['a']) x-=speed;
  if(keys['ArrowRight']||keys['d']) x+=speed;
  if(keys['ArrowUp']||keys['w']) y-=speed;
  if(keys['ArrowDown']||keys['s']) y+=speed;
  x = clamp(x, minX, maxX); y = clamp(y, minY, maxY);
  map.style.transform = `translate3d(${x}px,${y}px,0)`;
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Additional tips: make the viewport focusable (set tabIndex and focus on click) so arrow keys are captured; use requestAnimationFrame instead of timers; for tile-based movement snap positions to tile size and animate with CSS transitions; add touch/pan controls for mobile; send periodic AJAX (or on-stop) updates to a PHP endpoint to persist coordinates in MySQL. Finally, test boundary clamping, key-repeat behavior, and accessibility (allow alternative controls) so the viewport feels reliable across browsers and devices.

Member Avatar for dany12

If you are talking about complex games and you want them to work on desktops and online on servers action script 3 is a good solution it offers diffrent movements and options so that you can really make a game that people would see wow
You can find lots of books about action script 3.
Good luck

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.