Character-Animation/script.js at main · ObaidaHY/Character-Animation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
const animationContainer = document.getElementById("animation-container");
const fileInput = document.getElementById("fileInput");
let characters = [];


function openFileInput() {
  fileInput.click();
}


fileInput.addEventListener("change", () => {
  const files = fileInput.files;
  for (const file of files) {
    const reader = new FileReader();
    reader.onload = (event) => {
      const character = createCharacter(event.target.result);
      animationContainer.appendChild(character);
      characters.push(character);
    };
    reader.readAsDataURL(file);
  }
});


function createCharacter(imageData) {
  const character = document.createElement("img");
  character.src = imageData;
  character.classList.add("character");
  character.style.left = getRandomPosition(animationContainer.offsetWidth - 100) + "px";
  character.style.top = getRandomPosition(animationContainer.offsetHeight - 100) + "px";
  character.style.border = "2px solid black"
  character.addEventListener("click", () => focusCharacter(character));
  return character;
}


function addCharacter() {
  const character = createCharacter();
  animationContainer.appendChild(character);
  characters.push(character);
}

// this function may be used if we wanted to import the image with url (from the internet). we may need to slightly change the rest of the code
// function createCharacter() {
//   const character = document.createElement("img");
//   character.src = prompt("Enter the URL of the character's image:");
//   character.classList.add("character");
//   character.style.left = getRandomPosition(animationContainer.offsetWidth - 100) + "px";
//   character.style.top = getRandomPosition(animationContainer.offsetHeight - 100) + "px";
//   character.addEventListener("click", () => focusCharacter(character));
//   return character;
// }


function getRandomPosition(max) {
  return Math.floor(Math.random() * max);
}


let focusedCharacter = null;


function focusCharacter(character) {
  if (focusedCharacter != null){
    focusedCharacter.style.border = "2px solid black"
  }
  focusedCharacter = character;
  character.style.border = "2px solid red";
  animationContainer.focus();
}


function moveCharacter(event) {
  if (focusedCharacter) {
    const step = 10;
    switch (event.key) {
      case "ArrowUp":
        focusedCharacter.style.top = (parseInt(focusedCharacter.style.top) - step) + "px";
        break;
      case "ArrowDown":
        focusedCharacter.style.top = (parseInt(focusedCharacter.style.top) + step) + "px";
        break;
      case "ArrowLeft":
        focusedCharacter.style.left = (parseInt(focusedCharacter.style.left) - step) + "px";
        break;
      case "ArrowRight":
        focusedCharacter.style.left = (parseInt(focusedCharacter.style.left) + step) + "px";
        break;
    }
  }
}