【四二學堂】基於uni-app開發的跨平臺井字遊戲（App+H5 web+微信小程序）

開發環境:
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(){
			   this.context=uni.createCanvasContext('firstCanvas')
			   this.context.setFillStyle(this.colorx)
		   },
		   
		   a(event){
			   // var x=event.touches[0].pageX
			   // var y=event.touches[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){
						   this.context.beginPath()
						   this.context.arc(i*80+61-30+40,j*80+210-100+40,40,0,2*Math.PI,false)
						   if(this.position[i][j]==1){
						   	   this.context.setFillStyle("#DC143C")
						   }
						   else{
						   	   this.context.setFillStyle("#4B0082")
						   }					   
						   this.context.fill()
					   }					   
				   }
			   }
			   
			   // this.context.beginPath()
			   // this.context.arc(x-30+40,y-100+40,40,0,2*Math.PI,false)
			   // this.context.setFillStyle(this.colorx)
			   // this.context.fill()
			   this.context.draw()
			   
			   this.c()
			   								  
			},
		   b:function(event){
			   var x=event.touches[0].pageX
			   var y=event.touches[0].pageY
			   
			   this.x1=parseInt((x-61)/80)
			   this.y1=parseInt((y-210)/80)
			   
			   if(this.position[this.x1][this.y1]==0){
				   if(this.colorx=="#DC143C"){
					   this.position[this.x1][this.y1]=1
				   }else{
					   this.position[this.x1][this.y1]=2
				   }
				   
				   if(this.colorx=="#DC143C"){
					   this.colorx="#4B0082"
				   }else{
					   this.colorx="#DC143C"
				   }
			   }
		   },
		   
		   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 x=event.touches[0].pageX
			var y=event.touches[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="歡迎來到四二遊戲中心"
				
				this.context.beginPath()
				this.context.draw()
			}
		  }
		}
		
	}
</script>

<style>
	#id1{
		background-image: url(../../static/image/bj.png);
		width: 300px;
		height: 450px;
		margin: 30px;
	}
</style>

視頻教程地址：
https://edu.csdn.net/
搜索----雷玉廣：

（https://edu.csdn.net/lecturer/lecturer_detail?lecturer_id=4897）