Jump to content

Need help with creating an invisible barrier for a project <3


Recommended Posts

I am in a bit of a pickle and need some advice please.
I need to complete a project but I do not have much knowledge in Javascript.

Help needed with: 
1. LEFT and RIGHT need to rotate the ant 90 degrees in the specified direction without changing the position of the insect. 
2. The ant cannot fall off the table (Invisible barrier maybe?)

Current code:

<html lang="en-US">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Ant Movement</title>
<style type="text/css">
#container {
height: 500px;
width: 500px;
position: relative;
font-size: 14px;

#guy { 

body {
background-image: url(Page not found – Boxmaze
background-repeat: no-repeat;
<div align="center" id="container">
<div id="guy"><img alt="The Pulpit Rock" height="60" id="myImg" src="http://boxmaze.co.za/derivco/images/insect.png" width="43" /></div>
<script type="text/javascript">

var guy = document.getElementById("guy"); 
var container = document.getElementById("container"); 
var guyLeft = 0; 
var y = 0; 
function anim(e) { 
if (e.keyCode == 39) { 
guyLeft += 1; guy.style.left = guyLeft + "px"; 
else if (e.keyCode == 37) {
guyLeft -= 1; guy.style.left = guyLeft + "px"; 
else if (e.keyCode == 40) {
y += 1; guy.style.top = y + "px"; 
else if (e.keyCode == 38) {
y -= 1; guy.style.top = y + "px"; 

} document.onkeydown = anim;



Link to comment
Share on other sites

I don't feel like there is enough information here to go off.

So you want to build a game with an ant on a table (guessing top-down view). You want to control it through arrow keys and want to make it rotate to the direction you are facing.

From what I can see, you are doing this by editing CSS style values on DOM elements.

Do the requirements of your game state that you must use DOM elements to build your game rather than canvas?

If not I think using a game framework that uses HTML5 canvas would make this task much easier for you.

Link to comment
Share on other sites

The DOM (in this case) is just used for rendering, it doesnt matter whether your target is the DOM or the canvas as they have no bearing on the functionality required.

There are plenty of ways to achieve what you are after, although there is no indication in that snippet that you have even attempted either point.

But, lets assume you have attempted it, here's some advice that might help you complete it:

2) If you know the size of the box this is fairly trivial, just make sure your entity x and y are always contained within the box. Something that might make this a little more intuitive (and linked with solving point 1) is to create a function which returns the new position of the entity, then check if the new position is within the bounds, if it is then update the position of the entity, if not then simply ignore it.

3) Rotation requires an angle, so the model you use for your entity needs to have one. You dont have an explicit model for your entity so simply add an angle variable to your global scope (as with your other variables). From here on in things get a little hairier (mathematically speaking). The key is that you have this angle and that your key inputs either increment or decrement that angle. If you continue using DOM you can just use degrees and make sure your angle variable wraps from 0...360 then apply a little CSS3 styling to the element to get some rotation.

The trickier part when using an angle is what happens when you hit the 'go forward' key. You need to use the angle, the current position and a magnitude to calculate the new position. A little bit of maths can help you out here. There are many many many resources you'll find for how to do this, the key first step is that you need to define that angle variable. (As a clue, you can write the function to do this in a couple of lines, it isnt that hairy! Honest!)

If you get stuck post some code up showing exactly where you're stuck and there are lots of people around here who will be able to offer advice.

Good luck!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...