Skip to content

1
1024程序员开源挑战赛

黛琳ghz / 1024程序员开源挑战赛
该项目与 Fork 源项目分叉

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

通知 2
Star 1
Fork 1
1
1024程序员开源挑战赛
提交 b8245353 编写于 作者: 6 630d14904d78574832a7080b
浏览文件
操作

1

上级 1882a365
隐藏空白更改
内联 并排
Showing with 397 addition and 89 deletion
index.html
浏览文件 @ b8245353
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="UTF-8">
<title>2048</title> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style/main.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="../utils/main.css">
<link rel="shortcut icon" href="favicon.ico"> <script src="../utils/vue3.0.js"></script>
<link rel="apple-touch-icon" href="meta/apple-touch-icon.png"> <title>Document</title>
<link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
<link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone, retina -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
</head> </head>
<body> <body>
<div class="container"> <div id="app">
<div class="heading"> <div class="box1">
<h1 class="title">2048</h1> <div class="box2">
<div class="scores-container"> <input class="countview" :value="countView1+countView2+countView3">
<div class="score-container">0</div> <input class="result" disabled v-model="result">
<div class="best-container">0</div> </div>
</div> <div class="box3">
<button class="numbox" v-for="num in numData" :key="num.id" @click="choose_count(num.value)"
:disabled="num.disabled&&needDisabled">
{{num.value}}
</button>
<button class="coutnbox" v-for="count in countData" :key="count.id" @click="choose_count('=')">
{{count.value}}
</button>
</div>
</div>
</div> </div>
</body>
<script>
// var stack = []
const operateMap = {
'C': function () {
this.result = 0
this.countView1 = ""
this.countView2 = ""
this.countView3 = ""
this.needDisabled = false
<div class="above-game"> },
<p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p> 'CE': function () {
<a class="restart-button">New Game</a> this.result = 0
</div> this.countView1 = ""
this.countView2 = ""
this.countView3 = ""
this.needDisabled = false
<div class="game-container"> },
<div class="game-message"> 'Del': function () {
<p></p> // if (this.needClear) return;
<div class="lower"> if (this.result == '除数不能为零' || this.result == '结果未定义') {
<a class="keep-playing-button">Keep going</a> this.countView1 = ""
<a class="retry-button">Try again</a> this.countView2 = ""
</div> this.countView3 = ""
</div> this.result = 0
this.needDisabled = false
<div class="grid-container">
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
</div>
<div class="tile-container"> }
if (this.result !== 0) {
// var str = this.result + ""
if (this.countView1 == "" && this.countView2 == "" && this.countView3 == "") {
this.result += ''
this.result = this.result.substring(0, this.result.length - 1)
}
if (this.result === '') {
this.result = 0
}
this.countView1 = ""
this.countView2 = ""
this.countView3 = ""
}
</div>
</div>
<p class="game-explanation">
<strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong> },
</p> '+/-': function () {
<hr> if (this.result == 0 || isNaN(Number(this.result))) {
<p> return;
<strong class="important">Note:</strong> This site is the official version of 2048. You can play it on your phone via <a href="http://git.io/2048">http://git.io/2048.</a> All other apps or sites are derivatives or fakes, and should be used with caution. }
</p> this.result += ''
<hr> this.result = this.result.charAt(0) === '-' ? this.result.slice(1) : `-${this.result}`
<p> },
Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a> '0': function (numData) {
</p> if (this.result == '除数不能为零' || this.result == '结果未定义') {
</div> this.result = 0
this.countView1 = ''
<script src="js/bind_polyfill.js"></script> this.countView2 = ''
<script src="js/classlist_polyfill.js"></script> this.countView3 = ''
<script src="js/animframe_polyfill.js"></script> this.needClear = false
<script src="js/keyboard_input_manager.js"></script> this.needDisabled = false
<script src="js/html_actuator.js"></script> }
<script src="js/grid.js"></script> if (this.needClear && !isNaN(Number(numData))) {
<script src="js/tile.js"></script> this.result = 0
<script src="js/local_storage_manager.js"></script> this.needClear = false
<script src="js/game_manager.js"></script> }
<script src="js/application.js"></script> if (this.result === 0) {
</body> this.result = 0
</html>
} else {
this.result += numData
}
},
'.': function () {
this.result += ''
if (this.result.indexOf('.') != -1) {
return;
}
this.result = this.result + '.'
},
'1/x': function () {
if (this.result == 0) {
this.countView3 = parseInt(1) + '/' + '(' + this.result + ')'
this.result = '除数不能为零'
this.needDisabled = true
} else {
this.countView3 = parseInt(1) + '/' + '(' + parseFloat((this.result)) + ')'
this.result = `${parseInt(1) / parseFloat((this.result))}`
}
},
'%': function (numData) {
this.result = `${parseFloat(this.result) / 100}`
this.countView3 = this.result
if (this.result == '0') {
this.result = 0
}
console.log(typeof (this.result));
},
'x*x': function () {
this.countView3 = 'sqr(' + parseFloat(this.result) + ')'
this.result = `${parseFloat(this.result) * parseFloat(this.result)}`
},
'sqrt(x)': function () {
this.countView3 = 'sqrt(' + parseFloat(this.result) + ')'
this.result = `${Math.sqrt(parseFloat(this.result))}`
},
'=': function () {
// if(this.result.charAt(this.result.length - 1) == '.') {
// this.result=this.result.substring(0, this.result.length - 1)
// }
if (this.result == '除数不能为零' || this.result == '结果未定义') {
this.result = 0
this.countView1 = ''
this.countView2 = ''
this.countView3 = ''
this.needClear = false
this.needDisabled = false
} else {
this.result = Number(this.result)
this.countView3 = this.result + '='
// if (this.result=='0.'){
// this.countView3 ='0'+'='
// }
this.needClear = true
this.result = eval(this.countView1 + this.countView2 + this.result)
}
},
'defalut': function (numData) {
if (this.result == '除数不能为零' || this.result == '结果未定义') {
this.result = ''
this.countView1 = ''
this.countView2 = ''
this.countView3 = ''
this.needClear = false
this.needDisabled = false
}
if (this.result === 0 && !isNaN(Number(numData))) {
this.result = ''
}
if (this.needClear && !isNaN(Number(numData))) {
this.result = ''
this.needClear = false
}
this.result += numData
}
}
operateMap['+'] = operateMap['-'] = operateMap['*'] = operateMap['/'] = function (numData) {
this.result = Number(this.result)
this.countView3 = ''
if (this.needClear) {
this.countView2 = numData;
this.countView1 = this.result
return;
}
if (this.countView1 && this.countView2) {
this.result = eval(this.countView1 + this.countView2 + this.result)
console.log(this.countView1 + this.countView2 + this.result);
}
this.countView1 = this.result
if (!this.result) {
this.result = 0
}
this.countView2 = numData
this.needClear = true
// if (this.result == '除数不能为0') {
// const getNum = document.querySelector('numbox')
// // getNum.disabled=true
// console.log(getNum);
// // document.querySelector('numbox').disabled=true
// }
}
const vm = Vue.createApp({
data() {
return {
needDisabled: false,
numData: [{
id: '0',
value: "%",
disabled: true
},
{
id: '1',
value: "CE"
},
{
id: '2',
value: "C"
},
{
id: '3',
value: "Del"
},
{
id: '4',
value: "1/x",
disabled: true
},
{
id: '5',
value: "x*x",
disabled: true
},
{
id: '6',
value: "sqrt(x)",
disabled: true
},
{
id: '7',
value: "/",
disabled: true
},
{
id: '8',
value: "7"
},
{
id: '9',
value: "8"
},
{
id: '10',
value: "9"
},
{
id: '11',
value: "*",
disabled: true
},
{
id: '12',
value: "4"
},
{
id: '13',
value: "5"
},
{
id: '14',
value: "6"
},
{
id: '15',
value: "-",
disabled: true
},
{
id: '16',
value: "1"
},
{
id: '17',
value: "2"
},
{
id: '18',
value: "3"
},
{
id: '19',
value: "+",
disabled: true
},
{
id: '20',
value: "+/-",
disabled: true
},
{
id: '21',
value: "0"
},
{
id: '22',
value: ".",
disabled: true
}
],
countData: [{
id: '0',
value: "="
}],
result: 0,
countView1: '',
countView2: '',
countView3: '',
needClear: false
}
},
watch: {
result(newV, oldV) {
// console.log(newV);
// console.log(newV == Infinity);
if (newV == Infinity || newV == -Infinity) {
this.result = '除数不能为零'
this.needDisabled = true
} else if (newV !== newV) {
this.result = '结果未定义'
this.needDisabled = true
}
}
},
mounted() {
const getNum = document.querySelector('numbox')
const countView = document.querySelector('countview')
},
methods: {
// //该方法返回当前是否输入的是运算符（加减乘除），是则返回真，反之
// operator(numData) {
// //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。
// return ['+', '-', '*', '/', '.', '%', '1/x', 'x*x', 'sqrt(x)', '+/-'].indexOf(numData) > -1;
// },
choose_count: function (numData) {
let operation = operateMap[numData] || operateMap.defalut
operation.call(this, numData)
// if (numData == 'C') {
// this.result = ""
// this.countView = ""
// } else if (numData == 'CE') {
// this.result = 0
// this.countView = ""
// } else if (numData == 'Del') {
// var str = this.result + ""
// this.result = str.substring(0, str.length - 1)
// }
// // else if (this.result == 0) {
// // this.result = numData
// // }
// else if (numData == '+/-') {
// this.result = this.result.charAt(0) === '-' ? this.result.slice(1) : `-${this.result}`
// } else if (numData == '%') {
// this.result = `${parseFloat(this.result) / 100}`
// } else if (numData == '1/x') {
// if (this.result == 0) {
// this.countView = parseInt(1) + '/' + '(' + parseFloat((this.result)) + ')'
// this.result = '除数不能为0'
// } else {
// this.countView = parseInt(1) + '/' + '(' + parseFloat((this.result)) + ')'
// this.result = `${parseInt(1) / parseFloat((this.result))}`
// }
// } else if (numData == 'x*x') {
// this.countView = 'sqr(' + parseFloat(this.result) + ')'
// this.result = `${parseFloat(this.result) * parseFloat(this.result)}`
// } else if (numData == 'sqrt(x)') {
// this.countView = 'sqrt(' + parseFloat(this.result) + ')'
// this.result = Math.sqrt(parseFloat(this.result))
// } else {
// this.result += numData
// }
// },
// countnum: function () {
// this.countView = this.result
// this.result = eval(this.result)
}
},
}).mount("#app");
</script>
</html>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或