Answered: character: 'Narrator', text: "In the…

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Related questions

Question

Please rewrite this animation code below so that it performs the same functions in a java file instead of the files .css,.js, and .html in visual studios. You would need to import javaFX and include your images for creature.png,forestbackground.png,human.png, and human2.png. Also attach a screenshot of the running animation in java.

script.js

const dialogue = [

{ character: 'Narrator', text: "In the dead of night, beneath a moon veiled by misty clouds, a lone figure trudged along a desolate forest path." },

{ character: 'Narrator', text: "Unknown to her, she was not alone." },

{ character: 'Human', text: "Who's there? Show yourself!" },

{ character: 'Creature', text: "You venture into realms unknown, mortal. What brings you to these woods?" },

{ character: 'Human', text: "I seek passage to the village beyond. I mean no harm." },

{ character: 'Creature', text: "Harm is but a shadow in these woods, mortal." },

{ character: 'Human', text: "What do you mean? Who are you?" },

{ character: 'Creature', text: "Names are as fleeting as the mist. I am known as the Wumpus, guardian of secrets untold." },

{ character: 'Human', text: "Please, I just want to go home. I won't disturb your domain any longer." },

{ character: 'Creature', text: "Very well, mortal. Leave these woods and trouble it no more. Remember to never forget your place in this world." },

{ character: 'Human2', text: "Hello there user! My name is Mika and you'll be helping me kill the wumpus. Click the next button and choose a cave to enter." }

];

let currentLine = 0;

const humanImg = document.getElementById('human');

const creatureImg = document.getElementById('creature');

const human2Img = document.getElementById('human2');

const dialogueBox = document.getElementById('dialogue-box');

const dialogueText = document.getElementById('dialogue-text');

const nextButton = document.getElementById('next-button');

const welcomeScreen = document.getElementById('welcome-screen');

function showCharacter(character) {

humanImg.classList.remove('visible', 'enter', 'exit', 'hidden');

creatureImg.classList.remove('visible', 'enter', 'exit', 'hidden');

human2Img.classList.remove('visible', 'enter', 'exit', 'hidden');

if (character === 'Human') {

humanImg.classList.add('enter');

creatureImg.classList.add('hidden');

} else if (character === 'Creature') {

creatureImg.classList.add('enter');

humanImg.classList.add('hidden');

}

else if (character == 'Human2') {

human2Img.classList.add('enter');

creatureImg.classList.add('hidden');

}

function typewriter(text, onComplete) {

let index = 0;

dialogueText.textContent = '';

const speed = 50;

function type() {

if (index < text.length) {

dialogueText.textContent += text.charAt(index);

index++;

setTimeout(type, speed);

} else if (onComplete) {

onComplete();

}

type();

}

function updateScene() {

const line = dialogue[currentLine];

if (line.character === 'Narrator') {

humanImg.classList.add('hidden');

creatureImg.classList.add('hidden');

human2Img.classList.add('hidden');

dialogueBox.classList.add('narrator');

} else {

dialogueBox.classList.remove('narrator');

showCharacter(line.character);

}

typewriter(line.text, () => {

if (currentLine < dialogue.length - 1) {

nextButton.disabled = false;

} else {

nextButton.disabled = true;

}

});

nextButton.disabled = true;

if (currentLine >= dialogue.length - 2) {

welcomeScreen.classList.remove('hidden');

welcomeScreen.classList.add('visible-enter');

}

nextButton.addEventListener('click', () => {

currentLine++;

updateScene();

});

updateScene();

<> Animation.html X JS script.js
<>Animation.html > html
1 <!DOCTYPE html>
2 <html lang="en">
<meta charset="UTF-8">
# styles.css
<title>Animated Encounter</title>
<link rel="stylesheet" href="styles.css">
3
<head>
4
5
6
7
</head>
8
<body>
9
10
11
> Find
<div id="story-container">
<img id="human" class="character hidden" src="images/human.png" alt="Human">
<img id="creature" class="character hidden" src="images/creature.png" alt="Creature">
<img id="human2" class="character hidden" src="images/human2.png" alt="Human2">
<div id="dialogue-box" class="dialogue-box hidden">
<p id="dialogue-text"></p>
</div>
<button id="next-button">Next</button>
<div id="welcome-screen" class="welcome-screen hidden">
<h1>Welcome to Hunt the Wumpus</h1>
</div>
</div>
<script src="script.js"></script>
12
13
14
15
16
17
18
19
20
21
22
</body>
23
</html>
24

64
.visible.enter {
65
66
opacity: 1;
visibility: visible;
67
68
69
.dialogue-box {
79
70
71
ララ
72
73
74
75
78
3
position: absolute;
bottom: 50px;
left: 50%;
transform: translate(-50%, 0);
width: 60%;
padding: 20px;
background: rgba(0, 0, 0, 0.7);
color: white;
border-radius: 5px;
narrator {
text-align: center;
position: absolute;
top: 50%;
85
left: 50%;
87
width: 80%;
88
89
transform: translate(-50%, -50%);
font-style: italic;
background: rgba(0, 0, 0, 0.5);
90
3
#next-button {
position: absolute;
right: 20px;
bottom: 20px;
96
padding: 10px 20px;
97
font-size: 16px;
background: #333;
color: white;
100
border: none;
181
191
border-radius: 5px;
182
192
cursor: pointer;
103
104
184
105
.welcome-screen {
106
position: absolute;
107
top: 50%;
108
left: 50%;
109
transform: translate(-50%, -50%);
110
text-align: center;
111
opacity: 0;
visibility: hidden;
transition: opacity 10s ease, visibility 10s ease;
113
114
7
115
115
116
11b
117
opacity: 1;
118
.visible-enter {
visibility: visible;
119
120
#welcome-screen h1 {
font-family: Arial, sans-serif;
font-size: 36px;
126
J
color: #ffffff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
1
body, html {
margin: 0;
3
padding: 0;
height: 100%;
font-family: 'Arial', sans-serif;
32
33
background: url('images/forestbackground.png') no-repeat center center fixed;
background-size: cover;
34
35
<> Animation.html
JS script.js
# styles.css
×
#styles.css.character
26 @keyframes enterFromLeft {
100% {
left: 10%;
opacity: 1;
visibility: visible;
36
37
}
38
#story-container {
position: relative;
width: 100%;
height: 100%;
39
@keyframes exitToLeft {
40
0% {
41
left: 10%;
42
opacity: 1;
}
43
44
100% {
.character {
position: absolute;
45
46
8
bottom: 10%;
left: -20%;
width: 20%;
opacity: 0;
47
left: -20%;
opacity: 0;
visibility: hidden;
48
49
}
50
51
visibility: hidden;
52
.character.enter {
animation: enterFrom Left 1s forwards;
transition: opacity 2s ease, visibility 2s ease;
53
}
}
54
55
0% {
@keyframes enterFromLeft {
left: -20%;
56
.character.exit {
animation: exitToLeft 1s forwards;
57
}
58
59
opacity: 0;
visibility: visible;
}
60
.hidden {
61
transform: translate(-50%, 100%);
62
}
4
100% {
left: 10%;
opacity: 1;
visibility: visible;
Q Search
63
64
.visible.enter {
65
66
opacity: 1;
visibility: visible;
67
5:24 PM
3/10/2024
PRE

Expert Solution

Step by step

Solved in 3 steps with 1 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

Similar questions