diff --git a/example/public/images/1.png b/example/public/images/1.png new file mode 100644 index 0000000..a5d045f Binary files /dev/null and b/example/public/images/1.png differ diff --git a/example/public/images/2.png b/example/public/images/2.png new file mode 100644 index 0000000..3ac9932 Binary files /dev/null and b/example/public/images/2.png differ diff --git a/example/public/images/3.png b/example/public/images/3.png new file mode 100644 index 0000000..a4c33d8 Binary files /dev/null and b/example/public/images/3.png differ diff --git a/example/public/images/4.png b/example/public/images/4.png new file mode 100644 index 0000000..8302700 Binary files /dev/null and b/example/public/images/4.png differ diff --git a/example/public/images/5.png b/example/public/images/5.png new file mode 100644 index 0000000..b2a757b Binary files /dev/null and b/example/public/images/5.png differ diff --git a/example/public/images/6.png b/example/public/images/6.png new file mode 100644 index 0000000..152f0e8 Binary files /dev/null and b/example/public/images/6.png differ diff --git a/example/public/images/7.png b/example/public/images/7.png new file mode 100644 index 0000000..bbf76bd Binary files /dev/null and b/example/public/images/7.png differ diff --git a/example/public/images/8.png b/example/public/images/8.png new file mode 100644 index 0000000..d555930 Binary files /dev/null and b/example/public/images/8.png differ diff --git a/example/public/images/9.png b/example/public/images/9.png new file mode 100644 index 0000000..1d009a6 Binary files /dev/null and b/example/public/images/9.png differ diff --git a/example/public/javascripts/game.js b/example/public/javascripts/game.js index a9cf43e..fecf73d 100644 --- a/example/public/javascripts/game.js +++ b/example/public/javascripts/game.js @@ -3,7 +3,10 @@ $(function () { "use strict"; var canvas = document.getElementById('gameCanvas'), ctxCanvas = canvas.getContext('2d'), keyboard = new THREEx.KeyboardState(), - playerSize = 0, entitySize = 0; + playerSize = 0, entitySize = 0, + image = new Image(), + shipNumber = Math.floor(Math.random() * 9) + 1; + image.src = '../images/' + shipNumber + '.png'; window.addEventListener('resize', resizeCanvas, false); @@ -33,7 +36,7 @@ $(function () { var playerStates = GarageServerIO.getPlayerStates(), entityStates = GarageServerIO.getEntityStates(); playerStates.forEach(function (player) { - ctxCanvas.fillRect(player.state.x, player.state.y, playerSize, playerSize); + drawRotatedImage(player.state.ang, player.state.x, player.state.y, image); }); entityStates.forEach(function (entity) { ctxCanvas.fillRect(entity.state.x, entity.state.y, entitySize, entitySize); @@ -59,4 +62,12 @@ $(function () { } ); } + + function drawRotatedImage(angle, x, y, img) { + ctxCanvas.save(); + ctxCanvas.translate(x + img.width / 2, y + img.height / 2); + ctxCanvas.rotate(angle * (Math.PI / 180)); + ctxCanvas.drawImage(img, 0, 0, img.width, img.height, -img.width / 2, -img.height / 2, img.width, img.height); + ctxCanvas.restore(); + } }); \ No newline at end of file diff --git a/example/shared/core.js b/example/shared/core.js index d8768ba..ba81fc6 100644 --- a/example/shared/core.js +++ b/example/shared/core.js @@ -1,26 +1,22 @@ (function(exports){ exports.getNewPlayerState = function (state, inputs, deltaTime, garageServer) { - var i = 0; + var i = 0, + distance = 0; - if (!state.x && !state.y) { + if (!state.ang && state.ang !== 0) { + state.ang = 0; state.x = 0; state.y = 0; - state.direction = 'right'; } + for (i = 0; i < inputs.length; i ++) { if (inputs[i].input === 'left') { - state.x -= (125 * deltaTime); - state.direction = 'left'; + state.ang -= (125 * deltaTime); } else if (inputs[i].input === 'right') { - state.x += (125 * deltaTime); - state.direction = 'right'; - } else if (inputs[i].input === 'down') { - state.y += (125 * deltaTime); - state.direction = 'down'; + state.ang += (125 * deltaTime); } else if (inputs[i].input === 'up') { - state.y -= (125 * deltaTime); - state.direction = 'up'; + distance += (125 * deltaTime); } else if (inputs[i].input === 'space') { if (garageServer) { var newId = guid(); @@ -29,8 +25,20 @@ } } } + var newPoint = getPoint(state.ang, distance, state.x, state.y); + state.x = newPoint.x; + state.y = newPoint.y; + return state; }; + + function getPoint(angle, distance, oldX, oldY) { + var radians = angle * (Math.PI / 180); + return { + x: oldX + distance * Math.cos(radians), + y: oldY + distance * Math.sin(radians) + }; + } exports.getNewEntityState = function (state, deltaTime) { if (state.direction === 'left') { @@ -50,6 +58,7 @@ var interpolationState = {}; interpolationState.x = (previousState.x + amount * (targetState.x - previousState.x)); interpolationState.y = (previousState.y + amount * (targetState.y - previousState.y)); + interpolationState.ang = (previousState.ang + amount * (targetState.ang - previousState.ang)); return interpolationState; };