ABI7ITY Posted June 14, 2016 Share Posted June 14, 2016 Hi.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:<!DOCTYPE HTML><html lang="en-US"><head><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 { position:absolute; height:50px; width:50px; padding:20px;}body {background-image: url(Page not found – Boxmazebackground-repeat: no-repeat;}</style></head><body><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></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;</script><p></p></body></html> Quote Link to comment Share on other sites More sharing options...
gnoof Posted June 17, 2016 Share Posted June 17, 2016 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. Quote Link to comment Share on other sites More sharing options...
mattstyles Posted June 23, 2016 Share Posted June 23, 2016 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! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.