Ftvg
Для этой игры поле в клетку создадим по шаблону, разработанному в статье Игровое поле на JavaScript. В шаблоне изменим количество колонок и кнопок.
<html>
<head>
<style>
#puzzle {
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
padding: 30vw;
padding-top: 10px;
}
input {
width: 10vw;
height: 10vw;
margin: 1px;
text-align: center;
font-size: 5vw;
}
</style>
<script>
letter = Array.from("012345678");
letter.sort(()=>Math.random()-0.5)
btn = new Array(9);
function play(B){
n = btn.indexOf(B);
console.log(n)
}
</script>
</head>
<body>
<div id=puzzle>
</div>
<script>
for(i=0; i<9; i++){
btn[i] = document.createElement("input");
btn[i].type = "button";
btn[i].value = letter[i];
btn[i].onclick = function() {play(this)};
document.getElementById('puzzle').appendChild(btn[i]);
}
</script>
</body>
</html>варвар
<html>
<head>
<style>
#puzzle {
display: inline-grid;
grid-template-columns: repeat(8, 1fr);
padding: 10vw;
}
input {
width: 10vw;
height: 10vw;
margin: 1px;
text-align: center;
font-size: 5vw;
}
</style>
<script>
s = "QWERTYUPASDFGHJKLZXCVBNM"
letter = Array.from(s+s);
letter.sort(()=>Math.random()-0.5);
btn = new Array(48);
fix = true;
m = 0;
function play(B){
n = btn.indexOf(B);
if (btn[n].value != " "){
return
}
B.value = letter[n];
if (fix){
fix = false;
}
else if (letter[n] == letter[m]){
fix = true;
}
else {
btn[m].value = " ";
}
m = n;
}
</script>
</head>
<body>
<div id=puzzle>
</div>
<script>
for(i=0; i<48; i++){
btn[i] = document.createElement("input");
btn[i].type = "button";
btn[i].value = " ";
btn[i].onclick = function() {play(this)};
document.getElementById('puzzle').appendChild(btn[i]);
}
</script>
</body>
</html>memory02.html
<html>
<head>
<meta charset="utf-8">
<style>
#puzzle {
display: inline-grid;
grid-template-columns: repeat(8, 1fr);
padding: 15vw;
padding-top: 15px;
}
input {
width: 8vw;
height: 8vw;
margin: 1px;
text-align: center;
font-size: 5vw;
animation-duration: 5s;
border-radius: 15px;
}
</style>
<script>
s = "????????????????????????????????????????????????????????????????????????????????????????????????"
letter = Array.from(s+s);
letter.sort(()=>Math.random()-0.5);
btn = new Array(48);
fix = true;
m = 0;
function play(B){
n = btn.indexOf(B);
if (btn[n].value != " "){
return
}
B.value = letter[n];
if (fix){
fix = false;
}
else if (letter[n] == letter[m]){
fix = true;
}
else {
btn[m].value = " ";
}
m = n;
}
</script>
</head>
<body>
<div id=puzzle>
</div>
<script>
for(i=0; i<48; i++){
btn[i] = document.createElement("input");
btn[i].type = "button";
btn[i].value = " ";
btn[i].onclick = function() {play(this)};
document.getElementById('puzzle').appendChild(btn[i]);
}
</script>
</body>
</html>memory.html
