<!DOCTYPE html>
<html>
<head>
<script src="kinetic-v3.9.0.js">
</script>
<script>
function loadImages(sources, callback){
var images = {};
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function(){
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function initStage(images){
var stage = new Kinetic.Stage({
container: "container",
width: 640,
height: 640
});
var layer = new Kinetic.Layer();
var maplayer = new Kinetic.Layer();
var tS = 32;
var map = new Array();
for(var j=0; j<20; j++)
{
map[j] = new Array();
for(var i=0; i<20; i++)
{
var x1= 32*i;
var y1= 32*j;
var triangle = new Kinetic.Shape({
drawFunc: function() {
var sx = 32*Math.floor(Math.random()*2+5);
var sy = 32*Math.floor(Math.random()*2+18);
var context = this.getContext();
context.beginPath();
//content.moveTo(x,y);
context.rect(0, 0, 32,32);
context.closePath();
this.fillStroke();
context.drawImage(images.tileSet,
sx,sy,32,32,0,0,32,32);
},
x: x1,
y: y1
});
map[j][i] = triangle;
maplayer.add(map[j][i]);
}
}
var col =0;
var playerLayer = new Kinetic.Layer();
var player = new Kinetic.Shape({
drawFunc: function() {
var context = this.getContext();
context.beginPath();
context.rect(0, 0, 32,48);
context.closePath();
this.fillStroke();
context.drawImage(images.spaceGuy,
32,96,32,48,0,0,32,48);
},
x: 320,
y: 320
});
playerLayer.add(player);
stage.add(maplayer);
stage.add(playerLayer);
stage.draw();
var input ={};
document.addEventListener('keydown',function(e){
var keyCode=e.which;
input[keyCode]=true;
});
document.addEventListener('keyup',function(e) {
var keyCode=e.which;
input[keyCode]=false;
});
stage.onFrame(function(frame) {
movePlayer(37,65,input,player,-1,0,3,images.spaceGuy,col);
movePlayer(39,68,input,player,1,0,1,images.spaceGuy,col);
movePlayer(38,87,input,player,0,-1,0,images.spaceGuy,col);
movePlayer(40,83,input,player,0,1,2,images.spaceGuy,col);
playerLayer.draw();
++col;
if (col>2)
{
col=0;
}
});
stage.start();
}
function movePlayer(in1,in2,input,player,xfac,yfac,row,img,col)
{
if (input[in1] || input[in2])
{
player.drawFunc=function() {
var context = this.getContext();
context.beginPath();
context.rect(0, 0, 32,48);
context.closePath();
this.fillStroke();
context.drawImage(img,
32*col,48*row,32,48,0,0,32,48);
};
player.x += 2*xfac;
player.y += 2*yfac;
}
}
window.onload = function(){
var sources = {
spaceGuy: "space_guy.png",
tileSet: "free_tileset_CC.png",
};
loadImages(sources, initStage);
};
</script>
</head>
<body onmousedown="return false;">
<div id="container">
</div>
</body>
</html>
---------------------------------------------------
Download ภาพประกอบโปรแกรม
picture...space_guy.png
Background...free_tileset_CC.png
--------------------------------------------------
เมื่อใช้ลูกศรเลื่อนขึ้น-ลง Robot จะเลื่อนขึ้นลงตามลูกศร และหันหน้าได้ตามลูกศร ซอยเท้าได้อย่างรวดเร็ว...
...จากการฝึกอบรม HTML5 วิทยากร : อาจารย์โชคชัย จันทร์เชย