【四二学堂】基于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].pageYif(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].pageXvar y=event.touches[0].pageYthis.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=0for(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=1if(a==1){this.title="红方获胜，点击我再来一局"alert("红方获胜")}else{this.title="蓝方获胜，点击我再来一局"alert("蓝方获胜")}}},d(event){var x=event.touches[0].pageXvar y=event.touches[0].pageYif(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）

【四二学堂】基于uni-app开发的跨平台井字游戏（App+H5 web+微信小程序）相关推荐

开发嵌入京东app h5| Hybrid | 微信小程序｜实践踩坑总结十六条
一前言笔者最近一直在开发京东app嵌入的h5项目和微信小程序商城项目,在此期间遇到很多坑.这篇文章主要是针对 h5| Hybrid | 微信小程序三个方向来讲述我遇到的坑,以及详细讲解我是如何解 ...
基于小程序云开发的智慧物业、智慧小区微信小程序，在线报修报检，重大事项投票，报名参加小区活动，小区公告通知，业委会公示、租售房屋
功能介绍完整代码下载地址:基于小程序云开发的智慧物业.智慧小区微信小程序当前小区的物业事务越来越多.越来越杂,而很多业主工作繁重,加班很晚,以往对于重大事项投票,报修报检,装修申请,搬家申请,投诉 ...
《移动软件开发》实验一：第一个微信小程序
2022年夏季<移动软件开发>实验一:第一个微信小程序一.实验目标 1.学习使用快速启动模板创建小程序的方法:2.学习不使用模板手动创建小程序的方法. 二.实验步骤 1.自动生成小程序 ...
Web微信小程序开发（一）
微信作为一种通讯工具的使用可以说是越来越频繁了,随之兴起的也有很多,比如服务号,小程序,但是似乎小程序更能符合大众的心意,在面临着越来越多的APP的普及,大家更多的是希望手机上的APP能越来越少所以 ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
[Web] [微信小程序-云开发] 商城无服务器加后台管理
[Web] [微信小程序-云开发] 商城无服务器加后台管理说明: 目前云开发仅针对认证后的公众号使用(每年300的费用那个) wxapp-mall-clouddb 前言如何使用更多说明功能 ...
uniapp的打包：h5、微信小程序以及APP方式
uniapp的打包:h5.微信小程序以及APP方式 H5打包微信小程序打包 App打包本人用的是HBuilder编译器,学习uniapp时b站某位大大推荐的,我刚开始接触代码时候也用过,那时候并不 ...
app能不能跳转外部h5_轻羽微信小程序和H5的区别在哪里？主要有三点
随着移动互联网的发展,许多应用在不断的产生,要说现在更新快.开放功能多的应用,只能是微信小程序了.微信小程序开放了60多个流量入口,更新了各种新的功能,尤其是之前实现的页面跳转功能,给开发者带来了好消 ...
uni-app跨端开发H5、微信小程序、支付宝小程序遇到的坑
文章目录微信支付宝小程序通用功能 1.checkbox样式 2.分享功能支付宝小程序参数微信小程序参数其他兼容问题 H5 微信小程序支付宝小程序持续更新中... 微信支付宝小程序通用功能 ...
《移动软件开发》实验1：第一个微信小程序实验报告
2022年夏季<移动软件开发>实验报告本实验报告所参考实验文档为:Docs (feishu.cn) 如想获得详细的制作过程,请点击上面链接.该博客仅为个人使用实验报告姓名和学号? / ...

【四二学堂】基于uni-app开发的跨平台井字游戏（App+H5 web+微信小程序）

【四二学堂】基于uni-app开发的跨平台井字游戏（App+H5 web+微信小程序）相关推荐

最新文章

热门文章