示例#1
0
        public static void Main()
        {
            document.body.setAttribute("style", "margin: 0; overflow: hidden;");

            var div = new HTMLDivElement();

            div.setAttribute("style", "width: 960px; height: 540px;");

            var button = new HTMLButtonElement();

            button.innerHTML = "Run Game";
            button.setAttribute("style", "width: 100%; height: 100%; background-color: rgb(100, 149, 237); color: rgb(255, 255, 255); font-size: 20px; border: 0;");

            document.body.appendChild(div);
            div.appendChild(button);

            button.onclick = (ev) =>
            {
                var canvas = new HTMLCanvasElement();
                canvas.width  = 960;
                canvas.height = 540;
                canvas.id     = "monogamecanvas";

                div.removeChild(button);
                div.appendChild(canvas);

                _game = new Game1();
                _game.Run();

                canvas.focus();
            };
        }
        public WebGameWindow(Game game)
        {
            _game = game;
            _keys = new List <Keys>();

            Keyboard.SetKeys(_keys);

            _canvas          = document.getElementById("monogamecanvas").As <HTMLCanvasElement>();
            _canvas.tabIndex = 1000;
            _canvas.focus();

            // Disable selection
            _canvas.style.userSelect       = "none";
            _canvas.style.webkitUserSelect = "none";
            _canvas.style.msUserSelect     = "none";

            // TODO: Move "GL context" creation outside the game window
            var possiblecontexts = new[] { "webgl", "experimental-webgl", "webkit-3d", "moz-webgl" };

            foreach (var context in possiblecontexts)
            {
                try
                {
                    WebHelper.gl = _canvas.getContext(context).As <WebGLRenderingContext>();
                    if (WebHelper.gl != null)
                    {
                        break;
                    }
                }
                catch { }
            }

            if (WebHelper.gl == null)
            {
                var d2d = _canvas.getContext("2d").As <CanvasRenderingContext2D>();
                d2d.fillStyle = "#6495ED";
                d2d.fillRect(0, 0, _canvas.width, _canvas.height);
                d2d.fillStyle = "#000000";
                d2d.font      = "30px Arial";
                d2d.textAlign = "center";
                d2d.fillText("This device does not support WebGL  :(", _canvas.width / 2, _canvas.height / 2);

                throw new Exception("Failed to get WebGL context :|");
            }

            // Block context menu on the canvas element
            _canvas.oncontextmenu += (e) => e.preventDefault();

            // Connect events
            _canvas.onmousemove   += (e) => Canvas_MouseMove(e);
            _canvas.onmousedown   += (e) => Canvas_MouseDown(e);
            _canvas.onmouseup     += (e) => Canvas_MouseUp(e);
            _canvas.onmousewheel  += (e) => Canvas_MouseWheel(e);
            _canvas.onkeydown     += (e) => Canvas_KeyDown(e);
            _canvas.onkeyup       += (e) => Canvas_KeyUp(e);
            _canvas.ontouchstart  += (e) => Canvas_TouchStart(e);
            _canvas.ontouchmove   += (e) => Canvas_TouchMove(e);
            _canvas.ontouchend    += (e) => Canvas_TouchEnd(e);
            _canvas.ontouchcancel += (e) => Canvas_TouchEnd(e);

            document.addEventListener("webkitfullscreenchange", Document_FullscreenChange);
            document.addEventListener("mozfullscreenchange", Document_FullscreenChange);
            document.addEventListener("fullscreenchange", Document_FullscreenChange);
            document.addEventListener("MSFullscreenChange", Document_FullscreenChange);
        }