微信小程序实现弹球游戏

2024-10-20 14:52:38

本文实例为大家分享了微信小程序实现弹球游戏的具体代码，供大家参考，具体内容如下

实验内容：

小球按照随机的角度直线运动，如果碰到四壁则反弹。你们不需要做游戏计时、设置小球及背景颜色等，只完成小球在方框内反弹运动的功能。这里主要考查绘图知识，数学计算能力，以及对定时器的应用。

实验效果（最简单版本）：

实验代码：

index.js

// index.js
Page({
    data:{
      cx:200,
      cy:50,
      destinaX:3,
      destinaY:2
    },
    //初次渲染触发
    onReady:function(){
      var c=wx.createCanvasContext("canvasTest");
      // var c=wx.createSelectorQuery('canvasTest')
      var that=this;
      var timer=setInterval(canvasSize,20);
      function canvasSize(){
        //画布数据
        const width=300;
        const height=300;
        const speed=2;
        const r=7;
        //下面是相对左上角基点距离 和画布大小
        c.rect(0,0,width,height);
        c.stroke();
        //球会根据实时位置发生变化
        c.beginPath();
        var ox1=that.datacox;
        var oy1=that.datacoy;
          ox1=that.data.destinaX*speed+that.data.cx;
          oy1=that.data.cy-that.data.destinaY*speed;
          if(ox1>=width||ox1<=0){
            var bounceX=-that.data.destinaX;
            that.setData({destinaX:bounceX});
            ox1=that.data.destinaX*speed+that.data.cx;
          }
          if(oy1>=height||oy1<=0){
            var bounceY=-that.data.destinaY;
            that.setData({destinaY:bounceY});
            oy1=that.data.cy-that.data.destinaY*speed;
          }
 
     console.log(that.data.ox1,that.data.oy1);
        that.setData({cx:ox1,cy:oy1});
        c.arc(that.data.cx,that.data.cy,r,0,2*Math.PI);
        c.fill();
        c.stroke();
        c.draw();
      }
    }
  })

index.wxml

<!--index.wxml-->
<view class="canvasStyle">
<canvas canvas-id="canvasTest" style="width: 300px;height: 300px;"></canvas> 
</view>

index.wxss

/**index.wxss**/
.canvasStyle{
  display: flex;
  justify-content: center;
  margin: 10px;
  margin-top: 70px;
  background-color: aqua;
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序实现蒙版弹窗效果

本文实例为大家分享了微信小程序实现蒙版弹窗效果的具体代码,供大家参考,具体内容如下 <view class="modalDlg" wx:if="{{showModal}}"> <view class='close_mask' bindtap="close_mask">X</view> <input class='recharge_amount' type='text' placeholder='充值金额'
微信小程序实战之自定义模态弹窗（8）

首先看看官方提供的模态弹窗,供大家参考,具体内容如下 api如下: 示例: 这样的模态弹窗,充其量只能做个alert,提示一下信息. 但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从新自定义了一个,采用了仿原生的样式写法 wxml:  <view class="btn" bindtap="powerDrawer" data-statu="open">button</view&
微信小程序自定义modal弹窗组件的方法详解

微信小程序开发中官方自带的wx.showModal,这个弹窗API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用,组件可自定义底部是一个还是两个按钮.效果如下. 首先我们可以在跟目录下创建一个components文件夹存放所有的组件.新建一个modal文件夹,下面新建modal.js.modal.json.modal.wxml.modal.wxss四个文件. modal.wxml布局文件: <view class
微信小程序实现漂亮的弹窗效果

最近项目里需要实现一个带着logo的美美哒弹窗,可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西-- 场面一度十分尴尬可是得做啊,要不然产品大姐又要暴走了-- 好吧,来研究一下模态对话框的性质自己DIY吧~ 实现思路模态对话框之所以被叫做"模态",就是因为在它弹出的时候,用户如果不关闭这个对话框,是无法对其他窗口进行操作的. 那么这样一来,我们的思路就很明确了: 1. 构建一个蒙层(mask),使得背景变暗,并且阻止用户对对话框外界面的这里写代码片点击事件: 2
微信小程序弹窗自定义实例代码

微信小程序弹窗首先wxml代码: <view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view> <view bindtap="clickArea">点击此处</view> 注:hidden属性用于切换比较频繁的地方. wxss代码设置弹窗样式: .myToast{ width:240rpx; height:130rpx; line-heig
微信小程序自定义toast弹窗效果的实现代码

微信小程序里面的自带弹窗icon只有两种,success和loading.有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的:但是如果图标是字体,或者提醒的内容有很长捏(小程序中提醒的内容最多只能设置7个字,多了会被隐藏),那就只有自定义toast弹窗了: 第一步:新建一个wxml文件用来装模板,方便以后使用,比如然后在这里面添加模板代码 <template name="toast"> //nam
微信小程序实现弹球游戏

本文实例为大家分享了微信小程序实现弹球游戏的具体代码,供大家参考,具体内容如下实验内容: 小球按照随机的角度直线运动,如果碰到四壁则反弹.你们不需要做游戏计时.设置小球及背景颜色等,只完成小球在方框内反弹运动的功能.这里主要考查绘图知识,数学计算能力,以及对定时器的应用. 实验效果(最简单版本): 实验代码: index.js // index.js Page({ data:{ cx:200, cy:50, destinaX:3, des
微信小程序实现拼图游戏

本文实例为大家分享了微信小程序实现拼图游戏的具体代码,供大家参考,具体内容如下页面展示项目链接微信小程序实现拼图游戏项目设计首页面 wxml  <view class="container">  <view class="title">游戏选关</view>  <view class="l
微信小程序实现五子棋游戏

本文实例为大家分享了微信小程序实现五子棋游戏的具体代码,供大家参考,具体内容如下效果图 .wxml <view class="title"> <view wx:if="{{currindex < 324 || defeat}}"> {{defeat?'胜出方:'+(outindex?'黑棋':'白棋'):'轮到了:'+(outindex?'白棋':'黑棋')}} </view> <view wx:el
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧

前言小程序跳一跳最近很火,之前爆出微信游戏小程序漏洞,网上也不乏大神.这里就用一大神的python脚本来刷下高分. 跳一跳python脚本传送门配置过程注: 电脑环境未配置python环境,请自行谷歌或者百度配置,这里不再做叙述. 1. 将上述传送门整个项目拷贝到本地(用git命令,或者直接压缩包下载,这里大家随意).比如我这里下载压缩包,解压我电脑以下的目录. 2. 楼主用的是 ios , 操作起来比较繁琐,也懒得找测试要 Android 测试机,所有就下了模拟器测试,首推雷电模拟器,安
微信小程序版翻牌小游戏

本文实例为大家分享了微信小程序翻牌游戏的具体代码,供大家参考,具体内容如下一.新建一个quick start项目看看结构在微信开发工具点击添加项目,选择无appid,勾上"在当前目录中创建quick start 项目". 可以看到一共有两个目录 pages和utils,和根目录下的3个app文件.pages存放的是小程序的页面,每个也面都有自己独立的文件夹. 一个页面由4文件构成,js文件是程序逻辑:wxss是微信定义的样式文件,语法跟css一样,支持的样式要少一些:wxml文件
微信小程序登录换取token的教程

前言: 这次主要是介绍些业务逻辑,技术点倒是没有多少.不过在开发中,优秀的编程思路同样是非常值得学习的. 最近小程序可以说在开发届狠狠的火了一把.微信小程序可以开发游戏,腾讯率先带头,做出了一个跳一跳也是点爆朋友圈.所谓落后就要挨打,那么今天就开始学习小程序的一些小知识吧(本文基于十年磨一剑的tp5) 目录: 微信登录换取token的流程如何将code变成openid和session_key 抛出错误异常和派发令牌一:微信登录换取token的流程多说无益,直接上图小程序获取token.p
微信小程序新闻网站详情页实例代码

准备工作: 1.在微信公众号平台,申请小程序账号,获取appid 2.下载并安装微信开发者工具 3.做不同分辨率设备的自适应:单位使用rpx IPhone6下 1px=1rpx=0.5pt 使用rpx,小程序会自动在不同分辨率下进行转换首先是项目的入口页面 welcome.wxml <view class="container"> <image class="avatar" src="/images/avatar/1.png"
微信小程序五子棋游戏AI实现方法【附demo源码下载】

本文实例讲述了微信小程序五子棋游戏AI实现方法.分享给大家供大家参考,具体如下: DEMO下载五子棋AI篇DEMO 效果图原理 1. 将棋盘中能够胜利的五子连珠方法遍历一个数组: 2. 当AI持棋时,遍历棋盘中所有棋子的空位: 3. 如果用户落子该位置,给用户该位置的五连珠方式进行加分:1连10分,2连20分,3连40分,4连80分: 4. 如果AI落子该位置,给AI该位置的五连珠方式进行加分:1连15分,2连25分,3连45分,4连85分: 5. 最后对该位置的分值进行比较,取最大分值位置
微信小程序五子棋游戏的棋盘，重置，对弈实现方法【附demo源码下载】

本文实例讲述了微信小程序五子棋游戏的棋盘,重置,对弈实现方法.分享给大家供大家参考,具体如下: DEMO下载五子棋对弈.悔棋DEMO 效果图分析 1. 采用微信小程序的canvas制作五子棋: 2. 确定棋盘大小及格数: 3. 绘制棋盘--通过棋盘宽高和格数计算间距,同时保存坐标点: 4. 黑方和白方下子--定义一个布尔变量代表各自的身份: 5. 重置棋盘--重新开始: 6. 通过判断当前棋手,悔棋时进行改变. 绘制棋盘 drawLine(arr){ arr.forEach(current
微信小程序实现的贪吃蛇游戏【附源码下载】

本文实例讲述了微信小程序实现的贪吃蛇游戏.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: 界面布局 pages/snake/snake/snake.wxml:  <view class="control" bindtouchstart="tapStart" bindtouchmove="tapMove" bindtouchend="tapEnd">

微信小程序实现弹球游戏

实验内容：

实验代码：

相关推荐

随机推荐