add reversi
This commit is contained in:
qrhlhplhp
parent
8e93b81c14
commit
4e1ea20d37
5
.vscode/launch.json
vendored
5
.vscode/launch.json
vendored
@ -5,10 +5,11 @@
|
|||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"configurations": [
|
"configurations": [
|
||||||
{
|
{
|
||||||
"type": "pwa-chrome",
|
"type": "chrome",
|
||||||
"request": "launch",
|
"request": "launch",
|
||||||
"name": "Launch Chrome against localhost",
|
"name": "Launch Chrome against localhost",
|
||||||
"url": "http://localhost:8080",
|
"runtimeExecutable": "xdg-open",
|
||||||
|
"url": "http://localhost:5500",
|
||||||
"webRoot": "${workspaceFolder}"
|
"webRoot": "${workspaceFolder}"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
22
ultra-super-stylish-reversi/index.html
Normal file
22
ultra-super-stylish-reversi/index.html
Normal 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
44
ultra-super-stylish-reversi/main.css
Normal 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
114
ultra-super-stylish-reversi/main.js
Normal 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
52
ultra-super-stylish-reversi/svru.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
86
ultra-super-stylish-reversi/tools.svg
Normal file
86
ultra-super-stylish-reversi/tools.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 5.0 KiB |
Loading…
Reference in New Issue
Block a user