1 game

suzy56 · Jan 6, 2018 · cce5be7 · cce5be7
1 parent 6179c19
commit cce5be7
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -67,6 +67,7 @@
 * [runrobot - 机器人向前冲](http://game.webxinxin.com/runrobot)
 * [allalive - 一个都不能死](http://game.webxinxin.com/allalive)
 * [skeletonguard - 骷髅防塔](http://game.webxinxin.com/skeletonguard)
+* [wipeglass - 擦玻璃](http://game.webxinxin.com/wipeglass)
 
 ### 问题反馈
 有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流

diff --git a/wipeglass/assets/park-bg.jpg b/wipeglass/assets/park-bg.jpg
diff --git a/wipeglass/assets/park-mask.jpg b/wipeglass/assets/park-mask.jpg
diff --git a/wipeglass/assets/rag.png b/wipeglass/assets/rag.png
diff --git a/wipeglass/index.html b/wipeglass/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>擦玻璃</title>
+	<meta name="keywords" content="擦玻璃"/>
+	<meta name="description" content="擦玻璃"/>
+	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <style type="text/css">*{margin: 0;padding:0;}html,body{width:100%;height:100%;overflow:hidden;}canvas{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}
+    #games{width:100%;height:100%;}
+    </style>
+</head>
+<body>
+<div id="games"></div>
+<script type="text/javascript" src="../phaser.min.js"></script>
+<script type="text/javascript" src="js/main.js"></script>
+</body>
+</html>
diff --git a/wipeglass/js/main.js b/wipeglass/js/main.js
@@ -0,0 +1,110 @@
+var game = new Phaser.Game(1920, 1080, Phaser.CANVAS, "games");
+var MyGame = function(){};
+MyGame.prototype = {
+	startLoad: function() {
+		this.load.image('park-bg', 'assets/park-bg.jpg');
+		this.load.image('park-mask', 'assets/park-mask.jpg');
+		this.load.image('rag', 'assets/rag.png');
+		this.load.start();
+	},
+	loadStart: function() {
+		this.text.setText("加载中 ...");
+	},
+	fileComplete: function(progress) {
+		this.text.setText( + progress + "%");
+	},
+	loadComplete: function() {
+		this.text.setText("启动中 ...");
+		this.text.destroy();
+		this.iniGame();
+	},
+	create: function() {
+		//this.stage.backgroundColor = '#8cddfe';
+		//背景渐变
+		var bg=this.add.bitmapData(1920, 1080);
+			bg.addToWorld();
+		var gra = bg.context.createLinearGradient(0, 0, 0,1080);
+		    gra.addColorStop(0, '#8cddfe');
+		    gra.addColorStop(1, '#bae8ff');
+		    bg.context.fillStyle = gra;
+			bg.fill();
+
+		//适应屏幕
+		this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+		//失去焦点是否继续游戏
+		this.stage.disableVisibilityChange = true;
+		//开启鼠标事件
+		this.input.mouse.capture = true;
+		//load提示
+		this.text = this.add.text(this.world.centerX, this.world.centerY, '', {font: "50px myFont", fill: '#fff' ,});
+		this.text.anchor.set(0.5);
+		this.text.setShadow(3, 3, 'rgba(0,0,0,0.2)', 2);
+		this.load.onLoadStart.add(this.loadStart, this);//开始
+		this.load.onFileComplete.add(this.fileComplete, this);//加载中
+		this.load.onLoadComplete.add(this.loadComplete, this);//加载结束
+		this.startLoad();
+	},
+	iniGame: function(){
+		this.gameGroup = this.add.group();
+		this.gameBg = this.add.sprite(0, 0, 'park-mask');
+		this.bmd = this.make.bitmapData(1920, 1080);
+		this.bmd.addToWorld();
+		this.gameMaskBtm = new this.draw(this);
+		this.rag = this.add.sprite(500, 500, 'rag');
+		this.rag.anchor.setTo(0.5, 0.5);
+		this.rag.inputEnabled = true;
+		this.rag.input.enableDrag();
+		this.rag.events.onDragUpdate.add(this.onUpdate, this);
+
+		this.scoreTable = this.add.graphics(1720,0).beginFill('0X000000').drawRoundedRect(0,0,200,100,10).endFill();
+		this.scoreTable.alpha = 0.5;
+
+		this.score = this.add.text(0, 0, "0%", {font: "50px", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle"});
+		this.score.setTextBounds(this.scoreTable.x, this.scoreTable.y, this.scoreTable.width, this.scoreTable.height);
+
+
+		this.gameGroup.addMultiple([
+			this.gameMaskBtm.sprite,
+			this.gameBg
+		]);
+	},
+	onUpdate: function(e){
+		this.gameMaskBtm.onDraw(e.x, e.y);
+		this.bmd.alphaMask('park-bg', this.gameMaskBtm.sprite);
+		this.score.text = this.getTransparentPercent() + "%";
+	},
+	getTransparentPercent: function() {
+        var imgData = this.bmd.ctx.getImageData(0, 0, 1920, 1080),
+            pixles = imgData.data,
+            transPixs = [];
+        for (var i = 0, j = pixles.length; i < j; i += 4) {
+            var a = pixles[i + 3];
+            if (a < 128) {
+                transPixs.push(i);
+            };
+        };
+        return parseInt(100 - transPixs.length / (pixles.length / 4) * 100);
+    },
+	draw: function(that){
+		this.bmd = that.make.bitmapData(1920, 1080);
+		this.bmd.ctx.beginPath();
+		this.bmd.ctx.strokeStyle = "#000";
+		this.bmd.ctx.lineWidth = 155;
+		this.bmd.ctx.lineJoin = "round";
+		this.sprite = that.add.sprite(0,0,this.bmd);
+		this.temX = 500;
+		this.temY = 500;
+		this.onDraw = function(x, y){
+			this.bmd.ctx.beginPath();
+			this.bmd.ctx.moveTo(this.temX, this.temY);
+			this.bmd.ctx.lineTo(x, y);
+			this.bmd.ctx.closePath();
+			this.bmd.ctx.stroke();
+			this.temX = x;
+			this.temY = y;
+		};
+	}
+};
+
+game.state.add('Game', MyGame);
+game.state.start('Game');