接上篇《qml自学笔记------自己写类似于劲舞团的按键小游戏(上)

第三部分DisplayPart.qml

代码的其它部分都是渣,就这里花了点时间,整个小游戏就靠这个文件。

首先,屏幕上要随机的滑过空格或者箭头,每个图片就是一个项目,那么就要动态的创建项目。

动态创建项目方法有三种(我所知道的),第一种是通过JavaScript调用Qt.createComponent(),Qt.createQmlObject()来创建对象,这里要注意的是创建时必须传父对象,由于图形项目没有父对象是无法显示在场景上的;另外一种是使用反复器Repeater,可是Repeater元素是用来创建大量相似项目的;第三种是使用Loader元素载入组件创建对象,Loader元素能够使用source属性载入一个QML文件或者使用sourceComponent属性创建一个对象,可是假设source或者sourceComponent更改了,不论什么先前实例化的项目都会被销毁;在本游戏中source肯定要随机切换,所以不能选第三种,各个对象之间也是不一样的,所以我选了第一种方法使用JS调用来动态创建对象。

而且,使用JS来产生随机数也很easy。使用Math.random()调用就好。要是使用QML来产生随机数我还真不会

随机问题攻克了就使用Timer定时器,定时的动态创建项目。

interval属性设置时间间隔,单位毫秒;repeat属性设置是否反复触发;running属性设置定时器的开启关闭;onTriggered属性设置处理函数,等等。。。

然后就是最头疼的判决是否得分的问题了,一開始我想的实现方法是当项目到达某个坐标时開始计时,到走出计时结束,在计时的这段时间里看是否有跟项目图片一致的按键事件,并且依据时间距离中心时间的长短来判决得分是perfect、good或者OK等等级。经过一番折腾,诶... 毕竟是做工控的。没做过游戏,有点难度(这又让我想起了那丑陋的界面。诶...  感觉自己全然没有艺术细胞呀)。

于是我换了一种思路。当按键按下时。判决处于某坐标的项目的图片是否和按键事件是一样的。这样会简单非常多,于是就有了例如以下代码。

import QtQuick 1.1

Rectangle {
id: m_displayPart property bool timerRunning: false function startGame(){
var rand = Math.floor(5*Math.random()+1);
switch(rand){
case 1:
var componetImageUP = Qt.createComponent("ImageUp.qml");
componetImageUP.createObject(rowDisplay);
break;
case 2:
var componetImageDown = Qt.createComponent("ImageDown.qml");
componetImageDown.createObject(rowDisplay);
break;
case 3:
var componetImageLeft = Qt.createComponent("ImageLeft.qml");
componetImageLeft.createObject(rowDisplay);
break;
case 4:
var componetImageRight = Qt.createComponent("ImageRight.qml");
componetImageRight.createObject(rowDisplay);
break;
case 5:
var componetImageSpace = Qt.createComponent("ImageSpace.qml");
componetImageSpace.createObject(rowDisplay);
break;
default:
break;
} //imageLoader.source = "ImageUp.qml"
if(++mainWindow.currentNum > 99) {
displayPart.timerRunning = false;
pauseButton.pauseText = "又一次開始";
pauseButton.stat = false;
}
} function score(){
m_displayPart.color = "lightgreen";
mainWindow.currentScore++;
//console.log("score!");
} function unScore(){
m_displayPart.color = "red";
//console.log("un score!");
} width: 500
height: 200
color: "lightblue" Rectangle {
id: rowDisplay z: 1; width: 500;
anchors.verticalCenter: parent.verticalCenter
focus: true Keys.onPressed: {
if(childAt(250,0)===null) {
unScore();
}
else if( (event.key===Qt.Key_Up)&&(childAt(250,0).getValue()===1) ) {
score();
}
else if( (event.key === Qt.Key_Down)&&(childAt(250,0).getValue()===2) ) {
score();
}
else if( (event.key === Qt.Key_Left)&&(childAt(250,0).getValue()===3) ) {
score();
}
else if( (event.key === Qt.Key_Right)&&(childAt(250,0).getValue()===4) )
score();
else if( (event.key === Qt.Key_Space)&&(childAt(250,0).getValue()===5) )
score();
else
unScore(); //event.accepted = true;
} Keys.onReleased: {m_displayPart.color = "lightblue"} } Rectangle {
id: pjLine width: 10; height: parent.height
z: 0
color: "pink"
anchors.horizontalCenter: parent.horizontalCenter } Timer {
id: timerDisplay interval: 600
running: timerRunning
repeat: true
onTriggered: startGame(); } }

动态创建的项目有五个。分别相应着五个按键:ImageUp.qml   ImageDown.qml  ImageLeft.qml  ImageRight.qml  ImageSpace.qml

五个文件非常类似,以ImageUp为例。使用source属性载入图片;使用states属性设置状态;使用transitions属性设置切换效果。

这个效果大概就是先创建。等创建完毕后从x=0的位置滑动到x=500的位置。历时duration:3000毫秒。滑动效果用easing.type: Easing.InOutQuad来设置。

import QtQuick 1.1

Image {
id: upimage function getValue(){
return 1;
} width: 60
height: 60
anchors.verticalCenter: parent.verticalCenter source: "../img/up.png" states: State {
name: "loaded"; when: upimage.status === Image.Ready
PropertyChanges { target: upimage; x: 500}
} transitions: Transition {
NumberAnimation {
to: 500; from: 0
duration: 3000
properties: "x"; easing.type: Easing.InOutQuad
}
} }

qml自学笔记------自己写相似于劲舞团的按键小游戏(中)的更多相关文章

  1. 用原生JS写一个网页版的2048小游戏(兼容移动端)

    这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...

  2. 我用数据结构花了一夜给女朋友写了个h5走迷宫小游戏

    目录 起因 分析 画线(棋盘) 画迷宫 方块移动 结语 @(文章目录) 先看效果图(在线电脑尝试地址http://biggsai.com/maze.html): 起因 又到深夜了,我按照以往在公众号写 ...

  3. 零基础自学Python十天,写了一款猜数字小游戏,附源码和软件下载链接!

    自学一门语言最重要的是要及时给自己反馈,那么经常写一些小程序培养语感很重要,写完可以总结一下程序中运用到了哪些零散的知识点. 本程序中运用到的知识点有: 1.输入输出函数 (input.print) ...

  4. 零基础自学Python十天的时候,写的一款猜数字小游戏,附源码和软件下载链接!

    自学一门语言最重要的是要及时给自己反馈,那么经常写一些小程序培养语感很重要,写完可以总结一下程序中运用到了哪些零散的知识点. 本程序中运用到的知识点有: 1.输入输出函数 (input.print) ...

  5. 用Python写个开心消消乐小游戏

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 提到开心消消乐这款小游戏,相信大家都不陌生,其曾在 2015 年获得过玩家最喜爱的移动单机游戏奖,受 ...

  6. 自学笔记系列:《Python学习手册 第五版》 -写在开始之前

    今年双十一,在当当网上买了这本书,很厚很厚的一本书,大概有将近1700页左右,的确是一个“大工程”, 关于这本书的学习,我想采用一种博客的方式进行,既是写给自己,也想分享给每一个对Python学习感兴 ...

  7. JAVA自学笔记20

    JAVA自学笔记20 1.递归: 1)方法定义中定义中调用方法本身的现象 2)要有出口,否则就是死递归 次数不能太多.否则内存将溢出 构造方法不能递归使用 //斐波那契数列:1,1,2,3,5,8,1 ...

  8. JS写小游戏(一):游戏框架

    前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...

  9. 《Linux内核设计与实现》课本第三章自学笔记——20135203齐岳

    <Linux内核设计与实现>课本第三章自学笔记 进程管理 By20135203齐岳 进程 进程:处于执行期的程序.包括代码段和打开的文件.挂起的信号.内核内部数据.处理器状态一个或多个具有 ...

随机推荐

  1. java对象内存大小评估

    Java对象的内存布局:对象头(Header).实例数据(Instance Data)和对齐填充(Padding).无论是32位还是64位的HotSpot,使用的都是8字节对齐.也就是说每个java对 ...

  2. spring注解导入配置文件

    @Configuration @ImportResource("classpath:config.xml") public class StoreConfig { @Value(& ...

  3. python 九九乘法表

    for i in range(1,10): for j in range(1,i+1): print('%d x %d = %d\t' %(j, i, j*i),end="") p ...

  4. ssl介绍以及双向认证和单向认证原理

    SSL安全证书可以自己生成,也可以通过第三方的CA(Certification Authority)认证中心付费申请颁发. SSL安全证书包括: 1.       CA证书,也叫根证书或中间级证书.单 ...

  5. springBoot Feign Hystrix Dashboard

    1.引入依赖 <!-- 引入关于 hystrix Dashboard的依赖 --> <dependency> <groupId>org.springframewor ...

  6. 变量与指针 --- WalMart 寄存箱设计者不懂计算机

    一.场景: 今天星期天,难得公司售后同事很给力,项目运行正常,无运维事务需要处理.于是满足堂客(湖南人称老婆)很久来的心愿 陪其逛街(这里要惭愧 检讨作为IT码农常常容易忽略身边的人.大声疾呼:“码农 ...

  7. PreparedStatement 和 Statement 实现基本的批处理

    批处理:若需要对数据库进行多步操作,则就没必要每次都和数据库进行一次通信,这样很消耗资源和时间.则需要将操作进行批处理:    Statement方式来实现批处理        优点:         ...

  8. 操作JSON————精品

    使用背景: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原 ...

  9. uva10256

    uva10256 题意 平面上存在两种颜色的点,问是否存在一条直线,使得任取一个红点和一个蓝点都在直线的异侧,这条直线不经过任何点. 分析 对每种颜色的点求一发凸包,问题等价于判断两个多边形是否相交或 ...

  10. 对mysql 数据库操作 使其支持插入中文(针对python)

    首先,这项任务确切的说需要三步吧: #1.建立数据库(数据库名为xsk) create database `xsk` character set 'utf8' collate 'utf8_genera ...