ElvenFireball
New Coder
The player movement was working, but I've been having some trouble with it, but the biggest problem is getting the AI to move, and I can't figure what I did wrong. I also am pretty new to HTML and JavaScript, and i decided just to ask if anybody could find where I messed up.
JavaScript:
<!Enemy AI Script!>
<html>
<head>
<title>AI Script</title>
<script>
function leftArrowPressed() {
var element = document.getElementById("player");
element.style.left = parseInt(element.style.left) - 50 + 'px';
}
function rightArrowPressed() {
var element = document.getElementById("player")
element.style.left = parseInt(element.style.left) + 50 + 'px';
}
function upArrowPressed() {
var element = document.getElementById("player")
element.style.top = parseInt(element.style.top) - 50 + 'px';
}
function downArrowPressed() {
var element = document.getElementById("player")
element.style.top = parseInt(element.style.top) + 50 + 'px';
}
function moveSelection(event) {
switch (event.keyCode) {
case 37: //Left arrow
leftArrowPressed();
break;
case 39 //Right Arrow
rightArrowPressed();
break;
case 38 //Up arrow
upArrowPressed();
break;
case 40 //Down Arrow
downArrowPressed();
break;
}
};
function gameLoop()
{
moveSelection();
chooseDirection();
setTimeout("gameLoop()", 10);
}
//Enemy AI script
var direction = 1
var playerlife = 1
function moveLeft() {
var enemy = document.getElementById("enemy")//Replace Enemy if you are using a different Id.
enemy.style.left = parseInt(enemy.style.left) - 20 + 'px';
} //Change 20 to how far you want the enemy to move per step.
function moveRight() {
var enemy = document.getElementById("enemy")//Replace Enemy if you are using a different Id
enemy.style.left = parseInt(enemy.style.left) + 20 + 'px';
}
function moveUp() {
var enemy = document.getElementById("enemy")//Replace Enemy if you are using a different Id
enemy.style.top = parseInt(enemy.style.left) + 20 + 'px';
}
function moveDown() {
var enemy = document.getElementById("enemy")//I think you get it by now
enemy.style.top = parseInt(enemy.style.left) - 20 + 'px';
}
function chooseDirection() {
var element = document.getElementById("player") //Replace Player if you use a different ID.
var enemy = document.getElementById("enemy") //Replace Enemy if you use a different ID.
if (element.style.position.left < enemy.style.left) { //Detects player location and makes a decision
moveLeft(); //Moves Left
} else if (element.style.position.left > enemy.style.left) {
//Detects player location and makes a decision
moveRight(); //Moves Right
} else if (element.style.position.top > enemy.style.top) {
//Detects player location and makes a decision
moveUp(); //Moves Up
} else {
if (element.style.position.top < enemy.style.top) { //Detects player location and makes a decision
MoveDown(); //Moves Down
}
}
}
</script>
</head>
<body onload="gameLoop();" onkeydown="" onkeyup="moveSelection(event)" bgcolor='black'>
<img src="https://www.abc.net.au/radionational/image/6289622-4x3-340x255.png" style="position: absolute; left: 200; right: 60; top: 200; bottom: auto;" id="enemy" height="50" width="50">
<img id="player "src="https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2013/8/1/1375354802439/Blue---the-colour-008.jpg?width=445&quality=85&auto=format&fit=max&s=9470f3941ff8fe61fb8f78b1838d6bc5" style="position: absolute; left: 50; right: 60; top: 20; bottom: auto;" height="50" width="50">
<!Change height and width to change size of enemy!>
</body>
</html>
Last edited by a moderator: