Topic: Need some help aiming an enemy sprite (Page 1 of 1) |
|
---|---|
Nervous Wreck (II) Inmate From: Portland Oregon |
posted 12-11-2008 02:38
Hello everyone, I could really use the help from the experts here. I'm working on a javascript version of the old atari classic combat. I found a 2d map script and modified it. I've got the routines all set for the shooting and moving around. right now I have an array with some values to run the sprite around and, to shoot its bullets, i'm just using the trigger for the player, the space bar. use the keys to move around. Anyway, I need some ideas on how to calculate the angle from the sprite to the player and how to trigger firing. code: <html> <head> <title>JavaScript Wolfenstein 3D Engine - Player movement + collision</title> <style> div#minimapcontainer {} canvas#minimap {position : absolute;} canvas#minimapobjects {position : absolute;} </style> <script src="excanvas.js" type="text/javascript"></script> </head><body > <div id="minimapcontainer"><canvas id="minimap"></canvas><canvas id="minimapobjects"></canvas></div> <script type="text/javascript"> var playerfire=false; var enemyfire=false; /* var player = { x : 16, // current x, y position y : 10, dir : 0, // the direction that the player is turning, either -1 for left or 1 for right. rot : 0, // the current angle of rotation speed : 0, // is the playing moving forward (speed = 1) or backwards (speed = -1). moveSpeed : 0.18, // how far (in map units) does the player move each step/update rotSpeed : 6 // how much does the player rotate each step/update (in degrees) } */ var player = { x:16, y:60, dir:0, rot:0, speed:0, moveSpeed:0.18 , rotSpeed:6 } var playerbullet = { x:player.x, y:player.y, dir: Math.cos(player.rot), rot:0, speed:0, moveSpeed:0.18 , rotSpeed:0 } var enemy = { x:17, y:10, dir:3, rot:0, speed:2, moveSpeed:0.18 , rotSpeed:6 } var enemybullet = { x:enemy.x, y:enemy.y, dir: Math.cos(enemy.rot), rot:0, speed:0, moveSpeed:0.18 , rotSpeed:0 } var mapWidth = 0; var mapHeight = 0; var miniMapScale = 3; enemyMovementTimer=0; function init() { mapWidth = map[0].length; mapHeight = map.length; bindKeys(); drawMiniMap(); gameCycle(); } function enemyfirefalse(){enemyfire=false;} function firefalse(){playerfire=false;} function gameCycle() {animate();move();updateMiniMap();setTimeout(gameCycle,1000/30);} function move() { if (enemyfire==true){setTimeout("enemyfirefalse()",60)} if (playerfire==true){setTimeout("firefalse()",60)} var moveStep = player.speed * player.moveSpeed; // player will move this far along the current direction vector player.rot += player.dir * player.rotSpeed * Math.PI / 180; // add rotation if player is rotating (player.dir != 0) var newX = player.x + Math.cos(player.rot) * moveStep; // calculate new player position with simple trigonometry var newY = player.y + Math.sin(player.rot) * moveStep; if (isBlocking(newX, newY)) { // are we allowed to move to the new position? return;} var movebulletStep = playerbullet.speed * playerbullet.moveSpeed; // player will move this far along the current direction vector playerbullet.rot += playerbullet.dir * playerbullet.rotSpeed * Math.PI / 180; // add rotation if player is rotating (player.dir != 0) var newbulletX = playerbullet.x + Math.cos(player.rot) * movebulletStep; // calculate new player position with simple trigonometry var newbulletY = playerbullet.y + Math.sin(player.rot) * movebulletStep; var moveEnemyStep = enemy.speed * enemy.moveSpeed; // player will move this far along the current direction vector enemy.rot += enemy.dir * enemy.rotSpeed * Math.PI / 180; // add rotation if player is rotating (player.dir != 0) var newEnemyX = enemy.x + Math.cos(enemy.rot) * moveEnemyStep; // calculate new player position with simple trigonometry var newEnemyY = enemy.y + Math.sin(enemy.rot) * moveEnemyStep; if (isBlocking(newEnemyX, newEnemyY)) { // are we allowed to move to the new position? return;} var moveEnemybulletStep = enemybullet.speed * enemybullet.moveSpeed; // player will move this far along the current direction vector enemybullet.rot += enemybullet.dir * enemybullet.rotSpeed * Math.PI / 180; // add rotation if player is rotating (player.dir != 0) var newEnemybulletX = enemybullet.x + Math.cos(enemy.rot) * moveEnemybulletStep; // calculate new player position with simple trigonometry var newEnemybulletY = enemybullet.y + Math.sin(enemy.rot) * moveEnemybulletStep; player.x = newX; // set new position player.y = newY; playerbullet.x = newbulletX; // set new position playerbullet.y = newbulletY; enemy.x = newEnemyX; // set new position enemy.y = newEnemyY; enemybullet.x = newEnemybulletX; // set new position enemybullet.y = newEnemybulletY; if (playerfire==true){ playerbullet.x = player.x; // set new position playerbullet.y = player.y; newbulletX=player.x; newbulletY=player.y playerbullet.speed=3; playerbullet.moveSpeed=0.68 } if (enemyfire==true){ enemybullet.x = enemy.x; // set new position enemybullet.y = enemy.y; newEnemybulletX=enemy.x; newEnemybulletY=enemy.y enemybullet.speed=3; enemybullet.moveSpeed=0.68 } } //enemy movement test pos = new Array(); pos[0] = "1,.18,1"; pos[1] = "2,.18,0"; pos[2] = "1,.18,0"; pos[3] = "1,.18,1"; pos[4] = "2,.18,0"; pos[5] = "1,.18,1"; bulletpos =new Array(); bulletpos[0] = "0,0,0"; var step = 0; var laststep = pos.length; var timer; function animate() { enemyMovementTimer+=1 step++; if(step == laststep) step = 0; var newpos = pos[step].split(","); if(enemyMovementTimer==10){ enemy.speed = parseInt(newpos[0]); enemy.movespeed = parseInt(newpos[1]); enemy.dir=parseInt(newpos[2]); enemyMovementTimer-=10} // timer = setTimeout("animate()",200); return; } function stopAnimation() { clearTimeout(timer); } //end of sprtite movement test function isBlocking(x,y) { // first make sure that we cannot move outside the boundaries of the level if (y < 0 || y > mapHeight || x < 0 || x > mapWidth) return true; // return true if the map block is not 0, ie. if there is a blocking wall. return (map[Math.floor(y)][Math.floor(x)] != 0);} function updateMiniMap() { document.getElementById("minimapobjects").width = document.getElementById("minimapobjects").width; document.getElementById("minimapobjects").getContext("2d").fillRect(player.x * miniMapScale ,player.y * miniMapScale ,4,4); document.getElementById("minimapobjects").getContext("2d").beginPath(); document.getElementById("minimapobjects").getContext("2d").moveTo(player.x * miniMapScale+2, player.y * miniMapScale+2); document.getElementById("minimapobjects").getContext("2d").lineTo((player.x + Math.cos(player.rot) * 4) * miniMapScale,(player.y + Math.sin(player.rot) * 4) * miniMapScale); document.getElementById("minimapobjects").getContext("2d").closePath(); document.getElementById("minimapobjects").getContext("2d").stroke(); //enemy test begins here //enemy test begins here document.getElementById("minimapobjects").getContext("2d").moveTo(enemy.x * miniMapScale+2, enemy.y * miniMapScale); document.getElementById("minimapobjects").getContext("2d").fillRect(enemy.x * miniMapScale ,enemy.y * miniMapScale ,4,4); document.getElementById("minimapobjects").getContext("2d").beginPath(); document.getElementById("minimapobjects").getContext("2d").moveTo(enemy.x * miniMapScale+2, enemy.y * miniMapScale+2); document.getElementById("minimapobjects").getContext("2d").lineTo((enemy.x + Math.cos(enemy.rot) * 4) * miniMapScale,(enemy.y + Math.sin(enemy.rot) * 4) * miniMapScale); document.getElementById("minimapobjects").getContext("2d").closePath(); document.getElementById("minimapobjects").getContext("2d").stroke(); //bullet test begins here document.getElementById("minimapobjects").getContext("2d").beginPath(); document.getElementById("minimapobjects").getContext("2d").moveTo(playerbullet.x * miniMapScale, playerbullet.y * miniMapScale+2); document.getElementById("minimapobjects").getContext("2d").fillRect(playerbullet.x * miniMapScale ,playerbullet.y * miniMapScale+2 ,3,1); document.getElementById("minimapobjects").getContext("2d").closePath(); document.getElementById("minimapobjects").getContext("2d").beginPath(); document.getElementById("minimapobjects").getContext("2d").moveTo(enemybullet.x * miniMapScale, enemybullet.y * miniMapScale+2); document.getElementById("minimapobjects").getContext("2d").fillRect(enemybullet.x * miniMapScale ,enemybullet.y * miniMapScale+2 ,3,1); document.getElementById("minimapobjects").getContext("2d").closePath(); } function drawMiniMap() { document.getElementById("minimap").width = mapWidth * miniMapScale; document.getElementById("minimap").height = mapHeight * miniMapScale; document.getElementById("minimapobjects").width = document.getElementById("minimap").width; document.getElementById("minimapobjects").height = document.getElementById("minimap").height; var w = (mapWidth * miniMapScale) + "px" var h = (mapHeight * miniMapScale) + "px" document.getElementById("minimap").style.width = document.getElementById("minimapobjects").style.width document.getElementById("minimap").style.height = document.getElementById("minimapobjects").style.height document.getElementById("minimap").getContext("2d").fillStyle = "white"; document.getElementById("minimap").getContext("2d").fillRect(0,0,document.getElementById("minimap").width,document.getElementById("minimap").height); // loop through all blocks on the map for (var y=0;y<mapHeight;y++) { for (var x=0;x<mapWidth;x++) { var isAwall = map[y][x];// if (isAwall > 0) { //block at this (x,y) ...map[y][x] We got a wall!! document.getElementById("minimap").getContext("2d").fillStyle = "rgb(200,200,200)"; document.getElementById("minimap").getContext("2d").fillRect(x * miniMapScale,y * miniMapScale,miniMapScale,miniMapScale);}}} updateMiniMap();} setTimeout(init, 1); function bindKeys() { document.onkeydown = function(e){ e = e || window.event;switch (e.keyCode) { case 38: // forward player.speed = 1;break; case 40: // backward player.speed = -1;break; case 37: // left player.dir = -1;break; case 39: // right player.dir = 1;break; case 32: playerfire=true;enemyfire=true;break}} //0 stop player when key is released document.onkeyup = function(e) {e = e || window.event;switch (e.keyCode) {case 38:case 40:player.speed = 0;break;case 37:case 39:player.dir = 0;break;}}} var map = [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] ]; </script> </body>
|
Paranoid (IV) Inmate From: cell 3736 |
posted 12-11-2008 09:19
First you need some kind of logical algorithm of what you want the 'AI' to be able to do. |
Nervous Wreck (II) Inmate From: Portland Oregon |
posted 12-13-2008 04:53
thanks. I guess I should have been a little more specific about the help i need. What i need to know is what's the trig function I use to calculate the angle to a point (the player from the enemy perspective) from another point(the enemy). I have the XY coordinates obviously, so I need to test for all the values in the range of the specific angle to see if the player position falls in so I know the direction to move the enemy. |
Paranoid (IV) Inmate From: cell 3736 |
posted 12-13-2008 07:49
try Math.atan2(y,x) |
Paranoid (IV) Inmate From: cell 3736 |
posted 12-13-2008 15:58
x and y of course being the distances between player and enemy. |
Nervous Wreck (II) Inmate From: Portland Oregon |
posted 12-20-2008 03:23
thanks for your help. I got sidetracked when I found out more info. I also found the source of the little game script. Ozone regular I think |
Nervous Wreck (II) Inmate From: |
posted 05-31-2011 11:10
Edit TP: spam removed
|