Windows 8 Lab Game

เรามาเริ่มเขียนเกม ลง App ของ Windows 8 กันเลยนะครับ

เราจะใช้ Engin ของค่าย Pixal ซึ่งรู้จักดีในนาม เกม Cut the Rope นั้นเองนะครับ

Resound :http://thinkpixellab.com/pxloader

 ขั้นแรกเปิดโปรแกรม Michosoft Visual Studio 11 bata

 

เลือกโปรเจกที่จะเขียนเกม File->New->Project

 เลือกตรงบาร์ข้างซ้ายมือ Templates->Other Lunguages->JavaScripes

เลือกในหมวด Blank Application

ทดลองรันได้ใน 2 หมวดหมู่

บน Simulator

และ

Local Machine

จะนั้นเขียนใน default.html โค๊ชดังนี้แล้วรัน

 





    

    

    

    

    

    

    

    

    

    

    

  

    

    

    

    





    
Content goes here

    

วิธีการเรียกใช้ Font / HTML + CSS

Hello world!

Design Web Forest

Meta Detect Scene

วิธีการทำให้หน้าจอบนเว็บเท่ากับเว็บไซต์กันพอดี

    










 
Demo
 
iPhone Safari Viewport Scaling Bug
 
View this page with an iPhone. Rotate the phone from portrait to landscape. Notice the page being scaled up on landscape view.

WebGL CKI

ทดสอบเอาโมเดลใส่ในเว็บไซต์ INDEX.HTML

 
  
  
  
  
 

 
  

  

   MOVE mouse & press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan
  

  

  
  

  

 

ปั้นโมเดล 3d อาคาร CKA

CKA web 3D for Three.js

ตอนต่อไปลองมาเขียนเว็บไซต์แบบ 3d ดูนะครับ จะใช้ไลบารีของ Three.js ขั้นแรกจะต้องเตรียม Code และ Model ก่อนนะครับ หาโค้ดที่เกี่ยวกับการใช้ปุ่มบนหน้าจอ

Node.js

วันที่ 3 มาเริ่มลุย Node.js+socket.io ในรูปแบบการใช้งานอื่นๆดูบ้างนะครับ ครั้งลองดึง .html ขึ้นมาแสดงคำว่า Hello World โดยเขียน

app.js แล้วก็เรียกด้วยคำสั่งของ Node app.js

var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs')

app.listen(80);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

index.html

Hello world

TV Show

วันที่ 2 เริ่มทำการติดตั้งเครื่องคอมพิวเตอร์ใหม่เปลี่ยนวินโดร์ 8 มาเป็นวินโดร์ XP ใหม่ล่าสุดมี license  ด้วยเจ๋งมากเลยทีเดียว มาเริ่มทำงานกันดีกว่า เราใช้ จำลองเซิฟเวอร์เป็นตัว XAMPP จากนั้นพัฒนาโปรแกรมเมื่อคราวที่แล้ว

New Project of CMU Co CKA

ในช่วงบ่ายได้หาแนวคิดที่จะทำเกมแบบเภท MMORPG Online เพื่อการศึกษาวัตถุประสงค์อยากให้เด็กที่ด้อยโอกาสสามารถเรียนรู้ในสิ่งที่ตนรักหรือชอบในสิ่งที่ตนเองไม่มีความสามารถค้นหาได้ด้วยเหตุผลเรื่องระยะทาง ด้านงบประมาณหรือเหตุอื่นๆอย่างไรก็ตาม  ทำให้ผู้สนใจในการเรียนรู้ขาดโอกาสในการพัฒนาตนเอง ในการทำโครงงานเรื่องนี้ตอบสนองการเข้าหาข้อมูลได้เร็วมากขึ้น สามารถเข้าจากบนโทรศัทพ์มือถือ เครื่องมือสื่อสาร หรืือเครื่องคอมพิวเตอร์ได้อย่างหลายหลากช่องทาง  ผู้จัดทำจึงเห็นเครื่องมือในการสร้างผลงานชิ้นนี้ขึ้นมาได้แก่ HTML5 + Node.js ต่อไปเป็นการทดสอบ Node.js แบบง่ายไปหาแบบยาก

ทำการดาวน์โหลดและติดตั้งโปรแกรม Node.js ดังเว็บลิ้งค์นี้ http://nodejs.org
เมื่อติดตั้งเรียบร้อยแล้วทำการทดลองบน cmd พิมพ์ว่า node

ทดสอบ 1+2 Enter ดูผลลัพธ์


Save เป็นไฟล์ server.js เรียกใช้โดยการ พิมพ์ ที่อยู่/node server.js

var http = require("http");

http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("Hello World");
  response.end();
}).listen(8888);

ลองทดสอบโดยเปิด Chrome 127.0.0.1:8888 ดูผลลัพธ์

Assignment 2 Project Web

วันนี้ได้รับมอบหมายงานมา 2 Project

1. Update Website CKA to HTML5

2. TV show comment in  VIDEO on Youtube
    กำลังทดลองใช้เว็บ Youtube ลองสร้าง Comment ในวีดีโอ
    แต่ก็ไม่ได้ผลเพราะยังไม่มีใครพัฒนา Future ไปถึงที่เรียก Comment ขึ้นแสดงบน วีดีโอเลย

ฉะนั้นก็ลองมาพัฒนาต่อบน Server ของเราเอง โดยมีขั้นตอนดังต่อไปนี้
1. นำวีดีโอเข้ายังเว็บ HTML5 + Theme js/jquery-1.7.1.min.js
2. แสดงตัวหนังสือจากเว็บ YouTube เรียกเข้ามาใช้บนเว็บโดยใช้คำสั่งดังต่อไปนี้

//ใช้ตรง 

Body </div><div id="comments"></div>


<script type="text/javascript" src="js/js.js"></script>

  

 

  

      <script type= "text/javascript">

$.ajax({

        url: "http://gdata.youtube.com/feeds/api/videos/KrmEyPkgDf8/comments?v=2&alt=json&max-results=50", 

        //gets the max first 50 results.  To get the 'next' 50, use &start-index=50

        dataType: "jsonp",

        success: function(data){

            $.each(data.feed.entry, function(key, val) {



                comment = $("<div class='comment'></div>");



                author = $("<a target='_blank' class='youtube_user'></a>");

                author.attr("href", "http://youtube.com/user/" + val.author[0].name.$t);

                author.html(val.author[0].name.$t);



                content = $("<div style='font-size: 14px;' class='content'></div>");

                content.html(val.content.$t);



                comment.append(author).append(content);

                $('#comments').append(comment);

            });

        }

    });

</script>