弹球打砖块初次提交

huxinp · Jul 26, 2017 · 972a06e · 972a06e
1 parent 7b027b7
commit 972a06e
Show file tree

Hide file tree

Showing 28 changed files with 365 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,5 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
+static
+static/
diff --git a/build/dev-server.js b/build/dev-server.js
@@ -1,4 +1,5 @@
 require('./check-versions')()
+require('shelljs/global')
 
 var config = require('../config')
 if (!process.env.NODE_ENV) {
@@ -49,6 +50,16 @@ Object.keys(proxyTable).forEach(function (context) {
   app.use(proxyMiddleware(options.filter || context, options))
 })
 
+
+
+
+rm('-rf', 'static');
+mkdir('static');
+cp('-R', 'src/assets', 'static');
+
+
+
+
 // handle fallback for HTML5 history API
 app.use(require('connect-history-api-fallback')())
 

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -7,6 +7,8 @@ function resolve (dir) {
   return path.join(__dirname, '..', dir)
 }
 
+
+
 module.exports = {
   entry: {
     app: './src/main.js'
@@ -60,7 +62,19 @@ module.exports = {
           limit: 10000,
           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
         }
-      }
+      },
+		{
+			test: /pixi\.js$/,
+			loader: 'script-loader'
+		},
+		{
+			test: /phaser-split\.js$/,
+			loader: 'script-loader'
+		},
+		{
+			test: /p2\.js$/,
+			loader: 'script-loader'
+		}
     ]
   }
 }
diff --git a/config/index.js b/config/index.js
@@ -23,7 +23,7 @@ module.exports = {
   },
   dev: {
     env: require('./dev.env'),
-    port: 8080,
+    port: 3000,
     autoOpenBrowser: true,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',

diff --git a/index.html b/index.html
@@ -2,6 +2,8 @@
 <html>
   <head>
     <meta charset="utf-8">
+	  <meta name="viewport"
+			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <title>game_store</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -15,12 +15,14 @@
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
+    "axios": "^0.16.2",
     "babel-core": "^6.22.1",
     "babel-loader": "^7.1.1",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "^1.3.2",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
+    "bootstrap": "^3.3.7",
     "chalk": "^2.0.1",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
@@ -40,6 +42,7 @@
     "phaser": "^2.6.2",
     "rimraf": "^2.6.0",
     "sass-loader": "^6.0.6",
+    "script-loader": "^0.7.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "url-loader": "^0.5.8",

diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,26 @@
+<template>
+    <div id="app">
+		<router-view></router-view>
+    </div>
+</template>
+
+<script>
+import {mapActions} from 'vuex';
+export default {
+    name: 'app'
+}
+</script>
+
+<style>
+html, body{
+	width: 100%;
+	height: 100%;
+}
+#app {
+    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #2c3e50;
+	height: 100%;
+}
+</style>
diff --git a/src/assets/marbles/images/ball.png b/src/assets/marbles/images/ball.png
diff --git a/src/assets/marbles/images/board.png b/src/assets/marbles/images/board.png
diff --git a/src/assets/marbles/images/brick1.png b/src/assets/marbles/images/brick1.png
diff --git a/src/assets/marbles/images/btnbg1.png b/src/assets/marbles/images/btnbg1.png
diff --git a/src/assets/marbles/images/logo.png b/src/assets/marbles/images/logo.png
diff --git a/src/assets/marbles/images/progress.png b/src/assets/marbles/images/progress.png
diff --git a/src/components/Games.vue b/src/components/Games.vue
@@ -0,0 +1,27 @@
+<template>
+	<div id="game"></div>
+</template>
+<script type="text/ecmascript-6">
+	import {mapActions} from 'vuex';
+	export default {
+		data(){
+			return {
+
+			}
+		},
+		mounted(){
+			this.start(this.$route.params.gameName);
+		},
+		created(){
+
+		},
+		methods: {
+			...mapActions([
+				'start'
+			])
+		}
+	}
+</script>
+<style lang="scss">
+
+</style>
diff --git a/src/components/Index.vue b/src/components/Index.vue
@@ -0,0 +1,16 @@
+<template>
+    <div class="well">
+		<div class="well">
+			<a href="/#/marbles" class="btn btn-primary marbles">弹球</a>
+		</div>
+		<div class="well">
+			<a href="/#/snake" class="btn btn-primary">敬请期待</a>
+		</div>
+    </div>
+</template>
+<script type="text/ecmascript-6">
+
+</script>
+<style lang="scss">
+
+</style>
diff --git a/src/components/game.js b/src/components/game.js
@@ -0,0 +1,9 @@
+import pixi from 'phaser/build/custom/pixi';
+import p2 from 'phaser/build/custom/p2';
+import phaser from 'phaser/build/custom/phaser-split';
+
+const game = () => {
+	return new Phaser.Game(document.body.offsetWidth, document.body.offsetHeight, Phaser.AUTO, 'game');
+};
+
+export default game;
diff --git a/src/components/init-state.js b/src/components/init-state.js
@@ -0,0 +1,10 @@
+
+const InitState = function () {};
+InitState.prototype.preload = function () {
+	this.load.image('progress', 'static/assets/marbles/images/progress.png');
+};
+InitState.prototype.create = function () {
+	this.state.start('LoadingState');
+};
+
+export default InitState;
diff --git a/src/components/marbles/index.js b/src/components/marbles/index.js
@@ -0,0 +1,13 @@
+import InitState from '../init-state';
+import LoadingState from './loading-state';
+import PrestartState from './prestart-state';
+import MainState from './main-state';
+
+const marbles = game => {
+	game.state.add('InitState', new InitState());
+	game.state.add('LoadingState', new LoadingState());
+	game.state.add('PrestartState', new PrestartState());
+	game.state.add('MainState', new MainState());
+	game.state.start('InitState');
+};
+export default marbles;
diff --git a/src/components/marbles/loading-state.js b/src/components/marbles/loading-state.js
@@ -0,0 +1,25 @@
+
+const LoadingState = function () {};
+LoadingState.prototype.init = function(){
+	this.progress = this.add.image(this.world.centerX, this.world.centerY, 'progress');
+	this.progress.anchor = {x: 0.5, y: 0.5};
+	this.progressText = this.add.text(this.world.centerX, this.world.centerY + 30, '0%', {fill: '#fff', fontSize: '16px'});
+	this.progressText.anchor = {x: 0.5, y: 0.5};
+};
+LoadingState.prototype.preload = function () {
+	this.load.image('board', 'static/assets/marbles/images/board.png');
+	this.load.image('ball', 'static/assets/marbles/images/ball.png');
+	this.load.image('brick1', 'static/assets/marbles/images/brick1.png');
+	this.load.image('logo', 'static/assets/marbles/images/logo.png');
+	this.load.image('btnbg1', 'static/assets/marbles/images/btnbg1.png');
+	let _this = this;
+	this.load.onFileComplete.add(function (progress) {
+		_this.progressText.text = progress + '%';
+	});
+};
+LoadingState.prototype.create = function () {
+	//资源加载完成后自动开始下一个场景state
+	this.state.start('PrestartState');
+};
+
+export default LoadingState;
diff --git a/src/components/marbles/main-state.js b/src/components/marbles/main-state.js
@@ -0,0 +1,78 @@
+
+const MainState = function () {};
+MainState.prototype.create = function () {
+	//开启 ARCADE 物理场景
+	this.physics.startSystem(Phaser.Physics.ARCADE);
+
+	this._drawWall();
+	this._drawBall();
+	this._drawBoard();
+};
+MainState.prototype._drawWall = function () {
+	this.wall = this.add.group();
+	this.wall.enableBody = true;
+
+	for(let i = 1; i < 8; i++){
+		for(let j = 1; j < 8; j++){
+			let brick = this.wall.create(40 * i, 20 * j, 'brick1');
+			brick.body.immovable = true;
+			brick.scale.setTo(0.7);
+			brick.anchor.setTo(0.5);
+		}
+	}
+};
+MainState.prototype._drawBall = function () {
+	this.ball = this.add.graphics(this.world.centerX - 10, this.world.height - 70);
+	this.ball.beginFill(0xFFFFFF, 0);
+	this.ball.drawCircle(10, 10, 20);
+	this.ball.endFill();
+
+	this.ballbg = this.add.sprite(this.ball.position.x, this.ball.position.y, 'ball');
+	this.ballbg.anchor.setTo(0.5);
+	this.ballbg.scale.setTo(0.25);
+
+	this.physics.enable(this.ball, Phaser.Physics.ARCADE);
+
+	this.ball.body.collideWorldBounds = true;
+	this.ball.body.bounce.set(1);
+	this.ball.body.velocity.x = 150;
+	this.ball.body.velocity.y = -150;
+
+};
+MainState.prototype._drawBoard = function () {
+	this.board = this.add.sprite(this.world.centerX, this.world.height - 40, 'board');
+	this.board.anchor = {x: 0.5, y: 0.5};
+	this.board.scale.setTo(1, 0.8);
+
+	this.physics.enable(this.board, Phaser.Physics.ARCADE);
+	this.board.body.collideWorldBounds = true;
+	this.board.body.immovable = true;
+
+	this.board.inputEnabled = true;
+	this.board.input.enableDrag();
+	let _this = this;
+	this.board.events.onDragUpdate.add(function (e) {
+		_this.board.position.y = _this.world.height - 40;
+	});
+};
+MainState.prototype.update = function () {
+	let i = 0;
+	this.physics.arcade.collide(this.ball, this.wall, function (a, b) {
+		b.kill();
+	});
+	this.physics.arcade.collide(this.ball, this.board, function (a, b) {
+		a.body.velocity.x *= 1.01;
+		i++;
+		if(!(i % 2)){
+			a.body.velocity.x *= 1.1;
+			a.body.velocity.y *= 1.1;
+		}
+	});
+	if(this.ball.position.y > this.world.height - 30){
+		this.ball.kill();
+	}
+	this.ballbg.position.x = this.ball.position.x + 10;
+	this.ballbg.position.y = this.ball.position.y + 10;
+};
+
+export default MainState;
diff --git a/src/components/marbles/prestart-state.js b/src/components/marbles/prestart-state.js
@@ -0,0 +1,40 @@
+import router from '../../router';
+const PrestartState = function () {};
+PrestartState.prototype.create = function () {
+	this._drawLogo();
+	this._drawStartBtn();
+	this._drawBackBtn();
+	// this.state.start('MainState');
+};
+PrestartState.prototype._drawLogo = function () {
+	this.logo = this.add.image(this.world.centerX, this.world.centerY / 3 * 2, 'logo');
+	this.logo.anchor = {x: 0.5, y: 0.5};
+	this.logo.scale.setTo(2);
+};
+PrestartState.prototype._drawStartBtn = function(){
+	this.btnbg1 = this.add.image(this.world.centerX, this.world.centerY / 3 * 4, 'btnbg1');
+	this.btnbg1.anchor = {x: 0.5, y: 0.5};
+	this.btnbg1.scale.setTo(0.8, 0.6);
+	this.btntxt1 = this.add.text(this.world.centerX, this.world.centerY / 3 * 4 + 3, '开始游戏', {fill: '#fff', fontSize: '16px'});
+	this.btntxt1.anchor = {x: 0.5, y: 0.5};
+
+	this.btnbg1.inputEnabled = true;//开启输入事件
+	let _this = this;
+	this.btnbg1.events.onInputDown.add(function () {
+		_this.state.start('MainState');
+	})
+};
+PrestartState.prototype._drawBackBtn = function(){
+	this.btnbg2 = this.add.image(this.world.centerX, this.world.centerY / 2 * 3 + 20, 'btnbg1');
+	this.btnbg2.anchor = {x: 0.5, y: 0.5};
+	this.btnbg2.scale.setTo(0.8, 0.6);
+	this.btntxt2 = this.add.text(this.world.centerX, this.world.centerY / 2 * 3 + 23, '返回', {fill: '#fff', fontSize: '16px'});
+	this.btntxt2.anchor = {x: 0.5, y: 0.5};
+
+	this.btnbg2.inputEnabled = true;//开启输入事件
+	this.btnbg2.events.onInputDown.add(function () {
+		router.go(-1);
+	})
+};
+
+export default PrestartState;
diff --git a/src/components/snake/index.js b/src/components/snake/index.js
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+
+import 'bootstrap/dist/css/bootstrap.css';
+
+// import VueResource from 'vue-resource';
+// Vue.use(VueResource);
+
+Vue.config.productionTip = false;
+
+import store from './vuex/store';
+
+new Vue({
+	el: '#app',
+	router,
+	store,
+	template: '<App/>',
+	components: { App }
+});
diff --git a/src/router/index.js b/src/router/index.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+import Index from '@/components/Index';
+import Games from '@/components/Games';
+
+Vue.use(Router);
+
+export default new Router({
+    routes: [
+	    {
+	        path: '/',
+	        name: 'Index',
+	        component: Index
+	    },
+		{
+			path: '/:gameName',
+			name: 'Games',
+			component: Games
+		}
+    ]
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,3 +12,5 @@ yarn-error.log* @@
     *.ntvs*
     *.njsproj
     *.sln
+    static
+    static/