1. 페이지 구조를 분석하고 요구 사항과 기능을 명확히 합니다
게임에는 시작 인터페이스, 게임 인터페이스, 게임 종료 인터페이스라는 세 가지 인터페이스가 있습니다. 면1.1 인터페이스 시작 1Start.gif
게임 배경
게임 제목과 게임에서 흔들리는 날개와 날개
-
시작 버튼을 클릭하면 게임 인터페이스로 들어갑니다
- 그라운드 계속 움직이는
- 1.2 게임 인터페이스
- play.gif
넘은 장애물 수를 나타내는 점수
움직이는 장애물은 위쪽 파이프와 아래쪽 파이프
Start 인터페이스.jpg
2.3 JS
새가 날개를 퍼덕이는 효과에는 프레임 원리가 필요합니다. 프레임별 애니메이션
프레임별 애니메이션 애니메이션의 일반적인 형태(Frame By Frame)입니다. 그 원리는 애니메이션 동작을 "연속 키 프레임"으로 분해하는 것, 즉 프레임별로 다른 콘텐츠를 그리는 것입니다. 애니메이션을 연속적으로 재생할 수 있도록 타임라인의 각 프레임에 배치합니다. 2.3.3 시작 버튼
var jsHeadTitle = document.getElementById("headTitle");// 获取标题var jsHeadBird = document.getElementById("headBird"); // 获取标题中小鸟var Y = 3;//标题的摆动幅度var index = 0;var imgArr = ["img/bird0.png","img/bird1.png"] //将小鸟图片路径放入一个数组，利用逐帧动画的原理做出小鸟翅膀摆动的样子var headWaveTimer = setInterval(headWave,200); //设置标题上下摆动的定时器function headWave() {
Y *= -1;
jsHeadTitle.style.top = jsHeadTitle.offsetTop + Y + "px";
jsHeadBird.src = imgArr[index++];if (index == 2) {
index = 0;
}
}로그인 후 복사
완료 후 효과(오버플로 주석 처리:wrapBg에 숨겨져 있음)
start01.gif
다음으로 "게임 인터페이스"를 개발합니다
3. 게임 인터페이스"
게임 인터페이스에는 세 가지 요소가 있습니다. 요소는 "새", "장애물", "점수"입니다. 해당 개체를 차례로 생성합니다.
3.1 Bird
먼저 새 객체인 Bird.js 파일을 생성합니다.
var jsGrassLand1 = document.getElementById("grassLand1"); //获取草地1
var jsGrassLand2 = document.getElementById("grassLand2"); //获取草地2
var landTimer = setInterval(landRun,30); //让草地动起来的定时器
function landRun() {
if (jsGrassLand1.offsetLeft <= -343) {jsGrassLand1.style.left = "343px";
}
if (jsGrassLand2.offsetLeft <= -343) {jsGrassLand2.style.left = "343px";
}jsGrassLand1.style.left = jsGrassLand1.offsetLeft - 3 + "px";jsGrassLand2.style.left = jsGrassLand2.offsetLeft - 3 + "px";
}로그인 후 복사
다음으로 시작 버튼을 클릭하면 새를 로드합니다. (이전 코드를 기반으로 추가됨)
var jsStartBtn = document.getElementById("startBtn");
jsStartBtn.onclick = function() { //为start按键添加点击事件处理程序
jsHeadTitle.style.display = "none"; //隐藏标题
clearInterval(headWaveTimer); //关闭让标题摆动的定时器
jsStartBtn.style.display = "none"; //隐藏按键//待添加功能//点击开始按键进入游戏界面
}로그인 후 복사
새 추가 후 효과
play01.gif
3.2 장애물(상하 파이프)
block Diagram.png
Obstacle 초 상부파이프와 하부파이프로 구분되어 구조가 모식도와 같이 중첩되어 있어 DownDiv2의 높이와 gapHeight
block.js
var bird = {flyTimer:null,//小鸟飞翔定时器
wingTimer:null,//小鸟翅膀摆动定时器
div:document.createElement("div"),showBird:function(parentObj) {this.div.style.width = "40px";this.div.style.height = "28px";this.div.style.backgroundImage = "url(img/bird0.png)";this.div.style.backgroundRepeat = "no-repeat";this.div.style.position = "absolute";this.div.style.left = "50px";this.div.style.top = "200px";this.div.style.zIndex = "1";
parentObj.appendChild(this.div); //将小鸟DIV插入游戏界面中
},fallSpeed: 0, //小鸟下落速度
flyBird: function(){ //控制小鸟飞翔下落的函数
bird.flyTimer = setInterval(fly,40);function fly() {
bird.div.style.top = bird.div.offsetTop + bird.fallSpeed++ + "px";if (bird.div.offsetTop < 0) {
bird.fallSpeed = 2; //这里用于控制小鸟不要飞出界面
}if (bird.div.offsetTop >= 395) {
bird.fallSpeed = 0;
clearInterval(bird.flyTimer); //一旦飞到地面，清除定时器
clearInterval(bird.wingTimer); //清除翅膀摆动定时器
}if (bird.fallSpeed > 12) {
bird.fallSpeed = 12; //鸟的最大下落速度控制在12
}
}
},wingWave: function() { //控制小鸟煽动翅膀的函数var up = ["url(img/up_bird0.png)", "url(img/up_bird1.png)"];var down = ["url(img/down_bird0.png)", "url(img/down_bird1.png)"];var i = 0, j = 0;
bird.wingTimer = setInterval(wing,120);//逐帧动画，小鸟煽动翅膀function wing() {if (bird.fallSpeed > 0) {
bird.div.style.backgroundImage = down[i++];if (i==2) {i = 0}
}if (bird.fallSpeed < 0) {
bird.div.style.backgroundImage = up[j++];if (j==2) {j = 0}
}
}
},
};로그인 후 복사
의 높이를 임의로 설정하여 생성되는 장애물의 모양을 변경할 수 있습니다. 두 개의 직사각형 div 사이의 난수 및 충돌 감지를 제공하는 데 사용되는 공용 객체 파일 baseObj.js
jsStartBtn.onclick = function() { //为start按键添加点击事件处理程序
jsHeadTitle.style.display = "none"; //隐藏标题
clearInterval(headWaveTimer); //关闭让标题摆动的定时器
jsStartBtn.style.display = "none"; //隐藏按键
bird.showBird(jsWrapBg); //插入小鸟到界面中
bird.flyBird(); //控制小鸟飞翔下落
bird.wingWave(); //逐帧动画，小鸟煽动翅膀
jsWrapBg.onclick = function(){
bird.fallSpeed = -8;
};//待添加功能//点击开始按键进入游戏界面
}로그인 후 복사
다음 아이디어는 시작 버튼을 클릭할 때 블록을 생성하고 이 블록을 배열
blocksArr
에 저장하고 시간을 측정하는 것입니다.
landTimer
프로세서의
landRun
메소드에서 이 배열의 길이를 확인하세요. 배열이 빈 배열이 아닌 경우 배열의 모든 블록을 이동하세요.
배열의 마지막 블록이 남은 거리를 확인하세요. 특정 거리에 도달하면 새 블록을 만들어 배열에 추가하세요.
배열의 첫 번째 블록을 확인하세요. 특정 위치에 도달하면 구조에서 downDivWrap 및 upDivWrap을 제거하고 배열의 블록을 삭제하세요.
function Block() {this.upDivWrap = null;this.downDivWrap = null;this.downHeight = baseObj.randomNum(0,150);//随机生成0-150之间的数，用于控制下管道的高度this.gapHeight = baseObj.randomNum(150,160);// 管道中间间隙宽度，通过调节大小，可以的控制游戏难度this.upHeight = 312 - this.downHeight - this.gapHeight;// 用来生成Div的方法this.createDiv = function(url, height, positionType, left, top) {var newDiv = document.createElement("div");
newDiv.style.width = "62px";
newDiv.style.height = height;
newDiv.style.position = positionType;
newDiv.style.left = left;
newDiv.style.top = top;
newDiv.style.backgroundImage = url; //"url(/img/0.jpg)"return newDiv;
};this.createBlock = function() {var upDiv1 = this.createDiv("url(img/up_mod.png)", this.upHeight + "px");var upDiv2 = this.createDiv("url(img/up_pipe.png)", "60px");this.upDivWrap = this.createDiv(null, null, "absolute", "450px");this.upDivWrap.appendChild(upDiv1);this.upDivWrap.appendChild(upDiv2);//生成上方管道var downDiv1 = this.createDiv("url(img/down_pipe.png)", "60px");var downDiv2 = this.createDiv("url(img/down_mod.png)", this.downHeight +"px");this.downDivWrap = this.createDiv(null, null, "absolute", "450px", 363 - this.downHeight + "px");this.downDivWrap.appendChild(downDiv1);this.downDivWrap.appendChild(downDiv2); //生成下方的管道
jsWrapBg.appendChild(this.upDivWrap);
jsWrapBg.appendChild(this.downDivWrap);
};this.moveBlock = function() { //控制管道移动的方法this.upDivWrap.style.left = this.upDivWrap.offsetLeft - 3 + "px";this.downDivWrap.style.left = this.downDivWrap.offsetLeft - 3 + "px";
};
}로그인 후 복사
현재 게임 효과
play02.gif
3.3 计分器
游戏中的计分器相对较好实现，我们就实现最大为三位数的计分器吧。
html
<div id="score">
<div id="num1"></div>
<div id="num2"></div>
<div id="num3"></div>
</div>로그인 후 복사
css样式
#score{position:absolute;left: 130px;top:50px;z-index: 1;
}#score div{height: 39px;width: 28px;float: left;background-image: url(../img/0.jpg);display: none;
}로그인 후 복사
js
var jsScore = document.getElementById("score");
var jsNum1 = document.getElementById("num1");
var jsNum2 = document.getElementById("num2");
var jsNum3 = document.getElementById("num3");
var score = 0;로그인 후 복사
实现计数器功能，最重要的是如何判断走过水管的数量，我们以水管的位置来判断。bird的定位left为50px，水管的宽度是62px，当水管越过小鸟的时候，水管距离它父级的定位offsetLeft 是 -12px。每当有一个水管到达此位置，score++；
在start按钮的事件处理程序中加入
jsNum1.style.display = "block";// 在点击开始之后，让计数器显示出来。
로그인 후 복사
if (blocksArr[0].downDivWrap.offsetLeft == -12) {score++;//积分面板
if (score < 10) {jsNum1.style.backgroundImage = "url(img/" + score + ".jpg)";
} else if (score < 100) {jsNum2.style.display = "block";jsNum1.style.backgroundImage = "url(img/" + parseInt(score/10) + ".jpg)";jsNum2.style.backgroundImage = "url(img/" + score%10 + ".jpg)";
} else if (score < 1000) {jsNum3.style.display = "block";jsNum1.style.backgroundImage = "url(img/" + parseInt(score/100) + ".jpg)";jsNum2.style.backgroundImage = "url(img/" + parseInt(score/10)%10 + ".jpg)";jsNum3.style.backgroundImage = "url(img/" + score%10 + ".jpg)";
}
console.log(score);
}로그인 후 복사
目前效果 ，计数器功能完成。
play03.gif
4.“结束界面”的开发
当小鸟和管道碰撞或者和地面碰撞时候，隐藏计分器，弹出结束面板。
结束界面主要有“结束面板”和“ok”按钮，这里需要为“ok”按钮添加点击事件。
<div id="gameOver">
<img src="img/game_over.jpg" alt="game over" />
<img src="img/message.jpg" alt="message" />
<img id="ok" src="img/ok.jpg" alt="ok" />
</div>로그인 후 복사
#gameOver{position: absolute;top: 100px;text-align: center;display: none;z-index: 1;
}로그인 후 복사
为“OK”按钮添加事件
jsOkBtn.onclick = function() {window.location.href = "index.html"; //刷新页面
}로그인 후 복사
最终效果
play04.gif
有兴趣的朋友，可以加群下载代码，然后加上音效
위 내용은 JS를 이용하여 Fly Bird 게임을 구현하는 전체 과정에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
