Jeux du morpion / tutoriel informatique
Cours : Jeux du morpion / tutoriel informatique. Recherche parmi 298 000+ dissertationsPar infor • 3 Avril 2022 • Cours • 1 184 Mots (5 Pages) • 237 Vues
Durant ce tuoriel informatique nous verrons commennt faire un morpion:
Partie html (pug):
html
head
meta(charset="utf-8")
body
.score
select
option(value="a") Vs friend
option(value="b") Vs ai
.game
table
tr
td
td
td
tr
td
td
td
tr
td
td
td
p#result
Une page html basique avec un tableau
Partie css(sccs):
:root{
--case_width: 40px;
}
html{
background: #161616;
}
*{
font-family: arial;
color: #505050;
z-index: 4;
}
.score{
position: relative;
top: 0;
left: 2rem;
width: 210px;
background: white;
padding: 1rem 0;
text-align: center;
overflow: auto;
border-radius: 0 0 15px 15px;
}
.game{
margin: 2rem;
margin-top: 50vh;
transform: translateY(-50%);
padding: 2rem;
background: white;
width: max-content;
border-radius: 15px;
}
.alert{
position: fixed;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
text-align: center;
outline: 2px solid white;
padding: 10px;
color: white;
z-index: 10;
border-radius: 2px;
background-color: black;
&::after{
content: "";
top:-50vh;
left: -50vw;
z-index: -1;
position: fixed;
width: 150vw ;
height: 150vh;
background-color: rgba(0,0,0,.7);
}
p {
color: white;
}
button{
padding: 7px;
border-radius: 5px;
color: white;
border: 0;
background: #0080FF;
margin-top: 5px;
cursor: pointer;
&::hover{
opacity: .7;
transition: .3s ease-out;
}
}
}
td{
height: var(--case_width);
width: var(--case_width);
border: 2px solid #161616;
vertical-align: center;
text-align: center;
}
.rond{
height: calc(var(--case_width) / 1.5);
width: calc(var(--case_width) / 1.5);
border: 6px solid red;
border-radius: 30px;
}
.croix{
height: calc(var(--case_width));
width: calc(var(--case_width));
background: transparent;
position: relative;
&::before{
background-color: blue;
position: absolute;
top: -3px;
left: 15px;
border-radius: 5px;
height: calc(var(--case_width));
width: 3px;
padding: 3px;
...