2ちゃんねる ■掲示板に戻る■ 全部 1- 最新50    

■ このスレッドは過去ログ倉庫に格納されています

twigでパズギアを作った(ご自由にお使いください)

1 :ハザマさんだナ:2024/07/09(火) 18:57:31.26 ID:5lUOPhpyw
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Puzzle Gear Maze</title><style>body {font-family: Arial, sans-serif;
text-align: center;}
.maze {display: inline-block;margin-top: 20px;border: 2px solid black;padding: 5px;}
.row {white-space: nowrap;}
.cell {display: inline-block;width: 20px;height: 20px;border: 1px solid black;background-color: #fff;}
.wall {background-color: #000;width: 20px;height: 20px;
clip-path: polygon(50% 0%, 75% 25%, 75% 75%, 50% 100%, 25% 75%, 25% 25%);
transition: transform 1s linear;animation: rotate 2s linear infinite;}
.gear {width: 20px;height: 20px;background-color: #f00;
clip-path: polygon(50% 0%, 75% 25%, 75% 75%, 50% 100%, 25% 75%, 25% 25%);
transition: transform 1s linear;animation: rotate 2s linear infinite;position: relative; left:0px; top:-26px;}
.pgear {position: absolute;width: 20px;height: 20px;border-radius: 50%;background-color: #ddd;
border: 2px solid #999;box-sizing: border-box;position: relative; left:0px; top:0px;}
.pgear3 {position: absolute;width: 10px;height: 28px;border-radius: 50%;background-color: #ddd;border: 2px solid #999;box-sizing: border-box;
animation: rotate 5s linear infinite;position: relative; left:-26px; top:-6px;}
.pgear2 {position: absolute;width: 28px;height: 10px;border-radius: 50%;background-color: #ddd;
border: 2px solid #999;box-sizing: border-box;animation: rotate 5s linear infinite;
position: relative; left:-4px; top:-14px;}
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}}
</style></head><body><h1>Rotating Gear Maze</h1><div class="maze">{% for row in maze %}
<div class="row">{% for cell in row %}<div class="cell{% if cell == '#' %} pgear{% endif %}">
<div class="cell{% if cell == '#' %} pgear2{% endif %}"></div><div class="cell{% if cell == '#' %}
pgear3{% endif %}"></div>{% if cell == 'G' %}<div class="gear" id="gear-{{ loop.parent.loop.index }}-{{ loop.index }}"></div>
{% endif %}</div>{% endfor %}</div>{% endfor %}</div>
<li><a href="?idoux={{x1}}&idouy={{y1}}&action=right">右へ</a></li><li><a href="?idoux={{x1}}&idouy={{y1}}&action=left">左へ</a></li>
<li><a href="?idoux={{x1}}&idouy={{y1}}&action=up">上へ</a></li><li><a href="?idoux={{x1}}&idouy={{y1}}&action=down">下へ</a></li></body></html>

2 :ハザマさんだナ:2024/07/09(火) 18:58:40.65 ID:5lUOPhpyw
<?php
require_once 'vendor/autoload.php';$loader = new \Twig\Loader\FilesystemLoader(__DIR__);
$twig = new \Twig\Environment($loader);
$maze = [['#', '#', '#', '#', '#', '#', '#', '#'],['#', ' ', ' ', ' ', ' ', ' ', ' ', '#'],
['#', '#', '#', ' ', '#', ' ', '#', '#'],['#', ' ', ' ', ' ', '#', ' ', ' ', '#'],
['#', '#', '#', '#', '#', '#', '#', '#'],];
if (isset($_GET['idoux'])) {$x1 = $_GET['idoux'];$y1 = $_GET['idouy'];
if($_GET['action']=='right'){if($maze[$y1][$x1+1]!='#'){$x1 = $x1 + 1;}
}else if($_GET['action']=='left'){if($maze[$y1][$x1-1]!='#'){$x1 = $x1 - 1;}
}else if($_GET['action']=='up'){if($maze[$y1-1][$x1]!='#'){$y1 = $y1 - 1;}
}else if($_GET['action']=='down'){if($maze[$y1+1][$x1]!='#'){$y1 = $y1 + 1;}}
$selectedAction = $_GET['idoux'];$maze[$y1][$x1] = 'G';}else{$x1 = 4;$y1 = 1;$maze[$y1][$x1] = 'G';}
echo $twig->render('puzzle_gear_2.twig', ['maze' => $maze,'y1' => $y1,'x1' => $x1]);
?>

総レス数 2
4 KB
掲示板に戻る 全部 前100 次100 最新50
read.cgi ver.24052200