微信小程序实现弹球游戏

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

实验内容：

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

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

实验代码：

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;
  }

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

赞 (0)

相关推荐

  • 微信小程序 弹窗自定义实例代码

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

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

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

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

  • 微信小程序自定义modal弹窗组件的方法详解

    微信小程序自定义modal弹窗组件的方法详解

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

  • 微信小程序实战之自定义模态弹窗（8）

    微信小程序实战之自定义模态弹窗（8）

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

  • 微信小程序实现漂亮的弹窗效果

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

  • 微信小程序自定义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 <!--index.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的教程

    微信小程序登录换取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下载 五子棋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下载 五子棋对弈.悔棋DEMO 效果图 分析 1. 采用微信小程序的canvas制作五子棋: 2. 确定棋盘大小及格数: 3. 绘制棋盘--通过棋盘宽高和格数计算间距,同时保存坐标点: 4. 黑方和白方下子--定义一个布尔变量代表各自的身份: 5. 重置棋盘--重新开始: 6. 通过判断当前棋手,悔棋时进行改变. 绘制棋盘 drawLine(arr){ arr.forEach(current

  • 微信小程序实现的贪吃蛇游戏【附源码下载】

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

随机推荐