Редактирование: Flappy bird

== Игра "Flappy bird" ==
== Описание ==
Реализация игры "Flappy bird" на языке программирования JavaScript.
<br />

Исполнители: [[Рязанов Павел]], [[Шумов Кристиан]]
<br />

== Математическая модель ==
Поле представляет собой прямоугольник, в котором движется птичка в сторону блоков, при столкновении с которыми вы проигрываете.<br />
Задача игры: пролететь, не задев ни одного блока, как можно дольше.<br />
Справа от игрового поля располагается таблица рейтинга, в которую заносятся результаты лучших попыток в порядке убывания.
== Визуализация ==
{{#widget: Iframe | url=http://tm.spbstu.ru/htmlets/js2020/Flappy%20gidrak/fb_full.html | width=540 | height=540 | border=0}}
== Код программы ==
'''Код программы на языке JavaScript''':
<br />
<syntaxhighlight lang="javascript" line start="1" enclose="div"> ==window.addEventListener('load', program_code, false);

function program_code() {

    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();
	var gap = 90;
	var dt = 0.01;
	var vy = 250;
    var LOOSE = false;
	var arr=[];
	var interv;
	var polet = true;
	//var arr = JSON.parse(localStorage.getItem("arr"));
	var score = 0;
    if(localStorage.getItem("arr")== null){
    localStorage.setItem("arr", JSON.stringify(arr));
    }
	//if (!localStorage.getItem('arr')) return;
	
// Картинки
	bird.src = "birdwh3.png";
    bg.src = "bg.png";
    fg.src = "fg.png";
    pipeUp.src = "pipeUp.png";
    pipeBottom.src = "pipeBottom.png";
	
// Звуковые файлы
    // var fly = new Audio();
    // var score_audio = new Audio();

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

   
   // Движение бёрда
    document.addEventListener("keydown", moveUp);
    function moveUp() {
		if (polet == true) {
		function movebird () { 
		yPos -= vy*dt;
       // fly.play();
		}
		// if (yPos = bird.height/2) {
			// function stopBird {
				// yPos >= bird.height/2;
			// }
		// }
	 interv = setInterval(movebird, 1000*dt);
	 polet = false;
		}
    }
	document.addEventListener ("keyup", moveDown);
	function moveDown () {
		clearInterval(interv);
		polet = true;
	}


// Создание блоков
    var pipe = [];
    pipe[0] = {
        x: cvs.width,
        y: 0
    }

    // Начальная озиция бёрда
    var xPos = 10;
    var yPos = 150;
    var grav = 1.6;
	
    // Логика игры
    function draw() {
        if (!LOOSE) {
            ctx.drawImage(bg, 0, 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 == 95) {
                    pipe.push({
                        x: cvs.width,
                        y: Math.floor(Math.random() * pipeUp.height) - pipeUp.height
                    });
                }

                 // Отслеживание прикосновений(услович проигрыша)
                if (xPos + bird.width*0.75 + 2.5 >= pipe[i].x
                    && xPos <= pipe[i].x + pipeUp.width
                    && (yPos <= pipe[i].y + pipeUp.height
                        || yPos + bird.height*0.75 + 1.75 >= pipe[i].y + pipeUp.height + gap) || yPos + bird.height >= cvs.height - fg.height) {
                    LOOSE = true;  }
                if (pipe[i].x == 5) {
                    score++;
                    // score_audio.play();
                }
            }

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

            yPos += grav;

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

            requestAnimationFrame(draw);
			
        } else {
			//records
            arr=JSON.parse(localStorage.getItem("arr"));
			arr.push(score)
			arr.sort((a, b) => a - b)
            arr.reverse()
			console.log(score)
			console.log(arr)
			localStorage.setItem("arr", JSON.stringify(arr));
            records.innerHTML="<tr><td> Место</td><td>Счёт</td></tr>";
			
			for(var i=0; i<9; i++){
        if(arr.length>i){
        records.innerHTML+="<tr><td>"+(i+1)+"</td><td>"+arr[i]+"</td></tr>";
            }
            else{
                records.innerHTML+="<tr><td>"+(i+1)+"</td><td></td></tr>";
            }
    }
     records.innerHTML+='<tr><td><input border="100" id="clearStorage" onclick="localStorage.clear();" type=button value = "Сбросить" ></td><td><input id="reset" onclick="location.reload();" type=button value = "Restart" ></td></tr>';
			
			
			//табло проигрыша
            ctx.fillStyle = "#ffffff";
            ctx.fillRect(45, 223, 205, 70)
            ctx.fillStyle = "#9ACD32"
            ctx.font = "24px Verdana";
            ctx.fillText("КОНЕЦ ИГРЫ!", 50, 250);
			ctx.fillText("СЧЕТ: " + score, 50, 280);
			ctx.fillRect(50, 252, 170, 2);
			
        }
		//(a, b) => a — b
    }

   pipeBottom.onload = tmp;
   function tmp(){
       arr=JSON.parse(localStorage.getItem("arr"));
			arr.sort((a, b) => a - b)
			arr.reverse()
			console.log(score)
			console.log(arr)
			localStorage.setItem("arr", JSON.stringify(arr));
            records.innerHTML="<tr><td> Место</td><td>Счёт</td></tr>";
			for(var i=0; i<9; i++){
        if(arr.length>i){
        records.innerHTML+="<tr><td>"+(i+1)+"</td><td>"+arr[i]+"</td></tr>";
            }
            else{
                records.innerHTML+="<tr><td>"+(i+1)+"</td><td></td></tr>";
            }
    }
     records.innerHTML+='<tr><td><input border="100" id="clearStorage" onclick="localStorage.clear();" type=button value = "Сбросить"></td><td><input id="reset" onclick="location.reload();" type=button value = "Restart" ></td></tr>';
     draw();
}
   draw;
   
   
	reset.onclick = function() {
location.reload() }
} == </syntaxhighlight>