나는 게임 보이 CSS 예술을 만들었다: 해봐🕹

이야기는 이렇다.3년 전에 면접을 봤는데 면접관이 미로 해결 알고리즘을 물어봤어요.그래서 나는 알고리즘을 완성했다. 단지 재미를 위해 나는 각도 프로젝트를 계속했다. 너는 반드시 미로를 해결해야 한다(미로를 만드는 것도 좋은 연습이다).
그래서 제 노트북에는 완전한 미로 게임이 있고 게임 소년의 CSS 예술도 있습니다.👉 나는 이 두 가지를 결합하면 매우 재미있을 것이라고 생각한다.

시험here(노트북에 있으면 키보드를 사용할 수 있다)

기부here(또는 당신이 원한다면⭐️)

데모👇

Mustapha Aouas
# 그 영어 하는 놈

내가 작은 특성으로 만든 이 게임기의 CSS 예술을 봐라. 실제로는 할 수 있다🕹링크👉 theangularguy.github.io/playable-gameb… 당신의 최고 점수는 얼마입니까?저는 90...거의💯게임 엔진으로 만든 노트북에서 키보드를 사용하세요
2021년 11월 25일 오후 15:18
트위터에서 저를 주목하세요. 왜냐하면 저는 거의 매일 트위터에서 6년여의 인터넷 개발 과정에서 배운 것을 이야기했기 때문입니다.✅
이 문장에서 우리는 이 항목 중의 몇 가지 일을 토론할 것이다.우선, 우리는 미로 생성 알고리즘과 미로 구해 알고리즘을 토론할 것이다.그리고 우리는 CSS 예술의 관건적인 개념들을 토론할 것이다.
 

미로 생성 알고리즘

이 방면에는 많은 알고리즘이 있다.내가 선택한 것은 귀속 생성이다. 이유는 두 가지가 있다.

왜냐하면 나는 귀환으로 문제를 해결하는 것을 좋아하기 때문이다Scheme는 나를 영원히 변화시켰다

생성된 미로가 더 예뻐 보이기 때문에(긴 골목이 있음)

이 알고리즘은 네 단계로 나뉜다.

미로 구역 획정

중간(또는 임의의 점)에서 수직으로 구역을 분할하고 분할 구역

에 구멍을 낸다.

반으로 나누고 가운데 수평으로 갈라서 부분마다

에 구멍을 낸다

각 새 섹션을 제거하고 단계로 이동합니다.2

팀을 나누기에 충분한 공간이 없을 때까지 이런 상황은 계속될 것이다.
다음은gif의 완전한 생성 과정이다👇

You can visualize the maze as a binary tree, each node represents a part / division of the maze.

 

미로 풀이 알고리즘

나는 미로를 이해하기 위해 깊이 우선 검색 알고리즘을 사용했다.이것은 결코 미로 문제를 해결하는 가장 효과적인 알고리즘이 아니지만, 임무를 완성했고, 실현하기 쉽다.그 밖에 나는 그것으로 미로를 가로질러 가능한 가장 긴 경로를 찾은 후에 그것을 미로의 출구점으로 삼았다.다음은 이 알고리즘을 보여 주는gif입니다.

나는 이곳에서 세부 사항을 깊이 토론하지 않겠지만, 만약 당신이 미로를 해결하는 문장에 흥미가 있다면, 평론에서 나에게 알려주십시오.
 

CSS 아트: 주요 개념

제가 강조하고자 하는 CSS 등록 정보에 대해 살펴보겠습니다.우리는 이 속성들을 두 종류로 나눌 수 있다.형상과 조명.

모양

경계 반지름

첫 번째는 착한 사람border-radius이다.너는 그것으로 원이나 타원을 그릴 수 있다.그러나 이 특성은 더 많이 실현될 수 있다.각 각도의 수평 및 수직 반지름을 지정할 수 있습니다.다음 섹션을 참조하십시오.

.plate {
    border-radius: 20% 20% 49% 49% / 2% 2% 6.5% 6.5%;
}

나는 이걸로 게임보이 태블릿과 블랙스크린을 만들었다.

종횡비

이 속성은 자동 치수를 계산하는 데 사용되는 상자의 기본 세로 비율을 설정하는 데 유용합니다.
예를 들어 나는 width와 종횡비를 설정할 수 있고 높이는 자동으로 계산될 것이다.보기:

.plate {
    width: 500px;
    aspect-ratio: 1 / 2;
    /* The height will be 1000px */
}

나는 거의 모든 원소에서 이것을 사용했다.그래, 나는 내가 이 집을 사랑한다는 것을 안다!

변환:기울기

회전, 확대/축소(크기 조정) 또는 변환(이동)을 위해 transform을 사용하거나 휨(기울이기)을 사용할 수 있습니다.skew CSS 속성은 2D 평면의 요소를 기울이는 변환을 정의합니다.
나는 이걸로 음공 격자를 만든다.아래쪽에 기울기(오른쪽) 및 기울기(왼쪽) 없는 이미지를 봅니다.

두 장의 사진에서도 격자에 회전을 적용했다.
그 밖에 소리 격자에 대해 나는 격자 레이아웃을 사용했다.만약 당신이 CSS 격자에 대해 더 많이 알고 싶다면, 나는 그것의 모든 개념을 설명하는 글을 한 편 썼다👇

CSS 격자:아트웍 소개

Mustapha Aouas・ 19년9월12일・ 12분 읽기

#css #webdev #tutorial #beginners

빛과 그림자

상자의 그림자

사람들에게 음량의 인상을 남기기 위해서는 불빛이 없어서는 안 된다.아래의 두 가지 예를 보면 왼쪽에는 음영이 없고 오른쪽에는 음영text-shadow과 box-shadow을 사용한다.

이런 조명 효과를 얻기 위해서는 어디에 조명을 놓고, 어디에 음영을 두는지 알아야 한다. 이것은 무엇이 부조 상태에 있느냐, 아니면 오목한 상태에 있느냐에 달려 있다.다음 그림을 보십시오.

만약 우리가 이것을 단추에 적용한다면, 우리는 이런 물건이 있을 것이다. (화면의 왼쪽 상단에 불빛이 있다고 가정하면)

이렇게 하면 다음 코드로 전환할 수 있습니다.

.button {
  box-shadow:
    inset 3px 5px 5px -1px rgb(255 255 255 / 50%), 
    inset -3px -3px 5px -1px rgb(0 0 0 / 99%),
    1px 1px 1px 2px rgb(0 0 0 / 80%),
    2.5px 5px 5px 1px rgb(0 0 0 / 90%)
}

inset 키워드는 음영을 프레임 안으로 설정합니다.

텍스트 그림자

텍스트에 대해 우리는 같은 원칙을 사용한다. 텍스트가 긴장을 풀거나 우울한 상태에 있다.다음은 부각 텍스트의 예입니다.

.text {
  text-shadow: -1px -1px 1.2px rgb(255 255 255 / 50%),
               1px 1px 1px rgb(1 1 1 / 7%);
}

본 서첩은 여기까지입니다.니가 좋아했으면 좋겠어.만약 당신이 이렇게 한다면, 당신의 친구와 동료와 공유하고, 트위터에 저를 주목해 주십시오. 저는 트위터에 인터넷 개발과 컴퓨터 과학에 관한 정보를 올립니다.
건배!

다음은 뭘 읽을까요?

아직 모를 수도 있는 놀라운 CSS 속성 7개

Mustapha Aouas・ 4월 20일'20・ 5분 읽기

#css #webdev #design #beginners