Alright, so after much trial and error I've managed to make a satisfactory Wii U Browser Demo. This demo will allow you to use the D-Pad, the A button, and to use the touch screen without any delay!
The code is below, and you can check out a demo (Wii U only) here: http://test.strange-grotto.com/wiiudemo.htm
The code is below, and you can check out a demo (Wii U only) here: http://test.strange-grotto.com/wiiudemo.htm
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wii U Browser Game Demo</title>
<meta name="description" content="A Wii U Browser Demo">
<meta name="author" content="William Starkovich">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var myStr = "KeyCode";
var myStr2 = "Touch XY";
var lastMouseX = 0;
var lastMouseY = 0;
var mouseDown = false;
function Player(){
this.x = 100;
this.y = 100;
this.size = 24;
this.speed = 5;
this.color = "#00ffff";
}
var player;
var tilemap;
function update(){
if(mouseDown){
player.x -= Math.sin(Math.atan2(player.x - lastMouseX, player.y - lastMouseY)) * player.speed;
player.y -= Math.cos(Math.atan2(player.x - lastMouseX, player.y - lastMouseY)) * player.speed;
}
//-----------------DRAW START-------------------------------
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
ctx.fillStyle = "#000000";
ctx.fillRect(0,0,$('#canvas')[0].width, $('#canvas')[0].height);
ctx.strokeStyle = "#CC6600";
ctx.globalAlpha = 1;
//player test
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.size, player.size);
//how to draw text
ctx.globalAlpha = 0.75;
ctx.fillStyle = "#ffffff";
ctx.font = "20pt Century Gothic";
ctx.fillText(myStr, 20, 55);
ctx.fillText(myStr2, 20, 100);
//-----------------DRAW END---------------------------------
}
function init() {
player = new Player();
update();
setInterval(update, 100);
$(window).keydown(function(e){
e.preventDefault();
e.stopImmediatePropagation();
myStr = e.keyCode;
if(e.keyCode == 13){//A
player.color = "#00ffff";
}
if(e.keyCode == 37){//left
player.color = "#ff0000";
}
if(e.keyCode == 38){//up
player.color = "#00ff00";
}
if(e.keyCode == 39){//right
player.color = "#0000ff";
}
if(e.keyCode == 40){//down
player.color = "#ffff00";
}
e.returnValue = false;
});
$("#canvas").bind('touchstart', function(event){
var e = event.originalEvent;
myStr2 = e.changedTouches[0].pageX + ", " + e.changedTouches[0].pageY;
lastMouseX = e.changedTouches[0].pageX;
lastMouseY = e.changedTouches[0].pageY;
mouseDown = true;
return false
});
$("#canvas").bind('touchend touchcancel', function(event){
var e = event.originalEvent;
e.preventDefault();
e.returnValue = false;
mouseDown = false;
return false;
});
}
$(document).ready(function() {
init();
});
</script>
</head>
<body>
<canvas id="canvas" width="320px" height="480px" onclick = "void(0)"></canvas>
</body>
</html>
