Rattenking
迎接着黎明的曙光前行!
展开
-
游戏系列文章 - 总目录
DEMO下载五子棋悔棋DEMO 五子棋AI篇DEMO文字列表五子棋微信小程序(游戏)—-五子棋(棋盘,重置,对弈篇) 微信小程序(游戏)—-五子棋(悔棋篇) 微信小程序(游戏)—-五子棋(AI篇) 微信小程序(游戏)—-五子棋(总结)拖拽拼图微信小程序(游戏)—-拼图游戏(设计思路) 微信小程序(游戏)—-拖拽拼图(图片分块和打乱顺序) 微信小程...原创 2018-01-11 16:22:54 · 4145 阅读 · 1 评论 -
【taro react】(游戏) ---- 贪吃蛇
最开准备使用 30 * 30 个格子,进行判断渲染,渲染数据每次更改太多,渲染时间很久,因此不建议使用;为什么每次设置渲染数据都要筛选一次,因为直接将类渲染,数据随着蛇成长,会越来越大,很卡。原创 2023-08-31 11:30:31 · 616 阅读 · 0 评论 -
【Python 实战】---- 小游戏2048实现
1. 预览2. 实现思路3. 依赖引入import tkinter as tkimport numpy as npimport random4. 代码解析4.1 初始化参数初始化画布得宽高和网格数量boardNum*boardNum计算每个格子得宽高初始化游戏是否结束和记分器归0初始化网格列表init_boarddef __init__(self, width=340, height=340, boardNum = 4): # 初始化参数 self.wi原创 2022-05-13 16:55:40 · 683 阅读 · 0 评论 -
CreateJS实现【益智类数字华容道小游戏】
由于代码较多,如果需要源代码,请联系我!!!CreateJS 是一个 HTML5游戏开发的引擎,这一篇是入门开发的游戏,还有很多不足,请大神指教!既然是使用 CreateJS 开发游戏,因此游戏界面全部使用 CreateJS 开发,不要还是按照前端的思维,使用div等去布局。能够看到这里的大佬,请++关注,支持一下!!!原创 2022-08-19 15:47:50 · 1312 阅读 · 0 评论 -
【taro react】(游戏) ---- 小游戏 2048 的实现
1. 预览2. 实现思路通过二维数组,确定每个数字所在的位置;通过对象为引用变量,直接改变对象中的属性;将二维数组变成一维数组抽取随机位置;使用Math.random()产生随机数2或者4;做web和微信小程序的程序兼容!3. 环境Taro 3.2.124. 页面HTML基础的展示界面的画布,canvas;历史最高分和当前局分数显示;重新开始或者重置按钮!【有个基础的游戏界面】import React, { Component } from 'react'impor原创 2022-05-23 17:30:08 · 417 阅读 · 0 评论 -
【taro react】(游戏) ---- 类2048游戏,看看在秦朝,功勋爵位你能到哪一级
使用2048的游戏逻辑实现秦朝功勋爵位制的升级游戏!原创 2022-05-23 17:11:00 · 430 阅读 · 0 评论 -
【taro react】---- 时间罗盘实现
1. 最终效果2. 开发环境taro react v3.2.123. 实现原理每一秒获取本地当前时间,进行时间的修改和转动!transition 执行旋转动画;transform 执行旋转角度。4. SCSS 实现引入 unidreamLED 字体!设置界面默认的css;设置显示罗盘的盒子大小【rui-date-roulette-content】;提取年月日时分秒盒子公用代码【rui-common-content】;分别设置年月日时分秒盒子的大小和边框颜色【rui-year-原创 2022-05-09 16:11:10 · 988 阅读 · 2 评论 -
微信小程序(游戏)----拖拽拼图(图片分块和打乱顺序)
效果图图片分块创建二维数组 typeArr 和一维有序数组 pointsArr;计算每个块区view的定位坐标(x,y)和view的背景坐标(px,py)、以及每个view的顺序 count;填充数组 pointsArr 的对应值 count 进行记数。initTypeArr(){ let arr = [],count = 0; for(let i = 0;...原创 2018-03-15 14:17:14 · 14716 阅读 · 10 评论 -
微信小程序(游戏)----拖拽拼图(拖拽和切换功能的实现)
效果图touchstart获取当前触摸位置的坐标(x,y);记录触摸点下view的各项坐标值;记录触摸点下view的起点坐标,背景坐标,以及触摸点的坐标;设置拖拽view为显示状态、设置起始坐标以及背景坐标为记录对应个坐标。page.onTouchStart = function(e){ let x = parseInt(e.touches[0].pageX ...原创 2018-03-15 16:39:29 · 14786 阅读 · 14 评论 -
微信小程序(游戏)----拼图游戏(设计思路)
设计思路1、将一张海报等分成 N*N 的矩阵 方法一:利用两个组件循环完成,view组件和image组件,view组件作为盒子规定大小—-超出部分不显示,image组件展示完整的海报—-进行定位。循环该组合拼接成一张完整的海报。 方法二:利用一个组件循环完成,view组件配合背景图,单纯的循环定位view组件,就能完成海报。优点:方法一可以将大多数公用的WXSS提出到W...原创 2018-03-15 10:55:27 · 11436 阅读 · 27 评论 -
微信小程序(游戏)----五子棋(总结)
思路分析绘制棋盘: 计算横线和竖线的起始、终结点坐标,绘制棋盘网格;棋盘交叉点坐标: 计算每格宽高,循环保存棋盘所有点坐标,并初始化状态为0,表示此位置没有棋子,形成“棋盘坐标数组”;获取点击位置的精确坐标: 获取当前点击位置的横纵坐标,然后获取精确坐标方法: 1、由于知道每格宽高,可以通过当前坐标计算出棋盘中离点击点最近坐标; 2、通过循环“棋盘坐标数组”,查找最近坐标;原创 2018-01-17 17:31:01 · 10501 阅读 · 0 评论 -
微信小程序(游戏)----五子棋(AI篇)
DEMO下载五子棋AI篇DEMO效果图原理将棋盘中能够胜利的五子连珠方法遍历一个数组;当AI持棋时,遍历棋盘中所有棋子的空位;如果用户落子该位置,给用户该位置的五连珠方式进行加分:1连10分,2连20分,3连40分,4连80分;如果AI落子该位置,给AI该位置的五连珠方式进行加分:1连15分,2连25分,3连45分,4连85分;最后对该位置的分值进行比较,取最大分原创 2018-01-16 17:02:45 · 15796 阅读 · 6 评论 -
微信小程序(游戏)----五子棋(悔棋篇)
DEMO下载五子棋悔棋DEMO效果图分析悔棋功能需要的操作:判断当前持棋人;清空棋盘;将当前持棋人的棋子数组的最后一个棋子还原到全局坐标数组的位置;删除当前持棋人的棋子数组的该坐标。jsthis.page.changeUndo = function(e){ if (self.START_GAME){ var la原创 2018-01-12 16:34:25 · 5817 阅读 · 0 评论 -
微信小程序(游戏)----五子棋(棋盘,重置,对弈)
DEMO下载五子棋对弈、悔棋DEMO效果图分析采用微信小程序的canvas制作五子棋;确定棋盘大小及格数;绘制棋盘—-通过棋盘宽高和格数计算间距,同时保存坐标点;黑方和白方下子—-定义一个布尔变量代表各自的身份;重置棋盘—-重新开始;通过判断当前棋手,悔棋时进行改变。绘制棋盘drawLine(arr){ arr.forEach(curr原创 2018-01-11 16:18:13 · 24044 阅读 · 2 评论