vue 实现一个简单的石头剪刀布小游戏

2023-11-22 11:31:10

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>es2015</title>
</head>
<body>
<div id="counter">
<button v-for="(item,index) in buttonList" @click="choose1(index)">{{item}}</button>
<br/>
<button @click="begin(this)">确定</button>

<div v-for="item in resultList" :key="item.id">
<p v-if="item.id">{{item.value}}</p>
</div>
</div>
</body>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>

let array = [‘剪刀‘,‘石头‘,‘布‘]
let array_so = {0:1,1:2,2:0}

// 获取1-10随机数
let random = () => {
return Math.floor( Math.random() * 10 )
}

let Ai = () => {
let random1 = random()
if(random1 <= 3)
{
return 0
}
if(random1 > 3 && random1 < 7)
{
return 1
}
if(random1 >= 7)
{
return 2
}
}

const Counter = {
data(){
return {
counter:0, //总次数
choose:0, //用户选择
random:0,//Ai选择
aiCount:0, //Ai次数
userCount:0, // 用户次数
resultList:[], // 结果集
buttonList:array
}
},
methods:{
begin(event){
let that = this
that.random = Ai()
that.counter += 1
if(that.choose === that.random)
{
data = {‘id‘:that.counter,‘value‘:`AI【${that.buttonList[that.random]}】user【${that.buttonList[that.choose]}】平局`}
}else if(that.choose == array_so[that.random])
{
data = {‘id‘:that.counter,‘value‘:`AI【${that.buttonList[that.random]}】user【${that.buttonList[that.choose]}】您赢了`}
}else{
data = {‘id‘:that.counter,‘value‘:`AI【${that.buttonList[that.random]}】user【${that.buttonList[that.choose]}】Ai赢了`}
}
that.resultList.push(data)
console.log(that.resultList)
},
choose1:function(e)
{
this.choose = e
}
}
}
Vue.createApp(Counter).mount("#counter")
</script>
<style>
button{
margin-left: 20px;
margin-top: 20px;
}
</style>

vue 实现一个简单的石头剪刀布小游戏

码农公寓

相关文章