mirror of
https://github.com/photonstorm/phaser
synced 2024-12-14 15:22:57 +00:00
103 lines
2.4 KiB
JavaScript
103 lines
2.4 KiB
JavaScript
|
function distanceBetween(point1, point2) {
|
||
|
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
|
||
|
}
|
||
|
function angleBetween(point1, point2) {
|
||
|
return Math.atan2( point2.x - point1.x, point2.y - point1.y );
|
||
|
}
|
||
|
|
||
|
var isDrawing, lastPoint;
|
||
|
|
||
|
|
||
|
|
||
|
// var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
|
||
|
var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create, update: update, render: render });
|
||
|
|
||
|
function preload() {
|
||
|
|
||
|
game.load.image('mushroom', 'assets/sprites/chunk.png');
|
||
|
|
||
|
}
|
||
|
|
||
|
var mushroom;
|
||
|
var texture;
|
||
|
var image;
|
||
|
|
||
|
var down;
|
||
|
var p;
|
||
|
|
||
|
function create() {
|
||
|
|
||
|
texture = game.add.renderTexture(800, 600, 'mousetrail', true);
|
||
|
|
||
|
// We create a sprite (rather than using the factory) so it doesn't get added to the display, as we only need its texture data.
|
||
|
mushroom = new Phaser.Sprite(game, 0, 0, 'mushroom');
|
||
|
mushroom.anchor.setTo(0.5, 0.5);
|
||
|
|
||
|
// This is the sprite that is drawn to the display. We've given it the renderTexture as its texture.
|
||
|
image = game.add.image(0, 0, texture);
|
||
|
|
||
|
domElement = document.getElementById('phaser-example');
|
||
|
|
||
|
p = new Phaser.Point();
|
||
|
|
||
|
domElement.addEventListener('mousemove', onMouseMove, true);
|
||
|
domElement.addEventListener('mousedown', onMouseDown, true);
|
||
|
// domElement.addEventListener('mouseout', onMouseOut, true);
|
||
|
domElement.addEventListener('mouseup', onMouseUp, true);
|
||
|
|
||
|
texture.render(mushroom, p, false);
|
||
|
|
||
|
}
|
||
|
|
||
|
function onMouseDown(e) {
|
||
|
isDrawing = true;
|
||
|
lastPoint = { x: e.clientX, y: e.clientY };
|
||
|
}
|
||
|
|
||
|
function onMouseUp(e) {
|
||
|
isDrawing = false;
|
||
|
}
|
||
|
|
||
|
function onMouseMove(e) {
|
||
|
|
||
|
if (!isDrawing) return;
|
||
|
|
||
|
var currentPoint = { x: e.clientX, y: e.clientY };
|
||
|
var dist = distanceBetween(lastPoint, currentPoint);
|
||
|
var angle = angleBetween(lastPoint, currentPoint);
|
||
|
|
||
|
for (var i = 0; i < dist; i+=5) {
|
||
|
x = lastPoint.x + (Math.sin(angle) * i) - 25;
|
||
|
y = lastPoint.y + (Math.cos(angle) * i) - 25;
|
||
|
p.set(x, y);
|
||
|
texture.render(mushroom, p, false);
|
||
|
|
||
|
// ctx.beginPath();
|
||
|
// ctx.arc(x+10, y+10, 20, false, Math.PI * 2, false);
|
||
|
// ctx.closePath();
|
||
|
// ctx.fill();
|
||
|
// ctx.stroke();
|
||
|
}
|
||
|
|
||
|
lastPoint = currentPoint;
|
||
|
|
||
|
}
|
||
|
|
||
|
function tint() {
|
||
|
|
||
|
image.tint = Math.random() * 0xFFFFFF;
|
||
|
|
||
|
}
|
||
|
|
||
|
function update() {
|
||
|
|
||
|
// if (down)
|
||
|
// {
|
||
|
// }
|
||
|
|
||
|
}
|
||
|
|
||
|
function render() {
|
||
|
|
||
|
}
|