Need some help aiming an enemy sprite — OZONE Asylum, home of the Mad Scientists

DHTML/Javascript

Need some help aiming an enemy sprite

This page's ID: 30701

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	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. Here's the a link to the original script. http://devfiles.myopera.com/articles/580/2dmap_collision.htm (I found it while googling collision or something. Totally side-tracked me too. I was working on a pinball game at the time and all I needed was to figure out how to make the rules for the flipper collisions. another thread... another time LOL) I tried to figure out who wrote it but it's some dudes home server I think. Anyway, It helped me learn some more and that's my goal. NOW, on to the script at hand. I hope you guys have it in your heart to help me out. Check out how the bullets can curve with the player angle just like the old game. Man, I loved atari. [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> [/code] Thanks everyone for sharing you talents and ideas. You make the internet an interesting place. Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu