Touch is not working in PhoneGap app with 2 canvases - javascript

I am developing a space shooter in HTML5. I have two canvases as below. The one with id 'bg' is for the scrolling background(which is a randomly generated star field) and the other one 'fld' is used to draw the game objects.
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1,maximum-scale=1,user-scalable=0">
<link href="css/styles.css" rel="stylesheet">
<script src="js/f-shoot.js"></script>
</head>
<body onload='test()'>
<canvas id="fld"></canvas>
<canvas id="bg"></canvas>
</body>
</html>
My issue is that the touch events I have binded to 'fld' does not work in the Phone Gap app. But it works perfectly in my android mobile's Chrome browser. I removed the bg canvas and tried another build and it worked perfectly. But I want multiple canvases in my game.
These are the styles (styles.css file) that I use to align the canvases one on top of another
*{
margin:0;
padding:0;
}
html,body
{
width:100%;
height:100%;
}
canvas {
position:absolute;
left:0;
top:0;
display:block;
}
#bg {
background-color:rgb(0,0,20);
z-index:1;
}
#fld{
z-index:10;
}
I am attaching my events as below
var space = document.getElementById('fld');
space.ontouchstart = function(event) {
....
};
space.ontouchend = function(event) {
....
};
space.ontouchmove = function(event) {
....
};
I have no issues with the binding of events when I am using a single canvas. But when I include the background canvas and run the Phone Gap app, it does not respond to touch events.
What am I doing wrong here?

It worked after I added the following eventListener to document.body.
document.body.addEventListener('touchstart',function(event) {
event.preventDefault();
});

Related

Repeatedly Toggle Div Background Color On Click Using Inline Vanilla JavaScript on a Webpage

*To the reader looking from help: Each of the first 4 solutions worked for me, and the suggested question shows potential. I picked Hunsnul Amand's code because it allows for easy expansion of colors in a JavaScript string, and toggles through all three colors mentioned in the problem below. I like the way this sets up the possibility of additional or random colors later. The other three solutions on this page rely on various snippets of JavaScript toggling between additional classes made in CSS. Ranjeep and Keith's snippets use this in very simple and clean code that's easy to follow. Jateen makes use of the .toggle and ++> elements, which are useful as well. His code was also easy to follow. *
Thank You for checking this out. I'm trying to do something that seems like a very basic skill, but am having trouble finding the specific syntax or code that will cause a webpage to repeatedly toggle the background color of a circular div on a click rather than on a button using Vanilla JavaScript. I've tried too many iterations to post here, and received various effects from trying to modify similar projects to my needs, but haven't been able to get the div's background color to toggle.
background: I started with a sample project that lets you cause a div shaped in a circle with a red background to disappear by setting the background color to "none." I'd like to change the code to something that will instead allow a repeated toggle of the circular div's background color between either red to blue, or at least from red to none and back again.
<!-- This document should let you toggle a circle's color between
red and blue using vanilla JavaScript, HTML, and CSS.
The circle is an HTML div shaped and colored in CSS,
and given the toggle function that changes the div's color
in JavaScript.
Biggest need: A JavaScript toggle funciton that alternates
the color of a div when the user clicks on the div.-->
Mini Challenge: Disappearing Circles
minichallenge.html!
<!doctype html>
<html>
<head>
<title>Learning Javascript</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#circle {
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="circle"></div>
<script type="text/javascript">
/*original JavaScript Project*/
document.getElementById("circle").onclick=function() {
document.getElementById("circle").style.display="none";
}
/* New JS: Purpose: A JavaScript toggle funciton that alternates
the color of a div when the user clicks on the div.-
var userClick = document.getElementById("circle").onclick=function() {
var noDiv = document.getElementById("circle").style.display="blue";
var redDiv = document.getElementById("circle").style.display="red";
-Pseudocode-:
if userClick
noDiv
else redDiv; */
</script>
</body>
</html>
Thanks Again.
Here is one of many solutions. In your script try this.
let i = 0;
const colors = ["blue", "red", "transparent"];
document.getElementById("circle").onclick = function () {
document.getElementById("circle").style.backgroundColor = colors[i];
i++;
if (i == colors.length) i = 0;
};
This way you can add as many colors as want to the colors array and it will work.
You can create a .bg-none class in you css. Then toggle that class onclick of the element. I have updated the code, please chekc
<style>
.bg-none{
background-color: transparent !important;
}
</style>
<script>
document.getElementById("circle").onclick=function() {
document.getElementById("circle").classList.toggle("bg-none");
}
</script>
Using CSS here, and the classList toggle method is the simplest way.
eg.
document.getElementById("circle").onclick=function() {
document.getElementById("circle").classList.toggle('toggle');
}
#circle {
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
#circle.toggle {
background-color:blue;
}
<div id="circle"></div>
I have moved your background-color CSS to 2 new classes, which would toggle as you click on the div. I hope this resolved your query.
<!doctype html>
<html>
<head>
<title>Learning Javascript</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#circle {
width:200px;
height:200px;
border-radius:100px;
}
.bg-red {
background-color: red;
}
.bg-blue {
background-color: blue;
}
</style>
</head>
<body>
<div id="circle" class="bg-red"></div>
<script type="text/javascript">
const circleDiv = document.getElementById("circle");
circleDiv.addEventListener('click', () => {
circleDiv.classList.toggle('bg-red');
circleDiv.classList.toggle('bg-blue');
});
</script>
</body>
</html>

Mapkit JS can't move map on mobile phone

I'm trying use Mapkit JS for map. The code I have works fine on desktop. However, there is one problem when test it on a mobile phone. It seems that I cannot move the map around using my finger. On the desktop, I can move around the map with my mouse.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapkit.init({
authorizationCallback: function(done) {
done("API KEY");
},
language: "en"
});
var map = new mapkit.Map('map', {
showsMapTypeControl: false,
showsCompass: mapkit.FeatureVisibility.Hidden
})
var coordinateRegion = new mapkit.CoordinateRegion(
new mapkit.Coordinate(40.51415196691954, -74.43808765761719),
new mapkit.CoordinateSpan(1.234, 1.23423)
);
map.region = coordinateRegion;
</script>
</body>
</html>
Mapkit JS versions occasionally have trouble recognizing touches from Android phones. You can test this in the Chrome developer panel. The fix is to change the version you are using.
As of the time of this writing, 5.19.x is the latest version that supports Android and 5.20.0 currently does not.

Hammerjs swipe locks the window.innerHeight on Chrome Android

I've run into an issue with hammerjs on Chrome Android 66.
I have a side bar menu that's position:fixed, with top:0 and bottom:0. When the menu item opens, the layout is correct for when URL Bar at the top is visible and hidden. On Chrome device inspect, if I run "window.innerHeight" in the console, it will give me a height for when the URL Bar is visible and and a different height for when it's hidden. This is right because with the URL Bar hidden, the inner height should be more.
After I do a swipe, whichever state I'm in, "window.innerHeight" is locked to that height, with or without the URL Bar. This is breaking my layout because top:0 and bottom:0 is stuck to the state that where I've done my first swipe.
Has anyone come across this? Any possible solutions to make window.innerHeight (and window.outerHeight) adapt to what ever it should be again? This works fine on every other browser, only Chrome Android.
Here's a little piece of code I put together for testing. Thanks for any advice.
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<style>
#myElement {
background: silver;
height: 300px;
text-align: center;
font-size:30px;
}
.ex-height{
height: 400px;
border:solid 1px red;
}
</style>
</head>
<body>
<div class="ex-height">extra height for scrolling</div>
<div id="myElement"></div>
<div class="ex-height">extra height for scrolling</div>
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<script>
var myElement = document.getElementById('myElement');
var mc = new Hammer(myElement);
mc.on("panleft panright tap press", function(ev) {
myElement.textContent = ev.type +" gesture detected.";
});</script>
</body>
</html>

MooTools events not firing

I've recently been asked to work on a few websites. One of these websites wants to be "more interactive" and they showed me a site they would like to emulate.
I'm not very good with writing my own scripts, especially with regards to DHTML, so I use MooTools to deal with the more interface-y changes.
In my HTML code I have two Div tags, and I want for it to happen that when you mouseover one, it shrinks the other one and expands the one you're looking at, but no events that I try to attach are firing at all (nothing happens, and nothing appears in the console).
Here is my HTML, I am just using the stock mootools downloaded from their website.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cnergi - Splash </title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
document.addEvent('domready',function(){
$('employee').set('opacity', 0.5).addEvents({
mouseenter: function(){
// This morphes the opacity and backgroundColor
this.morph({
'opacity': 0.6,
'background-color': '#E79D35'
});
},
mouseleave: function(){
// Morphes back to the original style
this.morph({
opacity: 0.5,
backgroundColor: color
});
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="employee" id="employee">
Employee test
</div>
<div class="client" id="client">
Client Test
</div>
</div>
</body>
</html>
Further Description of Problem
Basically, if I call the morph straight from the 'domready' function, it works, but the event calls that are supposed to come from the mouseenter (also tried mouseover, and even click. none work) never happen. No errors are being thrown. I am honestly befuddled, I've never had this problem before.
Any ideas?
EDIT
Currently attempting this code, still nothing shows up.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
<div id="wrapper">
<div id="employee" class="employee">
Something
</div>
</div>
<script type="text/javascript">
document.addEvent('domready',function(){
var s = $('employee');
s.addEvent('click',function(){
alert('I was clicked!');
});
});//End document.addEvent domready
</script>
</body>
</html>
EDIT 2
Has something to do with my stylesheet declaration; if I remove it, the events fire as they should.
It's actually appears to be any styling at all. The moment I put a tag into the file it stopped working.
"Wut." is my only response.
Edit 3
I changed my CSS to this, and it works. I haven't gone through my previous CSS file to figure out why it doesn't work with it, just thought I would update everyone. I posted 2 JS fiddle links, one with my base CSS (please remember this was a work in progress, and that I am partially colorblind so the bright colors help me see the differences), and the other with the CSS below, which runs fine.
In summary: Today I learned that CSS can keep javascript events from firing.
html, body, body>div{
height:100%;
}
body > div{
width:900px;
text-align:left;
margin:0 auto 0 auto;
background-color:white;
}
body{
text-align:center;
background-color:grey;
padding:0;
}
#wrapper{
position:relative;
width:inherit;
height:inherit;
}
#footer{
position:absolute;
bottom:0px;
text-align:center;
width:inherit;
}
I think you have a syntax error in background: color
this.morph({
opacity: 0.5,
backgroundColor: color // is color defined?
});
The MooTools domready event is only available on the window object - here's your example in working order: http://jsbin.com/rucaz/1/edit
For reference: http://mootools.net/docs/core/Utilities/DOMReady

Creating a start screen for a HTML5 Canvas Game?

Most of us know that HTML5 Canvas element is having much better support with these amazingly fast Javascript Engines from Firefox, Safari and Chrome.
So recently I have been experimenting with game development with Javascript and the Canvas, and I am wondering what would be a good approach to be creating a Start Screen for a Javascript Game.
So far, the only idea I have would be creating a UI before the game and stuff with Javascript and use Event Listeners to track the mouse and when they click buttons. But I'm not sure if this a wise thing to do.
What would a good way to go about a Starting Screen, etc. in a Javascript game? Any help would be useful, thanks!
UPDATE: Thanks for the blazing fast reply(s)! A lot of you are suggesting placing a img until the game loads, etc. So do I need to write a asset manager or some sort - to check when all the images etc. are loaded?
Populate a div tag with your splash screen. Have it showing on page load and have your canvas hidden. Add a 'start' button to the div tag and on it's click event, hide the splash screen div tag and show the canvas using either jQuery or classic JavaScript.
Here is some sample code using jQuery:
<div id="SplashScreen">
<h1>Game Title</h1>
<input id="StartButton" type="button" value="Start"/>
</div>
<canvas id="GameCanvas" style="display: none;">Game Stuff</canvas>
<script>
$("#StartButton").click(function () {
$("#SplashScreen").hide();
$("#GameCanvas").show();
});
</script>
Simple, use a regular HTML img that is located 'above' your canvas until everything is loaded / initialised.
function startGame() {
alert('Are you sure you want to make a new Game?');
}
function continueGame() {
alert('Continue Game?');
}
body, button {
color: blue;
text-align: center;
font-family: cursive;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Game Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Game Title</h1>
<script src="script.js">startGame()</script>
<button onclick="startGame()">New Game</button>
<button onclick="continueGame()">Continue Game</button>
</body>
</html>

Categories