【四⼆学堂】基于uni-app开发的跨平台井字游戏（App+H5web+⼩程序）
开发环境:
Hbuilder X+Chrome+⼩程序
APP+⼩程序+H5 web 显⽰效果见下图：
主要代码：
<template>
<view @tap="d">
<span>{{title}}</span>
<canvas id="id1" canvas-id="firstCanvas" @tap="a"></canvas>
</view>
</template>
<script>
export default{
data(){
return{
title:'欢迎来到四⼆学堂',
context:"",
colorx:"#DC143C",
position:[
[0,0,0],
[0,0,0],
[0,0,0]
],
x1:"0",
y1:"0",
isclose:"0"
}
},
methods:{
onReady(){
},
a(event){
// var uches[0].pageX
// var uches[0].pageY
if(this.isclose=="1"){
this.title="游戏已结束，点我再来⼀局"
return
}
this.b(event)
// var x=this.x1*80+61
// var y=this.y1*80+210
// console.log(x+":"+y)
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
if(this.position[i][j]!=0){
}
else{
}
}
}
}
/
/ t.beginPath()
// t.arc(x-30+40,y-100+40,40,0,2*Math.PI,false)
// t.lorx)
// t.fill()
写文章的小程序this.c()
},
b:function(event){
var uches[0].pageX
var uches[0].pageY
this.x1=parseInt((x-61)/80)
this.y1=parseInt((y-210)/80)
if(this.position[this.x1][this.y1]==0){
lorx=="#DC143C"){
this.position[this.x1][this.y1]=1
}else{
this.position[this.x1][this.y1]=2
}
lorx=="#DC143C"){
}else{
}
}
},
c(){
//竖⼀
if(this.position[0][0]==this.position[0][1]&&this.position[0][1]==this.position[0][2]){ this.e(this.position[0][0])
}
//竖⼆
if(this.position[1][0]==this.position[1][1]&&this.position[1][1]==this.position[1][2]){ this.e(this.position[1][0])
}
//竖三
if(this.position[2][0]==this.position[2][1]&&this.position[2][1]==this.position[2][2]){ this.e(this.position[2][0])
}
//横⼀
if(this.position[0][0]==this.position[1][0]&&this.position[1][0]==this.position[2][0]){ this.e(this.position[0][0])
}
//横⼆
if(this.position[0][1]==this.position[1][1]&&this.position[1][1]==this.position[2][1]){ this.e(this.position[0][1])
}
/
/横三
if(this.position[0][2]==this.position[1][2]&&this.position[1][2]==this.position[2][2]){ this.e(this.position[0][2])
}
//斜⼀
if(this.position[0][0]==this.position[1][1]&&this.position[1][1]==this.position[2][2]){ this.e(this.position[0][0])
}
//斜⼆
if(this.position[2][0]==this.position[1][1]&&this.position[1][1]==this.position[0][2]){ this.e(this.position[2][0])
}
var sum=0
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
if(this.position[i][j]!=0){
sum+=1
}
}
}
if(sum==9&&this.isclose==0){
this.title="和棋，点击我再来⼀局"
}
},
e(a){
if(a!=0){
this.isclose=1
if(a==1){
this.title="红⽅获胜，点击我再来⼀局"
alert("红⽅获胜")
}else{
this.title="蓝⽅获胜，点击我再来⼀局"
alert("蓝⽅获胜")
}
}
},
d(event){
var uches[0].pageX
var uches[0].pageY
if(x>=0&&x<=210&&y>=0&&y<=20){
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
this.position[i][j]=0
}
}
this.isclose="0"
this.title="欢迎来到四⼆游戏中⼼"
}
}
}
}
</script>
<style>
#id1{
background-image:url(../../static/image/bj.png);  width:300px;
height:450px;
margin:30px;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。