Skip to content

1
1024程序员开源挑战赛

蚕豆的生活 / 1024程序员开源挑战赛
与 Fork 源项目一致

Fork自 GitCode / 1024程序员开源挑战赛（10.23-11.14）

通知 2
Star 2
Fork 0
1
1024程序员开源挑战赛

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 46bff9d3 编写于 作者: 7 734310024@qq.com
浏览文件
操作

Initial commit

上级
展开全部 隐藏空白更改
内联 并排
Showing with 687 addition and 0 deletion
.editorconfig 0 → 100644
浏览文件 @ 46bff9d3
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
\ No newline at end of file
.gitignore 0 → 100644
浏览文件 @ 46bff9d3
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
README.md 0 → 100644
浏览文件 @ 46bff9d3
# poke-memories
# play game with: https://giabaone.netlify.app/
## MainScreen:
<img width="500" src="./src/assets/images/rs/MainScreen.png">
## InteractScreen:
<img width="500" src="./src/assets/images/rs/InteractScreen.png">
## ResultScreen:
<img width="500" src="./src/assets/images/rs/ResultScreen.png">
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Lints and fixes files
```
yarn lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
# poke-memories
babel.config.js 0 → 100644
浏览文件 @ 46bff9d3
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
package.json 0 → 100644
浏览文件 @ 46bff9d3
{
"name": "poke-memories",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
public/index.html 0 → 100644
浏览文件 @ 46bff9d3
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link
href="https://fonts.googleapis.com/css2?family=Odibee+Sans&display=swap"
rel="stylesheet"
/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/App.vue 0 → 100644
浏览文件 @ 46bff9d3
<template>
<main-screen
v-if="statusMatch === 'default'"
@onStart="onHandleBeforeStart($event)"
/>
<interact-screen
v-if="statusMatch === 'match'"
:cardsContext="settings.cardsContext"
@onFinish="onGetResult"
/>
<result-screen
v-if="statusMatch === 'result'"
:timer="timer"
@onStartAgain="statusMatch = 'default'"
/>
<p class="copyright">
This game by Giabao2807 -
<a
href="https://www.facebook.com/giabaobao2807/" target="_blank"
>contact me</a
>
</p>
</template>
<script>
import MainScreen from "./components/MainScreen.vue";
import InteractScreen from "./components/InteractScreen.vue";
import ResultScreen from "./components/ResultScreen.vue";
import { shuffled } from "./utils/array";
export default {
name: "App",
components: {
MainScreen,
InteractScreen,
ResultScreen,
},
data() {
return {
settings: {
totalOfBlocks: 0,
cardsContext: [],
startedAt: null,
},
timer: 0,
statusMatch: "default",
};
},
methods: {
onHandleBeforeStart(configs) {
this.settings.totalOfBlocks = configs.totalOfBlocks;
const firstCards = Array.from(
{ length: this.settings.totalOfBlocks / 2 },
(_, i) => i + 1
);
const secondCards = [...firstCards];
const cards = [...firstCards, ...secondCards];
this.settings.cardsContext = shuffled(shuffled(shuffled(cards)));
this.settings.startedAt = new Date().getTime();
this.statusMatch = "match";
},
onGetResult() {
this.statusMatch = "result";
this.timer = new Date().getTime() - this.settings.startedAt;
},
},
};
</script>
<style lang="css" scoped>
.copyright {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 1.5rem;
color: var(--light);
z-index: 3;
font-size: 1.5rem;
}
.copyright a {
color: #f4dc26;
}
</style>
src/assets/styles/global.css 0 → 100644
浏览文件 @ 46bff9d3
:root {
--primary: #134363;
--sencondary: #8b1b3d;
--dark: #7e405f;
--light: #ee9d9d;
--font: "Odibee Sans", cursive;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: var(--font);
font-size: 16px;
width: 100%;
}
src/components/Card.vue 0 → 100644
浏览文件 @ 46bff9d3
<template>
<div
class="card"
:class="{ disabled: isDisabled }"
:style="{
height: `${(920 - 16 * 4) / Math.sqrt(cardsContext.length) - 16}px`,
width: `${
(((920 - 16 * 4) / Math.sqrt(cardsContext.length) - 16) * 3) / 4
}px`,
perspective: `${
((((920 - 16 * 4) / Math.sqrt(cardsContext.length) - 16) * 3) / 4) * 2
}px`,
}"
>
<div
class="card__inner"
:class="{ 'is-flipped': isFlipped }"
@click="onToggleFlipCard"
>
<div class="card__face card__face--front">
<div
class="card__content"
:style="{
'background-size': `${
(((920 - 16 * 4) / Math.sqrt(cardsContext.length) - 16) * 3) /
4 /
3
}px ${
(((920 - 16 * 4) / Math.sqrt(cardsContext.length) - 16) * 3) /
4 /
3
}px`,
}"
></div>
</div>
<div class="card__face card__face--back">
<div
class="card__content"
:style="{
backgroundImage: `url('${require('@/assets/' + imgBackFaceUrl)}')`,
}"
></div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
card: {
type: [Array, String, Number, Object],
},
cardsContext: {
type: Array,
default: function () {
return [];
},
},
imgBackFaceUrl: {
type: String,
required: true,
},
rules: {
type: Array,
},
},
data() {
return {
isFlipped: false,
isDisabled: false,
};
},
methods: {
onToggleFlipCard() {
if (this.rules.length >= 2) return;
if (this.isDisabled) return;
this.isFlipped = !this.isFlipped;
if (this.isFlipped) this.$emit("onFlip", this.card);
},
onFlipBackCard() {
this.isFlipped = false;
},
onEnabledDisabledMode() {
this.isDisabled = true;
},
},
};
</script>
<style lang="css" scoped>
.card {
display: inline-block;
margin-right: 1rem;
margin-bottom: 1rem;
}
.card__inner {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card.disabled .card__inner {
cursor: default;
}
.card__inner.is-flipped {
transform: rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
overflow: hidden;
border-radius: 1rem;
padding: 1rem;
box-shadow: 0 3px 18px 3px rgba(0, 0, 0, 0.2);
}
.card__face--front .card__content {
background: url("../assets/images/icon_back.png") no-repeat center center;
height: 100%;
width: 100%;
}
.card__face--back {
background-color: var(--light);
transform: rotateY(-180deg);
}
.card__face--back .card__content {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
height: 100%;
width: 100%;
}
</style>
src/components/InteractScreen.vue 0 → 100644
浏览文件 @ 46bff9d3
<template>
<div class="screen">
<div
class="screen__inner"
:style="{
width: `${
((((920 - 16 * 4) / Math.sqrt(cardsContext.length) - 16) * 3) / 4 +
16) *
Math.sqrt(cardsContext.length)
}px`,
}"
>
<card-memmory
v-for="(card, index) in cardsContext"
:key="index"
:ref="`card-${index}`"
:cardsContext="cardsContext"
:imgBackFaceUrl="`images/${card}.png`"
:card="{ index, value: card }"
:rules="rules"
@onFlip="checkRule($event)"
/>
</div>
</div>
</template>
<script>
import Card from "./Card.vue";
export default {
props: {
cardsContext: {
type: Array,
default: function () {
return [];
},
},
},
components: {
CardMemmory: Card,
},
data() {
return {
rules: [],
};
},
methods: {
checkRule(card) {
if (this.rules.length === 2) return false;
this.rules.push(card);
if (
this.rules.length === 2 &&
this.rules[0].value === this.rules[1].value
) {
console.log("Right...");
this.$refs[`card-${this.rules[0].index}`].onEnabledDisabledMode();
this.$refs[`card-${this.rules[1].index}`].onEnabledDisabledMode();
this.rules = [];
const disabledElements = document.querySelectorAll(
".screen .card.disabled"
);
if (
disabledElements &&
disabledElements.length === this.cardsContext.length - 2
)
setTimeout(() => {
this.$emit("onFinish");
}, 920);
} else if (
this.rules.length === 2 &&
this.rules[0].value !== this.rules[1].value
) {
console.log("wrong!");
setTimeout(() => {
this.$refs[`card-${this.rules[0].index}`].onFlipBackCard();
this.$refs[`card-${this.rules[1].index}`].onFlipBackCard();
this.rules = [];
}, 800);
} else return false;
},
},
};
</script>
<style scoped>
.screen {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background-color: var(--dark);
color: var(--light);
}
.screen__inner {
width: calc(424px);
display: flex;
flex-wrap: wrap;
margin: 2rem auto;
}
</style>
src/components/MainScreen.vue 0 → 100644
浏览文件 @ 46bff9d3
<template>
<div class="screen">
<h1>Poke Memories</h1>
<p>Select mode to start game</p>
<div class="modes">
<button @click="onStart(16)">
<span>4x4</span>
<span>Easy</span>
</button>
<button @click="onStart(36)">
<span>6x6</span>
<span>Normal</span>
</button>
<button @click="onStart(64)">
<span>8x8</span>
<span>Hard</span>
</button>
<button @click="onStart(100)">
<span>10x10</span>
<span>Super Hard</span>
</button>
</div>
</div>
</template>
<script>
export default {
emits: ["onStart"],
methods: {
onStart(totalOfBlocks) {
this.$emit("onStart", { totalOfBlocks });
},
},
};
</script>
<style lang="css" scoped>
.screen {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: var(--dark);
color: var(--light);
}
.screen h1 {
font-size: 4.5rem;
text-transform: uppercase;
}
.screen p {
font-size: 2rem;
}
.modes {
display: flex;
margin-top: 2rem;
}
.modes button {
font: var(--font);
width: 150px;
height: 150px;
background: transparent;
box-shadow: none;
border: 1px solid var(--light);
color: var(--light);
display: flex;
flex-direction: column;
border-radius: 1rem;
margin: 0 1rem;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
.modes button:hover {
background-color: var(--light);
color: var(--dark);
}
.modes button span:first-child {
font-size: 2rem;
}
.modes button span:last-child {
display: block;
font-size: 1.25rem;
margin-top: 0.5rem;
}
</style>
src/components/ResultScreen.vue 0 → 100644
浏览文件 @ 46bff9d3
<template>
<div class="screen">
<h1>✨ Congratulations ✨</h1>
<h2>🍓🍓🍓🍓🍓🍓🍓🍓🍓🍓🍓🍓</h2>
<h3>{{ Math.round(timer / 920) }} seconds</h3>
<button @click="onStartAgain">Start Again</button>
<br>
<br>
<div align="center">
<h5 >Connect with me</h5>
<p>
<a href = "https://www.facebook.com/giabaobao2807/"><img src="https://img.icons8.com/color/48/000000/facebook.png"/></a>
<a href = "https://twitter.com/giabao2807"><img src="https://img.icons8.com/fluent/48/000000/twitter.png"/></a>
<a href = "https://www.instagram.com/giabao.izhere/"><img src="https://img.icons8.com/fluent/48/000000/instagram-new.png"/></a>
<a href= "mailto:dinhgiabao2807@gmail.com"><img src="https://img.icons8.com/fluency/48/000000/gmail-new.png"/></a>
<a href = "https://www.youtube.com/channel/UCBImcNeAi4soXFwQnACdkXA"><img src="https://img.icons8.com/color/48/000000/youtube-play.png"/></a>
</p>
</div>
</div>
</template>
<script>
export default {
props: {
timer: {
type: Number,
default: 0,
},
},
emits: ["onStartAgain"],
methods: {
onStartAgain() {
this.$emit("onStartAgain");
},
},
};
</script>
<style scoped>
.screen {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background-color: var(--dark);
color: var(--light);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.screen h1 {
font-size: 5rem;
}
.screen h3 {
margin-top: 1.5rem;
font-size: 3rem;
}
.screen button {
font: var(--font);
background: transparent;
box-shadow: none;
border: 1px solid var(--light);
color: var(--light);
margin: 1rem;
padding: 1rem 1.25rem;
border-radius: 0.5rem;
font-size: 1.25rem;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
.screen button:hover {
background-color: var(--light);
color: var(--dark);
}
</style>
src/main.js 0 → 100644
浏览文件 @ 46bff9d3
import { createApp } from 'vue'
import App from './App.vue'
import "./assets/styles/global.css";
createApp(App).mount('#app')
src/utils/array.js 0 → 100644
浏览文件 @ 46bff9d3
export const shuffled=(list)=>list.sort(()=>Math.random()-0.5);
yarn.lock 0 → 100644
浏览文件 @ 46bff9d3
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或