Single Tech Games

Juego para windows 8 con Javascript, estilo Metro

Ha pasado bastante tiempo desde que coloco código en el blog, ya venia siendo hora, pero primero, la pregunta es: ¿Por que Windows 8? bueno Windows 8 es uno de los potenciales competidores de Android e IOS y el próximo sistema operativo de Microsoft que vendrá por defectos en notebooks, netbooks, ultrabooks, etc, etc. por lo que es una ventaja hacer algo para ellos antes de que vea la luz.
Además tenemos que ser emprendedores, ¿Y que es emprendedor? bueno para darles un ejemplo, yo me despierto a las 12 del día y me digo a mi mismo: ¡Levántate! … y a veces lo hago por lo tanto a veces soy emprendedor.

Y mi recomendación de siempre es que siempre estén con las ultimas tendencias de la tecnología, manténgase frescos, yo para mantenerme fresco por ejemplo me baño todos los días mientras escucho sobre política, ya que así de paso me lavo el cerebro.
Bueno primero y antes que cualquier cosa les digo que voy a utilizar el MonkeyCoder, específicamente el código resultante de este y este post.
El código
El código resultante del proyecto de monkey lo pueden encontrar dentro de la carpeta “nombreArchivoPong.build/html5” encontraran un archivo que se llama MonkeyGame.html y main.js
Visual Studio 2012 y Windows 8
Como esta es una aplicación metro Style, la única forma de hacerla es descargándose la versión developer de Windows 8 y el Visual Studio 2012 Express que esta en la misma pagina.
Pasos
1) Creamos un nuevo proyecto en visual studio 2012 y elegimos Plantillas-JavaScript-Tienda Windows-Aplicación vacía y le ponemos un nombre.

juego pong windows 8 estilo metro javascript

2) Automáticamente se creara un proyecto con algunos archivos autogenerados, abrimos la carpeta JS y agregamos un nuevo archivo JavaScript que se llamara main.js, para esto clic derecho en la carpeta-agregar-nuevo elemento, elegimos el tipo de archivo JavaScript y le ponemos el nombre.
nuevo archivo visual studio 2012
3) Copiamos todo el código del archivo main.js de monkey a este nuevo archivo js, no lo vayan a arrastrar de la carpeta de monkey a la del proyecto porque tendrán problemas al tratar de validarlo para la tienda de Windows.
4) Cambiamos esto en el código de main.js de nuestro proyecto:

var RESIZEABLE_CANVAS=true;
window.onload=function( e ){
if( RESIZEABLE_CANVAS ){
window.onresize=function( e ){
var canvas=document.getElementById( "GameCanvas" );
var width=window.innerWidth;
var height=window.innerHeight;
canvas.width=width;    canvas.height=height;
}
window.onresize( null );
}

5) Vamos a la carpeta CSS del proyecto y le cambiamos el código al archivo default.css.

body {
height: 100%;
overflow: hidden;
font-family:
arial,sans-serif;
font-size: 13px;
color: #000;
background-color: black;
padding:0px;
margin:0px;
 }
canvas:focus{  outline:none; }
@media screen and (-ms-view-state: fullscreen-landscape) {
 #GameCanvas {
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
display: block;
border: 1px solid black;
}
}
@media screen and (-ms-view-state: filled) { }
@media screen and (-ms-view-state: snapped) { }
@media screen and (-ms-view-state: fullscreen-portrait) { }

6)Ahora vamos al archivo default.html del proyecto de visual studio y agregamos este código que viene del archivo MonkeyGame.html.

-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-
<script src="/js/main.js"></script>
-
<body>
<canvas id="GameCanvas" onclick="this.focus();" oncontextmenu="return false;" width=640 height=480 tabindex=1></canvas><br>
</body>
-

7) Le damos ejecutar y wala! nuestro juego esta corriendo, se fijaran que solo ocupamos parte de la pantalla, pero es porque así lo creamos al juego en un primer momento, para ocupar toda la pantalla en monkey cambien el código y jueguen con estas variables

-
Field cWidth:Int  'X largo del canvas
Field cHeight:Int 'Y ancho del canvas
-
Method OnCreate:Int()
SetUpdateRate(60) 'seran 60 frames por segundo
cWidth = DeviceWidth()
cHeight = DeviceHeight()
Return True
End

Suerte!

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments