VUE+WebPack实现精美前端游戏:CardBattle的游戏场景设置
C:\Users\ZHONGZHENHUA\cardBattle\src\App.vue
src/App.vue
<template>
<div id="app">
<!--
<img src="./assets/logo.png">
-->
<game-container></game-container>
<!--
<router-view/>
-->
</div>
</template> <script>
import GameContainer from './components/gamecontainer'
export default {
components: {
GameContainer
},
name: 'App'
}
</script> <style>
/**
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
**/
</style>
C:\Users\ZHONGZHENHUA\cardBattle\src\components\gamecontainer.vue
src/components/gamecontainer.vue
<template>
<div>
<header>
<div class="row">
<h1>Card Battle!</h1>
<section id="game" class="row">
<start-scene></start-scene>
</section>
</div>
</header>
<section class="how-to-play">
<h2>玩法介绍</h2>
<p>选择任意一张牌,然后观看点数的pk结果</p>
</section>
<footer>
<p>给我打个赏把!</p>
<img id="payme" src="../../static/payme.jpg">
</footer>
</div>
</template> <script>
import StartScene from './startscenecomponent'
export default {
components: {
StartScene
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#game {
wdith: 480px;
height:600px;
border-radius: 8px;
overflow: hidden;
} .scene {
width: %;
height: %;
position: absolute;
overflow: hidden;
border-radius: 8px;
transition: all.3s ease-out; } #payme {
width:240px;
height: 256px;
}
</style>
C:\Users\ZHONGZHENHUA\cardBattle\src\components\HelloWorld.vue
src/components/HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: ;
}
li {
display: inline-block;
margin: 10px;
}
a {
color: #42b983;
}
</style>
C:\Users\ZHONGZHENHUA\cardBattle\src\components\startscenecomponent.vue
src/components/startscenecomponent.vue
<template>
<div id="start-scene" class="scene">
<a href="#" id="start-btn" class="button"></a>
</div> </template> <script>
export default {
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#start-scene {
background: url(../../static/images/start-scene-bg.png) no-repeat;} .button{
position:absolute;
width: %;
height: %;
top:;
left:;
}
</style>
C:\Users\ZHONGZHENHUA\cardBattle\index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>CardBattle</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
VUE+WebPack实现精美前端游戏:CardBattle的游戏场景设置的更多相关文章
- VUE+WebPack实现精美Html5游戏设计:纸牌战争
- vue+webpack实践
最近使用了vue来做SPA应用,记一波学习笔记. 使用vue+webpack实现前端模块化. vuejs——轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 推荐官方文档 vue.js官方文 ...
- windows环境下搭建vue+webpack的开发环境
前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...
- Vue + Webpack + Vue-loader 1
Vue + Webpack + Vue-loader 原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue ...
- 从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的
如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起 ...
- Vue + webpack 项目实践
Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...
- nodejs, vue, webpack 项目实践
vue 及 webpack,均不需要与nodejs一期使用,他们都可以单独使用到任何语言的框架中. http://jiongks.name/blog/just-vue/ https://cn.vuej ...
- Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...
- vue+webpack开发(一)
一开始接触这个vue+webpack的时候,实在是摸不着头脑,根本无从下手. 但是经过这两天的研究,其实你会发现vue其实并不难,难度都在webpack你对webpack的理解. webpack顾名思 ...
随机推荐
- 搭建Spring Cloud+Dubbo
公司要测试一下zipkin是否可以跟踪全流程,项目的架构比较复杂,不要问我为什么,基本架构如下:前端门户,调用spring cloud组件,spring cloud在调用dubbo,这样一套流程.于是 ...
- SharePoint自动登录问题
SharePoint使用Windows身份验证,默认会弹出Windows验证登录框,如下图所示: 1.对于已经加域的客户端,可通过如下方式解决 IE安全设置,将站点加信任站点,然后修改信任站点安全设置 ...
- 【备忘】windows环境下20行php代码搞定音频裁剪
先上图,由于最近的需求需要对语音文件进行处理,所以抽空研究了下php处理音/视频文件的处理,简单的demo处理,截取一个音频文件的前20秒,并保存新的媒体文件. 操作步骤: ①在此站点下载所需的辅助程 ...
- jeecg中List页面标签的用法
1.t:datagrid的常用属性 1. <t:datagrid name="jeecgDemoList" checkbox="true" sortNam ...
- 一个for循环写出9*9乘法表
public class ClassTest03 { public static void main(String[] args) { for(int i=1,j=1;j<=9;j++){ if ...
- PAT甲级 1002 A+B for Polynomials (25)(25 分)
1002 A+B for Polynomials (25)(25 分) This time, you are supposed to find A+B where A and B are two po ...
- 杂项-数学软件:Maple
ylbtech-杂项-数学软件:Maple Maple是目前世界上最为通用的数学和工程计算软件之一,在数学和科学领域享有盛誉,有“数学家的软件”之称.Maple 在全球拥有数百万用户,被广泛地应用于科 ...
- DataTable 树形构造加全部
DataTable dtGx = new DataTable(); dtGx = SqlHelper.SqlGetDataTable(StrSql, "tbUserGx"); th ...
- Linux系统性能检测
转自:http://www.cnblogs.com/itech/archive/2011/06/08/2075145.html 一 .uptime uptime命令用于查看服务器运行了多长时间以及有多 ...
- 十八 线程暂停 suspend/ resume
1 Suspend.resume 的缺点1 :独占! 线程执行到同步块中,如果线程暂停了,不会释放锁. 比如,比如System.out.println()方法就是一个同步方法, 如果线程调用Sys ...