553 lines
19 KiB
HTML
553 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="hu">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>1. feladat</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
|
|
<style type="text/css" media="screen,projection,print">
|
|
body {
|
|
margin: auto;
|
|
}
|
|
|
|
header {
|
|
margin-top: 50px;
|
|
margin-bottom: 80px;
|
|
}
|
|
|
|
section {
|
|
min-width: 400px;
|
|
padding: 20px;
|
|
margin: 10px auto 10px auto;
|
|
}
|
|
|
|
h1,
|
|
p {
|
|
text-align: center;
|
|
}
|
|
|
|
p {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
img {
|
|
margin-top: -25px;
|
|
display: block;
|
|
position: absolute;
|
|
}
|
|
|
|
#table {
|
|
cursor: crosshair;
|
|
background: orange;
|
|
font-size: 2em;
|
|
text-align: center;
|
|
margin: auto;
|
|
border-color: orange;
|
|
box-shadow: 10px 10px 5px #d0d0d0;
|
|
}
|
|
|
|
.button {
|
|
background-color: #4CAF50;
|
|
/* Green */
|
|
border: none;
|
|
color: white;
|
|
padding: 16px 32px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin: 4px 2px;
|
|
transition-duration: 0.4s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button1 {
|
|
background-color: white;
|
|
color: black;
|
|
border: 2px solid #4CAF50;
|
|
}
|
|
|
|
.button1:hover {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
}
|
|
|
|
|
|
.buttonred {
|
|
background-color: white;
|
|
color: black;
|
|
border: 2px solid #f44336;
|
|
|
|
}
|
|
|
|
.buttonred:hover {
|
|
background-color: #f44336;
|
|
color: white;
|
|
}
|
|
|
|
.red {
|
|
background-color: red;
|
|
}
|
|
|
|
.buttonblue {
|
|
background-color: white;
|
|
color: black;
|
|
border: 2px solid #008CBA;
|
|
}
|
|
|
|
.buttonblue:hover {
|
|
background-color: #008CBA;
|
|
color: white;
|
|
}
|
|
|
|
.blue {
|
|
background-color: #008CBA;
|
|
}
|
|
|
|
.buttonorange {
|
|
background-color: white;
|
|
color: black;
|
|
border: 2px solid orange;
|
|
}
|
|
|
|
.buttonorange:hover {
|
|
background-color: orange;
|
|
color: white;
|
|
}
|
|
|
|
.orange {
|
|
background-color: orange;
|
|
}
|
|
|
|
input[type=number],
|
|
select {
|
|
max-width: 50px;
|
|
margin: 8px 0;
|
|
display: inline-block;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.vertical-center {
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 35%;
|
|
-ms-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.cell {
|
|
width: 50px;
|
|
padding: 0;
|
|
height: 50px;
|
|
color: #fcfcfc;
|
|
background-color: #999999;
|
|
}
|
|
|
|
.cellrowclicked {
|
|
background-color: #ff0000;
|
|
}
|
|
|
|
.conveyorbelt {
|
|
background-color: #444;
|
|
}
|
|
|
|
.cellclicked {
|
|
background-color: #000000;
|
|
}
|
|
</style>
|
|
<script>
|
|
var tt;
|
|
var nrow;
|
|
var ncell;
|
|
var belt;
|
|
var activeCell;
|
|
var index = 0;
|
|
var levels = 0;
|
|
var package;
|
|
var packages;
|
|
var simulationStopped = true;
|
|
|
|
class ConveyorBelt {
|
|
constructor(x, y) {
|
|
this.x = x;
|
|
this.y = y;
|
|
this.image = new Image();
|
|
this.image.width = 50;
|
|
this.image.height = 50;
|
|
tt[y][x].appendChild(this.image)
|
|
this.changeDirection(Direction.RIGHT)
|
|
}
|
|
changeDirection(d) {
|
|
switch (d) {
|
|
case Direction.LEFT:
|
|
this.image.src = 'img/arrowLeft.gif'
|
|
break;
|
|
case Direction.RIGHT:
|
|
this.image.src = 'img/arrowRight.gif'
|
|
break;
|
|
case Direction.UP:
|
|
this.image.src = 'img/arrowUp.gif'
|
|
break;
|
|
case Direction.DOWN:
|
|
this.image.src = 'img/arrowDown.gif'
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
this.direction = d;
|
|
}
|
|
}
|
|
|
|
class Package {
|
|
constructor() {
|
|
this.image = new Image();
|
|
this.image.src = "package.png";
|
|
this.image.style.zIndex = 2;
|
|
this.image.width = 50;
|
|
this.image.height = 50;
|
|
this.position = -1;
|
|
this.moving = false;
|
|
}
|
|
next() {
|
|
if (this.moving) {
|
|
this.position++;
|
|
if (this.position == index) {
|
|
this.position--;
|
|
this.image.remove();
|
|
this.moving = false;
|
|
this.position = -1;
|
|
} else {
|
|
tt[belt[this.position].y][belt[this.position].x].appendChild(this.image);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var Direction = {
|
|
DOWN: [1, 0],
|
|
RIGHT: [0, 1],
|
|
LEFT: [0, -1],
|
|
UP: [-1, 0]
|
|
}
|
|
|
|
function init() {
|
|
nrow = parseInt(document.getElementById("row").value);
|
|
ncell = parseInt(document.getElementById("column").value);
|
|
tt = new Array(nrow);
|
|
belt = new Array(nrow * ncell);
|
|
if (nrow < 5 || nrow > 15 || ncell < 5 || ncell > 15) {
|
|
alert("Tábla méret túl kicsi vagy túl nagy!");
|
|
return;
|
|
}
|
|
activeCell = undefined;
|
|
index = 0;
|
|
document.getElementById("table").innerHTML = "";
|
|
for (var i = 0; i < nrow; i++) {
|
|
var newrow = document.getElementById("table").insertRow(i);
|
|
tt[i] = new Array(ncell);
|
|
for (var j = 0; j < ncell; j++) {
|
|
tt[i][j] = newrow.insertCell(j);
|
|
tt[i][j].id = i * ncell + j;
|
|
tt[i][j].onclick = function () {
|
|
cellClicked(this);
|
|
};
|
|
tt[i][j].classList.add("cell");
|
|
tt[i][j].innerHTML = "";
|
|
}
|
|
}
|
|
levels=0;
|
|
|
|
}
|
|
|
|
function clearBackground() {
|
|
for (var i = 0; i < nrow; i++) {
|
|
for (var j = 0; j < ncell; j++) {
|
|
tt[i][j].classList.remove("cellrowclicked");
|
|
tt[i][j].classList.remove("cellclicked");
|
|
}
|
|
}
|
|
}
|
|
|
|
function cellClicked(obj) {
|
|
|
|
clearBackground();
|
|
simulationStopped = true;
|
|
document.getElementById("folytonos").classList.remove("blue");
|
|
document.getElementById("folytonos").innerHTML = "Folytonos működés";
|
|
var row = parseInt(obj.id / ncell);
|
|
var column = obj.id % ncell;
|
|
var yes;
|
|
tt[row][column].classList.add("cellclicked");
|
|
for (var j = 0; j < ncell; j++) {
|
|
if (j != column) {
|
|
tt[row][j].classList.add("cellrowclicked");
|
|
}
|
|
}
|
|
if (activeCell == undefined) {
|
|
if (column == 0 || row == 0 || column == nrow - 1 || row == ncell - 1) {
|
|
activeCell = new ConveyorBelt(column, row);
|
|
tt[row][column].classList.add('conveyorbelt')
|
|
belt[index] = activeCell;
|
|
index++;
|
|
} else {
|
|
alert("A futószalagnak a pálya szélén kell kezdődnie!")
|
|
}
|
|
} else {
|
|
if ((activeCell.x == column && activeCell.y - row <= 1 && activeCell.y - row >= -1) ||
|
|
(activeCell.y == row && activeCell.x - column <= 1 && activeCell.x - column >= -1)) {
|
|
if ((activeCell.x != column || activeCell.y != row) && !tt[row][column].classList.contains('conveyorbelt')) {
|
|
tt[row][column].classList.add('conveyorbelt');
|
|
if (activeCell.x == column) {
|
|
if (activeCell.y - row == 1) {
|
|
yes = Direction.UP;
|
|
} else {
|
|
yes = Direction.DOWN;
|
|
}
|
|
} else {
|
|
if (activeCell.x - column == 1) {
|
|
yes = Direction.LEFT;
|
|
} else {
|
|
yes = Direction.RIGHT;
|
|
}
|
|
}
|
|
belt[index - 1].changeDirection(yes);
|
|
activeCell = new ConveyorBelt(column, row);
|
|
belt[index] = activeCell;
|
|
belt[index].changeDirection(belt[index - 1].direction);
|
|
index++;
|
|
} else {
|
|
alert("A futoszalag nem mehet magába!")
|
|
}
|
|
} else {
|
|
alert("Csak szomszédos cellába folytatódhat a futószalag!");
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function undo() {
|
|
if(index>0){
|
|
index--;
|
|
activeCell = belt[index - 1];
|
|
tt[belt[index].y][belt[index].x].classList.remove("conveyorbelt");
|
|
tt[belt[index].y][belt[index].x].innerHTML = '';
|
|
belt[index] = null;
|
|
clearBackground();
|
|
}
|
|
}
|
|
|
|
function checkBelt(nonstop) {
|
|
clearBackground();
|
|
if (index == 0) {
|
|
alert("Nincsen futószalag!");
|
|
} else if (index == 1) {
|
|
alert("A futószalag túl rövid!");
|
|
} else {
|
|
if (activeCell.x == 0 || activeCell.y == 0 || activeCell.x == ncell - 1 || activeCell.y == nrow - 1) {
|
|
if (nonstop) {
|
|
simulationStopped = !simulationStopped;
|
|
if (simulationStopped) {
|
|
document.getElementById("folytonos").classList.remove("blue");
|
|
document.getElementById("folytonos").innerHTML = "Folytonos működés";
|
|
} else {
|
|
var dist = parseInt(prompt("Milyen időközönként jöjjenek a csomagok?")) - 1;
|
|
if (!(dist >= 0)) {
|
|
alert("A számnak nagyobbnak kell lennie 0-nál!");
|
|
simulationStopped = true;
|
|
return;
|
|
}
|
|
document.getElementById("folytonos").classList.add("blue");
|
|
document.getElementById("folytonos").innerHTML = "Folytonosság leállítása";
|
|
simulate(dist);
|
|
}
|
|
} else {
|
|
document.getElementById("inditas").classList.add("red");
|
|
document.getElementById("inditas").classList.remove("buttonred");
|
|
document.getElementById("inditas").disabled = true;
|
|
startBelt();
|
|
}
|
|
} else {
|
|
alert("A futószalagnak a pálya szélétől a szélére kell mennie!");
|
|
}
|
|
}
|
|
}
|
|
|
|
function startBelt() {
|
|
var speed = 1 / document.getElementById("speed").value * 1000;
|
|
package = new Package();
|
|
package.moving = true;
|
|
var timer = setInterval(function () {
|
|
package.next();
|
|
if (!package.moving) {
|
|
document.getElementById("inditas").classList.remove("red");
|
|
document.getElementById("inditas").classList.add("buttonred");
|
|
document.getElementById("inditas").disabled = false;
|
|
document.getElementById("folytonos").classList.remove("blue");
|
|
document.getElementById("folytonos").classList.add("buttonblue");
|
|
clearInterval(timer);
|
|
}
|
|
}, speed);
|
|
}
|
|
|
|
function simulate(dist) {
|
|
var x = 0;
|
|
var speed = 1 / document.getElementById("speed").value * 1000;
|
|
packages = new Array(index + 1);
|
|
for (let i = 0; i < packages.length; i++) {
|
|
packages[i] = new Package();
|
|
}
|
|
packages[0].moving = true;
|
|
var timer = setInterval(function () {
|
|
if (simulationStopped) {
|
|
for (var i = 0; i < packages.length; i++) {
|
|
packages[i].next();
|
|
}
|
|
if (!packages[x].moving) {
|
|
clearInterval(timer);
|
|
}
|
|
} else {
|
|
if (packages[x].position == dist) {
|
|
if (++x == packages.length) {
|
|
x = 0;
|
|
}
|
|
packages[x].moving = true;
|
|
}
|
|
for (var i = 0; i < packages.length; i++) {
|
|
packages[i].next();
|
|
}
|
|
}
|
|
}, speed);
|
|
}
|
|
|
|
function level(x) {
|
|
for (i = index; i >= 0; i--) {
|
|
|
|
undo();
|
|
}
|
|
document.getElementById("levelmemory").value = x;
|
|
if(x!=0){
|
|
document.getElementById("column").value = 6;
|
|
document.getElementById("row").value = 6;
|
|
}
|
|
init();
|
|
switch (x) {
|
|
case 1:
|
|
buttonEnabler();
|
|
document.getElementById("level1").classList.remove("button1");
|
|
for (let i = 0; i < 3; i++) {
|
|
cellClicked(tt[0][i]);
|
|
|
|
}
|
|
levels = 1;
|
|
|
|
break;
|
|
case 2:
|
|
buttonEnabler();
|
|
document.getElementById("level2").classList.remove("button1");
|
|
for (let i = 0; i < 6; i++) {
|
|
cellClicked(tt[0][i]);
|
|
|
|
}
|
|
levels = 2;
|
|
break;
|
|
case 3:
|
|
buttonEnabler();
|
|
document.getElementById("level3").classList.remove("button1");
|
|
for (let i = 2; i < 5; i++) {
|
|
cellClicked(tt[0][i]);
|
|
|
|
}
|
|
for (let i = 1; i < 6; i++) {
|
|
|
|
cellClicked(tt[i][4]);
|
|
}
|
|
levels = 3;
|
|
break;
|
|
case 4:
|
|
buttonEnabler();
|
|
document.getElementById("level4").classList.remove("button1");
|
|
var yy = 0;
|
|
var xx = 0;
|
|
var ctrctr = 0;
|
|
while(xx < 5 || 5 > yy)
|
|
{
|
|
cellClicked(tt[xx][yy])
|
|
if(ctrctr%2==0){xx++;}
|
|
else{yy++;}
|
|
ctrctr++;
|
|
}
|
|
levels = 4;
|
|
break;
|
|
case 0:
|
|
buttonEnabler();
|
|
document.getElementById("level0").classList.remove("button1");
|
|
levels = 0;
|
|
break;
|
|
default:
|
|
buttonEnabler();
|
|
document.getElementById("level0").classList.remove("button1");
|
|
levels = 0;
|
|
}
|
|
|
|
}
|
|
|
|
function buttonEnabler() {
|
|
for (i = 0; i < 5; i++) {
|
|
document.getElementById("level" + i).classList.add("button1");
|
|
}
|
|
levels = 0;
|
|
}
|
|
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body class="container" onload="init()">
|
|
<header>
|
|
<h1 class="display-4">Futószalag szimulátor</h1>
|
|
</header>
|
|
<div class="row">
|
|
<div class="col-md-1"></div>
|
|
<div class="col-sm-2"><button class="button" onclick="level(0)" id="level0">Custom</button></div>
|
|
<div class="col-sm-2"><button class="button button1" onclick="level(1)" id="level1">1.Pálya</button></div>
|
|
<div class="col-sm-2"><button class="button button1" onclick="level(2)" id="level2">2.Pálya</button></div>
|
|
<div class="col-sm-2"><button class="button button1" onclick="level(3)" id="level3">3.Pálya</button></div>
|
|
<div class="col-sm-2"><button class="button button1" onclick="level(4)" id="level4">4.Pálya</button></div>
|
|
<div class="col-md-1"></div>
|
|
</div>
|
|
<section>
|
|
<table id="table" align="center"></table>
|
|
</section>
|
|
<button class="button buttonorange" onclick="undo()">Visszavonás</button>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-3" style="padding-top: 10px;">
|
|
<div class="row">
|
|
<div class="col-sm-5">
|
|
<label for="row">Sor:</label>
|
|
<input type="number" onchange="if(document.getElementById('levelmemory').value==0){init()}else{this.value = 6}" min="5" max="15" id="row" value="6">
|
|
</div>
|
|
<div class="col-sm-7">
|
|
<label for="column">Oszlop:</label>
|
|
<input type="number" onchange="if(document.getElementById('levelmemory').value==0){init()}else{this.value = 6}" min="5" max="15" id="column" value="6">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<span>1</span><input type="range" min="1" max="10" value="1" id="speed" class="vertical-center" style="width: 80%;"><span style="float: right;">10</span><br>
|
|
<p style="margin-top: 10px;">Sebesség</p>
|
|
</div>
|
|
<div class="col-sm-3"><button class="button buttonblue" id="folytonos" onclick="checkBelt(true)">Folytonos működés</button></div>
|
|
<div class="col-sm-3"><button class="button buttonred" id="inditas" onclick="checkBelt(false)">Futószalag indítása</button></div>
|
|
</div>
|
|
<input type="hidden" id="levelmemory" value="0">
|
|
<script>
|
|
init();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|