네이티브 JS는 흰색 블록 게임을 밟지 마세요(9)를 구현합니다.

藏色散人
풀어 주다: 2019-01-09 13:25:37
원래의
5787명이 탐색했습니다.

네이티브 js를 이용하여 밟지마 화이트 블록 게임을 구현하는 방법은 이전 글에서 차근차근 설명드렸습니다.

네이티브 JS는 흰색 블록 게임을 밟지 마세요(9)를 구현합니다.

계속해서 이전 글을 결합하여 "Native JS를 구현하여 흰색 블록 게임을 밟지 마세요(8) # #", "흰 블록을 밟지 마세요" 게임의 이동 효과의 구체적인 구현 방법을 소개하겠습니다.

해당 js 코드는 다음과 같습니다.

//移动效果 function move(obj) { //默认速度与计分 var speed = 5, num = 0; obj.timer = setInterval(function () { //速度 var step = parseInt(getComputedStyle(obj, null)['top']) + speed; obj.style.top = step + 'px' if (parseInt(getComputedStyle(obj, null)['top']) >= 0) { CDiv('row'); obj.style.top = -150 + 'px'; } if (obj.children.length == 6) { for (var i = 0; i < 4; i++) { if (obj.children[obj.children.length - 1].children[i].className == 'i') { //游戏结束 obj.style.top = '-150px'; count.innerHTML = '游戏结束,最高得分: ' + num; //关闭定时器 clearInterval(obj.timer); //显示开始游戏 go.children[0].innerHTML = '游戏结束'; go.style.display = "block"; } } obj.removeChild(obj.children[obj.children.length - 1]); } //点击与计分 obj.onmousedown = function (event) { //点击的不是白盒子 // 兼容IE event = event || window.event; if ((event.target ? event.target : event.srcElement).className == 'i') { //点击后的盒子颜色 (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb"; //清除盒子标记 (event.target ? event.target : event.srcElement).className = ''; //计分 num++; //显示得分 count.innerHTML = '当前得分: ' + num; } else { //游戏结束 obj.style.top = 0; count.innerHTML = '游戏结束,最高得分: ' + num; //关闭定时器 clearInterval(obj.timer); //显示开始游戏 go.children[0].innerHTML = '游戏结束'; go.style.display = "block"; } //盒子加速 if (num % 10 == 0) { speed++; } } //松开触发停止 obj.onmouseup = function (event) { } }, 20) }
로그인 후 복사

이전 글에서 if 문을 사용하여 top 값을 구하는 방법에 대해 이야기했습니다.

네이티브 JS는 흰색 블록 게임을 밟지 마세요(9)를 구현합니다.


여기서 후속 코드를 계속 설명하고 위의 코드에는 또 다른 if 판단문입니다. 여기서 if 문은 main 아래의 div "행" 길이가 6, 즉 div의 6행인지 확인하는 데 사용됩니다. 6(obj.children.length== 6)인 경우 for 문 루프는 다음과 같습니다. 각 행의 길이(div 4개 포함), 색상이 지정된 사각형(클래스 "i"가 있는 div)이 있는지 확인하는 데 사용됩니다.

i가 있으면 게임이 종료되고 점수를 계산하여 최고 값을 -150px로 복원한 다음 타이머를 닫고 ClearInterval(obj.timer) 디스플레이를 설정하여 게임을 시작합니다.


글이 길어서 이번 글에서는 여기까지만 소개하도록 하겠습니다. 이후 글에서는 계속해서 don'을 구현하는 네이티브 js의 방법을 소개하도록 하겠습니다. 흰색 블록 게임을 밟지 마십시오.

흰색 블록을 밟지 마세요 게임의 전체 코드는 다음을 참조하세요. "

흰색 블록을 밟지 마세요 게임의 네이티브 JS 구현(1)"

위 내용은 네이티브 JS는 흰색 블록 게임을 밟지 마세요(9)를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!