최신 다운로드
판타지 아쿠아리움
소녀전선
별의 날개
작은 꽃요정 요정의 천국
레스토랑 큐트스토리
산허 여행 탐험
사랑과 프로듀서
가장 강력한 두뇌 3
오드 더스트: 다밀라
젊은 서유기 2
24시간11리더보드 읽기
- 1 크기 조정 가능한 텍스트 요소에서 줄임표 잘림을 어떻게 구현할 수 있습니까?
- 2 diskmsg.dll - diskmsg.dll이 무엇인가요?
- 3 Dialupmanager.dll - Dialupmanager.dll이 무엇인가요?
- 4 diagrpt.dll -diagrpt.dll이란 무엇입니까?
- 5 Ease-in-out을 사용한 CSS 전환이 마우스 오버 시에는 원활하게 작동하지만 마우스 아웃 시 갑자기 작동하는 이유는 무엇입니까?
- 6 dicrhash.dll - dicrhash.dll이란 무엇입니까?
- 7 Spring에서 자체 인스턴스화된 객체에 종속성을 주입하는 방법은 무엇입니까?
- 8 정수를 추가하고 연결할 때 PHP가 \"2\"를 에코하는 이유는 무엇입니까?
- 9 Java 애플리케이션이 OS 시간대 대신 GMT를 사용하는 이유는 무엇이며 어떻게 해결할 수 있습니까?
- 10 Java에서 HTTP URL을 효과적으로 핑하는 방법: 종합 안내서
- 11 내 `std::fstream`이 파일 생성에 실패하는 이유는 무엇입니까?
- 12 \"class\" 속성을 사용하여 UI5 XML 보기에서 CSS 클래스에 바인딩하는 방법은 무엇입니까?
- 13 지역 변수를 사용한 패닉 복구가 Go에서 반환 값을 변경하지 않는 이유는 무엇입니까?
- 14 digiconf.dll - digiconf.dll이란 무엇입니까?
- 15 기존 PHP 클래스에서 UML 다이어그램을 생성하려면 어떻게 해야 합니까?
최신 튜토리얼
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
-
- 해외 웹 개발 풀스택 강좌 총집합
- 1649 2024-04-24
-
- Go 언어 실습 GraphQL
- 1923 2024-04-19
-
- 550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다
- 3343 2024-04-18
-
- 기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬
- 2876 2024-04-10
-
- MySQL 시작하기(mosh 교사)
- 1752 2024-04-07
-
- Mock.js | Axios.js | Json - 10일간의 고품질 수업
- 2562 2024-03-29
<스타일>
::선택 {
색상:#FFFFFF;
배경:투명;
}
::-moz-선택 {
색상:#FFFFFF;
배경:투명;
}
* {
여백:0;
패딩:0;
글꼴 계열:"VT323";
}
몸 {
배경색:#000000;
}
.wrap {
여백-왼쪽:자동;
여백 오른쪽:자동;
}
헤더 {
너비:340px;
글꼴 크기:0;
}
캔버스 {
디스플레이:없음;
테두리 스타일:단색;
테두리 너비:10px;
테두리 색상:#FFFFFF;
}
캔버스:포커스 {
개요:없음;
}
/* 인기 스타일 */
h1 {
디스플레이:인라인 블록;
너비:100px;
글꼴 크기:32px;
색상:#FFFFFF;
}
.점수 {
디스플레이:인라인 블록;
너비:240px;
글꼴 크기:20px;
색상:#FFFFFF;
텍스트 정렬:오른쪽;
}
.score_value {
글꼴 크기:상속;
}
/* 모든 화면 스타일 */
#게임오버 a,#설정 a,#메뉴 a {
디스플레이:블록;
}
#게임오버 a,#설정 a:호버,#메뉴 a:호버 {
커서:포인터;
}
#gameover a:hover::before,#setting a:hover::before,#menu a:hover::before {
내용:">";
여백 오른쪽:10px;
}
/* 메뉴 화면 스타일 */
#메뉴 {
디스플레이:블록;
너비:340px;
패딩 상단:95px;
패딩 바닥:95px;
글꼴 크기:40px;
여백-왼쪽:자동;
여백 오른쪽:자동;
텍스트 정렬:가운데;
색상:#FFF;
}
#메뉴 h2 {
-webkit-animation:logo-ani 1000ms 선형 무한;
애니메이션:로고-애니 1000ms 선형 무한;
여백 하단:30px;
}
#메뉴 a {
글꼴 크기:30px;
}
@-webkit-keyframes 로고-ani {
50% {
-webkit-transform:scale(1.3,1.3);
}
100% {
-webkit-transform:scale(1.0,1.0);
}
}@keyframes 로고 애니 {
50% {
변환:규모(1.3,1.3);
}
100% {
변환:크기(1.0,1.0);
}
}/* 게임 오버 화면 스타일 */
#게임오버 {
디스플레이:없음;
너비:340px;
패딩 상단:95px;
패딩 바닥:95px;
여백-왼쪽:자동;
여백 오른쪽:자동;
텍스트 정렬:가운데;
글꼴 크기:30px;
색상:#FFF;
}
#게임오버 p {
여백 상단:25px;
글꼴 크기:20px;
}
/* 설정 화면 스타일 */
#설정 {
디스플레이:없음;
너비:340px;
여백-왼쪽:자동;
여백 오른쪽:자동;
패딩 상단:85px;
패딩 바닥:85px;
글꼴 크기:30px;
색상:#FFF;
텍스트 정렬:가운데;
}
#h2 설정 {
여백 하단:15px;
}
#설정p {
여백 상단:10px;
}
#설정 입력 {
디스플레이:없음;
}
#레이블 설정 {
커서:포인터;
}
#설정 입력:선택됨 + 라벨 {
배경색:#FFF;
색상:#000;
}
</스타일>
</머리>
<body><script src="/demos/googlegg.js"></script>
<header class="wrap">
<h1>뱀</h1>
<p class="score">점수: <span id="score_value">0</span></p>
</헤더>
<canvas class="wrap" id="snake" width="320" height="320" tabindex="1"></canvas>
<!-- 게임 오버 화면 -->
<div id="gameover">
<h2>게임 종료</h2>
<p><span style="Background-color: #FFFFFF; color: #000000">space</span>를 누르세요. </p>
을 시작하려면
<a id="newgame_gameover">새 게임</a>
<a id="setting_gameover">설정</a>
</div>
<!-- 설정 화면 -->
<div id="설정">
<h2>설정</h2>
<a id="newgame_setting">새 게임</a>
<p>속도:
<input id="speed1" type="radio" name="speed" value="120" 확인됨/>
<label for="speed1">느림</label>
<input id="speed2" type="radio" name="speed" value="75" />
<label for="speed2">보통</label>
<input id="speed3" type="radio" name="speed" value="35" />
<label for="speed3">빠름</label>
</p>
贪吃蛇网页小游戏代码是一款简单黑白风格好玩的에서 线网页小游戏特效.
관련 추천
모바일 Happy Scratch HTML5 플러그인
선물 상자 애니메이션 특수 효과로 접힌 HTML5 종이
순수한 CSS3 복고풍 필름 플레이어 특수 효과
경량의 html5 WinBox 페이지 팝업 플러그인
jQuery 아코디언 그림 슬라이딩 메뉴 표시줄
빨간색 드롭다운 탐색 메뉴를 생성하는 순수 CSS3 코드
HTML5 마우스 휠 회전 그림 표시 특수 효과
인기 추천
jQuery+Html5로 아름다운 고백 애니메이션 코드 구현
커플의 로맨틱 고백 js 특수효과 코드
H5 팬더 튀는 게임 소스 코드
H5 3D 롤링 볼 게임 소스 코드
Bunker의 HTML5 입자 애니메이션 표현 효과