HTML5 로 게임을 만든다고 했을 때 가장 중요한 것은 이미지 처리일겁니다.
프레임 단위로 조각내서 화면에 찍어야 할 것입니다.
그림 조각 퍼즐처럼 이미지를 뒤섞는 예제를 한번 만들어보았습니다.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div>
<canvas id="test" width="320" height="240">
</canvas>
<script>
var canvas;
var context;
var testImage;
var sectorIndices;
var SECTOR_XCOUNT = 2;
var SECTOR_YCOUNT = 2;
var SECTOR_TOTAL_COUNT = SECTOR_XCOUNT * SECTOR_YCOUNT;
var SECTOR_XSTEP = 0;
var SECTOR_YSTEP = 0;
//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/array/shuffle [v1.0]
function shuffle(o) {
for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}
function newNumbers(max) {
var ret = []
for (var i = 0; i != max; ++i) {
ret.push(i);
}
return ret;
}
function main() {
sectorIndices = newNumbers(SECTOR_TOTAL_COUNT);
shuffle(sectorIndices);
canvas = document.getElementById("test")
if (!canvas.getContext) {
document.writeln('THIS_BROWSER_DOES_NOT_SUPPORT_CANVAS');
return;
}
context = canvas.getContext("2d");
testImage = new Image();
testImage.src = "http://imp17.com/index/icon_myevan.gif";
setInterval(onFrame, 10);
}
function onFrame() {
SECTOR_XSTEP = testImage.width / 2;
SECTOR_YSTEP = testImage.height / 2;
context.save();
for (var i = 0; i != SECTOR_TOTAL_COUNT; ++i) {
var srcPos = getPosByIndex(sectorIndices[i]);
var dstPos = getPosByIndex(i);
context.drawImage(testImage, srcPos[0], srcPos[1], SECTOR_XSTEP, SECTOR_YSTEP, dstPos[0], dstPos[1], SECTOR_XSTEP, SECTOR_YSTEP);
}
context.restore();
}
function getPosByIndex(index) {
return [(index % SECTOR_XCOUNT) * SECTOR_XSTEP,
(parseInt(index / SECTOR_XCOUNT)) * SECTOR_YSTEP];
}
main();
</script>
</div>
</body>
</html>
ps.
ps2.
(0) 
(0)
python 을 좋아하는 게임 프로그래머
by 자루
