Backwards animation not working properly in Game - javascript

I'm trying to make a simple Javascript game which consists in a square expanding, while the player have to hit "A" to make it smaller. The goal is to make the square disappear and not to let the square engulf the whole screen.
But I'm experiencing three issues:
- When I hit A, the square stops expanding and starts getting smaller, but it never stops. It should only work for a about a second and then expand again.
- The pause button (enter) doesn't always work the way it should. I feel like it waits for the animation stop, but I don't want it to work like this.
- The square doesn't expand from the center.
The HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="styles/game.css"></link>
<script language="javascript" type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="scripts/game.js"></script>
</head>
<body>
<section class="game">
<div id="game" style="position:absolute;"><img id="player" class="square"></img></div>
</section>
</body>
</html>
The Javascript:
//set update interval
setInterval(update, 10);
var isPlaying = false;
$(document).ready(function() {
});
function playerInput() {
$(document).keydown(function(event) {
if ( event.which == 65 ) {
if (isPlaying == true) {
$("#player").animate({height: '-=10', width: '-=10'}, 1);
}
} else if (event.which == 13) {
isPlaying = !isPlaying;
}
});
}
function update() {
playerInput();
if (isPlaying == true) {
$("#player").animate({height: '+=10', width: '+=10'}, 1);
}
}
The CSS:
body, html {
height: 1000px;
width: 1000px;
margin: auto;
background-color: black;
}
.game {
height: 800px;
width: 800px;
margin: auto;
margin-top: 10px;
background-color: black;
}
.square {
background-image: url("../images/square.png");
margin: 375px;
height: 30px;
width: 30px;
}

Related

How to Incrementally Update an Elements Scale by Pinching with Js

The below code ALMOST works and I think I'm close yet quite far away from getting it to work properly. The problem is, the way the handlePinch function is set up. What actually happens when the user pinches to zoom a bit, is the square starts to accelerate. The more the user pinches, the faster the square zooms.
How can this be implemented that each time the user pinches to zoom, it incrementally scales, i.e. picking up where it left off without exceeding the max scale?
I'm stuck on this for two days and there doesn't seem to be any formula to show how something like this works. Note, I know there are libraries for this, I want to know how this works with vanilla js
const box = document.querySelector('.box')
function updateCss(scale) {
box.style.transform = `scale(${scale})`
}
let lastScale
let currentScale
let isAlreadyScaled = false
const minScale = 1
const maxScale = 1.8
function handlePinch(e) {
e.preventDefault()
const isZooming = e.scale > 1
if (isZooming) {
if (!isAlreadyScaled) {
lastScale = Math.min(minScale * e.scale, maxScale)
isAlreadyScaled = true
} else {
lastScale = Math.min(minScale * (lastScale * e.scale), maxScale)
}
}
updateCss(lastScale)
}
box.addEventListener('touchstart', e => {
if (e.touches.length === 2) {
handlePinch(e)
}
})
box.addEventListener('touchmove', e => {
if (e.touches.length === 2) {
handlePinch(e)
}
})
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.wrapper {
height: 400px;
width: 100%;
top: 0;
left: 0;
position: relative;
margin: 24px;
}
.scale-container {
height: 100%;
width: 100%;
position: absolute;
background: #eee;
display: flex;
align-items: center;
justify-content: center;
}
.box {
height: 200px;
width: 200px;
background: pink;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="wrapper">
<div class="scale-container">
<div class="box"></div>
</div>
</div>
</body>
</html>

jquery draggable, making a div not to go outside of the other div frame

i need a draggable div not to go outside of second div frame, so far i managed to make a "collision" basically returning true or false if draggable div is inside the frame of other div. So the thing now is that i cant get this to work, i was trying to get it to a x = 90(example) when it hits the frame and few more examples , but i just can't get this to work. The draggable div doesn't want to go back to position.
Here is a JSFiddle: https://jsfiddle.net/kojaa/x80wL1mj/2/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Catch a ball</title>
</head>
<body>
<div class="catcherMovableArea" id="catcherMovableArea">
<div id="catcher" class="catcher"></div>
</div>
<script src="script.js"></script>
</body>
</html>
.catcherMovableArea {
position: absolute;
border: 1px solid black;
width: 1900px;
top: 90%;
height: 50px;
}
.catcher {
position: absolute;
width: 250px;
height: 30px;
border-radius: 10px;
background-color: black;
top: 20%;
}
let catcher = $("#catcher");
$(document).mousemove(function(e) {
catcher.position({
my: "left-50% bottom+50%",
of: e,
collision: "fit"
});
let catcherOffset = $(catcher).offset();
let CxPos = catcherOffset.left;
let CyPos = catcherOffset.top;
let catcherYInMovableArea, catcherXInMovableArea = true;
while(!isCatcherYinMovableArea(CyPos)){
catcherYInMovableArea = false;
break;
}
while(!isCatcherXinMovableArea(CxPos)){
catcherXInMovableArea = false;
break;
}
});
function isCatcherYinMovableArea(ypos){
if(ypos < 849.5999755859375 || ypos > 870.5999755859375) {
return false;
} else {
return true;
}
}
function isCatcherXinMovableArea(xpos){
if(xpos < 8 || xpos > 1655 ) {
return false;
} else {
return true;
}
}
By default, the collision option will prevent the element from being placed outside of the window. You want to prevent it from moving outside of a specific element.
To do this, use the within option to select which element should be used for containment.
Example:
let draggable = $("#draggable");
$(document).mousemove(function(e) {
draggable.position({
my: "left-50% bottom+50%",
of: e,
collision: "fit",
within: "#container"
});
});
#container { width: 200px; height: 100px; border-style: solid }
#draggable { width: 50px; height: 50px; background-color: black }
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js"></script>
<div id="container">
<div id="draggable"></div>
</div>

JQuery game - Make player move smooth in % values

We have this really annoying project were we need to make a game in JQuery. I'm having some problems making my character move the way I want him to. I manage to make the character move but he does not move in %. He adds his own width to the "left:" of him and then animates to that position. This is not good, because when you resize the window they do not "scale with it". Basically, can anyone help me make the player move smoothly in % values! Here is my code! (Variables and comments are in Swedish...)
JSfiddle : https://jsfiddle.net/Leqca77h/1/
index.html:
<!doctype html>
<html>
<head>
<title>JQuery spel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/stil.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script/start.js"></script>
<script type="text/javascript" src="script/spelareRörelse.js"></script>
</head>
<body onresize="sättSpelareHöjd()">
<header><h1>Jquery spel</h1></header>
<br>
<div id="bana"></div>
</body>
stil.css:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Ubuntu', sans-serif;
}
#bana {
position: relative;
border: 1px solid black;
margin: auto;
width: 99%;
height: 70vh;
}
#spelare1 {
background-color: green;
width: 2.7%;
height: 0;
display: block;
position: absolute;
}
start.js:
$(document).ready(function(){
//var tid = parseInt(prompt("Hur långt ska du spela? (Ange i sekunder)"));
$("#bana").append("<div id='spelare1'></div>");
$("#bana").append("<div id='spelare2'></div>");
sättSpelareHöjd();
});
var knappTryckt1 = true;
function sättSpelareHöjd() {
var spelareHöjd = $("#spelare1").width();
$("#spelare1").css("height", spelareHöjd);
}
spelareRörelse.js (playerMovment.js):
//Spelare 1 rörelse
$(document).keydown(function(e){
if(knappTryckt1) {
if(e.keyCode == 37) {
$("#spelare1").stop().animate({left: "-=" + $(this).width()},5000);
//Pil vänster
}
else if (e.keyCode == 38) {
$("#spelare1").stop().animate({top: "-=" + $(this).height()},5000);
//Pil upp
}
else if (e.keyCode == 39) {
$("#spelare1").stop().animate({left: "+=" + $(this).width()},5000);
//Pil höger
}
else if (e.keyCode == 40) {
$("#spelare1").stop().animate({top: "+=" + $(this).height()},5000);
//Pil ner
}
knappTryckt1 = false;
}
});
$(document).keyup(function(){
$("#spelare1").stop();
knappTryckt1 = true;
});
If you can help! Thanks! :)
JSfiddle : https://jsfiddle.net/Leqca77h/1/
A solution was found! Changing:
"left: "-=" + $(this).width()"
to:
"left: "-=" + 100 + "%""
worked for me!

Function on resize doesn't work

Hello I have problem with really easy script. It should change class if under 768 px of window width but it just doesn't work. I have no clue why. I dont want to use media queries in this in this case.
Here's code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ez</title>
<style>
.aside {
float: left;
height: 1000px;
width: 250px;
background-color: grey;
}
.sidebar {
position: absolute;
top: 0;
left: -250px;
}
</style>
</head>
<body style="height: 2000px">
<aside class="aside" id="aside"></aside>
<main style="float: left; height: 1000px; width: 70%; background-color: black;"></main>
<script>
var elm = document.getElementById("aside");
function change() {
var w = window.innerWidth;
if(w<768) {
elm.className = "sidebar";
} else {
elm.className = "aside";
}
}
window.addEventListener("resize", change);
</script>
</body>
</html>
I started your script. For 768px and more there is class 'aside', for 767px and less class 'sidebar'. So where is the problem?
If you open page on width less than 768 your script won't be working correct. You have to add it to event onload too

Support multiple inputs JQuery

I'm learning how to develop a game in html/css3/javascript/jquery and i have to support multiple keyboard inputs.
By following a book, i have written this code:
var pingpong = {};
pingpong.pressedKeys = [];
$(function() {
// set interval to call gameloop every 30 milliseconds
pingpong.timer = setInterval(gameloop, 30);
// mark down what key is down and up into an array called
// "pressedKeys"
$(document).keydown(function(e) {
pingpong.pressedKeys[e.which] = true;
});
$(document).keyup(function(e) {
pingpong.pressedKeys[e.which] = false;
});
});
function gameloop() {
movePaddles();
}
function movePaddles() {
// use our custom timer to continuously check if a key is
// pressed.
if (pingpong.pressedKeys[KEY.UP]) {// arrow-up
// move the paddle B up 5 pixels
var top = parseInt($("#paddleB").css("top"));
$("#paddleB").css("top", top - 5);
}
if (pingpong.pressedKeys[KEY.DOWN]) {// arrow-down
// move the paddle B down 5 pixels
var top = parseInt($("#paddleB").css("top"));
$("#paddleB").css("top", top + 5);
}
if (pingpong.pressedKeys[KEY.W]) {// w
// move the paddle A up 5 pixels
var top = parseInt($("#paddleA").css("top"));
$("#paddleA").css("top", top - 5);
}
if (pingpong.pressedKeys[KEY.S]) {// s
// move the paddle A down 5 pixels
var top = parseInt($("#paddleA").css("top"));
$("#paddleA").css("top", top + 5);
}
}
But it does not work. I mean, the paddles don't move! Any idea?
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyGame</title>
<style>
#playground {
background: #e0ffe0;
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
#ball {
background: #fbb;
position: absolute;
width: 20px;
height: 20px;
left: 150px;
top: 100px;
border-radius: 10px;
}
.paddle {
background: #bbf;
left: 50px;
top: 70px;
position: absolute;
width: 30px;
height: 70px;
}
#paddleB {
left: 320px;
}
</style>
</head>
<body>
<header>
<h1>Test</h1>
</header>
<div id="game">
<div id="playground">
<div id="paddleA" class="paddle"></div>
<div id="paddleB" class="paddle"></div>
<div id="ball"></div>
</div>
</div>
<footer>
This is an example of creating a Game.
</footer>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/html5games.pingpong.js"></script>
</body>
</html>
MyGoal
Move with S (down) and W (up) the left paddle, and with arrow up (UP) and arrow down (down) the right paddle. If i press S AND arrow down, the left paddle must move up, and the right paddle must move down, AT THE SAME TIME. (The events must not stop each other).
What i get
The keyboard input does not work. The paddles don't move.
UPDATE
I forgot to add this to the .js code:
var KEY = {
UP : 38,
DOWN : 40,
W : 87,
S : 83
};

Categories