자바스크립트로 '흰 블록을 밟지 마세요' 미니게임 프로그램_javascript 스킬을 구현합니다.-JS 튜토리얼-php.cn

자바스크립트로 '흰 블록을 밟지 마세요' 미니게임 프로그램_javascript 스킬을 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:30:34

원래의

1562명이 탐색했습니다.

최근 친구가 Don't Step on White Blocks라는 작은 게임 프로그램을 흉내내기 위해 JS를 사용해달라고 요청했습니다. 그런데 그가 준 소스 코드는 번거롭고 설명이 없어 이해하기 어려웠습니다. 그래서 제 아이디어를 바탕으로 직접 만들어봤습니다. 이 작은 게임은 주로 JS를 사용하여 DOM과 배열을 조작합니다.

프로그램 아이디어: 그림에 표시된 대로 게임 영역의 CSS를 상대 위치 지정 및 오버플로 숨기기로 설정합니다. 두 개의 "게임 보드"에 24개의 사각형이 배열되어 있으며 각 행에 하나의 검은색 사각형이 무작위로 생성됩니다. "게임 보드" 면을 아래로 스크롤하여 번갈아 표시하고, 각 조작 패널의 검은색 블록 위치를 배열에 저장하고, 클릭할 때마다 비교할 수 있도록 배열이 튀어나옵니다(하이라이트가 여기에 있는 것 같습니다...).

게임의 GitHub 주소는 다음과 같습니다. 중간 메뉴 오른쪽 끝에 있는 ZIP 다운로드 버튼을 클릭하면 HTML과 JS가 포함되어 있으며 서버가 필요하지 않습니다.

주소 다운로드

다음은 주요 부분에 대한 설명과 함께 구체적인 구현입니다.

HTML 부분:

<!DOCTYPE html>

<html>

<head><title>别踩白块</title></head>

<body>

<div id="gameZone"><div id="boardb" style="position: absolute;top: 0px;"></div></div>//初始化一个boardb,使ab同时存在

</body>

</html>

로그인 후 복사

CSS 부분:

코드 복사 코드는 다음과 같습니다.

*{margin: 0px;padding: 0px;box- sizing: border -box;} //간단하게 재설정하고 box-sizing을 사용하여 상자 크기를 설정하고 테두리를 계산합니다. 이는 나중에 작은 상자의 위치를 계산할 때 편리합니다

#gameZone{width: 302px;height: 602px;border: 1px solid green;margin: 20px auto;position:relative;overflow: Hidden;} //게임 영역, 테두리를 제거하려면 2픽셀이 더 필요합니다. 300*600

.square{너비: 75px;높이: 100px;float: 왼쪽;테두리: 1px 단색 검정색;}

.squareBlack{width: 75px;height: 100px;border: 1px solid black;float: left; background: black;}//각 작은 정사각형은 75*100이고, 검은색 작은 정사각형의 배경색을 설정합니다.

JS 부분:

기능 소개는 다음과 같습니다.

전역변수 초기화

var loc=600;//黑块落地失败判定

var count=0;//初始化击中黑块总数

var locArr=[];//初始化游戏板上黑块位置的

var order=(function(){

　　　　var ord="A";

　　　　return function(){

　　　　if(ord=='boarda')ord='boardb';

　　　　else ord='boarda';

　　　　return ord;

}

})()

로그인 후 복사

//클로저 기능을 사용하여 Boarda와 Boardb가 생성될 때마다 생성되는 게임보드의 ID를 만듭니다. 실제로 전역 변수를 사용할 수도 있지만 좀 더 형식적입니다. . .

클릭할 때마다 결과를 결정하는 기능

function judge(){

　　　　var num=this.id.substr(3)//获取元素的ID号

　　　　if(num!=locArr.pop()){ //与位置数组pop出的对比

　　　　　　　　clearTimeout(timer);

　　　　　　　　alert("你的得分为："+count+"分！");

　　　　　　　　return; //失败清除定时器，结算分数。

　　　　}else{

　　　　　　　　loc+=100; 

　　　　　　　　this.style.background="silver";

　　　　　　　　count+=1;//成功将落地标志加方格的高度，将方格背景色改变一下，击中数+1

　　　　}

　　　　if(count!=0&&count%15==0){

　　　　　　　　clearTimeout(timer);

　　　　　　　　newtimer=50-count/15*5;

　　　　　　　　timer=setInterval('fall()',newtimer);

　　　　}//每击中15个后将速度加快一点，这个式子可自行定义。

}

로그인 후 복사

큰 상자 속 작은 검은색 상자의 위치에 대해 난수를 생성합니다. 이 함수는 게임판을 생성할 때마다 호출되며, 생성된 숫자를 기준으로 작은 검은색 상자의 위치가 정의됩니다.

function generateRand(){

　　　　var numArr=[];

　　　　for(var j=0;j<6;j++){

　　　　　　　　var num=Math.floor(Math.random()*4)+j*4;

　　　　　　　　numArr.push(num);

　　　　}

　　　　return numArr;

}

로그인 후 복사

각 호출은 게임 영역 위로 스크롤할 게임 보드를 생성하고 검은색 부분의 숫자를 locArr에 푸시합니다.

function drawBoard(){

　　　　var temArr=generateRand();//这里应用一个临时的位置数组，为了防止两块游戏板之间的位置冲突。

　　　　locArr=temArr.concat(locArr);//将临时数组相连到全局位置数组中

　　　　var board=document.createElement('div');

　　　　board.setAttribute('id',order());

　　　　board.style.position="absolute";

　　　　board.style.top='-600px';

　　　　for(var i=0;i<24;i++){

　　　　　　　　var ele=document.createElement('div');

　　　　　　　　ele.setAttribute('id',"ele"+i);

　　　　　　　　if(temArr.indexOf(i)>-1){  //判断当前创建的小方块的ID序列是否属于临时位置数组

　　　　　　　　　　　　ele.setAttribute('class','squareBlack')

　　　　　　　　}else{

　　　　　　　　　　　　ele.setAttribute('class','square');

　　　　　　　　}

　　　　　　　　ele.addEventListener('click',judge,false); //给每一个小方格添加点击判定函数judge

　　　　　　　　board.appendChild(ele);

　　　　}

　　　　var gameZone=document.getElementById('gameZone');

　　　　gameZone.appendChild(board);

}

로그인 후 복사

스크립트에 존재하는 두 개의 게임판을 찾아 스크롤을 내리게 하세요

function fall(){

　　　　gameZone=document.getElementById('gameZone');

　　　　var boarda=document.getElementById('boarda');//因为ab两个游戏板全局一直存在，所以不需要定义找不到时的逻辑

　　　　var anowtop=parseInt(boarda.style.top);//因为获取到的top位置是xxxpx类型，所以用一个parseInt()将其转换为整数便于处理。

　　　　if(anowtop==595){ //这里数目为595而不是600是因为在这一帧删除后，下一帧正好600px，刚好使两块游戏板衔接完好。

　　　　　　　　gameZone.removeChild(boarda);

　　　　　　　　drawBoard();//删除游戏区域的游戏板，并在最上方新生成一个。

　　　　}

　　　　anowtop+=5;

　　　　boarda.style.top=anowtop+"px";

　　　　var boardb=document.getElementById('boardb');

　　　　var bnowtop=parseInt(boardb.style.top);

　　　　if(bnowtop==595){

　　　　　　　　gameZone.removeChild(boardb);

　　　　　　　　drawBoard();

　　　　}

　　　　bnowtop+=5;

　　　　boardb.style.top=bnowtop+"px";

　　　　loc-=5;

　　　　if(loc==0){

　　　　　　　　clearTimeout(timer);

　　　　　　　　alert("你的得分为："+count+"分！");

　　　　　　　　return;

　　　　} //每一帧将落地判定减5，当落地判定为0时表示落地，结算分数。

}

로그인 후 복사

페이지의 게임 영역이 로드된 후 함수가 호출될 수 있도록 window.onload 함수에 메인 호출을 작성합니다.

window.onload=function(){

　　　　drawBoard();

　　　　fall();

　　　　var timer=setInterval('fall()',50);

}

로그인 후 복사

게임 확장:

페이지 UI 추가: 시작 부분의 HTML이 매우 간단하기 때문에 UI 수정도 쉽습니다. 버튼을 설정하고 클릭하면 시작 기능이 실행됩니다.

게임 난이도 변경: setInterval 값을 수정하거나 심판 기능의 간격 수를 수정하거나 낙하 가속도 표현을 최적화할 수도 있습니다.

점수, 순위 등 추가: ajax를 사용하여 서버에 연결하고, 게임이 끝난 후 결과를 데이터베이스에 쓰고, 데이터에서 순위를 참조합니다.

아케이드 모드로 변경: 게임판을 클릭할 때마다 작은 사각형씩 떨어지도록 타이밍을 제거하고 심판 기능을 수정합니다. 총 개수, 시작 시간, 종료 시간을 설정합니다.