Wii U Browser Homebrew Demo - With src!

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

  1. CyanPrime
    OP

    CyanPrime Member

    Newcomer
    19
    1
    Oct 17, 2010
    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

    gbtemp111 Advanced Member

    Newcomer
    73
    0
    May 12, 2006
    Going to give it a go soon on my gamepad once I update system. I don't see a browser...
     
  3. officialjunk

    officialjunk Advanced Member

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

    McHaggis Fackin' Troller

    Member
    1,706
    938
    Oct 24, 2008
    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

    rizzod Not a New Member

    Member
    770
    93
    Jul 30, 2008
    i dont get it, what does this do?
     
  6. crono141

    crono141 GBAtemp Regular

    Member
    248
    58
    Jan 7, 2012
    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

    Taleweaver Storywriter

    Member
    5,439
    1,490
    Dec 23, 2009
    Belgium
    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

    gundalf GBAtemp Fan

    Member
    365
    13
    Sep 26, 2008
    Germany
  9. CyanPrime
    OP

    CyanPrime Member

    Newcomer
    19
    1
    Oct 17, 2010
    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

    McHaggis Fackin' Troller

    Member
    1,706
    938
    Oct 24, 2008
    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.