Compare commits

...

55 Commits

Author SHA1 Message Date
klikev
7f8d1aa147 dada 2024-09-04 22:10:36 +02:00
pbg2h23akl
60d36f4a7a background 2024-09-03 11:20:32 +02:00
klikev
02bfc04ef6 coooooked 2024-09-01 20:15:12 +02:00
klikev
d6cf544abc cooked 2024-09-01 20:05:11 +02:00
klikev
ba4bd93f03 Kevin hat gecooked 2024-09-01 19:58:05 +02:00
76b4fdb33c restartbutton 2024-09-01 19:20:47 +02:00
klikev
571e2108d1 joooooasd 2024-09-01 19:11:35 +02:00
klikev
c1dd8bdc8e joooo 2024-09-01 19:00:35 +02:00
7f5a751f64 bearbeitet 2024-09-01 18:55:44 +02:00
klikev
47eb94aa4b endlich funktioniert 2024-09-01 12:58:17 +02:00
klikev
ecedf0d8c1 Funktion added schauen ob der spieler die gewünschte anzahl an richtige entscheidungen getroffen hat 2024-08-31 19:53:22 +02:00
klikev
17625c305e hilfe 2024-08-31 19:38:24 +02:00
6cd16d5217 tutorial 2024-08-31 17:30:29 +02:00
klikev
6b8e5eb9fc Kommentare bitte lesen Jan, falls du damit arbeitest 2024-08-31 13:01:51 +02:00
pbg2h23akl
754ead79e5 jo 2024-08-29 11:33:51 +02:00
pbg2h23akl
5096c1d4d9 Merge branch 'main' of https://git.bib.de/PBG2H23AKL/FEE_MathRunner 2024-08-29 09:08:01 +02:00
pbg2h23akl
f4986425b4 clean 2024-08-29 09:07:41 +02:00
65702fd84a pewpew 2024-08-29 09:07:24 +02:00
pbg2h23akl
39b6a79837 skipidi 2024-08-29 08:58:03 +02:00
68a6fadb1d Merge branch 'main' of https://git.bib.de/PBG2H23AKL/FEE_MathRunner 2024-08-29 08:52:35 +02:00
d0c7c8e438 skipidi 2024-08-29 08:52:29 +02:00
pbg2h23akl
4be7b001a2 asdwa 2024-08-29 08:52:12 +02:00
9bdfca3250 spieler höhe angepasst 2024-08-29 08:48:55 +02:00
pbg2h23akl
8427682b37 relative 2024-08-29 08:47:40 +02:00
45a4164d9f Spieler kann nicht aus die gelbe Box laufen 2024-08-29 08:43:21 +02:00
a56345cc45 Merge branch 'main' of https://git.bib.de/PBG2H23AKL/FEE_MathRunner 2024-08-29 08:37:09 +02:00
c2ef7f59f1 fuchs ist fest im screen relative 2024-08-29 08:36:56 +02:00
pbg2h23akl
04b790df30 rechnungen Rechnen 2024-08-29 08:35:43 +02:00
pbg2h23akl
1447e2c539 spielerZahl 2024-08-29 08:23:25 +02:00
pbg2h23akl
332063861c jkhjk 2024-08-29 08:19:38 +02:00
d8d20a7b3c bewegung 2024-08-29 08:18:22 +02:00
pbg2h23akl
5980e2e42c besser 2024-08-27 11:11:37 +02:00
365c3ca139 Merge branch 'main' of https://git.bib.de/PBG2H23AKL/FEE_MathRunner 2024-08-27 10:23:09 +02:00
b26f9cead5 intervall 2024-08-27 10:22:57 +02:00
pbg2h23akl
0e399e26d9 Intervall 2024-08-27 10:22:55 +02:00
pbg2h23akl
5fd902d612 Merge branch 'main' of https://git.bib.de/PBG2H23AKL/FEE_MathRunner 2024-08-27 10:18:11 +02:00
pbg2h23akl
02855c12fc wow 2024-08-27 10:17:35 +02:00
d485486b00 Spieler läuft immer 2024-08-27 10:13:36 +02:00
1ee1c98954 animation variable gemacht 2024-08-26 15:13:13 +02:00
klikev
a66ffaf11e adsadas 2024-08-25 18:13:50 +02:00
klikev
d15a7a1189 fixed 2024-08-22 15:20:37 +02:00
pbg2h23akl
5cb687f97b neu 2024-08-22 09:59:10 +02:00
pbg2h23akl
a19539ae57 asdwa 2024-07-04 11:19:55 +02:00
pbg2h23akl
40e54fae40 dasdwadad 2024-07-04 11:15:55 +02:00
f211a272c9 Script optimiert 2024-07-04 10:32:27 +02:00
pbg2h23akl
9fbf6f1103 asdwa 2024-07-04 10:23:32 +02:00
8609314c73 playerRun 2024-07-04 10:22:40 +02:00
pbg2h23akl
58db29a4ea js Kevin 2024-07-04 10:08:53 +02:00
pbg2h23akl
6889abff79 SpielRaum in die Mitte aligned 2024-07-02 10:20:56 +02:00
pbg2h23akl
6a8109cc34 StartScreen erstellt 2024-07-02 10:19:26 +02:00
pbg2h23akl
a3d1d1bc5b asda 2024-06-27 11:01:20 +02:00
33e48cb2c3 fvfvfsv 2024-06-27 11:00:09 +02:00
323e27648d ouzvoutc7tczutctcztczgczgcz 2024-06-27 10:31:37 +02:00
pbg2h23akl
ae7b1e61bc fixed 2024-06-27 09:39:52 +02:00
pbg2h23akl
52bce1e4a6 ad 2024-06-27 09:36:42 +02:00
11 changed files with 596 additions and 26 deletions

View File

@@ -1,39 +1,126 @@
*{
color: white;
color: black;
font-size: 30px;
}
body{
overflow: hidden;
}
#spielRaum{
width: 1000px;
height: 1000px;
margin: 0px;
background-color: yellow;
height: 800px;
margin: auto;
background-image: url("../pics/background.jpg");
position: relative;
}
body{
height: 100%;
margin: 0px;
}
#tom{
width: 100px;
height: 200px;
background-color: blueviolet;
position: absolute;
bottom: 40px;
left: 200px;
#tom img{
width: 300px;
}
#fuchs{
#tom{
position: fixed;
display: none;
}
#fuchs {
position: relative;
bottom: -400px;
z-index: 59;
}
#fuchs img{
width: 200px;
height: 90px;
background-color: aqua;
position: absolute;
top: 80px;
left: 20px;
left: 50px;
z-index: 60;
}
#enemy img{
width: 220px;
z-index: 51;
}
#enemy{
width: 220px;
height: 200px;
background-color: red;
position: absolute;
bottom: 30px;
right: 40px;
position: relative;
width: 20%;
float: right;
z-index: 50;
}
#enemyZahl{
text-align: center;
color: white;
text-shadow:
2px 2px 2px black,
-2px 2px 2px black,
2px -2px 2px black,
-2px -2px 2dvi black;
font-weight: bold;
}
.flexbox{
display: flex;
flex-direction: row;
}
#rechnungen{
padding: 0px;
position: relative;
top: 1px;
justify-content: space-between;
width: 100%;
}
#rechnung1, #rechnung2 {
width: 20%;
padding: 20px;
text-align: center;
z-index: 10;
position: relative;
}
#rechnung1{
background-color: rgb(0, 225, 255);
border-radius: 15px;
outline: 8px solid black;
left: 20px;
}
#rechnung2{
background-color: red;
border-radius: 15px;
outline: 8px solid black;
right: 20px;
}
#fuchsZahl{
padding-left: 100px;
font-size: 40px;
font-weight: bold;
width: 10%;
z-index: 59;
color: white;
text-shadow:
2px 2px 2px black,
-2px 2px 2px black,
2px -2px 2px black,
-2px -2px 2dvi black;
}
#hitbox1, #hitbox2{
width: 50px;
height: 10px;
}
#restartButton
{
width: 200px;
height: 100px;
position: relative;
left: 40%;
top: -10%;
display:none;
background-color: orange;
border-radius: 15px;
outline: 8px solid black;
}
#winText, #loseText{
width: 30%;
display: none;
position: relative;
text-align: center;
top: -15%;
left: 35%;
background-color: white;
border-radius: 15px;
outline: 8px solid black;
}

54
css/startScreenLayout.css Normal file
View File

@@ -0,0 +1,54 @@
body, h1, button {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}
#spielRaum {
text-align: center;
padding: 20px;
background-color: #ffffffcc;
width: 1000px;
height: 700px;
margin: auto;
position: relative;
}
h1 {
font-size: 2.5em;
color: #333;
margin-bottom: 20px;
text-shadow: 1px 1px 2px #fff;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 15px 30px;
border-radius: 25px;
cursor: pointer;
font-size: 1.2em;
transition: background-color 0.3s, transform 0.3s;
}
button:hover {
background-color: #45a049;
transform: scale(1.1);
}
button:focus {
outline: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

View File

@@ -9,20 +9,39 @@
<body>
<div id="spielRaum">
<div id="rechnungen" class="flexbox">
<div id="rechnung1">
<div id="rechnung1Text">*5</div>
<div id="hitbox1"></div>
</div>
<div id="rechnung2">
<div id="rechnung2Text">+5</div>
<div id="hitbox2"></div>
</div>
</div>
<div id="tom">
<img src="pics/tom_1.png" alt="tom">
</div>
<div id="fuchs">
<div id="fuchsZahl">0</div>
<img src="pics/fuchs_1.png" alt="fuchs">
</div>
<div id="enemy">
<div id="enemyZahl">100</div>
<img src="pics/enemy_1.png" alt="Gegner">
</div>
<div id="winText">Hurra du hast das Müllmonster besiegt</div>
<div id="loseText">Oh nein, das Müllmonster war zu stark</div>
<button id="restartButton">Neustart</button>
</div>
<Script src="js/rechnungen.js"></Script>
<Script src="js/funktionen.js"></Script>
<Script src="js/allg.js"></Script>

View File

@@ -1,9 +1,27 @@
// animation
let playerAnim = [];
let tomAnim = [];
let enemyAnim = [];
//player
let playerAnimState = 0;
let runDirection = 0;
let runSpeed = 18;
let animationSpeed = 50;
let currentPosition = 0;
let player = document.querySelector("#fuchs");
let playerSprite = document.querySelector("#fuchs img");
let dIsPressed = false;
let aIsPressed = false;
let runAnimation;
// Map
const boxBorderLeft = -40;
const boxBorderRight = 840;
fillArrays();
startAnimation();
//currentPosition = window.getComputedStyle(player).left;
// Pictures
function fillArrays()
{
fillArray("fuchs_", 8, playerAnim);
@@ -11,7 +29,77 @@ function fillArrays()
fillArray("enemy_",3, enemyAnim);
}
playerAnim.forEach(function(player)
// startGame
let start = setInterval(gameLoop, 50);
function gameLoop()
{
console.log(player);
move();
}
//-------------------------------------------------------------- Animation -----------------------------------------------------------------------
function startAnimation()
{
runAnimation = setInterval(playerRunAnim, animationSpeed);
}
function playerRunAnim()
{
if(playerAnimState == 8)
{
playerAnimState = 0;
}
playerSprite.src = playerAnim[playerAnimState];
playerAnimState++;
}
//------------------------------------------------------------- checkInput ------------------------------------------------------------------
document.addEventListener('keydown', function(event) {
if(event.key == "d")
{
if(runDirection != 1)
{
playerSprite.style.transform = 'scaleX(1)';
}
runDirection = 1;
dIsPressed = true;
}
else if(event.key == "a")
{
if(runDirection != -1)
{
playerSprite.style.transform = 'scaleX(-1)';
}
runDirection = -1;
aIsPressed = true;
}
});
document.addEventListener('keyup', function(event)
{
if(event.key == "d")
{
dIsPressed = false;
}
else if(event.key == "a")
{
aIsPressed = false;
}
if(!aIsPressed && !dIsPressed)
{
runDirection = 0;
}
});
//---------------------------------------------------------- Move Player ------------------------------------------------------------
function move()
{
let nextPosition = currentPosition + runDirection * runSpeed;
if(nextPosition > boxBorderLeft && nextPosition < boxBorderRight)
{
currentPosition = nextPosition;
}
player.style.left = currentPosition + "px";
}

View File

@@ -1,7 +1,27 @@
function fillArray(name, number, playerAnim)
{
for (let i = 1; i++; i <= number) {
playerAnim[i] = name + i + ".png";
for (let i = 1 ; i <= number ; i++) {
playerAnim[i-1] = "pics/" + name + i + ".png";
}
}
function addToScore(currentScore,zahl,rechenOperator){
let ergebnis;
if(rechenOperator == "Plus"){
ergebnis = currentScore + zahl;
}
if(rechenOperator == "Minus"){
ergebnis = currentScore - zahl;
}
if(rechenOperator == "Mal"){
ergebnis = currentScore * zahl;
}
if(rechenOperator == "Geteilt"){
ergebnis = currentScore / zahl;
}
return ergebnis;
}
function addOneToStreak(win){
win++;
return win;
}

254
js/rechnungen.js Normal file
View File

@@ -0,0 +1,254 @@
const rechnungen = document.querySelector("#rechnungen");
//auf welcher höhe starten die Rechnungen?
const rechnungenTopStart = -100;
let rechnungenTop = rechnungenTopStart;
rechnungen.style.top = rechnungenTop + "px";
//speed der Rechnungen, wie schnell sie fallen
const speedRechnungen = 0.35;
//maximale pixel Tiefe bis sie respawnen
const maxTiefeRechunngen = 750;
//Rechnungen und die 4er Rechenzeichen in unserem Spiel in einem Array
const rechenzeichen = ['+','-','*',':'];
const rechnung1Text = document.querySelector("#rechnung1Text");
const rechnung2Text = document.querySelector("#rechnung2Text");
//RechnungenSpawn Parameter
const maxZahl = 100;
const maxMal = 11;
const maxDurch = 5;
//wie viele Rechnungen sollen nacheinander spawnen
let gesamtzahlRechnungen = 5;
//Die Fuchszahl die dem Spieler angezeigt wird
const fuchsZahl = document.querySelector("#fuchsZahl");
//Elemete für überlappungs Check
const fuchsImg = document.querySelector("#fuchs img");
//die ersten rechnungen erscheinen sofort
rechnungenSpawn(maxZahl,maxMal,maxDurch);
//wie viele Rechnungen bisher gespawed sind
let counterRechnungen = 1;
//rechnung berührt?
let bereitsEinmalOverlappt = false;
//wie viele richtige Entscheidungen hat der Spieler zurzeit getroffen
let richtigeEntscheidungen = 0;
//Wie viele richtige entscheidungen braucht der Spieler um am ende, gegen das Müll monster, zu gewinnen
let zielRichtigeEntscheidungen = 3;
let gameWon = false;
//Variabeln für die WinAnimation
const enemy = document.querySelector("#enemy");
const enemyZahl = document.querySelector("#enemyZahl");
let voreisntellungenFertig = false;
//auf welcher höhe startet der Enemy?
const enemyTopStart = -700;
let enemyTop = enemyTopStart;
enemy.style.top = enemyTop + "px";
//speed des Enemys, wie schnell er fallen soll
const speedEnemy = 0.2;
//maximale pixel Tiefe bis der Enemy aufhört zu fallen
const maxTiefeEnemy = 100;
//Button
const restartButton = document.querySelector("#restartButton");
const winText = document.querySelector("#winText");
const loseText = document.querySelector("#loseText");
const tom = document.querySelector("#tom");
const tomImg = document.querySelector("#tom img");
//returned den int in der Rechnung, nur die zahl ohne rechenzeichen
function rechnung1Int(){
let text = rechnung1Text.innerText;
//entfernen vom rechenzeichen (+,-,*,:)
text = text.substring(1);
let zahl = parseInt(text);
return zahl;
}
//returned den int in der Rechnung, nur die zahl ohne rechenzeichen
function rechnung2Int(){
let text = rechnung2Text.innerText;
//entfernen vom rechenzeichen (+,-,*,:)
text = text.substring(1);
let zahl = parseInt(text);
return zahl;
}
//returned das rechenzeichen der derzeitigen Rechnung ohne zahl
function rechnung1Zeichen(){
let text = rechnung1Text.innerText;
return text.charAt(0)
}
//returned das rechenzeichen der derzeitigen Rechnung ohne zahl
function rechnung2Zeichen(){
let text = rechnung2Text.innerText;
return text.charAt(0)
}
function rechnungMoven(speed,maxtiefe){
let nextTop = rechnungenTop + 10 * speed;
rechnungen.style.top = nextTop + "px";
if(nextTop > maxtiefe){
rechnungen.style.top = rechnungenTopStart + "px";
rechnungenTop = rechnungenTopStart;
rechnungenSpawn(maxZahl,maxMal,maxDurch);
bereitsEinmalOverlappt = false;
counterRechnungen++;
}else{
rechnungenTop = nextTop;
}
}
function generateRandomZahl(index,maxzahl,maxMal,maxDurch){
if(rechenzeichen[index] == '+' || rechenzeichen[index] == '-'){
return randomZahl = Math.floor(Math.random()*maxzahl);
}
if(rechenzeichen[index] == '*'){
return randomZahl = Math.floor(Math.random()*maxMal);
}
if(rechenzeichen[index] == ':'){
return randomZahl = Math.floor(Math.random()*maxDurch) + 1;
}
return 0;
}
//
function generateRandomIndex(){
let random = Math.random();
if(random < 0.5){
return 0;
}
if(random < 0.8){
return 1;
}
if(random < 0.9){
return 2;
}else{
return 3;
}
}
function rechnungenSpawn(){
let index = generateRandomIndex();
let randomZahl = 0;
randomZahl = generateRandomZahl(index,maxZahl,maxMal,maxDurch);
while(ergebnis(parseInt(fuchsZahl.innerText),randomZahl,rechenzeichen[index]) < 0){
randomZahl = generateRandomZahl(index,maxZahl,maxMal,maxDurch);
}
rechnung1Text.innerText = rechenzeichen[index] + randomZahl.toString();
index = generateRandomIndex();
randomZahl = generateRandomZahl(index,maxZahl,maxMal,maxDurch);
while(ergebnis(parseInt(fuchsZahl.innerText),randomZahl,rechenzeichen[index]) < 0){
randomZahl = generateRandomZahl(index,maxZahl,maxMal,maxDurch);
}
rechnung2Text.innerText = rechenzeichen[index] + randomZahl.toString();
}
function checkOverlap(objekt1, objekt2) {
const rect1 = objekt1.getBoundingClientRect(); //sorgt dafür, dass man die position der grenzen des Elements bekommt
const rect2 = objekt2.getBoundingClientRect();
return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom); //true wenn die objekte überlappen
}
function rechne(){
if(checkOverlap(fuchsImg,rechnung1Text)){
fuchsZahl.innerText = ergebnis(parseInt(fuchsZahl.innerText),rechnung1Int(),rechnung1Zeichen());
console.log("Rechnung 1");
bereitsEinmalOverlappt = true;
if(ergebnis(parseInt(fuchsZahl.innerText),rechnung1Int(),rechnung1Zeichen()) >= ergebnis(parseInt(fuchsZahl.innerText),rechnung2Int(),rechnung2Zeichen())){
richtigeEntscheidungen++;
}
}
if(checkOverlap(fuchsImg,rechnung2Text)){
fuchsZahl.innerText = ergebnis(parseInt(fuchsZahl.innerText),rechnung2Int(),rechnung2Zeichen());
console.log("Rechnung 2");
bereitsEinmalOverlappt = true;
if(ergebnis(parseInt(fuchsZahl.innerText),rechnung2Int(),rechnung2Zeichen()) >= ergebnis(parseInt(fuchsZahl.innerText),rechnung1Int(),rechnung1Zeichen())){
richtigeEntscheidungen++;
}
}
}
function ergebnis(zahl1,zahl2,rechenzeichen){
if(rechenzeichen == '+'){
return zahl1 + zahl2;
}
if(rechenzeichen == '-'){
return zahl1 - zahl2;
}
if(rechenzeichen == '*'){
return zahl1 * zahl2;
}
if(rechenzeichen == ':'){
return zahl1 / zahl2;
}
return 0;
}
function battle(){
if(parseInt(enemyZahl.innerText) > 0 && parseInt(fuchsZahl.innerText) > 0){
enemyZahl.innerText = "" + (parseInt(enemyZahl.innerText) - 1);
fuchsZahl.innerText = "" + (parseInt(fuchsZahl.innerText) - 1);
}else{
restartButton.style.display = "block";
if(gameWon){
winText.style.display = "block";
tom.style.display = "block";
tomImg.src = "pics/tom_3.png";
}else{
loseText.style.display = "block";
tom.style.display = "block";
tomImg.src = "pics/tom_1.png";
}
}
}
function playWinAnimation(){
if(gameWon){
if(!voreisntellungenFertig){
enemyZahl.innerText = "" + (parseInt(fuchsZahl.innerText) - Math.floor(Math.random()*50));
voreisntellungenFertig = true;
}
enemyMoven(speedEnemy,maxTiefeEnemy);
}
}
function playLoseAnimation(){
if(gameWon == false){
if(!voreisntellungenFertig){
enemyZahl.innerText = "" + (parseInt(fuchsZahl.innerText) + Math.floor(Math.random()*100));
voreisntellungenFertig = true;
}
enemyMoven(speedEnemy,maxTiefeEnemy);
}
}
function enemyMoven(speed,maxtiefe){
let nextTop = enemyTop + 10 * speed;
if(nextTop > maxtiefe){
battle();
}else{
enemy.style.top = nextTop + "px";
enemyTop = nextTop;
}
}
function gameloopRechnungen(){
if(counterRechnungen <= gesamtzahlRechnungen){
rechnungMoven(speedRechnungen,maxTiefeRechunngen);
if(!bereitsEinmalOverlappt){
rechne();
}
}else{
if(richtigeEntscheidungen >= zielRichtigeEntscheidungen){
gameWon = true;
playWinAnimation();
console.log("Müllmonster besiegt!!!");
}else{
gameWon = false;
playLoseAnimation();
}
}
}
restartButton.addEventListener("click",()=>{
location.reload();
});
setInterval(gameloopRechnungen, 10);

27
js/startjs.js Normal file
View File

@@ -0,0 +1,27 @@
const weiterButton = document.querySelector("#startScreen button");
let storyAbschnitt = 0;
let story = ["Oh Nein, Das Müllmonster ist ausgebrochen!",
"Wir müssen es wieder einfangen!",
"Du bist ein Fuchs und bewegst dich mit A und D",
"Du hast einen Zahl über deinen Kopf",
"Und dein Ziel ist es, diese so groß wie möglich zu machen",
"Laufe also durch die richtigen Rechnungen um deine Zahl zu vergrößern",
"Wenn du am Ende die größere Zahl als das Müllmosnter hast, gewinnst du",
"Viel Glück"];
let text = document.getElementById("storyText");
let tomAnim = ["pics/tom_1.png", "pics/tom_2.png", "pics/tom_3.png"]
let tom = document.getElementById("tomBild");
weiterButton.addEventListener("click", ()=>{
if(storyAbschnitt <= 7)
{
text.innerText = story[storyAbschnitt];
}
else
{
window.location.href = 'index.html';
}
tom.src = tomAnim[storyAbschnitt%3];
console.log(tomAnim[storyAbschnitt%3]);
storyAbschnitt++;
});

BIN
pics/RechenBlockBlau.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 753 B

BIN
pics/RechenBlockRot.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 660 B

BIN
pics/background.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 763 KiB

21
startScreen.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/startScreenLayout.css">
<title>MathRunner</title>
</head>
<body>
<div id="spielRaum">
<div id="startScreen">
<h1 id = "storyText" >Willkommen zu MathRunner</h1>
<button id="startButton">Weiter</button>
</div>
<div id="tom">
<img id="tomBild" src="pics/tom_1.png" alt="tom">
</div>
</div>
<script src="js/startjs.js"></script>
</body>
</html>