Wii U Browser Homebrew Demo - With src!

Discussion in 'Wii U - Hacking & Backup Loaders' started by CyanPrime, Nov 26, 2012.

Nov 26, 2012
  1. CyanPrime
    OP

    Newcomer CyanPrime Member

    Joined:
    Oct 17, 2010
    Messages:
    17
    Country:
    United States
    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

    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>
    
     
  2. gbtemp111

    Newcomer gbtemp111 Advanced Member

    Joined:
    May 12, 2006
    Messages:
    73
    Country:
    Azerbaijan
    Going to give it a go soon on my gamepad once I update system. I don't see a browser...
     
  3. officialjunk

    Newcomer officialjunk Advanced Member

    Joined:
    Oct 4, 2008
    Messages:
    72
    Country:
    United States
    when do you think wii u's will ship with system menu 2.0.0 pre-installed?
     
  4. McHaggis

    Member McHaggis Fackin' Troller

    Joined:
    Oct 24, 2008
    Messages:
    1,656
    Country:
    United Kingdom
    Are any other keys detected, or is it like the 3DS where X/Y zoom in/out and B cancels focus? If so, in the case of the latter you can capture the focusout event on the document object since the event propagates. Let's hope the standards were followed this time and the keypress event can actually be cancelled. It can't on the 3DS, you have to use ridiculous workarounds.
     
    CyanPrime likes this.
  5. rizzod

    Member rizzod Not a New Member

    Joined:
    Jul 30, 2008
    Messages:
    757
    Country:
    Australia
    i dont get it, what does this do?
     
  6. crono141

    Member crono141 GBAtemp Regular

    Joined:
    Jan 7, 2012
    Messages:
    247
    Country:
    United States
    Its a web based demo designed to be used by the WiiU web browser and the WiiU's specific control options. Nothing crazy, but a cool proof of concept.
     
  7. Taleweaver

    Member Taleweaver Storywriter

    Joined:
    Dec 23, 2009
    Messages:
    5,123
    Location:
    Belgium
    Country:
    Belgium
    So...if I understand this correctly: if I browse this page with my wiiU, and click the link you mention...

    Then that page will notice which buttons I press, will notice what gestures I make on the tablet, and things like that? :)


    If so...that's actually pretty amazing. It means that you can make your site very wiiU-friendly...right?
     
  8. gundalf

    Member gundalf GBAtemp Fan

    Joined:
    Sep 26, 2008
    Messages:
    365
    Location:
    Germany
    Country:
    Spain
  9. CyanPrime
    OP

    Newcomer CyanPrime Member

    Joined:
    Oct 17, 2010
    Messages:
    17
    Country:
    United States
    Well, I tried this:

    Code:
    $(document).focusout(function(event){
                            var e = event.originalEvent
                            e.preventDefault();
                            e.stopImmediatePropagation();
                            myStr = e.keyCode;
                        });
    and it didn't work, so I'm guessing it's gonna be no standards, workarounds only, final destination.

    Think you could tell me how to do those workarounds for 3ds? Cause I'd really like to be able to use more buttons, lol.
     
  10. McHaggis

    Member McHaggis Fackin' Troller

    Joined:
    Oct 24, 2008
    Messages:
    1,656
    Country:
    United Kingdom
    The only additional button you can capture semi-usefully is B. I say 'semi-usefully' because you can only capture the initial press down, you can't detect the button release. The way you do it is bind to DOMFocusOut (focusout if you're using jQuery) and the keypress event, like so:

    Code:
    document.addEventListener("DOMFocusOut", function (evt) {
        if (!movingFocus && document.activeElement === document.body) {
            // B button was pressed, do whatever
        }
        movingFocus = false;
    });
     
    document.addEventListener("keydown", function (evt) {   
        if (evt.keyCode > 36 && evt.keyCode < 41)
            movingFocus = true;
    }
    
    If you want to capture X/Y, you can bind to the onresize event. However, it will only fire after zooming has finished and you can't cancel the event, making it almost completely useless. All in all, I'd avoid developing specifically for the 3DS browser. It's pretty frustrating at how limited control developers are given over their own web pages.
     

Share This Page