Flappy Bird original — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(Новая страница: «{{#widget:Iframe | url=https://lavrentiy123.github.io/FlappyBird1/Flap.html |width=400 | height=650 }}»)
 
 
(не показана 1 промежуточная версия 1 участника)
Строка 1: Строка 1:
 
{{#widget:Iframe  | url=https://lavrentiy123.github.io/FlappyBird1/Flap.html  |width=400  | height=650  }}
 
{{#widget:Iframe  | url=https://lavrentiy123.github.io/FlappyBird1/Flap.html  |width=400  | height=650  }}
 +
 +
 +
Описание кода HTML
 +
 +
<!DOCTYPE html>
 +
<html lang="en">
 +
<head>
 +
<meta charset="UTF-8">
 +
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
<meta http-equiv="X-UA-Compatible" content="ie=edge">
 +
<title>Flappy Bird!</title>
 +
</head>
 +
<body>
 +
 +
 +
<canvas id="canvas" width="288" height="512"></canvas>
 +
 +
<script src="Flap.js"></script>
 +
</body>
 +
</html>
 +
 +
 +
 +
 +
 +
Описание кода JavaScript
 +
 +
 +
//создаем канвас
 +
 +
var cvs = document.getElementById("canvas");
 +
 +
//вид игры:
 +
 +
var ctx = cvs.getContext("2d");
 +
 +
//создаем объекты
 +
 +
var bird = new Image();
 +
var bg = new Image();
 +
var fg = new Image();
 +
var pipeUp = new Image();
 +
var pipeBottom = new Image();
 +
 +
bird.src = "flappy_bird_bird.png";
 +
bg.src = "flappy_bird_bg.png";
 +
fg.src = "flappy_bird_fg.png";
 +
pipeUp.src = "flappy_bird_pipeUp.png";
 +
pipeBottom.src = "flappy_bird_pipeBottom.png";
 +
 +
// Звуковые файлы
 +
 +
//var fly = new Audio();
 +
var score_audio = new Audio();
 +
 +
//fly.src = "js_game_audio/fly.mp3";
 +
score_audio.src = "js_game_audio/score.mp3";
 +
 +
var gap = 90;
 +
 +
// При нажатии на какую-либо кнопку
 +
 +
document.addEventListener("keydown", moveUp); //отслеживаем какое-либо дейтвие
 +
 +
 +
function moveUp() {
 +
yPos -= 26;    // поднимает на 26 единиц выше
 +
//fly.play();
 +
}
 +
 +
// Создание блоков
 +
 +
var pipe = [];    //создаем массив пустой
 +
 +
pipe[0] = {
 +
x : cvs.width, //за экраном находится
 +
y : 0
 +
}
 +
 +
var score = 0;
 +
 +
// Позиция птицы
 +
 +
var xPos = 10;
 +
var yPos = 150;
 +
var grav = 1;
 +
 +
//рисуем объекты в канвасе
 +
 +
function draw() {
 +
ctx.drawImage(bg, 0, 0);  //рисуем картинку
 +
 +
//i идет от 0 до количесва эллементов в массиве
 +
for(var i = 0; i < pipe.length; i++) {
 +
 +
//используем координаты из массива
 +
 +
ctx.drawImage(pipeUp, pipe[i].x, pipe[i].y);
 +
ctx.drawImage(pipeBottom, pipe[i].x, pipe[i].y + pipeUp.height + gap);
 +
 +
pipe[i].x--;
 +
 +
// новые блоки - постоянное их создание + добавляем новый эллемент
 +
 +
if(pipe[i].x == 125) {
 +
pipe.push({
 +
x : cvs.width,//ширина
 +
y : Math.floor(Math.random() * pipeUp.height) - pipeUp.height //случайное число (случайное место появления блоков)
 +
});
 +
}
 +
 +
// Отслеживание прикосновений (столкновений)
 +
 +
//с блоками и землей
 +
 +
if(xPos + bird.width >= pipe[i].x
 +
&& xPos <= pipe[i].x + pipeUp.width
 +
&& (yPos <= pipe[i].y + pipeUp.height
 +
|| yPos + bird.height >= pipe[i].y + pipeUp.height + gap) || yPos + bird.height >= cvs.height - fg.height) {
 +
location.reload(); // Перезагрузка страницы
 +
}
 +
 +
//количество очков
 +
 +
if(pipe[i].x == 5) {
 +
score++;
 +
score_audio.play();
 +
}
 +
}
 +
 +
ctx.drawImage(fg, 0, cvs.height - fg.height);
 +
ctx.drawImage(bird, xPos, yPos);
 +
 +
yPos += grav; //увелич на 1.5
 +
 +
ctx.fillStyle = "#red";
 +
ctx.font = "27px Verdana";
 +
ctx.fillText("Счет: " + score, 10, cvs.height - 20);
 +
 +
requestAnimationFrame(draw); //постоянно метод ctx.drawImage
 +
}
 +
 +
pipeBottom.onload = draw;
 +
//используется чтобы все изображения были загружены и только поcле мы видели риунок

Текущая версия на 19:19, 5 мая 2021


Описание кода HTML

<!DOCTYPE html> <html lang="en"> <head> 

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flappy Bird!</title>

</head> <body> 


<canvas id="canvas" width="288" height="512"></canvas>

<script src="Flap.js"></script>

</body> </html>



Описание кода JavaScript


//создаем канвас

var cvs = document.getElementById("canvas");

//вид игры:

var ctx = cvs.getContext("2d");

//создаем объекты

var bird = new Image(); var bg = new Image(); var fg = new Image(); var pipeUp = new Image(); var pipeBottom = new Image();

bird.src = "flappy_bird_bird.png"; bg.src = "flappy_bird_bg.png"; fg.src = "flappy_bird_fg.png"; pipeUp.src = "flappy_bird_pipeUp.png"; pipeBottom.src = "flappy_bird_pipeBottom.png";

// Звуковые файлы

//var fly = new Audio(); var score_audio = new Audio();

//fly.src = "js_game_audio/fly.mp3"; score_audio.src = "js_game_audio/score.mp3";

var gap = 90;

// При нажатии на какую-либо кнопку

document.addEventListener("keydown", moveUp); //отслеживаем какое-либо дейтвие


function moveUp() { 

yPos -= 26;    // поднимает на 26 единиц выше 
//fly.play();

}

// Создание блоков

var pipe = []; //создаем массив пустой

pipe[0] = { 

x : cvs.width, //за экраном находится 
y : 0

}

var score = 0;

// Позиция птицы

var xPos = 10; var yPos = 150; var grav = 1;

//рисуем объекты в канвасе

function draw() { 

ctx.drawImage(bg, 0, 0);  //рисуем картинку

//i идет от 0 до количесва эллементов в массиве 

for(var i = 0; i < pipe.length; i++) {

//используем координаты из массива 

ctx.drawImage(pipeUp, pipe[i].x, pipe[i].y); 
ctx.drawImage(pipeBottom, pipe[i].x, pipe[i].y + pipeUp.height + gap);

pipe[i].x--;

// новые блоки - постоянное их создание + добавляем новый эллемент 

if(pipe[i].x == 125) {
pipe.push({
x : cvs.width,//ширина
y : Math.floor(Math.random() * pipeUp.height) - pipeUp.height //случайное число (случайное место появления блоков)
});
}

// Отслеживание прикосновений (столкновений)

//с блоками и землей

if(xPos + bird.width >= pipe[i].x
&& xPos <= pipe[i].x + pipeUp.width
&& (yPos <= pipe[i].y + pipeUp.height
|| yPos + bird.height >= pipe[i].y + pipeUp.height + gap) || yPos + bird.height >= cvs.height - fg.height) {
location.reload(); // Перезагрузка страницы
}

//количество очков 

if(pipe[i].x == 5) {
score++;
score_audio.play();
}
}

ctx.drawImage(fg, 0, cvs.height - fg.height);
ctx.drawImage(bird, xPos, yPos);

yPos += grav; //увелич на 1.5

ctx.fillStyle = "#red";
ctx.font = "27px Verdana";
ctx.fillText("Счет: " + score, 10, cvs.height - 20);

requestAnimationFrame(draw); //постоянно метод ctx.drawImage

}

pipeBottom.onload = draw; //используется чтобы все изображения были загружены и только поcле мы видели риунок

Источник — «http://tm.spbstu.ru/?title=Flappy_Bird_original&oldid=58197»