I am trying to build a game similar to the snake game, except it is with shark and a fish. I have written a program that works exactly like the game I wanted to make, but when I tried using an image instead of background color for shark and fish, the just became invisible. I am quoting the code I have written for this. Please suggest how to change background colors of the thing representing shark and fish to their images. the pictures are in the same folder as the code files.
EDIT: i hosted the images online and they are still not visible....
please pardon if there are any mistakes in my code as i am not very great at programming...
//constants n variables
let inputdir = {x: 0, y: 0};
const eatsound = new Audio('eat.wav');
const gosound = new Audio('gameover.wav');
const movesound = new Audio('move.wav');
const musicsound = new Audio('music.mp3');
let speed = 5;
let score = 0;
let lastPaintTime = 0;
let sharkarr = [
{x: 13, y: 15}
]
fish = {x: 6, y: 7};
//game functions
function main(ctime) {
window.requestAnimationFrame(main);
//console.log(ctime)
if((ctime - lastPaintTime)/1000 < 1/speed){
return;
}
lastPaintTime = ctime;
gameEngine();
}
function isCollide(sharkarr) {
if(sharkarr[0].x >= 18*2 || sharkarr[0].x <= -18 || sharkarr[0].y >= 18*2 || sharkarr[0].y <= -18){
return true;
}
}
function gameEngine(){
// updating fish, shark
if(isCollide(sharkarr)){
gosound.play();
musicsound.pause();
inputdir = {x: 0, y: 0};
setTimeout(() => {
alert("GAME OVER!");
}, 2000);
sharkarr = [{x: 13, y: 15}];
musicsound.play();
score = 0;
scoreBox.innerHTML = "Score: " + score;
}
//fish eaten = score+ + fish moved
if(sharkarr[0].y === fish.y && sharkarr[0].x === fish.x){
eatsound.play();
score += 1;
scoreBox.innerHTML = "Score: " + score
let a = 1;
let b = 18;
fish = {x: Math.round(a + (b - a)*Math.random()), y: Math.round(a + (b - a)*Math.random())}
}
//moving shark
for (let i = sharkarr.length - 2; i>=0 ; i--){
//const element = array[i];
sharkarr[i+1] = {...sharkarr[i]};
}
sharkarr[0].x += inputdir.x;
sharkarr[0].y += inputdir.y;
// display shark
board.innerHTML = "";
sharkarr.forEach((e, index)=>{
sharkelement = document.createElement('div');
sharkelement.style.gridRowStart = e.y;
sharkelement.style.gridColumnStart = e.x;
if(index === 0){
sharkelement.classList.add('shark')
}
else{
sharkelement.classList.add('shark');
}
board.appendChild(sharkelement);
})
// display food
fishelement = document.createElement('div');
fishelement.style.gridRowStart = fish.y;
fishelement.style.gridColumnStart = fish.x;
fishelement.classList.add('fish');
board.appendChild(fishelement);
}
//main logic
window.requestAnimationFrame(main);
window.addEventListener('keydown', e =>{
inputdir = {x: 0, y: 1} //starts the game
movesound.play();
musicsound.play();
switch (e.key) {
case "ArrowUp":
//console.log("ArrowUp");
inputdir.x = 0;
inputdir.y = -1;
break;
case "ArrowDown":
//console.log("ArrowDown");
inputdir.x = 0;
inputdir.y = 1;
break;
case "ArrowLeft":
//console.log("ArrowLeft");
inputdir.x = -1;
inputdir.y = 0;
break;
case "ArrowRight":
//console.log("ArrowRight");
inputdir.x = 1;
inputdir.y = 0;
break;
default:
break;
}
})
*{
padding: 0;
margin: 0;
}
body{
background-color: blue;
}
.body{
background-repeat: no-repeat;
background-size: 100vw 100vh;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#bg{
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
#title{
color: white;
border: 2px solid white;
width: 98%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: absolute;
top: 1%;
text-align: center;
background-color: green;
font-size: medium;
}
#scoreBox{
color: white;
border: 2px solid white;
width: 98%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: absolute;
bottom: 1%;
text-align: center;
background-color: green;
font-size: medium;
}
#board{
width: 98%;
height: 85%;
display: grid;
grid-template-rows: repeat(18, 1fr);
grid-template-columns: repeat(18, 1fr);
border: 10px solid red;
}
.shark{
background-color: #fff;
background-image: url('https://postimg.cc/dDBdCsP4');
background-repeat: no-repeat;
}
.fish{
background-color: yellow;
background-image: url('https://postimg.cc/SYNnd9FV');
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat The Fish</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="body">
<video id="bg" autoplay loop muted>
<source src="bg.mp4">
</video>
<div id="title">EAT THE FISH!!!</div>
<div id="scoreBox">Score: 0</div>
<div id="board"></div>
</div>
</body>
<script src="index.js"></script>
</html>
background-clip is for controlling whether a background image extends beyond its element's boundaries. It is not for embedding video clips in the background, and does not accept a url().
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
Your background-image rules should work (provided the path to the images is correct) but they are commented out.
I changed this line:
background-clip: url(bg.mp4);
to
background-image: url(https://picsum.photos/300/200);
background-clip: border-box;
Read more about background-clip
I also added some placeholder images to show that your issue is almost certainly a result of an invalid path to your images.
//constants n variables
let inputdir = {x: 0, y: 0};
const eatsound = new Audio('eat.wav');
const gosound = new Audio('gameover.wav');
const movesound = new Audio('move.wav');
const musicsound = new Audio('music.mp3');
let speed = 5;
let score = 0;
let lastPaintTime = 0;
let sharkarr = [
{x: 13, y: 15}
]
fish = {x: 6, y: 7};
//game functions
function main(ctime) {
window.requestAnimationFrame(main);
//console.log(ctime)
if((ctime - lastPaintTime)/1000 < 1/speed){
return;
}
lastPaintTime = ctime;
gameEngine();
}
function isCollide(sharkarr) {
if(sharkarr[0].x >= 18*2 || sharkarr[0].x <= -18 || sharkarr[0].y >= 18*2 || sharkarr[0].y <= -18){
return true;
}
}
function gameEngine(){
// updating fish, shark
if(isCollide(sharkarr)){
gosound.play();
musicsound.pause();
inputdir = {x: 0, y: 0};
setTimeout(() => {
alert("GAME OVER!");
}, 2000);
sharkarr = [{x: 13, y: 15}];
musicsound.play();
score = 0;
scoreBox.innerHTML = "Score: " + score;
}
//fish eaten = score+ + fish moved
if(sharkarr[0].y === fish.y && sharkarr[0].x === fish.x){
eatsound.play();
score += 1;
scoreBox.innerHTML = "Score: " + score
let a = 1;
let b = 18;
fish = {x: Math.round(a + (b - a)*Math.random()), y: Math.round(a + (b - a)*Math.random())}
}
//moving shark
for (let i = sharkarr.length - 2; i>=0 ; i--){
//const element = array[i];
sharkarr[i+1] = {...sharkarr[i]};
}
sharkarr[0].x += inputdir.x;
sharkarr[0].y += inputdir.y;
// display shark
board.innerHTML = "";
sharkarr.forEach((e, index)=>{
sharkelement = document.createElement('div');
sharkelement.style.gridRowStart = e.y;
sharkelement.style.gridColumnStart = e.x;
if(index === 0){
sharkelement.classList.add('shark')
}
else{
sharkelement.classList.add('shark');
}
board.appendChild(sharkelement);
})
// display food
fishelement = document.createElement('div');
fishelement.style.gridRowStart = fish.y;
fishelement.style.gridColumnStart = fish.x;
fishelement.classList.add('fish');
board.appendChild(fishelement);
}
//main logic
window.requestAnimationFrame(main);
window.addEventListener('keydown', e =>{
inputdir = {x: 0, y: 1} //starts the game
movesound.play();
musicsound.play();
switch (e.key) {
case "ArrowUp":
//console.log("ArrowUp");
inputdir.x = 0;
inputdir.y = -1;
break;
case "ArrowDown":
//console.log("ArrowDown");
inputdir.x = 0;
inputdir.y = 1;
break;
case "ArrowLeft":
//console.log("ArrowLeft");
inputdir.x = -1;
inputdir.y = 0;
break;
case "ArrowRight":
//console.log("ArrowRight");
inputdir.x = 1;
inputdir.y = 0;
break;
default:
break;
}
})
*{
padding: 0;
margin: 0;
}
body{
background-color: blue;
}
.body{
background-image: url(https://picsum.photos/300/200);
background-clip: border-box;
background-repeat: no-repeat;
background-size: 100vw 100vh;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#bg{
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
#title{
color: white;
border: 2px solid white;
width: 98%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: absolute;
top: 1%;
text-align: center;
background-color: green;
font-size: medium;
}
#scoreBox{
color: white;
border: 2px solid white;
width: 98%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: absolute;
bottom: 1%;
text-align: center;
background-color: green;
font-size: medium;
}
#board{
width: 98%;
height: 85%;
display: grid;
grid-template-rows: repeat(18, 1fr);
grid-template-columns: repeat(18, 1fr);
border: 10px solid red;
}
.shark{
background-color: #fff;
background-image: url('https://picsum.photos/30/20');
background-repeat: no-repeat;
}
.fish{
background-color:yellow;
background-image: url('https://picsum.photos/30/20');
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat The Fish</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="body">
<video id="bg" autoplay loop muted>
<source src="bg.mp4">
</video>
<div id="title">EAT THE FISH!!!</div>
<div id="scoreBox">Score: 0</div>
<div id="board"></div>
</div>
</body>
<script src="index.js"></script>
</html>
Related
I am making a 4x4 wordle game, and I used js to make the squares and input letters. When I input letters they go top to bottom instead of left to right and I'm not really sure how to fix it. I don't know how to modify the key events to go from the first column to the second, this is the code that deals with it, but I don't know why it isn't working, i feel like the code that is affecting it is this, but im not sure
if (col < gameWidth) {
let currsquare = document.getElementById(row.toString() + '-' + col.toString());
currsquare.innerText = e.code[3];
col++;
}
var gameHeight = 4; //number of guesses
var gameWidth = 4; //length of the word
var row = 0; //current guess (attempt #)
var col = 0; //current letter for that attempt
var gameOver = false;
var word = "RAAA";
window.onload = function() {
initialize();
};
function initialize() {
const darkModeToggle = document.getElementById("dark-mode-toggle");
darkModeToggle.addEventListener("click", () => {
document.body.classList.toggle("dark");
});
const instructionsToggle = document.getElementById("info");
const instructionsContainer = document.getElementById("instructions-container");
// Hide the instructions by default
instructionsContainer.style.display = "none";
// Show or hide the instructions when the button is clicked
instructionsToggle.addEventListener("click", () => {
if (instructionsContainer.style.display === "none") {
instructionsContainer.style.display = "block";
} else {
instructionsContainer.style.display = "none";
}
});
// Create the game board
for (let i = 0; i < gameHeight; i++) {
let row = document.createElement("div");
row.classList.add("row");
for (let j = 0; j < gameWidth; j++) {
let square = document.createElement("span");
square.id = i.toString() + "-" + j.toString();
square.classList.add("square");
square.innerText = "";
row.appendChild(square);
}
document.getElementById("board").appendChild(row);
}
// Listen for Key Press
document.addEventListener("keyup", (e) => {
if (gameOver) return;
if ("KeyA" <= e.code && e.code <= "KeyZ") {
if (col < gameWidth) {
let currsquare = document.getElementById(row.toString() + '-' + col.toString());
currsquare.innerText = e.code[3];
col++;
}
} else if (e.code == "Backspace") {
if (col > 0) {
col--;
let currsquare = document.getElementById(row.toString() + '-' + col.toString());
currsquare.innerText = "";
}
} else if (e.code == "Enter") {
update();
row += 1; // start new row
col = 0; // reset current index to 0 for new row
}
if (!gameOver && row == gameHeight) {
gameOver = true;
document.getElementById("answer").innerText = word;
}
});
}
function update() {
let correct = 0;
for (let column = 0; column < gameWidth; column++) {
let currsquare = document.getElementById(row.toString() + '-' + column.toString());
let letter = currsquare.innerText;
// Is it in the correct position?
if (word[row*gameWidth + (column % gameWidth)] == letter) {
currsquare.classList.add("correct");
correct += 1;
} // Is it in the word?
else if (word.includes(letter)) {
currsquare.classList.add("present");
} // Not in the word
else {
currsquare.classList.add("absent");
}
}
if (correct == gameWidth) {
gameOver = true;
document.getElementById("congrats").style.display = "block";
}
if (!gameOver && row == gameHeight - 1) {
gameOver = true;
document.getElementById("answer").innerText = word;
}
}
this is the updated html
<html>
<head>
<title>Wordle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="wordle.css">
</head>
<body>
<h1 id="title">Wordle</h1>
<i id = "info" class="fas fa-info-circle"></i>
<i id="dark-mode-toggle" class="fas fa-circle"></i>
<hr>
<br>
<div id="board">
</div>
<br>
<div id="instructions-container">
<p>The goal is to guess the word </p>
</div>
<img id="congrats" src="https://res.cloudinary.com/mkf/image/upload/v1675467141/ENSF-381/labs/congrats_fkscna.gif" alt="Congratulations">
<script src="wordle.js"></script>
</html>
This is the updated css
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
--correct:#6baa64;
--background-color:white;
--text-color:black;
color: var(--text-color);
background-color: var(--background-color);
}
body.dark{
font-family: Arial, Helvetica, sans-serif;
text-align: center;
--correct:#6baa64;
--background-color:black;
background-color: var(--background-color);
--text-color:white;
color:white;
}
hr {
width: 500px;
}
#title {
font-size: 36px;
font-weight: bold;
letter-spacing: 2px;
}
#board {
width: 350px;
height: 420px;
margin: 0 auto;
margin-top: 3px;
display: flex;
flex-wrap: wrap;
}
.square {
border: 2px solid lightgray;
width: 60px;
height: 60px;
margin: 2.5px;
color: black;
font-size: 36px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.correct {
background-color: var(--correct);
color: white;
border-color: white;
}
.present {
background-color: #C9B458;
color: white;
border-color: white;
}
.absent {
background-color: #787C7E;
color: white;
border-color:white;
}
#congrats {
display: none;
}
#dark-mode-toggle {
position: fixed;
top: 10px;
right: 250px;
}
#question{
position: fixed;
top: 10px;
right: 200px;
}
#info{
position: fixed;
top: 10px;
right: 300px;
}
You dont need display: flex; in board but you need to add display: flex; to row
#board {
width: 350px;
height: 420px;
margin: 0 auto;
margin-top: 3px;
}
.row {
display: flex;
}
I'm trying to figure out why Positions are returned NaN in browser.
this game being rendered in loop and updated as soon as monitor ready to, that's defined in update() function an runs infinite.
reset() function is a part of updating so it will randomly generate headings, also there is a while which corresponds to filtering little and boring movements.
Positions are consist of
A direction which is an Array having x,y times..
A Velocity which is constant during the whole game..
Differ value constitute of time delta indicates how much
milliseconds passed from last rendered frame to the new one
I appreciate your help.
//br.js
const ausgebur_Velocity = .002
class Ball {
constructor(ballElement) {
this.ballElement = ballElement
this.reset()
}
get x() {
return parseFloat(getComputedStyle(this.ballElement).getPropertyValue("--x"))
}
set x(value) {
this.ballElement.style.setProperty("--x", value)
}
get y() {
return parseFloat(getComputedStyle(this.ballElement).getPropertyValue("--y"))
}
set y(value) {
this.ballElement.style.setProperty("--y", value)
}
reset() {
this.x = 50;
this.y = 50;
this.direction = { x: 50, y: 25 }
while (Math.abs(this.direction.x) <= .2 || Math.abs(this.direction.x >= .9)) {
const heading = randomNumberBet(0, 2 * Math.PI)
this.direction = { x: Math.cos(heading), y: Math.sin(heading) }
}
this.velocity = ausgebur_Velocity
}
update(differ) {
this.x += this.direction.x * this.velocity * differ;
this.y += this.direction.y * this.velocity * differ;
console.log(this.x)
console.log(this.y)
}
}
function randomNumberBet(min, max) {
return Math.random() * (max - min) + min
}
// Main Script Below
const ball = new Ball(document.getElementById('ball'))
let lastTime
function update(time) {
if (lastTime != null) {
const differ = time - lastTime
ball.update()
}
lastTime = time
window.requestAnimationFrame(update)
}
window.requestAnimationFrame(update)
//style.css
*,
*::after,
*::before {
box-sizing: border-box;
}
:root {
--hue: 200;
--saturation: 50%;
--foreground: hsl(var(--hue), var(--saturation), 75%);
--background: hsl(var(--hue), var(--saturation), 25%);
}
body {
overflow: hidden;
margin: 0;
background-color: var(--background)
}
.control {
--position: 50;
position: absolute;
background-color: var(--foreground);
top: calc(var(--position)*1vh);
transform: translateY(-50%);
width: 1vh;
height: 10vh;
}
#player_control {
left: 1vw;
}
#pc_control {
right: 1vw;
}
#ball {
--x: 50;
--y: 50;
position: absolute;
background-color: var(--foreground);
left: calc(var(--x)*1vh);
top: calc(var(--y)*1vh);
transform: translate(-50%, -50%);
width: 3vh;
height: 3vh;
border-radius: 50%;
}
.score {
display: flex;
justify-content: center;
font-weight: bold;
font-size: 7vh;
color: var(--foreground);
}
.score>* {
flex-grow: 1;
flex-basis: 0%;
padding: 0 2vh;
margin: 1vh 0;
opacity: .5;
}
.score>:first-child {
text-align: right;
border-right: .5vh solid var(--foreground);
}
//ping.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<script src="/br.js" type="module"></script>
<title>PING</title>
</head>
<body>
<div class="score">
<div class="player_score">0</div>
<div class="pc_score">0</div>
</div>
<div id="ball"></div>
<div class="control" id="player_control"></div>
<div class="control" id="pc_control"></div>
</body>
</html>
It seems the the problem is that get the coordonates from --x and --y css properties, which are not defined here.
Using top and left works slightly better but I think you'ill have to improve your algorithms.
const ausgebur_Velocity = .002
class Ball {
constructor(ballElement) {
this.ballElement = ballElement
this.reset()
}
get x() {
return parseFloat(getComputedStyle(this.ballElement).getPropertyValue("left"))
}
set x(value) {
this.ballElement.style.setProperty("left", "" + value + "px")
}
get y() {
return parseFloat(getComputedStyle(this.ballElement).getPropertyValue("top"))
}
set y(value) {
this.ballElement.style.setProperty("top", "" + value + "px")
}
reset() {
this.x = 50;
this.y = 50;
this.direction = {
x: 50,
y: 25
}
while (Math.abs(this.direction.x) <= .2 || Math.abs(this.direction.x >= .9)) {
const heading = randomNumberBet(0, 2 * Math.PI)
this.direction = {
x: Math.cos(heading),
y: Math.sin(heading)
}
}
this.velocity = ausgebur_Velocity
}
update(differ) {
this.x += this.direction.x * this.velocity * differ;
this.y += this.direction.y * this.velocity * differ;
console.log("x", this.x)
console.log("y", this.y)
}
}
function randomNumberBet(min, max) {
return Math.random() * (max - min) + min
}
// Main Script Below
const ball = new Ball(document.getElementById('ball'))
let lastTime
function update(time) {
if (lastTime != null) {
const differ = time - lastTime
ball.update(differ)
}
lastTime = time
window.requestAnimationFrame(update)
}
window.requestAnimationFrame(update)
*,
*::after,
*::before {
box-sizing: border-box;
}
:root {
--hue: 200;
--saturation: 50%;
--foreground: hsl(var(--hue), var(--saturation), 75%);
--background: hsl(var(--hue), var(--saturation), 25%);
}
body {
overflow: hidden;
margin: 0;
background-color: var(--background)
}
.control {
--position: 50;
position: absolute;
background-color: var(--foreground);
top: calc(var(--position)*1vh);
transform: translateY(-50%);
width: 1vh;
height: 10vh;
}
#player_control {
left: 1vw;
}
#pc_control {
right: 1vw;
}
#ball {
--x: 50;
--y: 50;
position: absolute;
background-color: var(--foreground);
left: calc(var(--x)*1vh);
top: calc(var(--y)*1vh);
transform: translate(-50%, -50%);
width: 3vh;
height: 3vh;
border-radius: 50%;
}
.score {
display: flex;
justify-content: center;
font-weight: bold;
font-size: 7vh;
color: var(--foreground);
}
.score>* {
flex-grow: 1;
flex-basis: 0%;
padding: 0 2vh;
margin: 1vh 0;
opacity: .5;
}
.score>:first-child {
text-align: right;
border-right: .5vh solid var(--foreground);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<script src="/br.js" type="module"></script>
<title>PING</title>
</head>
<body>
<div class="score">
<div class="player_score">0</div>
<div class="pc_score">0</div>
</div>
<div id="ball"></div>
<div class="control" id="player_control"></div>
<div class="control" id="pc_control"></div>
</body>
</html>
I'm making a simple Space Invaders Clone in Web and ran into an issue. The code works well so far with the exception of the collision system. I need to destroy an enemy every time that the player's bullet hits it. In order to make it, I'm grabbing the x and y coordinates of both the enemies' div and the bullet's div. The issue appears on the values comparison: apparently getBoundingClientRect() grabs the x and y coordinates from within the element excluding its real size. Hence, according to my code, only when the bullet is perfectly inside the enemy that things would trigger. Is there a better way of doing it? How so?
Thanks in advance.
const shoot = (x) => {
//Creates bullet
const main = document.getElementById("main");
const div_bullet = document.createElement("div");
//Appends child
main.appendChild(div_bullet);
//Sets position
div_bullet.style.top = "340px";
div_bullet.style.left = x + "px";
//Gives it a class
div_bullet.classList.add("div_bullet");
div_bullet.setAttribute("id", "bullet");
//Deletes bullet
setTimeout(() => {
div_bullet.remove();
}, 1000);
};
const load_game = () => {
//Adding movement to the spaceship
const space_ship = document.getElementById("space_ship");
let x = 375;
window.addEventListener("keydown", (e) => {
switch (e.key) {
case "ArrowLeft":
if (x <= 15) break;
x = x - 10;
space_ship.style.left = x + "px";
break;
case "ArrowRight":
if (x >= 725) break;
x = x + 10;
space_ship.style.left = x + "px";
break;
case "ArrowUp":
if (document.getElementsByClassName("div_bullet").length === 0)
shoot(x + 20);
break;
default:
break;
}
});
};
const collision_system = () => {
setInterval(() => {
//Checks if any enemy was hit
const e1 = document.getElementById("e1");
const e2 = document.getElementById("e2");
const e3 = document.getElementById("e3");
const e4 = document.getElementById("e4");
const e5 = document.getElementById("e5");
const enemies_position = [{
x: e1.getBoundingClientRect().x,
y: e1.getBoundingClientRect().y
},
{
x: e2.getBoundingClientRect().x,
y: e2.getBoundingClientRect().y
},
{
x: e3.getBoundingClientRect().x,
y: e3.getBoundingClientRect().y
},
{
x: e4.getBoundingClientRect().x,
y: e4.getBoundingClientRect().y
},
{
x: e5.getBoundingClientRect().x,
y: e5.getBoundingClientRect().y
},
];
if (document.getElementById("bullet")) {
const x_bullet = document
.getElementById("bullet")
.getBoundingClientRect().x;
const y_bullet = document
.getElementById("bullet")
.getBoundingClientRect().y;
console.log(
"X: " + enemies_position[0].x + "Y: " + enemies_position[0].y
);
console.log("X bullet: " + x_bullet + "Y bullet : " + y_bullet);
for (let i = 0; i < 5; i++) {
if (
enemies_position[i].x === x_bullet &&
enemies_position[i].y === y_bullet
)
alert("Shoot!");
}
}
}, 10);
};
document.addEventListener("DOMContentLoaded", () => {
load_game();
collision_system();
});
* {
padding: 0px;
margin: 0px;
}
body {
background-color: black;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.main {
width: 800px;
height: 500px;
border: 2px white solid;
border-radius: 10px;
}
#keyframes enemies_move {
from {
left: 80px;
}
to {
left: -80px;
}
}
.enemies {
margin-top: 20px;
position: fixed;
width: 800px;
height: 50px;
display: flex;
justify-content: space-evenly;
}
.enemies div {
position: relative;
width: 50px;
height: 50px;
background-color: orange;
animation: enemies_move 4s alternate infinite;
}
.barriers {
width: 800px;
height: 20px;
position: fixed;
top: 460px;
display: flex;
justify-content: space-evenly;
}
.barriers div {
width: 100px;
height: 20px;
background-color: white;
}
.space_ship {
width: 50px;
height: 50px;
border: 2px white solid;
position: relative;
top: 440px;
left: 375px;
}
#keyframes shoot_bullet {
from {
top: 340px;
}
to {
top: -50px;
}
}
.div_bullet {
left: 17px;
width: 15px;
height: 40px;
background-color: white;
position: relative;
animation: shoot_bullet 1s;
}
<div id="main" class="main">
<div class="enemies">
<div id="e1"></div>
<div id="e2"></div>
<div id="e3"></div>
<div id="e4"></div>
<div id="e5"></div>
</div>
<div class="barriers">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="space_ship" class="space_ship"></div>
</div>
The problem in your code is that you are using only the x and y of the bullet and enemy to check for collisions. You need to use the width and height of both items to check if they collide.
The checks needed to see if two rects collide is
function rectCollision(rectA, rectB) {
return (
rectA.x < rectB.x + rectB.width &&
rectA.x + rectA.width > rectB.x &&
rectA.y < rectB.y + rectB.height &&
rectA.height + rectA.y > rectB.y
);
}
And using this in your code makes it work
const shoot = (x) => {
//Creates bullet
const main = document.getElementById("main");
const div_bullet = document.createElement("div");
//Appends child
main.appendChild(div_bullet);
//Sets position
div_bullet.style.top = "340px";
div_bullet.style.left = x + "px";
//Gives it a class
div_bullet.classList.add("div_bullet");
div_bullet.setAttribute("id", "bullet");
//Deletes bullet
setTimeout(() => {
div_bullet.remove();
}, 1000);
};
const load_game = () => {
//Adding movement to the spaceship
const space_ship = document.getElementById("space_ship");
let x = 375;
window.addEventListener("keydown", (e) => {
switch (e.key) {
case "ArrowLeft":
if (x <= 15) break;
x = x - 10;
space_ship.style.left = x + "px";
break;
case "ArrowRight":
if (x >= 725) break;
x = x + 10;
space_ship.style.left = x + "px";
break;
case "ArrowUp":
if (document.getElementsByClassName("div_bullet").length === 0)
shoot(x + 20);
break;
default:
break;
}
});
};
const collision_system = () => {
setInterval(() => {
//Checks if any enemy was hit
const e1 = document.getElementById("e1");
const e2 = document.getElementById("e2");
const e3 = document.getElementById("e3");
const e4 = document.getElementById("e4");
const e5 = document.getElementById("e5");
const enemies_position = [
e1.getBoundingClientRect(),
e2.getBoundingClientRect(),
e3.getBoundingClientRect(),
e4.getBoundingClientRect(),
e5.getBoundingClientRect(),
];
if (document.getElementById("bullet")) {
const bullet = document
.getElementById("bullet")
.getBoundingClientRect();
console.log(
"X: " + enemies_position[0].x + "Y: " + enemies_position[0].y
);
console.log("X bullet: " + bullet.x + "Y bullet : " + bullet.y);
for (let i = 0; i < 5; i++) {
if (
rectCollision(enemies_position[i], bullet)
)
alert("Shoot!");
}
}
}, 10);
};
function rectCollision(rectA, rectB) {
return (rectA.x < rectB.x + rectB.width &&
rectA.x + rectA.width > rectB.x &&
rectA.y < rectB.y + rectB.height &&
rectA.height + rectA.y > rectB.y)
}
document.addEventListener("DOMContentLoaded", () => {
load_game();
collision_system();
});
* {
padding: 0px;
margin: 0px;
}
body {
background-color: black;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.main {
width: 800px;
height: 500px;
border: 2px white solid;
border-radius: 10px;
}
#keyframes enemies_move {
from {
left: 80px;
}
to {
left: -80px;
}
}
.enemies {
margin-top: 20px;
position: fixed;
width: 800px;
height: 50px;
display: flex;
justify-content: space-evenly;
}
.enemies div {
position: relative;
width: 50px;
height: 50px;
background-color: orange;
animation: enemies_move 4s alternate infinite;
}
.barriers {
width: 800px;
height: 20px;
position: fixed;
top: 460px;
display: flex;
justify-content: space-evenly;
}
.barriers div {
width: 100px;
height: 20px;
background-color: white;
}
.space_ship {
width: 50px;
height: 50px;
border: 2px white solid;
position: relative;
top: 440px;
left: 375px;
}
#keyframes shoot_bullet {
from {
top: 340px;
}
to {
top: -50px;
}
}
.div_bullet {
left: 17px;
width: 15px;
height: 40px;
background-color: white;
position: relative;
animation: shoot_bullet 1s;
}
<div id="main" class="main">
<div class="enemies">
<div id="e1"></div>
<div id="e2"></div>
<div id="e3"></div>
<div id="e4"></div>
<div id="e5"></div>
</div>
<div class="barriers">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="space_ship" class="space_ship"></div>
</div>
I made a canvas size as A4, i draw a rectangles inside and when i click the light blue rectangle it will call a function but the coordinates of the click on the rectangle is inconsistent and every row the y level is needed to click more lower then the light blue rectangle.
How i make the coordinates more accurate?
(Code need full screen)
'use strict';
function mmTopx(mm) {
//return mm * 3.7795275591;
//return mm * 3.7795275590551;
return (mm * 96) / 25.4;
}
function cmTopx(cm) {
return cm * 1; /* NEED TO FIX */
}
// Get mouse position
function getMousePos(c, evt) {
var rect = c.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top,
};
}
class sticker {
#width;
#height;
#fullheight;
constructor(width = 1, height = 1, fullheight = 1) {
if (!sticker.isNumber(width) || !sticker.isNumber(height) || !sticker.isNumber(fullheight)) throw 'Only accept number';
this.#width = width;
this.#height = height;
this.#fullheight = fullheight;
}
static isNumber(n) {
return !isNaN(parseFloat(n)) && !isNaN(n - 0) && typeof n != 'string';
}
get size() {
return { width: this.#width, height: this.#height, fullheight: this.#fullheight };
}
get width() {
return this.#width;
}
get height() {
return this.#height;
}
get fullheight() {
return this.#fullheight;
}
set width(n) {
if (!sticker.isNumber(n)) throw 'Only accept number';
this.#width = n;
}
set height(n) {
if (!sticker.isNumber(n)) throw 'Only accept number';
this.#height = n;
}
set fullheight(n) {
if (!sticker.isNumber(n)) throw 'Only accept number';
this.#fullheight = n;
}
}
window.onload = () => {
const controls = document.querySelectorAll('.control');
const canvas = document.querySelector('.A4');
const canvasPadding = {
left:
window
.getComputedStyle(canvas, null)
.getPropertyValue('padding-left')
.match(/\d+.\d+|\d+/)[0] - 0,
top:
window
.getComputedStyle(canvas, null)
.getPropertyValue('padding-top')
.match(/\d+.\d+|\d+/)[0] - 0,
};
/* ///////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////// */
/* ///// CANVAS ///// */
/* ///////////////////////////////////////////////////// */
/* canvas */
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
const ctx = canvas.getContext('2d');
const _sticker = new sticker(mmTopx(25), mmTopx(12), mmTopx(37));
let Stickers = [];
const drawSticker = (x, y, width, height, fullheight) => {
Stickers.push({
color: '#d8d8d8',
width: width,
height: height,
x: x,
y: y,
clicked: function () {
console.log(`you clicked me, ${this.x} ${this.y}`);
},
});
/* full area */
ctx.fillStyle = '#e8f2f8';
ctx.fillRect(x, y, width, fullheight); // x y width height
/* print area */
ctx.fillStyle = '#d8d8d8';
ctx.fillRect(x, y, width, height, fullheight); // x y width height
};
const render = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
Stickers = [];
const size = _sticker.size;
for (let y = 0; y < canvas.height - size.fullheight; y += size.fullheight + 10) {
for (let x = 10; x < canvas.width - size.width; x += size.width + 1) {
drawSticker(x, y, size.width, size.height, size.fullheight);
}
}
};
/* ///////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////// */
/* ///// Event Listeners ///// */
/* ///////////////////////////////////////////////////// */
canvas.addEventListener('updateRender', (event) => {
const lengthType = event.detail.dimensionValue.match(/mm|cm/)[0];
let value = event.detail.dimensionValue.match(/\d+/)[0] - 0;
switch (lengthType) {
case 'cm':
//value = cmTopx(value);
break;
case 'mm':
default:
value = mmTopx(value);
break;
}
/* Set the new sticker size */
switch (event.detail.dimension) {
case 'width':
_sticker.width = value;
break;
case 'height':
_sticker.height = value;
break;
case 'fullheight':
_sticker.fullheight = value;
break;
}
render();
});
const event = new Event('change');
controls.forEach((_control) => {
_control.addEventListener(
'change',
(event) => {
const value = event.target.value;
const name = event.target.name;
const dimension = event.target.getAttribute('data-sticker-dim');
const detail = {};
detail['dimension'] = dimension;
detail['dimensionValue'] = value;
detail['name'] = name;
const updateSticker = new CustomEvent('updateRender', { detail: detail });
canvas.dispatchEvent(updateSticker);
},
true
);
const input = _control.querySelector('input');
input.dispatchEvent(event);
});
/* click event for text input */
canvas.addEventListener('click', function (e) {
e.preventDefault();
let x = parseInt(e.clientX - canvas.offsetLeft - canvasPadding.left);
let y = parseInt(e.clientY - canvas.offsetTop - canvasPadding.top);
if (x >= 0 && y >= 0) {
for (let index = 0; index < Stickers.length; index++) {
const _sticker = Stickers[index];
if (
x >= _sticker.x &&
x <= Math.floor(_sticker.x + _sticker.width) &&
y >= _sticker.y &&
y <= Math.floor(_sticker.y + _sticker.height)
) {
_sticker.clicked();
break;
}
}
}
});
/* ///////////////////////////////////////////////////// */
};
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
background-color: #fafafa;
}
/* //////////////////////////////////////////////////////////// */
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-self: flex-start;
overflow: auto;
}
/* //////////////////////////////////////////////////////////// */
.container .controllers {
position: sticky;
top: 50%;
transform: translateY(-50%);
width: 250px;
height: 500px;
flex: 0 0 100px;
border-radius: 20px;
box-sizing: border-box;
padding: 20px;
margin-left: 5px;
border: 1px solid #9e9e9e;
}
.container .controllers .control {
position: relative;
flex: 0 0 100%;
height: 50px;
padding: 5px;
}
.container .controllers .control:first-child {
margin-top: 5px;
}
.container .controllers .control:not(:first-child) {
margin-top: 20px;
}
.container .controllers .control label::before {
content: attr(data-placeholder);
position: absolute;
left: 20px;
top: 20px;
color: #65657b;
font-family: sans-serif;
line-height: 14px;
pointer-events: none;
transform-origin: 0 50%;
transition: transform 200ms, color 200ms;
}
.container .controllers .control .cut {
position: absolute;
border-radius: 10px;
height: 20px;
width: fit-content;
left: 20px;
top: -20px;
transform: translateY(0);
transition: transform 200ms;
}
.container .controllers .control input {
height: 100%;
padding: 4px 20px 0;
width: 100%;
background-color: #eeeeee;
border-radius: 12px;
border: 0;
outline: 0;
box-sizing: border-box;
color: #eee;
font-size: 18px;
color: black;
}
.container .controllers .control input:focus ~ .cut,
.container .controllers .control input:not(:placeholder-shown) ~ .cut {
transform: translateY(8px);
}
.container .controllers .control input:focus ~ label::before,
.container .controllers .control input:not(:placeholder-shown) ~ label::before {
content: attr(data-focus-placeholder);
transform: translateY(-30px) translateX(10px) scale(0.75);
}
.container .controllers .control input:not(:placeholder-shown) ~ label::before {
content: attr(data-focus-placeholder);
color: #808097;
}
.container .controllers .control input:focus ~ label::before {
color: #dc2f55;
}
/* //////////////////////////////////////////////////////////// */
.container textarea {
background: none;
outline: none;
}
.container .A4 {
align-self: center;
width: 21cm;
flex: 0 0 29.7cm;
padding: 1cm;
border: 1px #d3d3d3 solid;
border-radius: 5px;
background: #f5f5f5;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
/* //////////////////////////////////////////////////////////// */
#page {
size: A4;
margin: 0;
}
#media print {
html,
body {
height: 99%;
}
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A4 Render Stickers</title>
</head>
<body>
<div class="container">
<div class="controllers">
<button>print</button>
<div class="control">
<input type="text" value="25mm" data-sticker-dim="width" name="printWidth" placeholder=" " />
<div class="cut"></div>
<label for="printWidth" data-focus-placeholder="Width print" data-placeholder="Width size of print area"></label>
</div>
<div class="control">
<input type="text" value="12mm" data-sticker-dim="height" name="printHeight" placeholder=" " />
<div class="cut"></div>
<label for="printHeight" data-focus-placeholder="Height print" data-placeholder="Height size of print area"></label>
</div>
<div class="control">
<input type="text" value="37mm" data-sticker-dim="fullheight" name="stikcerHeight" placeholder=" " />
<div class="cut"></div>
<label for="stikcerHeight" data-focus-placeholder="Full height sticker" data-placeholder="Height size of full sticker"></label>
</div>
</div>
<canvas width="800" height="800" class="A4"></canvas>
</div>
</body>
</html>
For a project I am currently working on making a game in HTML with JavaScript. In the final product the game was functioning perfect. But as I integrated the game in a website the game stopped functioning as it should.
I have made a memory game which you should click for turning to see the picture behind. Since I have integrated the game in a website the pictures are not turning anymore.
I have added my HTML, CSS, and JavaScript code.
I am using Flask as back-end server, and instead of an Apache server. So the Flask server is also handling as a Web Sever.
$(document).ready(function() {
//variablen
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();
var cw = 15;
var d = "right";
var food;
var score;
var color = "green";
var speed = 100;
//snake
var snake_array;
//init
function init() {
d = "right";
create_snake();
create_food();
score = "0";
if (typeof game_loop != "undefined") clearInterval(game_loop);
game_loop = setInterval(paint, speed);
}
init();
//De snake wordt geboren
function create_snake() {
var length = 5;
snake_array = [];
for (var i = length - 1; i >= 0; i--) {
snake_array.push({
x: i,
y: 0
});
}
}
//Voedsel balletjes plaatsen
// plaatst voedsel ergens binnen het canvas?
function create_food() {
food = {
x: Math.round(Math.random() * (w - cw) / cw),
y: Math.round(Math.random() * (h - cw) / cw),
};
}
//tekenen snake
function paint() {
//canvas
ctx.fillStyle = "#d3f3ff";
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "white";
ctx.strokeRect(0, 0, w, h);
// positie van slang variablen
var nx = snake_array[0].x;
var ny = snake_array[0].y;
//besturing
if (d == 'right') nx++;
else if (d == 'left') nx--;
else if (d == 'up') ny--;
else if (d == 'down') ny++;
//botsen
if (nx == -1 || nx == w / cw || ny == -1 || ny == h / cw || Check_Collision(nx, ny, snake_array)) {
//init();
//toevoegen eindscore
$('#eindscore').html(score);
//overlay tonen
$('#overlay').fadeIn(speed = 300)
return;
}
if (nx == food.x && ny == food.y) {
var tail = {
x: nx,
y: ny
};
score++;
//new voedsel moet verschijnen
create_food();
} else {
tail = snake_array.pop();
tail.x = nx;
tail.y = ny;
}
snake_array.unshift(tail);
for (var i = 0; i < snake_array.length; i++) {
var c = snake_array[i];
paint_cell(c.x, c.y);
}
//teken groeien slang
paint_cell(food.x, food.y);
//score controle
checkscore(score);
//score tonen
$('#score').html('Je score: ' + score)
}
function paint_cell(x, y) {
ctx.fillStyle = color;
ctx.fillRect(x * cw, y * cw, cw, cw);
ctx.strokeStyle = "white";
ctx.strokeRect(x * cw, y * cw, cw, cw);
}
function Check_Collision(x, y, SnakeArray) {
for (var I = 0; I < snake_array.Length; I++) {
if (array[I.x == x && snake_array[I].y == y])
return true;
}
return false;
}
function checkscore(score) {
if (localStorage.getItem('eindscore') === null) {
//zonder score
localStorage.setItem('eindscore', score);
} else {
//score al aanwezig
if (score > localStorage.getItem('eindscore')) {
localStorage.setItem('eindscore', score);
}
}
$('#eind_score').html('Score: ' + localStorage.eindscore);
}
//slang besturen
$(document).keydown(function(e) {
var key = e.which;
if (key == "37" && d != "right") d = "left";
else if (key == "38" && d != "down") d = "up";
else if (key == "39" && d != "left") d = "right";
else if (key == "40" && d != "up") d = "down";
})
});
function resetscore() {
localStorage.eind_score = 0;
//
eindscorediv = document.getElementById('eind_score');
eindscorediv.innerHTML = 'Eind Score: 0'
}
html,
body {
margin: 0;
padding: 0;
}
#canvas-game {
margin: 0 auto;
text-align: left;
width: 612px;
margin-top: 20px;
border: Solid 1px #ebe5e5;
height: 385px;
position: relative;
}
#game-statistic {
margin: 0 auto;
text-align: left;
width: 612px;
margin-top: 20px;
}
#statistic-left,
#statistic-right {
font-style: italic;
font-size: 12px;
float: left;
}
#statistic-right {
float: right;
}
.bold-text {
font-weight: bold;
}
.clear {
clear: both;
}
.congrats-message {
color: white;
font-family: "Comic Sans MS";
}
.box-picture {
float: left;
width: 100px;
height: 75px;
border: solid 1px #ebe5e5;
display: none;
}
.box-picture>img {
width: 100px;
height: 75px;
}
.box-cover-wrapper {
position: absolute;
left: 0;
top: 0;
z-index: 100;
}
.box-cover {
width: 100px;
height: 75px;
background: url(../static/MemoryGame/game-images/image-cover.jpg) no-repeat;
border: solid 1px #ebe5e5;
float: left;
cursor: pointer;
}
#game-message {
margin: 0 auto;
font-size: 20px;
background: orangered;
padding: 15px;
border: solid 1px #ccc;
border-radius: 5px;
width: 612px;
display: none;
}
#btnRestart {
padding: 15px;
font-weight: bold;
text-align: center;
background: #66C835;
text-decoration: uppercase;
margin-top: 20px;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
/**** Als het scherm kleinder is dan 640px ****/
#media (max-width: 640px) {
#canvas-game {
width: 385px;
height: 348px;
}
.box-picture,
.box-picture>img,
.box-cover {
width: 75px;
height: 56px;
}
.box-cover {
background: url(../static/MemoryGame/game-images/image-cover-75.jpg) no-repeat;
}
#game-statistic {
margin-top: 20px;
}
#game-message,
#game-statistic {
width: 385px;
}
}
/**** Als het scherm kleinder is dan 640px 320px ****/
#media (max-width: 320px) {
#canvas-game {
width: 156px;
height: 390px;
}
.box-picture,
.box-picture>img,
.box-cover {
width: 50px;
height: 38px;
}
.box-cover {
background: url(../static/MemoryGame/game-images/image-cover-50.jpg) no-repeat;
}
#game-statistic {
margin-top: 20px;
}
#game-message,
#game-statistic {
width: 156px;
}
#statistic-left,
#statistic-right {
float: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
<title>Memory_Game</title>
<link rel="stylesheet" href="../static/TulipAir.css">
<link href="../static/MemoryGame.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../static/MemoryGame.js"></script>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<!-- Titel Website -->
<h1 id="TextCenter">Welkom bij Tulip Air</h1>
<!-- Navigatie bar -->
<ul>
<li>Home</li>
<li>Media</li>
<li>Chat</li>
<li>Reisinformatie</li>
<li>Vliegtuig Informatie</li>
<li><a class="active" href="/Games">Games</a></li>
<li>Webshop</li>
<li id="FloatRight">Admin</li>
</ul>
<div class="games">
<img src="../static/snake.png">
<img src="../static/MemoryGame.jpg">
</div>
<div>
<div id="canvas-game">
<div id="game-content"></div>
</div>
<div id="game-statistic">
<div id="statistic-left">No of Clicks: <span id="no-of-clicks" class="bold-text">0</span></div>
<div id="statistic-right">Correct Guess: <span id="correct-guess" class="bold-text">0</span></div>
<div class="clear"></div>
</div>
<div id="game-message">
<div class="congrats-message">Wooosh, you succesfully landed! :)</div>
<button id="btnRestart" type="button">Speel opnieuw</button>
</div>
</div>
</body>
<footer>
<p id="TextCenter">© Tulip Air</p>
</footer>
</html>
First off all I am really thankful for your quick answers. This is mine first Stack Overflow post, and I found the solution within half an hour. :)
When I whas integrating the code in mine website I deleted a piece of code
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" type="text/css" rel="stylesheet"/>
The code from above helps the picture to move with a 3d transition. After I was deleting unnecessary code I saw that something was missing. I have putted the code back, and everything does work again :)