qrhlhplhp/webs
qrhlhplhp/webs
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add reversi

Browse Source
This commit is contained in:
qrhlhplhp 2022-11-01 15:19:37 +09:00
parent 8e93b81c14
commit 4e1ea20d37
6 changed files with 321 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.vscode/launch.json vendored
View File

@ -5,10 +5,11 @@
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"runtimeExecutable": "xdg-open",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}"
}
]

22
ultra-super-stylish-reversi/index.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
<title>U-S-S-R</title>
</head>
<body>
<h1>Welcome to Ultra Super Stylish Reversi, <span id="ussr">USSR!!!</span></h1>
<div style="display:flex;" id="flag">
<table id="table"></table>
<div id="flex">
<p id="param"></p>
<button id="pass">PASS</button>
<button id="revo">REVOLUTION</button>
</div>
</div>
</body>
<script src="main.js"></script>
</html>

44
ultra-super-stylish-reversi/main.css Normal file
View File

@ -0,0 +1,44 @@
body{
background-color:#cd0000
}
#flag{
background-image:url(svru.svg)
}
h1{
color:#ffd700;
background-color:#cd0000;
}
#ussr{
font-size:200%;
}
#table{
background-color:transparent;
margin-left:30vw;
}
#table td{
border: 1px solid white;
width:10vmin; height:10vmin;
}
#flex{
padding-left:1vw;
color:#ffd700;
}
.stone{
border-radius:100%;
width:100%;height:100%
}
.yellow{
background-color:#ffd700;
}
.blue{
background-color:#0091fa;
}
.flag{
background-image:url(tools.svg);
background-size: cover;
width:100%;height:100%
}
img{
margin-top: 5vh;
width: 100%;
}

114
ultra-super-stylish-reversi/main.js Normal file
View File

@ -0,0 +1,114 @@
let table = document.getElementById("table");
let param = document.getElementById("param");
const pass = document.getElementById("pass");
const revo = document.getElementById("revo");
let sovi = false;
let htable = "";
//[left, botleft, bottom, botright, right, topright, top, topleft]
const movec = [[0,-1],[1,-1],[1,0],[1,1],[0,1],[-1,1],[-1,0],[-1,-1]];
//0->nill, 1->yellow, 2->blue
let turn = 1
param.innerText = (turn == 1 ? "yellow" : "blue") + "man's turn" ;
let stone = new Array(8);
for(let i = 0; i < 8; i++) {
stone[i] = new Array(8).fill(0);
}
for (let i = 0; i < 8; ++i){
htable += `<tr id="tr-${i}">`;
for (let j = 0; j < 8; ++j){
htable += `<td id="td-${i}-${j}"></td>`;
}
htable += "</tr>";
}
table.innerHTML = htable;
stone[3][3] = 1; stone[4][4] = 1;
stone[4][3] = 2; stone[3][4] = 2;
document.getElementById("td-3-3").innerHTML = "<div class=\"stone yellow\"></div>";
document.getElementById("td-4-4").innerHTML = "<div class=\"stone yellow\"></div>";
document.getElementById("td-4-3").innerHTML = "<div class=\"stone blue\"></div>";
document.getElementById("td-3-4").innerHTML = "<div class=\"stone blue\"></div>";
table.addEventListener('click', e =>{
let coord = document.elementFromPoint(e.clientX, e.clientY);
if(coord.tagName != "TD")return;
const stonegen = coord.id.split("-");
//position of the stone to put right now
let x = Number(stonegen[1]);
let y = Number(stonegen[2]);
if(stone[x][y] == 0/*nill stone*/){
let canPlace = false;
for(let i = 0; i < 8; i++){
let moved = 0;
let doFlip = new Array();
while(true){
++moved
//stone[x-position + x-move (<- x-move-amount * x-move-counter)]
const nowX = x + movec[i][0] * moved;
const nowY = y + movec[i][1] * moved;
if(nowX < 0 || nowX > 7 || nowY < 0 || nowY > 7) break;//change vector because there's wall!
let nowStone = stone[nowX][nowY];
if(nowStone !=turn && nowStone != 0){
doFlip.push([x + movec[i][0] * moved, y + movec[i][1] * moved]);
}else if(nowStone == turn && moved > 1){
canPlace = true;
for(let i = 0; i < doFlip.length; i++){
stone[doFlip[i][0]][doFlip[i][1]] = turn;
const doFlipCell = document.getElementById(`td-${doFlip[i][0]}-${doFlip[i][1]}`).children[0];
doFlipCell.classList.remove(turn != 1 ? "yellow" : "blue");
doFlipCell.classList.add(turn == 1 ? "yellow" : "blue");
}
break;
}else{
break;
}
}
}
if(!canPlace)return;
stone[x][y] = turn
coord.innerHTML = `<div class="stone ${turn == 1 ? "yellow" : "blue"}"></div>`;
turnchange();
}
});
pass.addEventListener('click', e=>{
if(sovi){
leaderchange()
}else{
turnchange()
}
});
function leaderchange(){
turn = turn==1 ? 2 : 1;
param.innerText = (turn == 1 ? "Starin" : "Lenin") + "'s turn";
}
function turnchange(){
turn = turn==1 ? 2 : 1;
param.innerText = (turn == 1 ? "yellow" : "blue") + "man's turn";
}
revo.addEventListener('click', e=>{
if(sovi)return;
sovi = true;
/*stone = stone.map(line=>{
return line.map(cell=>{
return 0;
});
});*/
for(let i = 0; i < 8; i++){
for(let j = 0; j < 8; j++){
stone[i][j] = 0;
document.getElementById(`td-${i}-${j}`).innerHTML = `<div class="flag"></div>`;
turn = 2;
param.innerText = "Lenin's turn";
}
}
}
);

52
ultra-super-stylish-reversi/svru.svg Normal file
View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
height="600"
width="1200"
version="1.1"
id="svg8602">
<metadata
id="metadata8608">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8606" />
<path
fill="#cd0000"
d="M0 0h1200v600H0z"
id="path8592" />
<path
fill="#0091fa"
fill-rule="evenodd"
d="M0 0h150v600H0z"
id="path8600" />
<path
id="path11728"
d="m 265.00046,37.5 -8.41933,25.911891 H 229.33596 L 251.37773,79.426121 242.9584,105.338 265.00046,89.323461 287.04253,105.338 278.6232,79.426121 300.66496,63.411891 H 273.4198 Z m 0,13.49999 5.38828,16.583471 h 17.43718 l -14.107,10.2495 5.38827,16.58347 -14.10673,-10.24921 -14.10672,10.24921 5.38827,-16.58347 -14.10701,-10.2495 h 17.43718 z"
style="fill:#ffd700;fill-opacity:1;stroke:none;stroke-width:0.14999977px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<g
style="fill:#ffd700;fill-opacity:1"
id="g2900-4"
transform="matrix(0.98931879,0,0,0.98673811,68.82973,3.7659398)">
<path
id="rect4165-6"
d="m 137.43744,171.69421 18.86296,18.9937 17.78834,-17.66589 c 27.05847,29.021 55.43807,56.99501 82.28704,86.12782 4.03444,4.06233 10.59815,4.085 14.66056,0.0506 4.06232,-4.03445 4.08499,-10.59815 0.0506,-14.66056 -28.81871,-27.1901 -57.72545,-54.60143 -86.55328,-81.89095 l 23.96499,-23.80003 -33.34026,-4.61605 z"
style="fill:#ffd700;fill-opacity:1;stroke:none;stroke-width:0.48919073;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
id="path4179-3"
d="m 198.2887,110.1955 c 15.51743,8.7394 27.29872,21.28122 34.2484,34.3924 7.04394,13.28902 10.13959,27.16218 10.20325,38.25433 0.13054,22.74374 -18.43771,41.18184 -41.18183,41.18184 -12.13597,0 -23.04607,-5.24868 -30.58302,-13.60085 l -4.16863,3.51033 c -0.70999,-0.27231 -1.46387,-0.41221 -2.22429,-0.41276 -1.82948,1.9e-4 -3.56621,0.80531 -4.74859,2.20136 -2.97368,0.38896 -5.46251,2.44529 -6.40534,5.29224 -3.13486,6.28843 -8.63524,11.21997 -15.29104,13.4776 -0.0637,0.0216 -0.11992,0.05 -0.1758,0.0783 -3.07749,1.12758 -6.16259,3.1643 -8.78919,5.80245 -5.19155,5.23656 -7.72858,11.93658 -6.30024,16.63822 -0.14098,0.40857 -0.21361,0.83759 -0.21498,1.26979 1.5e-4,2.17082 1.75991,3.93058 3.93073,3.93073 0.54341,-0.002 1.08053,-0.11639 1.57745,-0.33632 4.69369,1.05881 11.06885,-1.54582 16.05444,-6.55917 2.82624,-2.85072 4.94356,-6.22349 5.98303,-9.53062 2.31696,-6.62278 7.29699,-12.01856 13.62281,-15.05312 0.15105,-0.0725 0.27303,-0.14714 0.38218,-0.22358 2.12082,-1.01408 3.67251,-2.92895 4.225,-5.2139 9.70222,11.44481 24.25255,18.75299 40.51876,19.13577 29.83352,0.70205 52.13299,-21.25802 53.16414,-52.83642 0.51894,-15.89259 -5.62993,-36.3847 -19.6412,-53.19089 -10.70835,-12.84441 -26.40987,-23.50795 -44.18699,-28.20777 z"
style="fill:#ffd700;fill-opacity:1;stroke:none;stroke-width:0.50003481;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

86
ultra-super-stylish-reversi/tools.svg Normal file
View File

@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="305"
height="305"
viewBox="0 0 80.69791480986534 80.69791894694912"
version="1.1"
id="svg2224"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="旧党徽单体.svg">
<defs
id="defs2218" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.2474873734805829"
inkscape:cx="247.1220594332203"
inkscape:cy="259.9398029295571"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1366"
inkscape:window-height="716"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata2221">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-216.302075508547)">
<g
id="g2131"
transform="matrix(0.3049999904064256,0,0,0.3049999904064252,-136.4991929676096,338.4033844083301)"
style="fill:#ffde00;fill-opacity:1;stroke-width:3.2786884308;stroke:none">
<path
inkscape:connector-curvature="0"
id="path2125"
d="m 487.3050355086297,-144.2040960403828 a 22.2898063659668,22.2898063659668 0 0 1 -22.4106886560921,7.9023606851386 22.2898063659668,22.2898063659668 0 0 1 -16.8030771520274,-16.8030612883881 22.2898063659668,22.2898063659668 0 0 1 7.9023395273881,-22.4106961166358 l 51.8614918793776,-41.0570311913019 20.5069293452818,20.506929345267 z"
style="opacity:1;fill:#ffde00;fill-opacity:1;stroke:none;stroke-width:0.8674862981;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
<path
inkscape:connector-curvature="0"
id="path2127"
d="m 705.1107404169074,-174.0622912655019 a 22.14623451232909,22.14623451232909 0 0 1 6.3180096353268,21.6637660774594 22.14623451232909,22.14623451232909 0 0 1 -15.9567603998405,15.9567479128124 22.14623451232909,22.14623451232909 0 0 1 -21.6637611332667,-6.3180265884006 l -169.9805056453456,-181.5700972712776 19.7129115049292,-19.7129115049142 z"
style="opacity:1;fill:#ffde00;fill-opacity:1;stroke:none;stroke-width:0.8674862981;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
<path
inkscape:connector-curvature="0"
id="path2123"
d="m 447.5383516757444,-307.7280273638123 79.8234421538937,-79.8234421338414 50.2259950361165,23.8573446550694 -93.007757886909,93.0077578869092 z"
style="fill:#ffde00;fill-opacity:1;stroke:none;stroke-width:0.8674862981px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
style="opacity:1;fill:#ffde00;fill-opacity:1;stroke:none;stroke-width:0.8674862981;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
inkscape:transform-center-x="11.40272962819006"
inkscape:transform-center-y="8.033813638977106"
d="m 494.7183415341706,-206.1673626101833 c -3.4314592551437,-3.8669419423531 -4.4426614957056,-9.3146552135908 -2.6275317772315,-14.1554667891793 1.815129718474,-4.8408115755884 6.1588348952162,-8.2806277326636 11.2867860898632,-8.9380995195614 5.1279511946459,-0.6574717868977 10.1989518864786,1.5752534179479 13.1766920419903,5.8016839240086 21.0311449474437,29.8501169177316 60.0627539571105,40.9424909908011 93.6488459524572,26.6141143359329 33.5860919953475,-14.3283766548681 52.5906708409526,-50.1799343392518 45.5977485806303,-86.0188417202921 -9.2631281349164,-47.4737711828446 -36.474162116149,-89.5479476251564 -75.9711003007514,-117.4682120670928 48.9837460584718,15.6747294861189 88.4976684975067,52.2591468058953 107.892269592864,99.8929310748515 21.3533653121605,52.4445742242751 -1.5752201225386,112.4653047823596 -52.4550015799168,137.3168957537254 -50.8797814573775,24.8515909713658 -112.3142467074349,6.0369148316567 -140.5515211430945,-43.0447524933624 z"
id="path2129"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csscsscsscc" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB