how to use canvas in JavaScript flappy bird code
Posted By: Anonymous
I have a working flappy bird code but I was told to use canvas instead. I’ve tried to read other flappy bird codes but they were very different than mine so every time I tried to apply their codes it didn’t work. How can I change my code so the js will contain the build of the canvas and then I can call the game on canvas in the html?
Here is my code snippet:
_x000D_
_x000D_
var bird;
var pole1;
var pole2;
var scoreSpan;
var speedSpan;
var speed;
var score;
var flapping;
var playing;
var scoreUpdated;
var gameArea;
var restartBtn;
var containerWidth;
var containerHeight;
function load() {
bird = document.getElementById("bird")
poles = document.querySelectorAll(".pole")
pole1 = document.getElementById("pole-1")
pole2 = document.getElementById("pole-2")
scoreSpan = document.getElementById("score")
speedSpan = document.getElementById("speed")
gameArea = document.getElementById("game-area");
restartBtn = document.getElementById("restart-btn");
containerWidth = gameArea.clientWidth;
containerHeight = gameArea.clientHeight;
gameArea.addEventListener("mousedown", function (e) {
if (playing) {
flapping = true;
}
});
gameArea.addEventListener("mouseup", function (e) {
if (playing) {
flapping = false;
}
});
}
function restart() {
restartBtn.removeEventListener('click', restart);
speed = 2;
score = 0;
scoreUpdated = false;
flapping = false;
playing = true;
speedSpan.textContent = speed;
scoreSpan.textContent = score;
poles.forEach((pole) => {
pole.style.right = 0;
});
bird.style.top = 20 + "%";
gameLoop();
}
function update() {
var polesCurrentPos = parseFloat(window.getComputedStyle(poles[0]).getPropertyValue("right"));
if (polesCurrentPos > containerWidth * 0.85) {
if (!scoreUpdated) {
score += 1;
scoreUpdated = true;
}
scoreSpan.textContent = score;
}
if (polesCurrentPos > containerWidth) {
var newHeight = parseInt(Math.random() * 100);
pole1.style.height = 100 + newHeight + "px";
pole2.style.height = 100 - newHeight + "px";
polesCurrentPos = 0;
speed += 0.25;
speedSpan.textContent = parseInt(speed);
scoreUpdated = false;
}
poles.forEach((pole) => {
pole.style.right = polesCurrentPos + speed + "px";
});
let birdTop = parseFloat(window.getComputedStyle(bird).getPropertyValue("top"));
if (flapping) {
bird.style.top = birdTop + -2 + "px";
} else if (birdTop < containerHeight - bird.clientHeight) {
bird.style.top = birdTop + 2 + "px";
}
if (collision(bird, pole1) || collision(bird, pole2) || birdTop <= 0 || birdTop > containerHeight - bird.clientHeight) {
gameOver();
}
}
function gameOver() {
window.console.log("game over");
playing = false;
restartBtn.addEventListener('click', restart);
}
function gameLoop() {
update();
if (playing) {
requestAnimationFrame(gameLoop);
}
}
function collision(gameDiv1, gameDiv2) {
let left1 = gameDiv1.getBoundingClientRect().left;
let top1 = gameDiv1.getBoundingClientRect().top;
let height1 = gameDiv1.clientHeight;
let width1 = gameDiv1.clientWidth;
let bottom1 = top1 + height1;
let right1 = left1 + width1;
let left2 = gameDiv2.getBoundingClientRect().left;
let top2 = gameDiv2.getBoundingClientRect().top;
let height2 = gameDiv2.clientHeight;
let width2 = gameDiv2.clientWidth;
let bottom2 = top2 + height2;
let right2 = left2 + width2;
if (bottom1 < top2 || top1 > bottom2 || right1 < left2 || left1 > right2)
return false;
return true;
}
document.addEventListener("keydown", function (e) {
var key = e.key;
if (key === " " && playing) {
flapping = true;
}
});
document.addEventListener("keyup", function (e) {
e.preventDefault();
var key = e.key;
if (key === " " && playing) {
flapping = false;
}
});
load();
restart();
_x000D_
#game {
font-family: David, cursive, sans-serif;
text-align: center;
}
#instructions {
text-align: center;
}
#game-area {
margin: auto;
position: relative;
width: 400px;
height: 300px;
border: 2px solid green;
background-color: deepskyblue;
overflow: hidden;
}
#bird {
position: absolute;
background: url('https://usercontent.one/wp/compucademy.net/wp-content/uploads/2020/11/robbybird.png');
height: 27px;
width: 42px;
background-size: contain;
background-repeat: no-repeat;
top: 20%;
left: 15%;
}
.pole {
position: absolute;
height: 100px;
width: 30px;
background-color: green;
right: 0px;
}
#pole-1 {
top: 0;
}
#pole-2 {
bottom: 0;
}
#game-info {
margin: 5px;
font-size: 18px;
}
#game-info p {
display: inline;
padding: 20px;
}
#restart-btn {
padding: 5px 10px;
background-color: green;
color: white;
font-size: 18px;
border: none;
cursor: pointer;
outline: none;
}
_x000D_
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Stav Levy - Flappy Bird</title>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" media="screen" />
<script src="game.js" defer></script>
</head>
<body>
<div id="game">
<div id="game-area">
<div id="bird"></div>
<div class="pole" id="pole-1"></div>
<div class="pole" id="pole-2"></div>
</div>
<div id="game-info">
<p>Score:<span id="score">0</span></p>
<button id="restart-btn">Restart</button>
<p>Speed:<span id="speed">2</span></p>
</div>
</div>
</body>
</html>
_x000D_
_x000D_
_x000D_
Solution
_x000D_
_x000D_
var bird;
var pole1;
var pole2;
var scoreSpan;
var speedSpan;
var highSpan;
var speed;
var score;
var high;
var flapping;
var playing;
var scoreUpdated;
var gameArea;
var restartBtn;
var containerWidth;
var containerHeight;
function load() {
high = 0;
bird = document.getElementById("bird")
poles = document.querySelectorAll(".pole")
pole1 = document.getElementById("pole-1")
pole2 = document.getElementById("pole-2")
scoreSpan = document.getElementById("score")
speedSpan = document.getElementById("speed")
highSpan = document.getElementById("high")
gameArea = document.getElementById("game-area");
restartBtn = document.getElementById("restart-btn");
containerWidth = gameArea.clientWidth;
containerHeight = gameArea.clientHeight;
gameArea.addEventListener("mousedown", function (e) {
if (playing) {
flapping = true;
}
});
gameArea.addEventListener("mouseup", function (e) {
if (playing) {
flapping = false;
}
});
}
function restart() {
restartBtn.removeEventListener('click', restart);
if(score >= high){
high = score;
}
speed = 2;
score = 0;
scoreUpdated = false;
flapping = false;
playing = true;
speedSpan.textContent = speed;
scoreSpan.textContent = score;
highSpan.textContent = high;
poles.forEach((pole) => {
pole.style.right = 0;
});
bird.style.top = 20 + "%";
gameLoop();
}
function update() {
var polesCurrentPos = parseFloat(window.getComputedStyle(poles[0]).getPropertyValue("right"));
if (polesCurrentPos > containerWidth * 0.85) {
if (!scoreUpdated) {
score += 1;
scoreUpdated = true;
}
scoreSpan.textContent = score;
if(score >= high){
high = score;
highSpan.textContent = high;
}
}
if (polesCurrentPos > containerWidth) {
var newHeight = parseInt(Math.random() * 100);
pole1.style.height = 100 + newHeight + "px";
pole2.style.height = 100 - newHeight + "px";
polesCurrentPos = 0;
speed += 0.25;
speedSpan.textContent = parseInt(speed);
scoreUpdated = false;
}
poles.forEach((pole) => {
pole.style.right = polesCurrentPos + speed + "px";
});
let birdTop = parseFloat(window.getComputedStyle(bird).getPropertyValue("top"));
if (flapping) {
bird.style.top = birdTop + -2 + "px";
} else if (birdTop < containerHeight - bird.clientHeight) {
bird.style.top = birdTop + 2 + "px";
}
if (collision(bird, pole1) || collision(bird, pole2) || birdTop <= 0 || birdTop > containerHeight - bird.clientHeight) {
gameOver();
}
}
function gameOver() {
window.console.log("Game Over!:(");
playing = false;
restartBtn.addEventListener('click', restart);
}
function gameLoop() {
update();
if (playing) {
requestAnimationFrame(gameLoop);
}
}
function collision(gameDiv1, gameDiv2) {
let left1 = gameDiv1.getBoundingClientRect().left;
let top1 = gameDiv1.getBoundingClientRect().top;
let height1 = gameDiv1.clientHeight;
let width1 = gameDiv1.clientWidth;
let bottom1 = top1 + height1;
let right1 = left1 + width1;
let left2 = gameDiv2.getBoundingClientRect().left;
let top2 = gameDiv2.getBoundingClientRect().top;
let height2 = gameDiv2.clientHeight;
let width2 = gameDiv2.clientWidth;
let bottom2 = top2 + height2;
let right2 = left2 + width2;
if (bottom1 < top2 || top1 > bottom2 || right1 < left2 || left1 > right2)
return false;
return true;
}
document.addEventListener("keydown", function (e) {
var key = e.key;
if (key === " " && playing) {
flapping = true;
}
});
document.addEventListener("keyup", function (e) {
e.preventDefault();
var key = e.key;
if (key === " " && playing) {
flapping = false;
}
});
var myGameArea = {
canvas : document.createElement("div"),
game : document.getElementById("game"),
gamearea : document.createElement("div"),
gameinfo : document.createElement("div"),
bird : document.createElement("div"),
pole1 : document.createElement("div"),
pole2 : document.createElement("div"),
score : document.createElement("p"),
scores : document.createElement("span"),
speed : document.createElement("p"),
speeds : document.createElement("span"),
high : document.createElement("p"),
highs : document.createElement("span"),
restart : document.createElement("button"),
start : function() {
this.canvas.style = "font-family: David, cursive, sans-serif;text-align: center;";
this.canvas.width = 504;
this.canvas.height = 341;
this.game.appendChild(this.canvas);
this.gamearea.style = "margin: auto;position: relative;width: 400px;height: 300px;border: 2px solid green;background-color: deepskyblue;overflow: hidden;";
this.gamearea.id = "game-area";
this.canvas.appendChild(this.gamearea);
this.gameinfo.style = "margin: 5px;font-size: 18px;";
this.gameinfo.id = "game-info";
this.canvas.appendChild(this.gameinfo);
this.bird.style = "position: absolute;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJUAAABkCAYAAACPbHLzAAAABmJLR0QArgB4ACK51uKEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AobCCQTbH2I3QAAAfZJREFUeNrt3dFto0AUQFGIUgkd0Y1TgVON3ZFbmfz4IwlIJPAeA55zJP+stNoV3H0zDNam6wCOrt/zDytdV1zy6jc8/Z6/ucyIClEhKhAVokJUICpEhahAVIiKl+CFcmued6Dv8+69SdVqWyXvH7iohGX5I2b5m4QQuByaVIRPLVERHpblz/IXvhyKqpL7ZZj82vj5OExUW8J6d3vrxDRepwHdu2G/uP64HGaeZ4VNqpY/t8tQSukWP7fLkPf3KOs+ojpxUOlhlfywPP0R/nQoqkqb8iXj9bHq9+0R1lJcotrJ3Mb8VaeWqAgPS1SEL4eiYtdNvCMFRwqrjhycqLNZ1VN3J+rnPVH/z0GoF8qVzqxm3/197PDur+RPJVFVjuvHWdbBvqWwdokTVXOPafl7JRt1wjfeoiL8CU5UYgrfAolKSOG8phGUqDi+2agO/71kzhfV97hcIjZH9TskU4u0PZWwSNmom1qkPf2Ji/CoLImkRWVqkRKVqUVaVKYWKVGZWqRFZWqJKpW4RJUal8stKhAVoqKFqOx7MKkQFaICUSEqRAWiQlSICkSFqBAViIo0i/8BVug3F3oX/AA3vK8eVWhoohJVeGiiElV4aKISVXhkfuJDE1F5+kNUiApRgagQFaICUSEqRAWiQlSICkQFAAAARPkCSGysXZ/O3oIAAAAASUVORK5CYII=');height: 27px;width: 42px;background-size: contain;background-repeat: no-repeat;top: 20%;left: 15%;";
this.bird.id = "bird";
this.gamearea.appendChild(this.bird);
this.pole1.style = "position: absolute;height: 100px;width: 30px;background-color: green;right: 0px;top: 0;";
this.pole1.id = "pole-1";
this.pole1.className = "pole";
this.gamearea.appendChild(this.pole1);
this.pole2.style = "position: absolute;height: 100px;width: 30px;background-color: green;right: 0px; bottom: 0;";
this.pole2.id = "pole-2";
this.pole2.className = "pole";
this.gamearea.appendChild(this.pole2);
this.score.style = "display: inline;padding: 20px;";
var s1 = document.createTextNode("Score: ");
this.score.appendChild(s1);
this.gameinfo.appendChild(this.score);
this.restart.id = "restart-btn";
this.restart.style = "padding: 5px 10px;background-color: green;color: white;font-size: 18px;border: none;cursor: pointer;outline: none;";
var restartbtn = document.createTextNode("Restart");
this.restart.appendChild(restartbtn);
this.gameinfo.appendChild(this.restart);
this.speed.style = "display: inline;padding: 20px;";
var s2 = document.createTextNode("Speed: ");
this.speed.appendChild(s2);
this.gameinfo.appendChild(this.speed);
this.high.style = "display: inline;padding: 20px;";
var s3 = document.createTextNode("High Score: ");
this.high.appendChild(s3);
this.gameinfo.appendChild(this.high);
this.scores.id = "score";
var s1s = document.createTextNode("0");
this.scores.appendChild(s1s);
this.score.appendChild(this.scores);
this.speeds.id = "speed";
var s2s = document.createTextNode("2");
this.speeds.appendChild(s2s);
this.speed.appendChild(this.speeds);
this.highs.id = "high";
var s3s = document.createTextNode("0");
this.highs.appendChild(s3s);
this.high.appendChild(this.highs);
}
}
myGameArea.start();
load();
restart();
_x000D_
#instructions {
text-align: center;
}
_x000D_
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Stav Levy - Flappy Bird</title>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" media="screen" />
<script src="game.js" defer></script>
</head>
<body>
<div id="game"></div>
</body>
</html>
_x000D_
_x000D_
_x000D_
Added a High score,
You can make this your game.js:
var _0x17f7=['keydown','speeds','key','getComputedStyle','restart-btn','1612485FGBzmk','width','gamearea','top','game-info','button','random','Restart','Highx20Score:x20','style','pole','className','2unDJtD','speed','div','getElementById','29hUBqcR','querySelectorAll','position:x20absolute;background:url(x27data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJUAAABkCAYAAACPbHLzAAAABmJLR0QArgB4ACK51uKEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AobCCQTbH2I3QAAAfZJREFUeNrt3dFto0AUQFGIUgkd0Y1TgVON3ZFbmfz4IwlIJPAeA55zJP+stNoV3H0zDNam6wCOrt/zDytdV1zy6jc8/Z6/ucyIClEhKhAVokJUICpEhahAVIiKl+CFcmued6Dv8+69SdVqWyXvH7iohGX5I2b5m4QQuByaVIRPLVERHpblz/IXvhyKqpL7ZZj82vj5OExUW8J6d3vrxDRepwHdu2G/uP64HGaeZ4VNqpY/t8tQSukWP7fLkPf3KOs+ojpxUOlhlfywPP0R/nQoqkqb8iXj9bHq9+0R1lJcotrJ3Mb8VaeWqAgPS1SEL4eiYtdNvCMFRwqrjhycqLNZ1VN3J+rnPVH/z0GoF8qVzqxm3/197PDur+RPJVFVjuvHWdbBvqWwdokTVXOPafl7JRt1wjfeoiL8CU5UYgrfAolKSOG8phGUqDi+2agO/71kzhfV97hcIjZH9TskU4u0PZWwSNmom1qkPf2Ji/CoLImkRWVqkRKVqUVaVKYWKVGZWqRFZWqJKpW4RJUal8stKhAVoqKFqOx7MKkQFaICUSEqRAWiQlSICkSFqBAViIo0i/8BVug3F3oX/AA3vK8eVWhoohJVeGiiElV4aKISVXhkfuJDE1F5+kNUiApRgagQFaICUSEqRAWiQlSICkQFAAAARPkCSGysXZ/O3oIAAAAASUVORK5CYII=x27);height:x2027px;width:x2042px;background-size:x20contain;background-repeat:x20no-repeat;top:x2020%;left:x2015%;','appendChild','high','getPropertyValue','clientHeight','pole1','margin:x205px;font-size:x2018px;','keyup','14553WyuJlp','scores','right','58uchahV','canvas','addEventListener','mousedown','display:x20inline;padding:x2020px;','bird','log','console','margin:x20auto;position:x20relative;width:x20400px;height:x20300px;border:x202pxx20solidx20green;background-color:x20deepskyblue;overflow:x20hidden;','createTextNode','height','textContent','forEach','restart','game','span','click','416037dSmWSW','removeEventListener','highs','956187VUgTEr','score','position:x20absolute;height:x20100px;width:x2030px;background-color:x20green;right:x200px;top:x200;','pole-2','pole-1','game-area','left','createElement','Gamex20Over!:(','gameinfo','font-family:x20David,x20cursive,x20sans-serif;text-align:x20center;','start','clientWidth','mouseup','537932frCLSN','preventDefault','18251CLUIcx','pole2','getBoundingClientRect','1872951KVXNxf'];var _0x2cae4b=_0x4911;(function(_0x41a294,_0x5c4e5e){var _0x50bc6c=_0x4911;while(!![]){try{var _0x19b435=-parseInt(_0x50bc6c(0x151))+-parseInt(_0x50bc6c(0x184))*-parseInt(_0x50bc6c(0x187))+parseInt(_0x50bc6c(0x164))+parseInt(_0x50bc6c(0x176))*parseInt(_0x50bc6c(0x14e))+parseInt(_0x50bc6c(0x15f))+-parseInt(_0x50bc6c(0x16a))+parseInt(_0x50bc6c(0x161))*-parseInt(_0x50bc6c(0x17a));if(_0x19b435===_0x5c4e5e)break;else _0x41a294['push'](_0x41a294['shift']());}catch(_0x5e264a){_0x41a294['push'](_0x41a294['shift']());}}}(_0x17f7,0xf1798));var bird,pole1,pole2,scoreSpan,speedSpan,highSpan,speed,score,high,flapping,playing,scoreUpdated,gameArea,restartBtn,containerWidth,containerHeight;function load(){var _0x44043f=_0x4911;high=0x0,bird=document[_0x44043f(0x179)]('bird'),poles=document[_0x44043f(0x17b)]('.pole'),pole1=document[_0x44043f(0x179)](_0x44043f(0x155)),pole2=document['getElementById'](_0x44043f(0x154)),scoreSpan=document[_0x44043f(0x179)](_0x44043f(0x152)),speedSpan=document[_0x44043f(0x179)]('speed'),highSpan=document[_0x44043f(0x179)]('high'),gameArea=document[_0x44043f(0x179)](_0x44043f(0x156)),restartBtn=document[_0x44043f(0x179)](_0x44043f(0x169)),containerWidth=gameArea['clientWidth'],containerHeight=gameArea['clientHeight'],gameArea['addEventListener'](_0x44043f(0x18a),function(_0x416cb1){playing&&(flapping=!![]);}),gameArea['addEventListener'](_0x44043f(0x15e),function(_0x5f38ba){playing&&(flapping=![]);});}function restart(){var _0x3509a2=_0x4911;restartBtn[_0x3509a2(0x14f)]('click',restart),score>=high&&(high=score),speed=0x2,score=0x0,scoreUpdated=![],flapping=![],playing=!![],speedSpan[_0x3509a2(0x148)]=speed,scoreSpan['textContent']=score,highSpan[_0x3509a2(0x148)]=high,poles[_0x3509a2(0x149)](_0x377dd7=>{var _0x3f52a5=_0x3509a2;_0x377dd7['style'][_0x3f52a5(0x186)]=0x0;}),bird['style'][_0x3509a2(0x16d)]=0x14+'%',gameLoop();}function update(){var _0x57cb38=_0x4911,_0x3a5b0e=parseFloat(window[_0x57cb38(0x168)](poles[0x0])['getPropertyValue']('right'));_0x3a5b0e>containerWidth*0.85&&(!scoreUpdated&&(score+=0x1,scoreUpdated=!![]),scoreSpan[_0x57cb38(0x148)]=score,score>=high&&(high=score,highSpan[_0x57cb38(0x148)]=high));if(_0x3a5b0e>containerWidth){var _0x3c31ef=parseInt(Math[_0x57cb38(0x170)]()*0x64);pole1[_0x57cb38(0x173)]['height']=0x64+_0x3c31ef+'px',pole2['style']['height']=0x64-_0x3c31ef+'px',_0x3a5b0e=0x0,speed+=0.25,speedSpan[_0x57cb38(0x148)]=parseInt(speed),scoreUpdated=![];}poles['forEach'](_0xc70738=>{var _0x57a41f=_0x57cb38;_0xc70738['style'][_0x57a41f(0x186)]=_0x3a5b0e+speed+'px';});let _0x4dcb84=parseFloat(window[_0x57cb38(0x168)](bird)[_0x57cb38(0x17f)](_0x57cb38(0x16d)));if(flapping)bird[_0x57cb38(0x173)]['top']=_0x4dcb84+-0x2+'px';else _0x4dcb84<containerHeight-bird[_0x57cb38(0x180)]&&(bird['style']['top']=_0x4dcb84+0x2+'px');(collision(bird,pole1)||collision(bird,pole2)||_0x4dcb84<=0x0||_0x4dcb84>containerHeight-bird[_0x57cb38(0x180)])&&gameOver();}function gameOver(){var _0x5cdeba=_0x4911;window[_0x5cdeba(0x144)][_0x5cdeba(0x18d)](_0x5cdeba(0x159)),playing=![],restartBtn[_0x5cdeba(0x189)](_0x5cdeba(0x14d),restart);}function _0x4911(_0x2133ce,_0x17efe4){_0x2133ce=_0x2133ce-0x144;var _0x17f700=_0x17f7[_0x2133ce];return _0x17f700;}function gameLoop(){update(),playing&&requestAnimationFrame(gameLoop);}function collision(_0x58e8f3,_0x59e939){var _0x51befa=_0x4911;let _0x460ed8=_0x58e8f3[_0x51befa(0x163)]()[_0x51befa(0x157)],_0x5e4638=_0x58e8f3[_0x51befa(0x163)]()[_0x51befa(0x16d)],_0x94d2e6=_0x58e8f3[_0x51befa(0x180)],_0x2163c2=_0x58e8f3[_0x51befa(0x15d)],_0x4a04b9=_0x5e4638+_0x94d2e6,_0x3de9ab=_0x460ed8+_0x2163c2,_0xb5e616=_0x59e939['getBoundingClientRect']()[_0x51befa(0x157)],_0x346e85=_0x59e939[_0x51befa(0x163)]()[_0x51befa(0x16d)],_0x16ac32=_0x59e939['clientHeight'],_0x159223=_0x59e939['clientWidth'],_0x135f86=_0x346e85+_0x16ac32,_0x287884=_0xb5e616+_0x159223;if(_0x4a04b9<_0x346e85||_0x5e4638>_0x135f86||_0x3de9ab<_0xb5e616||_0x460ed8>_0x287884)return![];return!![];}document[_0x2cae4b(0x189)](_0x2cae4b(0x165),function(_0x25ccfd){var _0x4f3bd0=_0x2cae4b,_0x43929f=_0x25ccfd[_0x4f3bd0(0x167)];_0x43929f==='x20'&&playing&&(flapping=!![]);}),document[_0x2cae4b(0x189)](_0x2cae4b(0x183),function(_0x1f404d){var _0x332edf=_0x2cae4b;_0x1f404d[_0x332edf(0x160)]();var _0x43ba5e=_0x1f404d['key'];_0x43ba5e==='x20'&&playing&&(flapping=![]);});var myGameArea={'canvas':document['createElement'](_0x2cae4b(0x178)),'game':document['getElementById']('game'),'gamearea':document[_0x2cae4b(0x158)](_0x2cae4b(0x178)),'gameinfo':document[_0x2cae4b(0x158)](_0x2cae4b(0x178)),'bird':document[_0x2cae4b(0x158)](_0x2cae4b(0x178)),'pole1':document['createElement'](_0x2cae4b(0x178)),'pole2':document[_0x2cae4b(0x158)]('div'),'score':document[_0x2cae4b(0x158)]('p'),'scores':document[_0x2cae4b(0x158)](_0x2cae4b(0x14c)),'speed':document[_0x2cae4b(0x158)]('p'),'speeds':document[_0x2cae4b(0x158)](_0x2cae4b(0x14c)),'high':document[_0x2cae4b(0x158)]('p'),'highs':document['createElement'](_0x2cae4b(0x14c)),'restart':document[_0x2cae4b(0x158)](_0x2cae4b(0x16f)),'start':function(){var _0x4c7d56=_0x2cae4b;this[_0x4c7d56(0x188)][_0x4c7d56(0x173)]=_0x4c7d56(0x15b),this['canvas'][_0x4c7d56(0x16b)]=0x1f8,this[_0x4c7d56(0x188)][_0x4c7d56(0x147)]=0x155,this[_0x4c7d56(0x14b)]['appendChild'](this[_0x4c7d56(0x188)]),this[_0x4c7d56(0x16c)][_0x4c7d56(0x173)]=_0x4c7d56(0x145),this['gamearea']['id']=_0x4c7d56(0x156),this[_0x4c7d56(0x188)][_0x4c7d56(0x17d)](this[_0x4c7d56(0x16c)]),this[_0x4c7d56(0x15a)][_0x4c7d56(0x173)]=_0x4c7d56(0x182),this['gameinfo']['id']=_0x4c7d56(0x16e),this[_0x4c7d56(0x188)][_0x4c7d56(0x17d)](this[_0x4c7d56(0x15a)]),this['bird'][_0x4c7d56(0x173)]=_0x4c7d56(0x17c),this[_0x4c7d56(0x18c)]['id']=_0x4c7d56(0x18c),this[_0x4c7d56(0x16c)][_0x4c7d56(0x17d)](this[_0x4c7d56(0x18c)]),this[_0x4c7d56(0x181)]['style']=_0x4c7d56(0x153),this['pole1']['id']=_0x4c7d56(0x155),this[_0x4c7d56(0x181)]['className']='pole',this[_0x4c7d56(0x16c)][_0x4c7d56(0x17d)](this[_0x4c7d56(0x181)]),this[_0x4c7d56(0x162)][_0x4c7d56(0x173)]='position:x20absolute;height:x20100px;width:x2030px;background-color:x20green;right:x200px;x20bottom:x200;',this[_0x4c7d56(0x162)]['id']=_0x4c7d56(0x154),this['pole2'][_0x4c7d56(0x175)]=_0x4c7d56(0x174),this[_0x4c7d56(0x16c)][_0x4c7d56(0x17d)](this['pole2']),this['score']['style']=_0x4c7d56(0x18b);var _0x460a16=document[_0x4c7d56(0x146)]('Score:x20');this['score'][_0x4c7d56(0x17d)](_0x460a16),this[_0x4c7d56(0x15a)][_0x4c7d56(0x17d)](this[_0x4c7d56(0x152)]),this[_0x4c7d56(0x14a)]['id']=_0x4c7d56(0x169),this[_0x4c7d56(0x14a)][_0x4c7d56(0x173)]='padding:x205pxx2010px;background-color:x20green;color:x20white;font-size:x2018px;border:x20none;cursor:x20pointer;outline:x20none;';var _0x3c2ac3=document[_0x4c7d56(0x146)](_0x4c7d56(0x171));this[_0x4c7d56(0x14a)][_0x4c7d56(0x17d)](_0x3c2ac3),this[_0x4c7d56(0x15a)][_0x4c7d56(0x17d)](this[_0x4c7d56(0x14a)]),this[_0x4c7d56(0x177)][_0x4c7d56(0x173)]=_0x4c7d56(0x18b);var _0x185bbb=document[_0x4c7d56(0x146)]('Speed:x20');this['speed'][_0x4c7d56(0x17d)](_0x185bbb),this[_0x4c7d56(0x15a)][_0x4c7d56(0x17d)](this[_0x4c7d56(0x177)]),this[_0x4c7d56(0x17e)]['style']=_0x4c7d56(0x18b);var _0x56e2ac=document['createTextNode'](_0x4c7d56(0x172));this[_0x4c7d56(0x17e)][_0x4c7d56(0x17d)](_0x56e2ac),this[_0x4c7d56(0x15a)]['appendChild'](this['high']),this[_0x4c7d56(0x185)]['id']=_0x4c7d56(0x152);var _0x2b0f6c=document[_0x4c7d56(0x146)]('0');this[_0x4c7d56(0x185)]['appendChild'](_0x2b0f6c),this['score'][_0x4c7d56(0x17d)](this[_0x4c7d56(0x185)]),this[_0x4c7d56(0x166)]['id']=_0x4c7d56(0x177);var _0x2d4c99=document[_0x4c7d56(0x146)]('2');this[_0x4c7d56(0x166)][_0x4c7d56(0x17d)](_0x2d4c99),this['speed']['appendChild'](this[_0x4c7d56(0x166)]),this['highs']['id']=_0x4c7d56(0x17e);var _0x31e117=document[_0x4c7d56(0x146)]('0');this[_0x4c7d56(0x150)][_0x4c7d56(0x17d)](_0x31e117),this[_0x4c7d56(0x17e)][_0x4c7d56(0x17d)](this[_0x4c7d56(0x150)]);}};myGameArea[_0x2cae4b(0x15c)](),load(),restart();
This is Obfuscated.
https://obfuscator.io/
Answered By: Anonymous
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.