This commit is contained in:
qrhlhplhp 2022-11-02 17:32:43 +09:00
parent a1fe08c69d
commit dcb0b0f0be
4 changed files with 114 additions and 35 deletions

View File

@ -12,7 +12,7 @@
<input type="color" id="colorele"> <input type="color" id="colorele">
<input type="range" id ="rangele" min="1" max="50" value="10"> <input type="range" id ="rangele" min="1" max="50" value="10">
<div style="margin-bottom: 5vh; margin-top: 5vh;"><button id="button">T</button></div> <div style="margin-bottom: 5vh; margin-top: 5vh;"><button id="button">T</button></div>
<canvas id="canvas" style="width:90vw ; border:5px solid black;"></canvas> <canvas id="canvas" style="width:175vmin ; border:5px solid black;"></canvas>
</body> </body>
<script src="main.js"></script> <script src="main.js"></script>
</html> </html>

View File

@ -14,8 +14,12 @@
<table id="table"></table> <table id="table"></table>
</div> </div>
<div id="flex"> <div id="flex">
<div id="flextext">
<p id="param"></p> <p id="param"></p>
<p id="score"></p>
</div>
<button id="pass">PASS</button> <button id="pass">PASS</button>
<button id="sur">SURRENDER</button>
<button id="revo">REVOLUTION</button> <button id="revo">REVOLUTION</button>
</div> </div>
</div> </div>

View File

@ -23,7 +23,12 @@ h1{
} }
#flex{ #flex{
padding-left:1vw; padding-left:1vw;
}
#flextext{
color:#ffd700; color:#ffd700;
font-size:200%;
font-weight: 800;
max-width: min-content;
} }
.stone{ .stone{
border-radius:100%; border-radius:100%;

View File

@ -1,17 +1,21 @@
let table = document.getElementById("table"); let table = document.getElementById("table");
let param = document.getElementById("param"); let param = document.getElementById("param");
let score = document.getElementById("score");
const pass = document.getElementById("pass"); const pass = document.getElementById("pass");
const sur = document.getElementById("sur");
const revo = document.getElementById("revo"); const revo = document.getElementById("revo");
let sovi = false; let yellow = 0;
let blue = 0;
let surdone = false;
let revodone = false;
let htable = ""; let htable = "";
//[left, botleft, bottom, botright, right, topright, top, topleft] //[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 //0->nill, 1->yellow, 2->blue
const movec = [[0,-1],[1,-1],[1,0],[1,1],[0,1],[-1,1],[-1,0],[-1,-1]];
let turn = 1 let turn = 1
param.innerText = (turn == 1 ? "yellow" : "blue") + "man's turn" ;
//make table
let stone = new Array(8); let stone = new Array(8);
for(let i = 0; i < 8; i++) { for(let i = 0; i < 8; i++) {
stone[i] = new Array(8).fill(0); stone[i] = new Array(8).fill(0);
@ -26,17 +30,31 @@ for (let i = 0; i < 8; ++i){
} }
table.innerHTML = htable; table.innerHTML = htable;
//set default-stone
function def(){
turn = 1;
yellow = 0;
blue = 0;
surdone = false;
revodone = false;
param.innerText = "Yellowman's turn";
score.innerText = ""
sur.innerText = "SURRENDER";
stone[3][3] = 1; stone[4][4] = 1; stone[3][3] = 1; stone[4][4] = 1;
stone[4][3] = 2; stone[3][4] = 2; stone[4][3] = 2; stone[3][4] = 2;
document.getElementById("td-3-3").innerHTML = "<div class=\"stone yellow\"></div>"; 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-4").innerHTML = "<div class=\"stone yellow\"></div>";
document.getElementById("td-4-3").innerHTML = "<div class=\"stone blue\"></div>"; document.getElementById("td-4-3").innerHTML = "<div class=\"stone blue\"></div>";
document.getElementById("td-3-4").innerHTML = "<div class=\"stone blue\"></div>"; document.getElementById("td-3-4").innerHTML = "<div class=\"stone blue\"></div>";
}
def();
//event to place stones
table.addEventListener('click', e =>{ table.addEventListener('click', e =>{
let coord = document.elementFromPoint(e.clientX, e.clientY); let coord = document.elementFromPoint(e.clientX, e.clientY);
if(coord.tagName != "TD")return; if(coord.tagName != "TD")return;
if(surdone)return;
if(revodone)return;
const stonegen = coord.id.split("-"); const stonegen = coord.id.split("-");
//position of the stone to put right now //position of the stone to put right now
let x = Number(stonegen[1]); let x = Number(stonegen[1]);
@ -71,44 +89,96 @@ table.addEventListener('click', e =>{
} }
} }
if(!canPlace)return; if(!canPlace)return;
stone[x][y] = turn stone[x][y] = turn;
coord.innerHTML = `<div class="stone ${turn == 1 ? "yellow" : "blue"}"></div>`; coord.innerHTML = `<div class="stone ${turn == 1 ? "yellow" : "blue"}"></div>`;
turnchange(); change(1);
} }
}); });
//event to pass a turn
pass.addEventListener('click', e=>{ pass.addEventListener('click', e=>{
if(sovi){ if(surdone){
leaderchange() return;
}else if(revodone){
change(2)
}else{ }else{
turnchange() change(1)
} };
}); });
function leaderchange(){ //event to end and reset a game
turn = turn==1 ? 2 : 1; sur.addEventListener('click', e=>{
param.innerText = (turn == 1 ? "Stalin" : "Lenin") + "'s turn"; if(surdone){
} search(reset);
function turnchange(){ def();
turn = turn==1 ? 2 : 1; }else if(revodone){
param.innerText = (turn == 1 ? "yellow" : "blue") + "man's turn"; surdone = true;
} param.innerText = "Communists' victory"
score.innerText = "10000-0";
sur.innerText = "RESET";
}else{
surdone = true;
search(surrender);
sur.innerText = "RESET";
};
});
//event to cause a revolution
revo.addEventListener('click', e=>{ revo.addEventListener('click', e=>{
if(sovi)return; if(revodone)return;
sovi = true; revodone = true;
/*stone = stone.map(line=>{ surdone = false;
return line.map(cell=>{ score.innerText = ""
return 0; sur.innerText = "SURRENDER";
}); search(revolution);
});*/ }
);
function change(man){
turn = (turn == 1 ? 2 : 1);
param.innerText = (turn == 1 ? (man == 1 ? "Yellowman" : "Stalin") : (man == 1 ? "Blueman" : "Lenin")) + "'s turn";
}
function search(fx){
for(let i = 0; i < 8; i++){ for(let i = 0; i < 8; i++){
for(let j = 0; j < 8; j++){ for(let j = 0; j < 8; j++){
fx(i,j);
}
}
}
function reset(i,j){
stone[i][j] = 0;
document.getElementById(`td-${i}-${j}`).innerHTML = "";
}
function revolution(i,j){
stone[i][j] = 0; stone[i][j] = 0;
document.getElementById(`td-${i}-${j}`).innerHTML = `<div class="flag"></div>`; document.getElementById(`td-${i}-${j}`).innerHTML = `<div class="flag"></div>`;
turn = 2; turn = 2;
param.innerText = "Lenin's turn"; param.innerText = "Lenin's turn";
}
function surrender(i,j){
switch(stone[i][j]){
case 1: yellow++; break;
case 2: blue++; break;
} }
if(yellow > blue){
param.innerText = "Yellowman's victory:";
score.innerText = `${yellow}-${blue}`;
}else if(yellow < blue){
param.innerText = "Blueman's victory:";
score.innerText = `${blue}-${yellow}`;
}else if(yellow == blue){
param.innerText = "Draw:";
score.innerText = `${yellow}-${blue}`;
}else{
param.innerText = "HOW DARE YOU!!!";
score.innerText = "THIS iS ERROR MESSAGE!!!";
} }
} }
);
/* 2D-array reminder
stone = stone.map(line=>{
return line.map(cell=>{
return 0;
});
});
*/