<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- <div> element that contains the image and story text container -->
<div id="game-container">
<!-- <div> element that contains the story text -->
<div id="text-container">
<p id="story-text">Click Play to start the game</p>
</div>
</div>
<!-- <div> element that displays the buttons -->
<div id="button-container">
<button onclick="scene1()">Play</button>
</div>
<script src="script.js"></script>
</body>
</html>
@font-face {
src: url("/resources/fonts/Montserrat-Regular.ttf");
}
@font-face {
src: url("/resources/fonts/DelaGothicOne-Regular.ttf");
}
html {
box-sizing: border-box;
height: 100vh;
}
body {
text-align: center;
background-image: url("https://i.pinimg.com/736x/4e/b7/1a/4eb71ac510a3e088114585aa571276bb.jpg");
/* background-color: indigo; */
/* background: -webkit-linear-gradient(to right,maroon, indigo);
background: linear-gradient(to right, maroon, indigo); */
font-family:'Alkatra', cursive;
}
h1 {
color: #eeeeee;
font-size: 2.5em;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
font-family: "Dela Gothic One", sans-serif;
margin-top: 1%;
}
#game-container {
background-color: #000000;
margin: auto;
height: 55vh;
width: 80%;
background-image: url("https://c4.wallpaperflare.com/wallpaper/426/546/364/adventure-time-landscape-wallpaper-preview.jpg");
background-size: cover;
background-position: center center;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-moz-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
position: relative;
border-radius: 30px;
}
#text-container {
width: 85%;
padding: 0 8px;
bottom: 0;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
margin-bottom: 15px;
border-radius: 15px;
background-color: rgba(256, 256, 256, 0.7);
}
p {
font-size: 1em;
font-family: "Montserrat", sans-serif;
}
button {
background-color: orange;
height: auto;
border-radius: 30px;
font-size: 24px;
color: aqua;
border: none;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
padding: 10px 26px;
margin: 5px 10px;
transition-duration: 0.3s;
font-family: "Dela Gothic One", sans-serif;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
#button-container {
margin: 3% auto;
}
button:hover {
cursor: pointer;
background-color: #f5d064;
transform: scale(1.05);
}
button:focus {
outline: none;
}
const story = document.getElementById("story-text");
const gameContainer = document.getElementById("game-container");
const buttonContainer = document.getElementById("button-container");
//phân cảnh thứ 1 sau khi bấm nút play
function scene1() {
story.innerHTML = "Nếu hôm nay Hưng tiếp không làm bài tập?";
buttonContainer.innerHTML = "<button onclick='scene2()'>Vẫn Bình Thường</button> <button onclick='scene3()'>Không hiểu bài</button>";
gameContainer.style.backgroundImage = "url('https://cdna.artstation.com/p/assets/images/images/032/002/410/large/pol-sanjuan-hora-de-aventuras-line-art-a-color.jpg?1605195279')";
}
// Phân cảnh thứ 2
function scene2() {
}
// Phân cảnh 3
function scene3() {
}