floppy-gs.php

<?php
/**
 * Module Name: Floppy GS
 * Module ID: floppygs
 * Description: Floppy bird game.
 * Version: 1.0
 * Default W: 4
 * Default H: 7
 */
 
if (!defined('IN_GS')) { die('You cannot load this page directly.'); }

// Add $i18n_m for i18n lang files in Modules
$i18n_m = dash_module_i18n('floppygs');

?>


<style>
.flappy-wrap{
	text-align:center;
	max-width:340px;
	margin:auto;
	font-family:sans-serif;
	padding-top:35px;
}

canvas{
	background:#cfe9ff;
	border-radius:6px;
	box-shadow:0 3px 8px rgba(0,0,0,.2);
	cursor:pointer;
}
</style>

<div class="flappy-wrap">
	<canvas id="flappy" width="320" height="420"></canvas>
	<p>Click or press Space</p>
</div>

<script>
const canvas = document.getElementById("flappy");
const ctx = canvas.getContext("2d");

/* ---------- SVG BIRD ---------- */
const birdSVG = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
<circle cx="30" cy="30" r="20" fill="#ff9800"/>
<circle cx="40" cy="25" r="4" fill="#000"/>
<polygon points="48,30 60,35 48,40" fill="#ff5722"/>
</svg>
`;

const birdImg = new Image();
birdImg.src = "data:image/svg+xml;base64," + btoa(birdSVG);

/* ---------- GAME VARIABLES ---------- */

let birdY, velocity, pipeX, pipeTop, score;

let gravity = 0.45;
let jump = -7;
let gap = 130;

let gameState = "start";

let highScore = localStorage.getItem("flappyHigh") || 0;

/* ---------- INIT ---------- */

function init(){
	birdY = 200;
	velocity = 0;
	pipeX = 320;
	pipeTop = Math.random()*180+40;
	score = 0;
	gameState = "playing";
}

/* ---------- INPUT ---------- */

function flap(){

	if(gameState==="start"){
		init();
	}
	else if(gameState==="playing"){
		velocity = jump;
	}
	else if(gameState==="gameover"){
		init();
	}

}

canvas.addEventListener("click", flap);

document.addEventListener("keydown", e=>{
	if(e.code==="Space"){
		e.preventDefault();
		flap();
	}
});

/* ---------- GAME UPDATE ---------- */

function update(){

	if(gameState==="playing"){

		velocity += gravity;
		birdY += velocity;

		pipeX -= 2;

		if(pipeX < -60){

			pipeX = 320;
			pipeTop = Math.random()*180+40;

			score++;

			if(score > highScore){
				highScore = score;
				localStorage.setItem("flappyHigh", highScore);
			}

		}

		if(
			birdY < 0 ||
			birdY > 420 ||
			(80 > pipeX && 80 < pipeX+60 &&
			(birdY < pipeTop || birdY > pipeTop+gap))
		){
			gameState = "gameover";
		}

	}

}

/* ---------- DRAW ---------- */

function draw(){

	ctx.clearRect(0,0,320,420);

	ctx.fillStyle="#cfe9ff";
	ctx.fillRect(0,0,320,420);

	/* pipes */

	ctx.fillStyle="#4caf50";
	ctx.fillRect(pipeX,0,60,pipeTop);
	ctx.fillRect(pipeX,pipeTop+gap,60,420);

	/* bird rotation */

	ctx.save();
	ctx.translate(80, birdY);

	let angle = velocity * 0.05;
	if(angle > 0.5) angle = 0.5;
	if(angle < -0.5) angle = -0.5;

	ctx.rotate(angle);

	ctx.drawImage(birdImg, -20, -20, 40, 40);

	ctx.restore();

	/* score */

	ctx.fillStyle="#000";
	ctx.font="18px sans-serif";
	ctx.fillText("Score: "+score,10,25);
	ctx.fillText("Best: "+highScore,10,45);

	if(gameState==="start"){
		ctx.fillText("Click or Press Space",70,200);
	}

	if(gameState==="gameover"){
		ctx.fillText("Game Over",110,200);
		ctx.fillText("Click or Space to restart",60,230);
	}

}

/* ---------- LOOP ---------- */

function loop(){
	update();
	draw();
	requestAnimationFrame(loop);
}

loop();

</script>