How to make a flappy bird game in NOTEPAD

-
Welcome to my blog, come we will make a small game.Just follow the STEPS.

STEPS 1: Open NOTEPAD and copy the codes.

STEPS 2: After this just Save as 123.html(replace 123 with your game name)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;
var myObstacles = [];
var myScore;

function startGame() {
    myGamePiece = new component(30 , 30, "red",30,120,);
myGamePiece.gravity = 0.05;
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y, type) {
    this.type = type;
    this.score = 0;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0; 
    this.x = x;
    this.y = y;
    this.gravity = 0;
    this.gravitySpeed = 0;
    this.update = function() {
        ctx = myGameArea.context;
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
    this.hitBottom = function() {
        var rockbottom = myGameArea.canvas.height - this.height;
        if (this.y > rockbottom) {
            this.y = rockbottom;
            this.gravitySpeed = 0;
        }
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }
}

function updateGameArea() {
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
            return;
        }
    }
    myGameArea.clear();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || everyinterval(150)) {
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 200;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 50;
        maxGap = 200;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
        myObstacles.push(new component(10, height, "green", x, 0));
        myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
    }
    for (i = 0; i < myObstacles.length; i += 1) {
        myObstacles[i].x += -1;
        myObstacles[i].update();
    }
    myScore.text="SCORE: " + myGameArea.frameNo;
    myScore.update();
    myGamePiece.newPos();
    myGamePiece.update();
}

function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

function accelerate(n) {
    myGamePiece.gravity = n;
}
</script>
<br>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">ACCELERATE</button>
<p>Use the ACCELERATE button to stay in the air</p>
<p>How long can you stay alive?</p>
</body>
</html>

Comments

Luke said…
I have a suggestion. Put the image before all of the code. Some people like to copy and paste, and they need to copy separate things. I would recommend doing this.
June 12, 2021 at 5:09 AM
Unknown said…
BRO, YOU JUST COPY PASTED THIS CODE FROM ANOTHER WEBSITE. YOU DID'NT CREATE THIS GAME ON YOUR OWN. YOU COPY PASTED THAT CODE AND PUT IT IN YOUR OWN WEBSITE.
October 27, 2021 at 9:39 PM
Post a Comment

Popular posts from this blog

How to create a snake game in NOTEPAD

-
Image
Hello everybody,If you want to make a game just follow my STEPS STEP 1:Open NOTEPAD and copy the codes. STEP 2:after this just Save as 1234.html (replace 1234 with your game name) <canvas id=canvas height=400 width=600> </canvas> <script> function Game(){   this.snake = new Snake();   this.food = new Food();   this.ctx = canvas.getContext('2d');   this.scale = 20;   this.nx = Math.floor(canvas.width/this.scale);   this.ny = Math.floor(canvas.height/this.scale);   this.step = function(){     this.snake.step(this);     this.food.step(this);     this.draw();     this.wait();   };   this.draw = function(){     this.Rect(0, 0, this.nx, this.ny, '#AAAAAA');     this.snake.draw(this);     this.food.draw(this);   };   this.keydown = function(evt){     this.snake.keydown(evt.key);   }   this.Rect = fu...
Read more

How to make a multiplayer game on NOTEPAD

-
Image
Hello everybody after publishing two games today I am publishing my third game which is a multiplayer game.Just follow my STEPS. STEP 1:Open NOTEPAD and copy the codes. STEP 2:after that just Save as 12345.html (replace 12345 with the game name) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { padding: 0px; } canvas { margin-top: 15vh; margin-left: 20vw; background: black; outline: 1px solid white; } </style> </head> <body onload="startGame()"> <script> var hockey1; var hockey2; var ball; var point1 = 0; var point2 = 0; function startGame() { myGameArea.start(); hockey1 = new component(8, 60, "yellow", 20, 150); hockey2 = new component(8, 60, "lime", 670, 150); ball = new component(7, 7, 'orange', 350, 170); myScor...
Read more