-
Notifications
You must be signed in to change notification settings - Fork 6
/
phaserExample.html
58 lines (53 loc) · 2.13 KB
/
phaserExample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Phaser Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="./../bower_components/seedrandom/seedrandom.js"></script>
<script src="./../bower_components/shuffle-seed/shuffle-seed.js"></script>
<script src="./../bower_components/phaser/build/phaser.js"></script>
<script src="./../unscrambleImg.min.js"></script>
<script src="./../bower_components/jquery/dist/jquery.js"></script>
<link href="./../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body style="background:#f2f2f2;margin:20px;" align="center">
<div class="panel panel-default" style="width:200px;display:inline-block;vertical-align:top;" align="center">
<div class="panel-heading">
<h3 class="panel-title">Original</h3>
</div>
<div class="panel-body" id="original" style="width:114px;height:145px;">
<img src="https://raw.githubusercontent.com/webcaetano/image-scramble/master/examples/sample2_crop.png">
</div>
</div>
<div class="panel panel-default" style="width:200px;display:inline-block;vertical-align:top;" align="center">
<div class="panel-heading">
<h3 class="panel-title">Unscrambled</h3>
</div>
<div class="panel-body" id="unscrambled">
</div>
</div>
</body>
</html>
<script type="text/javascript">
function startPhaser(scope){
var game = new Phaser.Game(136, 114, Phaser.AUTO, 'unscrambled');
game.state.add('game', {
preload:function preload(){
game.load.image('goblin-scramble','sample2_crop.png');
game.stage.backgroundColor = '#fff';
},
create:function create(){
var sliceSize = 5;
var goblinScrambleSprite = game.add.sprite(0,0,'goblin-scramble')
var goblinScramble = new Phaser.BitmapData(goblinScrambleSprite.width,goblinScrambleSprite.height).drawFull(goblinScrambleSprite);
var bmp = unscrambleImg(goblinScramble._image,sliceSize,'Kappa',game.add.bitmapData(goblinScramble._image.width,goblinScramble._image.height));
var sprite = game.add.sprite(0, 0, bmp);
goblinScrambleSprite.destroy();
}
});
game.state.start('game');
}
startPhaser();
</script>