Blog

Home/Blog

Preventing bounce scrolling in Windows Phone HTML5 games

Zombies in Space for Windows Phone

Zombies in Space for Windows Phone

I have recently been working on porting my new HTML5 based Windows 8 game, Zombies in Space, to Windows Phone. As HTML5 applications are relatively simple to port across platforms (usually just copy and paste), I thought that it would be a quick turn over to the Windows Phone platform. However, I noticed that it was possible to move the canvas around the page due to the fact that there was no listener for the move event. I also noticed that touching the buttons in the game were working like links and you could only hold them down for a few seconds before the touch event would end which caused Oros to stop moving in the direction holding.

As I have fixed an issue like this before I thought that it would be a simple fix by adding a listener to the ‘touchmove’ event like this:

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
Zombies in Space - In Game

Zombies in Space – In Game

However this didn’t fix my problem which many people assume would work. To stop your game from moving around the screen and remove the link touch events on buttons on your game overlay, add the following style to your HTML5 game’s CSS file:

body {
    -ms-touch-action:none;
}

This will stop your HTML5 game being able to move around and remove the bounce effect when you scroll to the edge of a webpage in the browser component. If you’re working on a Windows Phone HTML5 game or even one for Windows 8, let everyone know how you’re getting on!

4 Responses to “Preventing bounce scrolling in Windows Phone HTML5 games”

By Yatteer - 9 August 2014 Reply

Works like charm! Thanks

By gregir - 14 November 2013 Reply

This doesn’t work for me in Windows Phone 8.

By Anonymous - 9 August 2014 Reply

Worked like charm for me.

[…] /* 0) { ratingctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating = result['Rating']; SetCurrentRating('ctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating_pnlHolder', result['Rating'], "disabled fullStar", "disabled emptyStar", true); if(votesCountctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating!=null) { votesCountctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating ++; SetVotesCount('ctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating_lblUsersRated', '(' + votesCountctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating + ' votes)'); } SetRatingCookie('r', 'i34099', '1'); } else if (result['Status'] == 1) { alert('The session has expired. Please refresh the page to be able to vote!'); } } /* ]]> */ (0 votes) 0 comments   /   posted by Silverlight Show on Jul 04, 2013 Tags:   windows-phone , html5 , james-croft Read original post at James Croft's Blog […]

Comment on this post: