Js animate a ball wrong, slow then faster everytime

Js animate a ball wrong, slow then faster everytime - javascript

When I run this code first time the animation speed is slow, then every time faster.The code moves a ball, and after you touch the screen, the ball goes to where you touched.
But the first time, it is very slow, then every time it goes faster. Why？
I was expecting a similar speed, not perfectly constant, but not like that.
Also on the tenth attempt the ball goes too fast.
I try on my smartphone, I don't know if it will work on a computer.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.point{
width:10px; height:10px;
background-color:green;
position:absolute;
}
#ball{
width:10px; height:10px;
background-color:red;
position:absolute;
top:1px; left:50px;
}
</style>
</head>
<body>
<div class="point"></div>
<div id="ball"></div>
<script type="text/javascript">
window.addEventListener("touchstart", function(e){
var cx = e.touches[0].clientX;
var cy = e.touches[0].clientY;
});
window.addEventListener("touchmove", function(e){
var cx = e.touches[0].clientX;
var cy = e.touches[0].clientY;
endB = [cx, cy];
});
window.addEventListener("touchend", function(e){
decl();
});
function decl(){
isBmove = true;
mstep = 2;
requestAnimationFrame(step);
}
function step(ts){
if (isBmove){
var dfrein = 25;
var gb = b.getBoundingClientRect();
var ang = Math.atan2(endB[1]-gb.top, endB[0]-gb.left);
var addX = Math.cos(ang)*mstep;
var addY = Math.sin(ang)*mstep;
var difX = endB[0]-gb.left;
var difY = endB[1]-gb.top;
var dist = Math.sqrt(Math.pow(difX,2),Math.pow(difY,2));
if(dist < dfrein){
mstep *= 0.98;
l("m= "+mstep);
}
if (mstep < 1){
isBmove = false;
l("add :"+addX+","+addY);
}
b.style.top = gb.top+addY+"px";
b.style.left = gb.left+addX+"px";
}
requestAnimationFrame(step);
}
window.requestAnimationFrame =
window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame;
var isBmove = false;
var endB = [0,0];
var mstep = 2;
var b = document.getElementById("ball");
function l(p){
console.log(p);
}
</script>
</body>
</html>
Thanks

If I am not mistaken, it is because you require a new animation frame everytime you call your touchend event listener, that way calling the decl() function. So, maybe try getting the requestAnimationFrame(step) out of the decl(). Like so:
// Instead of:
function decl(){
isBmove = true;
mstep = 2;
requestAnimationFrame(step);
}
// Try like this:
function decl() {
isBmove = true;
mstep = 2;
}
requestAnimationFrame(step)

Petar is correct. For what it's worth, here's a version of your app changed to work on mouse events.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.point {
width: 10px;
height: 10px;
background-color: green;
position: absolute;
}
#ball {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
top: 1px;
left: 50px;
}
</style>
</head>
<body>
<div class="point"></div>
<div id="ball"></div>
<script type="text/javascript">
window.addEventListener("mousedown", function (e) {
var cx = e.clientX;
var cy = e.clientY;
});
window.addEventListener("mousemove", function (e) {
var cx = e.clientX;
var cy = e.clientY;
endB = [cx, cy];
});
window.addEventListener("mouseup", function (e) {
decl();
});
function decl() {
isBmove = true;
mstep = 2;
}
function step(ts) {
if (isBmove) {
var dfrein = 25;
var gb = b.getBoundingClientRect();
var ang = Math.atan2(endB[1] - gb.top, endB[0] - gb.left);
var addX = Math.cos(ang) * mstep;
var addY = Math.sin(ang) * mstep;
var difX = endB[0] - gb.left;
var difY = endB[1] - gb.top;
var dist = Math.sqrt(Math.pow(difX, 2), Math.pow(difY, 2));
if (dist < dfrein) {
mstep *= 0.98;
l("m= " + mstep);
}
if (mstep < 1) {
isBmove = false;
}
l("add :" + addX + "," + addY);
b.style.top = gb.top + addY + "px";
b.style.left = gb.left + addX + "px";
}
requestAnimationFrame(step);
}
requestAnimationFrame(step);
window.requestAnimationFrame =
window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame;
var isBmove = false;
var endB = [0, 0];
var mstep = 2;
var b = document.getElementById("ball");
function l(p) {
console.log(p);
}
</script>
</body>
</html>

Related

How to prevent an element from moving diagonally

The element moves all the directions (top, right, bottom, left) including diagonally. I do not want it to move diagonally.
HTML
<body onload="move('theDiv')">
<div class="container">
<div id="theDiv" class="theDiv"></div>
</div>
</body>
Javascript
var dragValue;
function move(id) {
var element = document.getElementById("theDiv");
element.style.position = "sticky";
element.onmousedown = function() {
dragValue = element;
};
}
document.onmouseup = function(e) {
dragValue = null;
};
document.onmousemove = function(e) {
var x = e.pageX,
y = e.pageY;
dragValue.style.transform = "transltex(" + x + "px)";
dragValue.style.transform = "transltey(" + y + "px)";
};

Use lastPoint.
1. When the value of x in the current position is not equal to the value of x in the old position, that is, moving in the direction of the x-axis.
2. When the value of y of the current position is not equal to the value of y of the old position, it means moving in the direction of the y-axis.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.theDiv {
background-color: blue;
height: 100px;
width: 150px;
position: fixed;
top: 0;
left: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body onload="move('theDiv')">
<div id="theDiv" class="theDiv"></div>
<script>
var dragValue;
var lastPoint;
function move(id) {
var element = document.getElementById("theDiv");
element.onmousedown = function(e) {
dragValue = element;
lastPoint = e;
lastPoint.pageX = lastPoint.pageX - ($('#theDiv').width() / 2);
lastPoint.pageY = lastPoint.pageY - ($('#theDiv').height() / 2);
};
}
document.onmouseup = function(e) {
dragValue = null;
lastPoint = null;
};
document.onmousemove = function(e) {
if (dragValue != null) {
var x = e.pageX - ($('#theDiv').width() / 2),
y = e.pageY - ($('#theDiv').height() / 2);
if (lastPoint.pageX == e.pageX)
dragValue.style.top = y + "px";
else
dragValue.style.left = x + "px";
lastPoint = e;
}
};
</script>
</body>
</html>
I had to change your code a bit to be able to run it. You can easily use this code or use it with your own code

how to use canvas in JavaScript flappy bird code

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:
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();
#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;
}
<!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>

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();
#instructions {
text-align: center;
}
<!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>
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','High\x20Score:\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:\x202px\x20solid\x20green;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','Game\x20Over!:(','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:\x205px\x2010px;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/

update .style attributes with setInterval

I'm trying to move the position of a div element at set intervals however the setInterval method executes once and then stops. setInterval() doesn't update .style.transform repeatedly every 200 milliseconds as intended.
<!DOCTYPE html>
<html>
<head>
<title>Snake game</title>
<style type="text/css">
.container {
width: 500px;
height: 500px;
border: 2px solid black;
}
#snakehead {
width: 5px;
height: 5px;
background: pink;
position: relative;
left: 0px;
}
</style>
<script type="text/javascript" src="snake.js"></script>
</head>
<body>
<div class="container">
<div id="snakehead"></div>
</div>
</body>
</html>
Javascript: Ideally I'd also like to be able to move the snakehead in any direction with vx and vy. Anyway to put those values into .style.transform = translateX()?
function snakepos() {
var x = 0;
var y = 0;
var vx = 1;
var vy = 0;
return {
move: function() {
x += vx;
y += vy;
var snakehead = document.querySelector("#snakehead");
snakedhead.style.left = "5px";
}
};
}
window.onload = function() {
console.log("hi");
var container = document.querySelector(".container");
var snake = snakepos();
setInterval(function() {
snake.move();
}, 200);
}
I know this can be done much easier in jQuery with .css but I'd to how this can be done in vanilla javascript. Thank you in advance.

snakehead.style.left = (snakedhead.style.left + "5px");
or
snakehead.style.left = (snakedhead.style.left - "5px");

I'd recommend something in a style a bit more familiar to me:
function snakepos() {
this.x = 0;
this.y = 0;
this.vx = 1;
this.vy = 1;
this.snakehead = document.querySelector("#snakehead");
var me = this;
this.move = function() {
me.x += me.vx;
me.y += me.vy;
me.snakehead.style.top = me.y + "px";
me.snakehead.style.left = me.x + "px";
};
return this;
}
console.log("hi");
var container = document.querySelector(".container");
var snake = new snakepos();
setInterval(function() {
snake.move();
}, 200);
See fiddle: https://jsfiddle.net/theredhead/td8opb0b/1/

How can i implement a simple menu for my game made with HTML?

i'm making a simple game with HTML only, more or less it works... My question is if i can make a simple menu /with "click to start" or something similar/ with an image at the background and 1 button to start the game. And if i can make it in the same archive.
Thanks.
<canvas id="ctx" width="1024" height="800" style="border:3px solid #000000;"></canvas>
<script>
var Height = 800;
var Width = 1024;
var timeElapset = Date.now();
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Consolas';
var frameCount = 0;
var score = 0;
var player = {
x:50,
spdX:30,
y:40,
spdY:30,
name:'P',
hp:10,
width:20,
height:20,
color:'green',
};
var enemyList = {};
getDistance = function (Obj1,Obj2){
var vx = Obj1.x - Obj2.x;
var vy = Obj1.y - Obj2.y;
return Math.sqrt((vx*vx)+(vy*vy));
}
checkCollision = function (Obj1,Obj2){
var rect1 = {
x: Obj1.x - Obj1.width/2,
y: Obj1.y - Obj1.height/2,
height: Obj1.height,
width: Obj1.width,
}
var rect2 = {
x: Obj2.x - Obj2.width/2,
y: Obj2.y - Obj2.height/2,
height: Obj2.height,
width: Obj2.width,
}
return testCollisionRectRect(rect1,rect2); //true o false
}
Enemy = function (id,x,y,spdX,spdY,width,height){
var enemy = {
x:x,
spdX:spdX,
y:y,
spdY:spdY,
name:'E',
id:id,
width:width,
height:height,
color:'black',
};
enemyList[id] = enemy;
}
document.onmousemove = function(mouse){
var mouseX = mouse.clientX - document.getElementById('ctx').getBoundingClientRect().left;
var mouseY = mouse.clientY - document.getElementById('ctx').getBoundingClientRect().top;
if(mouseX < player.width/2)
mouseX = player.width/2;
if(mouseX > Width-player.width/2)
mouseX = Width - player.width/2;
if(mouseY < player.height/2)
mouseY = player.height/2;
if(mouseY > Height - player.height/2)
mouseY = Height - player.height/2;
player.x = mouseX;
player.y = mouseY;
}
updateEntity = function (Z){
updatePosition(Z);
drawPlayer(Z);
}
updatePosition = function(Z){
Z.x += Z.spdX;
Z.y += Z.spdY;
if(Z.x < 0 || Z.x > Width){
Z.spdX = -Z.spdX;
}
if(Z.y < 0 || Z.y > Height){
Z.spdY = -Z.spdY;
}
}
testCollisionRectRect = function(rect1,rect2){
return rect1.x <= rect2.x+rect2.width &&
rect2.x <= rect1.x+rect1.width &&
rect1.y <= rect2.y + rect2.height &&
rect2.y <= rect1.y + rect1.height;
}
drawPlayer = function(Z){
ctx.save();
ctx.fillStyle = Z.color;
ctx.fillRect(Z.x-Z.width/2,Z.y-Z.height/2,Z.width,Z.height);
ctx.restore();
}
update = function(){
ctx.clearRect(0,0,Width,Height);
frameCount++;
score++;
if(frameCount % 100 == 0)
randomGenerateEnemy();
for(var key in enemyList){
updateEntity(enemyList[key]);
var isColliding = checkCollision(player, enemyList[key]);
if(isColliding){
player.hp = player.hp -1;
}
}
if(player.hp <= 0){
var timeSurvived = Date.now() - timeElapset;
console.log("Has ganado Kappa, Tiempo vivo " + timeSurvived + " ms.");
ctx.fillText(" You Lose! ", Width/2, Height/2);
GameEngine();
}
drawPlayer(player);
ctx.fillText(player.hp + " Hp",20,30);
ctx.fillText('Puntuacion: ' + score/10,700,30);
}
GameEngine = function(){
player.hp = 13;
timeElapset = Date.now();
frameCount = 0;
score = 0;
enemyList = {};
randomGenerateEnemy();
randomGenerateEnemy();
randomGenerateEnemy();
randomGenerateEnemy();
}
randomGenerateEnemy = function(){
var x = Math.random()*Width;
var y = Math.random()*Height;
var height = 10 + Math.random()*70;
var width = 10 + Math.random()*70;
var id = Math.random();
var spdX = 5 + Math.random() * 5;
var spdY = 5 + Math.random() * 5;
Enemy(id,x,y,spdX,spdY,width,height);
}
GameEngine();
setInterval(update,30);
</script>
That's what i have.

The code also contains javascript.For proper gaming function .js file has to be called on your html page.Also use css to make it attractive.Consider this example
enter code here
<html>
<head>
<title>Your game title</title>
<script type="text/javascript" src="src/Common.js"></script>
<script type="text/javascript" src="src/Perlin.js"></script>
<script type="text/javascript" src="src/ChaikinCurve.js"></script>
<script type="text/javascript">
var app = null;
window.onload = function() {
utils.loadShaderXml("src/render/shaders.xml", null, function(shaders) {
if (shaders instanceof Exception) {
app = shaders;
} else {
try {
app = new App('canvas', shaders, null);
} catch (e) {
app = e;
}
}
});
document.onselectstart = function () {
return false;
};
};
function application() {
if (app == null) {
alert("Application is absent");
throw "no application";
} else if (app instanceof Exception) {
alert("An exception occured while creating the application:\n" + app.message);
throw app;
} else {
return app;
}
}
</script>
<style type="text/css">
body{
margin: 0px; padding: 0px; overflow: hidden;
background: #000;
}
#canvas-holder.active {
position: absolute;
padding: 0px;
left: 50%;
top: 50%;
}
#canvas-holder.inactive {
position: absolute;
top:50%;
width: 100%;
text-align: center;
}
#canvas {
padding: 0px;
width: 100%;
height: 100%;
color: #fff;
font-family: Allan, Arial;
font-size: 40px;
}
</style>
</head>
<body>
<div id="canvas-holder" class="inactive">
<div id="canvas">Your game` is loading...</div>
</div>
<div style="font-family: Lobster; visibility: hidden">one</div>
<div style="font-family: Allan; visibility: hidden">two</div>
<div style="font-family: Meddon; visibility: hidden">three</div>
<div style="font-family: Cuprum; visibility: hidden">four</div>
</body>
</html>

Progress Bar Keeps Repeating

How can the code below be modified such that when the progress bar is finished loading and it reaches the end, a seperate function (ie. test() )can be executed rather than just repeating and repeating like it is now.
<html>
<head>
<script type="text/javascript">
var prg_width = 200;
function progress() {
var node = document.getElementById('progress');
var w = node.style.width.match(/\d+/);
if (w == prg_width) {
w = 0;
}
node.style.width = parseInt(w) + 5 + 'px';
}
</script>
</head>
<body onload="var progress_run_id = setInterval(progress, 30);">
<div style="border: 1px solid #808080; width:200px; height:5px;">
<div id="progress" style="height:5px; width:0px; background-color:#DBDBDB;"/>
</div>
</body>
</html>
Much thanks and appreciation for all your help.
Cheers,
Jay

Call this separate function instead of
w = 0;
line. Don't forget to clearInterval(progress_run_id) too.

<html>
<head>
<script type="text/javascript">
var prg_width = 200;
var progress_run_id = null;
function progress() {
var node = document.getElementById('progress');
var w = node.style.width.match(/\d+/);
if (w == prg_width) {
clearInterval( progress_run_id );
w = 0;
} else {
w = parseInt(w) + 5 + 'px';
}
node.style.width = w;
}
function initialize(){
progress_run_id = setInterval(progress, 30);
}
window.onload = initialize();
</script>
</head>
<body>
<div style="border: 1px solid #808080; width:200px; height:5px;">
<div id="progress" style="height:5px; width:0px; background-color:#DBDBDB;"/>
</div>
</body>
</html>

var prg_width = 200;
function progress() {
var node = document.getElementById('progress');
var w = node.style.width.match(/\d+/);
if (w == prg_width) {
test(); // CHANGE THIS
clearInterval(progress_run_id);
}
node.style.width = parseInt(w) + 5 + 'px';
}
That checks if the width is equal to the completed width. If it is, then clear the interval, and call your test function.

<script type="text/javascript">
var prg_width = 200;
function progress() {
var node = document.getElementById('progress');
var w = node.style.width.match(/\d+/);
if (w == prg_width) {
test();
clearInterval(progress_run_id);
}
node.style.width = parseInt(w) + 5 + 'px';
}
</script>

We Keep Coding

JavaScript is the programming language of the Web.

Js animate a ball wrong, slow then faster everytime - javascript

Related

How to prevent an element from moving diagonally

how to use canvas in JavaScript flappy bird code

update .style attributes with setInterval

How can i implement a simple menu for my game made with HTML?

Progress Bar Keeps Repeating

Categories

Resources