renew
This commit is contained in:
parent
a1fe08c69d
commit
dcb0b0f0be
@ -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>
|
||||||
|
@ -14,8 +14,12 @@
|
|||||||
<table id="table"></table>
|
<table id="table"></table>
|
||||||
</div>
|
</div>
|
||||||
<div id="flex">
|
<div id="flex">
|
||||||
<p id="param"></p>
|
<div id="flextext">
|
||||||
|
<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>
|
||||||
|
@ -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%;
|
||||||
|
@ -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{
|
}else if(revodone){
|
||||||
turnchange()
|
change(2)
|
||||||
}
|
}else{
|
||||||
|
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);
|
||||||
|
def();
|
||||||
|
}else if(revodone){
|
||||||
|
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=>{
|
||||||
|
if(revodone)return;
|
||||||
|
revodone = true;
|
||||||
|
surdone = false;
|
||||||
|
score.innerText = ""
|
||||||
|
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 turnchange(){
|
function search(fx){
|
||||||
turn = turn==1 ? 2 : 1;
|
for(let i = 0; i < 8; i++){
|
||||||
param.innerText = (turn == 1 ? "yellow" : "blue") + "man's turn";
|
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;
|
||||||
|
document.getElementById(`td-${i}-${j}`).innerHTML = `<div class="flag"></div>`;
|
||||||
|
turn = 2;
|
||||||
|
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!!!";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
revo.addEventListener('click', e=>{
|
/* 2D-array reminder
|
||||||
if(sovi)return;
|
stone = stone.map(line=>{
|
||||||
sovi = true;
|
|
||||||
/*stone = stone.map(line=>{
|
|
||||||
return line.map(cell=>{
|
return line.map(cell=>{
|
||||||
return 0;
|
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";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
Loading…
Reference in New Issue
Block a user