I'm working through some basic steps in an HTML, CSS and JScript game to get very simple collision detection working between a CHARACTER and an ENEMY.
I am looking for something that is simple enough to explain to children of age 8 - 11.
If the character and the enemy collide then "game over". I have tried various things, but require some help with the code and an explanation of getComputedStyle method and what Properties it gets, for me to effectively create the main if statement.
This is the relevant if function:
if(
characterTop==enemyLeft //have tried characterRight==enemyLeft didn't work
)
{
enemy.style.animation="none"; //remove the animation
enemy.style.display="none";
alert("Game Over");
}
},10);
And this is the setInterval function with the variables declared (which I use in the if function). I have created the var CharacterRight variable based on the varcharacterTop variable and enemyLeft, but it doesn't seem to work or I am not sure if I am going about it the right way.
In the current set up something strange happens. If I leave the character and do not move it, after 5 bounces (of the enemy) the game is over, even though, as per the if function, characterTop is not changing at all. So what is happening there?
In an answer, please:
a) Suggest a proposed solution for collision detection based on my existing code
b) Explanation of the GetComputedStyle and getProperties with documentation on it. For instance, if characterTop doesn't change (if I don't move the character) how come it suddenly outputs "game over" which suggests characterTop is == enemyLeft.
c) Best practices for simple collision detection (for absolute beginner's learning concepts and propose the simplest possible solution, given the existing code)
var checkDead =setInterval(function(){
var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
var enemyLeft = parseInt(window.getComputedStyle(enemy).getPropertyValue("left"));
//ADD VARIABLE TO FIND CHARACTER RIGHT -if it collides with enemy left, you are out
//remove the condition that the enemy has to be in the first 30 pixels of the game (left side)
var characterRight =parseInt(window.getComputedStyle(character).getPropertyValue("right"));
For completeness, here is the whole code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<div id="game">
<div id="sky"></div>
<div id="ground"></div>
<div id="enemy"></div>
<div id="character"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
*{
padding:0;
margin:22;
}
#game{
width:500px;
height:500px;
border:4px solid #171918;
}
#character{
width:30px;
height:120px;
background-color:green;
position:relative;
top:320px;
border-radius:20px;
/*animation: jump 300ms */
}
/* new class called animate */
.animate{
animation: jump 500ms;
}
#enemy{
width:60px;
height:60px;
background-color:red;
border-radius:14px;
position:relative;
top:320px;
left:440px;
animation: moveenemy 1s infinite linear;
}
@keyframes moveenemy{
0%{left:440px;}
50%{top:58px;}
100%{left:0px; top:320x;}
}
@keyframes jump{
0%{top:380px;}
30%{top:50px;}
50%{top:40px;}
100%{top:380px;}
}
/* adding sky*/
#sky{
width:500px;
height:340px;
background-color:skyblue;
position:absolute;
top:118px;
}
/* adding ground */
#ground{
width:500px;
height:170px;
background-color:bisque;
position:absolute;
top:450px;
}
JavaScript
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
function jump(){
if(character.classlist!="animate"){
character.classList.add("animate");
}
setTimeout(function(){
character.classList.remove("animate");
},500);
}
//right movement
function right() {
var leftVal = parseInt(window.getComputedStyle(character).getPropertyValue("left"))
character.style.left = (leftVal + 30) + "px";
}
//left movement
function left() {
var leftVal = parseInt(window.getComputedStyle(character).getPropertyValue("left"))
character.style.left = (leftVal - 30) + "px";
}
var checkDead =setInterval(function(){
var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
var enemyLeft = parseInt(window.getComputedStyle(enemy).getPropertyValue("left"));
//ADD VARIABLE TO FIND CHARACTER RIGHT -if it collides with enemy left, you are out
//remove the condition that the enemy has to be in the first 30 pixels of the game (left side)
var characterRight =parseInt(window.getComputedStyle(character).getPropertyValue("right"));
console.log(characterRight);
console.log(enemyLeft)
if(
characterTop==enemyLeft //have tried characterRight==enemyLeft didn't work
)
{
enemy.style.animation="none"; //remove the animation
enemy.style.display="none";
alert("Game Over");
}
},10);
//left
addEventListener("keydown", function(e) {
if(e.keyCode == 37) left()
})
//jump (up)
addEventListener("keydown", function(e) {
if (e.keyCode === 38) {
jump()
}
})
//right
addEventListener("keydown", function(e) {
if (e.keyCode === 39) {
right()
}
})
I've looked at this documentation, but it doesn't seem to refer to objects. https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
Taking the points raised in order:
a) Suggest a proposed solution for collision detection based on my existing code
You cannot use getComputedStyle here (see point b). Below is code using getBoundingClientRect with collision detection (i.e. when the enemy and the character overlap at all)
b) Explanation of the GetComputedStyle and getProperties with documentation on it. For instance, if characterTop doesn't change (if I don't move the character) how come it suddenly outputs "game over" which suggests characterTop is == enemyLeft.
getComputedStyle does just that, it runs through all the style settings and merges them so you get the current style for the element. See for example https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
The Window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.
The problem we have in this case is that it's not the computed styles we are after, it is the actual, of this moment, position of an element which is being flown around the window by a CSS animation. Therefore use getBoundingClientRect to get the actual current x and ys of the elements.
The test in the original of the character's top against the enemy's left doesn't tell you anything. But occasionally it's possible they might match and so you'd get a Game Over.
c) Best practices for simple collision detection (for beginner's learning concepts)
I don't honestly think I can pontificate on this as I don't know how much geometry/algebra etc the students already have. The code used below detects whether the enemy is completely above the character or vice versa and if not whether one is completely to the left of the other. Otherwise they overlap.
Here is complete code. Unfortunately SO's snippet system did not seem to respond to the keydown events so I couldn't present it as a runnable snippet right here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:22;
}
#game{
width:500px;
height:500px;
border:4px solid #171918;
}
#character{
width:30px;
height:120px;
background-color:green;
position:relative;
top:320px;
border-radius:20px;
/*animation: jump 300ms */
}
/* new class called animate */
.animate{
animation: jump 500ms;
}
#enemy{
width:60px;
height:60px;
background-color:red;
border-radius:14px;
position:relative;
top:320px;
left:440px;
animation: moveenemy 1s infinite linear;
}
@keyframes moveenemy{
0%{left:440px;}
50%{top:58px;}
100%{left:0px; top:320x;}
}
@keyframes jump{
0%{top:380px;}
30%{top:50px;}
50%{top:40px;}
100%{top:380px;}
}
/* adding sky*/
#sky{
width:500px;
height:340px;
background-color:skyblue;
position:absolute;
top:118px;
}
/* adding ground */
#ground{
width:500px;
height:170px;
background-color:bisque;
position:absolute;
top:450px;
}
</style>
</head>
<body>
<h1>Game</h1>
<div id="game">
<div id="sky"></div>
<div id="ground"></div>
<div id="enemy"></div>
<div id="character"></div>
</div>
<script>
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
function jump(){
if(character.classlist!="animate"){
character.classList.add("animate");
}
setTimeout(function(){
character.classList.remove("animate");
},500);
}
//right movement
function right() {
var leftVal = parseInt(window.getComputedStyle(character).getPropertyValue("left"))
character.style.left = (leftVal + 30) + "px";
}
//left movement
function left() {
var leftVal = parseInt(window.getComputedStyle(character).getPropertyValue("left"))
character.style.left = (leftVal - 30) + "px";
}
var checkDead = setInterval(function(){
// Get the positions of the top, left and bottom, right of the enemy and the character
let enemyPos = enemy.getBoundingClientRect() // this will give us the left, right, top and bottom positions of the enemy
let characterPos = character.getBoundingClientRect() // this will give us the left, right, top and bottom positions of the character
// now let's see if there is any overlap between the enemy and the character
// we are going to check whether one of them is to the left of the other.
// For example if the left side of the enemy is bigger than the right side of the character then the enemy is to the right of the character
if (enemyPos.left >= characterPos.right || characterPos.left >= enemyPos.right) {
// Now we know they don't overlap as either the enemy is to the right of the character or vice versa so do nothing
}
// if we still don't know, we see whether the character is above the enemy or vice versa
else if (enemyPos.bottom <= characterPos.top || characterPos.bottom <= enemyPos.top) {
// Now we know they don't overlap as either the enemy is above the character or vice versa so do nothing
}
// neither of them is totally to the left or totally above the other so they must overlap somewhere- GOTCHA!
else {
enemy.style.animation="none"; //remove the animation
enemy.style.display="none";
alert("Game Over");
clearInterval(checkDead); //I've added this but you may want to start again completely or....
}
},10 );
//left
addEventListener("keydown", function(e) {
if(e.keyCode == 37) left()
})
//jump (up)
addEventListener("keydown", function(e) {
if (e.keyCode === 38) {
jump()
}
})
//right
addEventListener("keydown", function(e) {
if (e.keyCode === 39) {
right()
}
})
</script>
</body>
</html>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments