使用小程序制作一个飞机大战小游戏

此文主要基于微信小程序制作一个飞机大战小游戏，上手即用，操作简单。

一、创建小程序
二、页面实现
三、代码块

一、创建小程序

访问微信公众平台，点击账号注册。

选择小程序，并在表单填写所需的各项信息进行注册。

在开发管理选择开发设置，将AppID及AppSecret复制出来进行存储。

下载安装微信web开发者工具并创建一个新的项目，填入上图所复制的AppId。

二、页面实现

在创建好的index页面上，定义一个canvas标签，飞机大战小游戏主要功能都基于canvas画布来实现。

<view><canvas canvas-id="plainId" class="canvas" bindtap="click" bindtouchmove="move"></canvas>
</view>

/*  这里定义画布高度的时候可以在app.js里面获取屏幕高度来达到自适应的效果  */
.canvas {width: 375px;height: 625px;
}

准备对应的图片素材。

在pages同级文件夹新建一个lib文件夹，用于存放一些外部JS。

在lib文件夹新建一个images.js文件，用于定义图片src以及宽高等元素。

const imageSrc = "../../images/";  //图片url前缀
var gameImg = {"bg": {"src": imageSrc + "bg.jpg","width": 375,"height": 666},"loading1": {"src": imageSrc + "loading1.png","width": 192,"height": 41},"loading2": {"src": imageSrc + "loading2.png","width": 192,"height": 40},"loading3": {"src": imageSrc + "loading3.png","width": 200,"height": 42},"logo": {"src": imageSrc + "logo.png","width": 375,"height": 87},"bomb": {"src": imageSrc + "bomb.png","width": 60,"height": 53},"cartridge": {"src": imageSrc + "cartridge.png","width": 9,"height": 21},"cartridge_power": {"src": imageSrc + "cartridge_power.png","width": 9,"height": 21},"die1": {"src": imageSrc + "die1.png","width": 41,"height": 39},"die2": {"src": imageSrc + "die2.png","width": 40,"height": 43},"me": {"src": imageSrc + "me.png","width": 98,"height": 122},"me_2": {"src": imageSrc + "me_2.png","width": 98,"height": 122},"me_die1": {"src": imageSrc + "me_die1.png","width": 98,"height": 122},"me_die2": {"src": imageSrc + "me_die2.png","width": 98,"height": 122},"me_die3": {"src": imageSrc + "me_die3.png","width": 98,"height": 122},"me_die4": {"src": imageSrc + "me_die4.png","width": 98,"height": 122},"plain1": {"src": imageSrc + "plain1.png","width": 59,"height": 36},"plain1_die1": {"src": imageSrc + "plain1_die1.png","width": 59,"height": 36},"plain1_die2": {"src": imageSrc + "plain1_die2.png","width": 59,"height": 36},"plain1_die3": {"src": imageSrc + "plain1_die3.png","width": 59,"height": 36}
}
module.exports = gameImg

继续在lib文件夹创建一个wxplain.js，用于定义游戏基本配置信息以及游戏界面所用的一些函数，同时在这个JS中需引用上一步所创建的images.js。

const flyimages = require( './images.js' );//游戏配置
var config = {"gameSpeed": 8,  //游戏速度"cartridgeSpeed": 10  //子弹速度
};function flyGame( opts ) {var c_width = this.c_width = opts.width;var c_height = this.c_height = opts.height;  //画布的高和宽var cxt = this.cxt = opts.ctx;var id = this.id = opts.id;this.cxt.setFontSize( 30 );this.cxt.setFillStyle( "#333" );//等待时间var loadingTime = 0;//等待动画刷新事件var refresh = function() {drawBg();drawLogo();load();loadingTime++;wx.drawCanvas( {canvasId: id,actions: cxt.getActions()})}//设置背景function drawBg() {var bg_img = flyimages[ "bg" ];var bg_img_width = bg_img.width;var bg_img_height = bg_img.height;cxt.drawImage( bg_img.src, 0, 0, bg_img_width, bg_img_height );}//构造logofunction drawLogo() {var logo_img = flyimages[ "logo" ];var logo_width = logo_img.width;var logo_height = logo_img.height;var y = 100;cxt.drawImage( logo_img.src, 0, y, logo_width, logo_height );}//等待动画function load() {if( loadingTime == 600 ) {loadingTime = 0;clearInterval( loadingClock );game.start();}//loadingTime每隔200换一张图, 实现等待动画var pic = flyimages[ "loading" + ( parseInt( loadingTime / 200 ) + 1 ) + "" ];var pic_width = pic.width;var pic_height = pic.height;var x = ( c_width - pic_width ) / 3;cxt.drawImage( pic.src, x, 220, pic_width, pic_height );}//开始动画var loadingClock = setInterval( refresh, 1 );
}

回到index.js中，调用上一步所创建的wxplain.js并实现canvas的bindtouchmove函数。

const WxFly = require('../../lib/wxplain.js');Page({data: {modalHidden: "modal_hide",score: '0'},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数},onReady: function () {// 页面渲染完成},startGame: function () {const fly = this.fly;this.setData({ score: 0, modalHidden: "modal_hide" });fly.startGame();},move: function (event) {const fly = this.fly;var x = event.touches[0].x;var y = event.touches[0].y;fly.touchmove(x, y);},click: function () {const fly = this.fly;fly.touchclick();},onShow: function () {const fly = this.fly = new WxFly({ctx: wx.createContext(),id: 'plainId',height: 625,width: 375,});fly.on('over', packet => {this.setData({ score: packet.score, modalHidden: "" });});},onHide: function () {// 页面隐藏},onUnload: function () {// 页面关闭}
})

当飞机击落敌机时需要根据给用户计算分值并显示在界面上。

startGame: function () {const fly = this.fly;this.setData({ score: 0, modalHidden: "modal_hide" });fly.startGame();
},

当飞机撞机时，需要给到用户一个重新开始的入口。

<view id="modal" class="modal {{modalHidden}}"><view class="header">飞机大战分数</view><view class="content" id="content">{{score}}</view><view class="footer"><button bindtap="startGame">继 续</button></view></view>

startGame: function () {const fly = this.fly;this.setData({ score: 0, modalHidden: "modal_hide" });fly.startGame();
},

上述步骤完成后，保存代码进行编译，就可以开始飞机大战游戏了。

三、代码块

<view><canvas canvas-id="plainId" class="canvas" bindtap="click" bindtouchmove="move"></canvas><view id="modal" class="modal {{modalHidden}}"><view class="header">飞机大战分数</view><view class="content" id="content">{{score}}</view><view class="footer"><button bindtap="startGame">继 续</button></view></view>
</view>

.modal {width: 360px;height: 300px;top: 100px;left: 55%;margin-left: -200px;border: #666 solid 2px;border-radius: 8px;position: absolute;font-size: 20px;background-color: #dddddd;z-index: 1002;
}.modal_hide {display: none;
}.header {height: 45px;line-height: 45px;font-weight: bold;text-align: center;border-bottom: #666 solid 2px;
}.content {height: 210px;line-height: 210px;font-weight: bold;text-align: center;
}.footer {height: 45px;line-height: 45px;text-align: center;border-top: #666 solid 2px;
}.footer button {width: 120px;height: 42px;border: #666 solid 2px;border-radius: 15px;font-size: 15px;font-weight: bold;position: absolute;left: 50%;margin-left: -60px;color: #333;cursor: pointer;
}

使用小程序制作一个飞机大战小游戏相关推荐

微信小程序｜使用小程序制作一个时间管理小工具
适时而学,适时而息,张弛有度的生活态度才能让我们走得更远.此文使用小程序制作一个日程管理小工具,将时间进行分解以实现有效管理. 开发步骤一.创建小程序二.功能实现 2.1.首页 2.2.记录页 3 ...
基于C#制作一个飞机大战小游戏
此文主要基于C#制作一个飞机大战游戏,重温经典的同时亦可学习. 实现流程 1.创建项目 2.界面绘制 3.我方飞机 4.敌方飞机 5.子弹及碰撞检测实现流程 1.创建项目打开Visual Stud ...
微信小程序｜使用小程序制作一个足球拼图小游戏
世界杯的意义永远不止是冠军,它是每个精彩的瞬间,是呐喊,是青春.此文用小程序制作一个足球的拼图小游戏,一起为世界杯疯狂吧! 开发步骤一.工具安装二.功能实现 1 . 提示图展示 2 . 绘制画布内 ...
微信小程序｜使用小程序制作一个核酸检测点查询工具
小程序创建小程序申请腾讯地图用户key 实现小程序界面全国省市区数据 API 提交资料认证并申请接口拼接参数调用接口渲染数据优化细节出门在外,没有核酸证明寸步难行,此文将教你如何通过小程序 ...
微信小程序｜使用小程序制作一个节日祝福生成器
一.前言不知不觉间还有几天就是新的一年了,值此佳节祝福语肯定也是必不可少,毕竟难得有机会能给ta发消息,ta会不会也在想终于又能给你回消息呢.跟随此文使用小程序制作一个祝福语生成器,让你的祝福脱颖而 ...
微信小程序｜使用小程序制作一个马赛克处理工具
此文主要使用微信小程序制作一个马赛克处理工具,这个场景在生活中也非常常见,例如新闻之类有些视频或者图片不想给大众展示就会将其和谐掉,这就是马赛克应用. 开发步骤功能开发实现API 接口响应开发步 ...
使用小程序制作一个电子木鱼，功德+1
此文主要通过小程序制作一个敲木鱼的小工具,在心烦意乱的时候缓解一下焦虑. 一.创建小程序二.设计页面三.代码块一.创建小程序访问微信公众平台,点击账号注册. 选择小程序,并在表单填写所需的各项 ...
微信小程序｜基于小程序制作一个超酷的个人简历
你还在用以前的方式投简历吗?趁着金三银四来临之际,跟随此文使用小程序制作一个便携超酷的个人简历,高调炫技,愉快的收offer吧! 一.小程序 <
使用小程序制作一个音乐播放器
此文主要通过小程序制作一个音乐播放器,实现轮播.搜索.播放.快进.暂停.上一曲.下一曲等功能. 一.创建小程序二.设计页面三.接口渲染一.创建小程序访问微信公众平台,点击账号注册. 选择小程序 ...

使用小程序制作一个飞机大战小游戏

一、创建小程序

二、页面实现

三、代码块

使用小程序制作一个飞机大战小游戏相关推荐

最新文章

热门文章