使用arkts实现象棋游戏
本文将介绍如何使用arkts实现一个完整的象棋游戏。我们将从棋子的移动规则、棋盘的渲染和用户交互的处理开始，逐步扩展到更复杂的功能。通过本文，读者将了解如何使用arkts构建一个具有高可玩性和性能的象棋游戏。
一、引言
Arkts是一种基于TypeScript的React框架，非常适合用于构建高性能的移动和Web应用程序。在本文中，我们将探讨如何使用arkts来实现一个完整的象棋游戏。我们将从棋子的移动规则和棋盘的渲染开始，然后逐步扩展到更复杂的游戏功能，如用户交互和状态管理。
二、棋子类的设计
在象棋游戏中，棋子是最基本和重要的元素之一。在本文中，我们将设计一个名为qizi的类来表示棋子。这个类将包含以下属性：
word：棋子的类型，如“将”、“兵”、“车”等。x：棋子在棋盘上的横坐标。y：棋子在棋盘上的纵坐标。color：棋子的颜色，用于区分黑棋和红棋。
我们还将为棋子类提供几个方法，如guize，用于检查移动是否符合规则。
class qizi{
word?:string
x?:number
y?:number
color?:number
constructor(word?:string,index?: number) {
this.word = word
this.x = index! % 9
this.y = Math.floor((index!) / 9)
}
guize(old_index:number,new_index:number,word:string,color:number,qipan:qizi[]):boolean{
let old:number[] = turn_x_y(old_index)
let xin:number[] = turn_x_y(new_index)
let x_old = old[0]
let y_old = old[1]
let x_new = xin[0]
let y_new = xin[1]
if(!Number.isNaN(qipan[new_index].x)){
if (qipan[new_index].color != color){
if (word === "兵") {
if(color == 1?old[1] > 4 :old[1] < 5) { return (color == 1? old[1] - xin[1]== 1: xin[1] - old[1]== 1&& old[0] - xin[0] == 0 )? true : false}
else{return ((color == 1? old[1] - xin[1]== 1: xin[1] - old[1]== 1&& Math.abs(old[0] - xin[0]) == 0) || (Math.abs(old[0] - xin[0]) == 1 && Math.abs(old[1] - xin[1]) == 0))? true : false }
}
else if(word === "馬"){
console.log("",qipan[73].x)
if(y_new - y_old == -2){
if(!Number.isNaN(qipan[(y_old - 1) * 9+x_old].x)){
return false
}else{
if((Math.abs(xin[0] - old[0]) == 1 && Math.abs(xin[1] - old[1]) == 2) || (Math.abs(xin[0] - old[0]) == 2 && Math.abs(xin[1] - old[1]) == 1)){
return true
}else{return false}}
}else if(y_new - y_old == 2){
if(!Number.isNaN(qipan[(y_old + 1) * 9+x_old].x)){
return false
}else{
if((Math.abs(xin[0] - old[0]) == 1 && Math.abs(xin[1] - old[1]) == 2) || (Math.abs(xin[0] - old[0]) == 2 && Math.abs(xin[1] - old[1]) == 1)){
return true
}else{return false}}
}else{
if((Math.abs(xin[0] - old[0]) == 1 && Math.abs(xin[1] - old[1]) == 2) || (Math.abs(xin[0] - old[0]) == 2 && Math.abs(xin[1] - old[1]) == 1)){
return true
}else{return false}
}
}
else if(word === "相"){
if (color == 1 ? y_new > 4 : y_new < 5){
if ( Math.abs(x_old - x_new) == 2 && Math.abs(y_old - y_new) == 2) {
console.log("",(y_old + y_new)/2 , (x_old + x_new))
if(!Number.isNaN(qipan[(y_old + y_new)/2 * 9 + (x_old + x_new)/2].x) ){
return false
}else {return true}
}else{
return false
}
}
}
else if(word === "士"){
if(Math.abs(x_old-x_new) == 1 && Math.abs(y_old - y_new) == 1){
if (x_new > 2 && x_new < 6 && (y_new < 3 || y_new > 6)) {
return true
}else {
return false
}
}else {
return false
}
}
else if(word === "将"){
if(Math.abs(x_old-x_new) == 1 && Math.abs(y_old - y_new) == 0|| Math.abs(y_old - y_new) == 1&& Math.abs(x_old-x_new) == 0){
if (x_new > 2 && x_new < 6 && (y_new < 3 || y_new > 6)) {
return true
}else {
return false
}
}else {
return false
}
}
else if(word === "車"){
return yidong(x_old,x_new,y_old,y_new,qipan)
}
else if(word === "炮"){
// 判断点击的是否是棋子
if(!!Number.isNaN(qipan[y_new* 9+x_new].x)){return yidong(x_old,x_new,y_old,y_new,qipan)}
else {
if(x_old - x_new == 0 && y_old - y_new != 0){
let juli:number = y_new - y_old
if(Math.abs(juli) == 1){
return true
}else{
let count = 0
for(let i=1;i< Math.abs(juli);i++){
if(juli>0? !Number.isNaN(qipan[(y_old + i) * 9+x_old].x) :!Number.isNaN(qipan[(y_old - i) * 9+x_old].x)){
count += 1
}
}
if(count == 1){
return true
}else {return false}
}
}else if(y_old - y_new == 0 && x_old - x_new != 0){
let juli:number = x_new - x_old
if (Math.abs(juli) == 1) {
return true
}else {
let count = 0
for(let i=1;i< Math.abs(juli);i++){
if(juli>0? !Number.isNaN(qipan[y_old*9+x_old+i].x) :!Number.isNaN(qipan[y_old*9+x_old-i].x)){
count += 1
}
}
if(count == 1){
return true
}else {
return false
}
}
}else{
return false
}
}
}
return false
}else {
return false
}
}else {
if (word === "兵") {
if(color == 1?old[1] > 4 :old[1] < 5) { return (color == 1? old[1] - xin[1]== 1: xin[1] - old[1]== 1&& old[0] - xin[0] == 0 )? true : false}
else{return ((color == 1? old[1] - xin[1]== 1: xin[1] - old[1]== 1&& Math.abs(old[0] - xin[0]) == 0) || (Math.abs(old[0] - xin[0]) == 1 && Math.abs(old[1] - xin[1]) == 0))? true : false }
}
else if(word === "馬"){
console.log("",qipan[73].x)
if(y_new - y_old == -2){
if(!Number.isNaN(qipan[(y_old - 1) * 9+x_old].x)){
return false
}else{
if((Math.abs(xin[0] - old[0]) == 1 && Math.abs(xin[1] - old[1]) == 2) || (Math.abs(xin[0] - old[0]) == 2 && Math.abs(xin[1] - old[1]) == 1)){
return true
}else{return false}}
}else if(y_new - y_old == 2){
if(!Number.isNaN(qipan[(y_old + 1) * 9+x_old].x)){
return false
}else{
if((Math.abs(xin[0] - old[0]) == 1 && Math.abs(xin[1] - old[1]) == 2) || (Math.abs(xin[0] - old[0]) == 2 && Math.abs(xin[1] - old[1]) == 1)){
return true
}else{return false}}
}else{
if((Math.abs(xin[0] - old[0]) == 1 && Math.abs(xin[1] - old[1]) == 2) || (Math.abs(xin[0] - old[0]) == 2 && Math.abs(xin[1] - old[1]) == 1)){
return true
}else{return false}
}
}
else if(word === "相"){
if (color == 1 ? y_new > 4 : y_new < 5){
if ( Math.abs(x_old - x_new) == 2 && Math.abs(y_old - y_new) == 2) {
console.log("",(y_old + y_new)/2 , (x_old + x_new))
if(!Number.isNaN(qipan[(y_old + y_new)/2 * 9 + (x_old + x_new)/2].x) ){
return false
}else {return true}
}else{
return false
}
}
}
else if(word === "士"){
if(Math.abs(x_old-x_new) == 1 && Math.abs(y_old - y_new) == 1){
if (x_new > 2 && x_new < 6 && (y_new < 3 || y_new > 6)) {
return true
}else {
return false
}
}else {
return false
}
}
else if(word === "将"){
if(Math.abs(x_old-x_new) == 1 && Math.abs(y_old - y_new) == 0|| Math.abs(y_old - y_new) == 1&& Math.abs(x_old-x_new) == 0){
if (x_new > 2 && x_new < 6 && (y_new < 3 || y_new > 6)) {
return true
}else {
return false
}
}else {
return false
}
}
else if(word === "車"){
return yidong(x_old,x_new,y_old,y_new,qipan)
}
else if(word === "炮"){
// 判断点击的是否是棋子
if(!!Number.isNaN(qipan[y_new* 9+x_new].x)){return yidong(x_old,x_new,y_old,y_new,qipan)}
else {
if(x_old - x_new == 0 && y_old - y_new != 0){
let juli:number = y_new - y_old
if(Math.abs(juli) == 1){
return true
}else{
let count = 0
for(let i=1;i< Math.abs(juli);i++){
if(juli>0? !Number.isNaN(qipan[(y_old + i) * 9+x_old].x) :!Number.isNaN(qipan[(y_old - i) * 9+x_old].x)){
count += 1
}
}
if(count == 1){
return true
}else {return false}
}
}else if(y_old - y_new == 0 && x_old - x_new != 0){
let juli:number = x_new - x_old
if (Math.abs(juli) == 1) {
return true
}else {
let count = 0
for(let i=1;i< Math.abs(juli);i++){
if(juli>0? !Number.isNaN(qipan[y_old*9+x_old+i].x) :!Number.isNaN(qipan[y_old*9+x_old-i].x)){
count += 1
}
}
if(count == 1){
return true
}else {
return false
}
}
}else{
return false
}
}
}
return false
}
}
}
三、棋盘的渲染
在象棋游戏中，棋盘是游戏界面的重要组成部分。在本文中，我们将使用arkts来实现棋盘的渲染。我们将创建一个名为ChessBoard的组件来表示棋盘，并使用ForEach循环来遍历棋盘上的每个格子，将其渲染为ChessPiece组件。
定义棋盘数组：
@State qipan:qizi[] = []
定义初始棋子：
let bing_black_1 = new qizi_black("兵",54)
let bing_black_2 = new qizi_black("兵",56)
let bing_black_3 = new qizi_black("兵",58)
let bing_black_4 = new qizi_black("兵",60)
let bing_black_5 = new qizi_black("兵",62)
let pao_black_1 = new qizi_black("炮",64)
let pao_black_2 = new qizi_black("炮",70)
let che_black_1 = new qizi_black("車",81)
let che_black_2 = new qizi_black("車",89)
let ma_black_1 = new qizi_black("馬",82)
let ma_black_2 = new qizi_black("馬",88)
let xiang_black_1 = new qizi_black("相",83)
let xiang_black_2 = new qizi_black("相",87)
let shi_black_1 = new qizi_black("士",84)
let shi_black_2 = new qizi_black("士",86)
let jiang_black = new qizi_black("将",85)
let bing_red_1 = new qizi_red("兵",27)
let bing_red_2 = new qizi_red("兵",29)
let bing_red_3 = new qizi_red("兵",31)
let bing_red_4 = new qizi_red("兵",33)
let bing_red_5 = new qizi_red("兵",35)
let pao_red_1 = new qizi_red("炮",19)
let pao_red_2 = new qizi_red("炮",25)
let che_red_1 = new qizi_red("車",0)
let che_red_2 = new qizi_red("車",8)
let ma_red_1 = new qizi_red("馬",1)
let ma_red_2 = new qizi_red("馬",7)
let xiang_red_1 = new qizi_red("相",2)
let xiang_red_2 = new qizi_red("相",6)
let shi_red_1 = new qizi_red("士",3)
let shi_red_2 = new qizi_red("士",5)
let jiang_red = new qizi_red("将",4)
定义棋子列表：
@State qizi_list:qizi[] = [
bing_black_1,bing_black_2,bing_black_3,bing_black_4,bing_black_5,
bing_red_1,bing_red_2,bing_red_3,bing_red_4,bing_red_5,
pao_black_1,pao_black_2,pao_red_1,pao_red_2,
che_black_1,che_black_2,che_red_1,che_red_2,
ma_black_1,ma_black_2,ma_red_1,ma_red_2,
xiang_black_1,xiang_black_2,xiang_red_1,xiang_red_2,
shi_black_1,shi_black_2,shi_red_1,shi_red_2,
jiang_black,jiang_red
]
通过生命周期插入棋子：
onPageShow(): void {
for(let i=0;i<90;i++){
this.qipan?.push(new qizi())
}
for(let i of this.qizi_list){
this.qipan![i.y!*9+i.x!] = i
}
}
定义棋盘UI：
build() {
// 大框
Column(){
Column(){
// 棋盘
Grid(){
ForEach(this.qipan,(item:qizi_black|qizi_red,index)=>{
GridItem(){
Text(item == undefined?"" : item.word)
.fontColor(item == undefined? "" : item.color == 1? Color.Black : Color.Red)
.width(38)
.aspectRatio(1)
.border({width:item.word == undefined? "" :1,color:"rgba(0,0,0,0.3)"})
.borderRadius(19)
.fontSize(23)
.textAlign(TextAlign.Center)
.backgroundColor(item.word == undefined? "" :Color.White)
}
.onClick(()=>{
console.log(this.qipan.indexOf(jiang_black).toString())
if(this.now_qizi != undefined && this.huihe == this.now_qizi.color){
if(this.now_qizi.guize(this.old_index,index,this.now_qizi.word!,this.now_qizi.color!,this.qipan)){
this.qipan![index] = this.now_qizi.color == 1?new qizi_black(this.now_qizi.word!,index):new qizi_red(this.now_qizi.word!,index)
this.qipan[this.old_index] = new qizi()
this.huihe = this.huihe==1?2:1
}else{
AlertDialog.show({message:"落子不符合规则"})
}
this.now_qizi = undefined
}else{
this.now_qizi = this.qipan![index]
this.old_index = index
}
})
})
}
.columnsTemplate(" 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr")
.rowsTemplate(" 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr")
.width("100%").height(420)
}.backgroundImage($r("app.media.qipan"))
.backgroundImageSize({width:"100%"}).padding({top:20})
.width("100%").height(450).backgroundImagePosition(Alignment.Center)
.bindContentCover($$this.isshow,this.quanpin_zhuanchang())
.shadow({offsetX:2,offsetY:2,radius:100,color:"rgba(0,0,0,0.4)"})
}.justifyContent(FlexAlign.Center).width("100%").height("100%")
}
四、用户交互的处理
在象棋游戏中，用户交互是非常重要的一部分。在本文中，我们将使用arkts的事件系统来处理用户的点击事件。当用户点击棋盘上的某个格子时，我们将检查该格子是否已经被占据，并根据棋子的颜色来决定是否允许移动。如果允许移动，我们将更新棋盘的状态，并切换到下一个玩家的回合。
.onClick(()=>{
console.log(this.qipan.indexOf(jiang_black).toString())
if(this.now_qizi != undefined && this.huihe == this.now_qizi.color){
if(this.now_qizi.guize(this.old_index,index,this.now_qizi.word!,this.now_qizi.color!,this.qipan)){
this.qipan![index] = this.now_qizi.color == 1?new qizi_black(this.now_qizi.word!,index):new qizi_red(this.now_qizi.word!,index)
this.qipan[this.old_index] = new qizi()
this.huihe = this.huihe==1?2:1
}else{
AlertDialog.show({message:"落子不符合规则"})
}
this.now_qizi = undefined
}else{
this.now_qizi = this.qipan![index]
this.old_index = index
}
})
五、状态管理
在象棋游戏中，状态管理是非常重要的一部分。在本文中，我们将使用arkts的@State装饰器来管理游戏的状态，包括当前玩家的颜色、棋盘的状态和用户的输入。这将有助于我们更灵活地处理游戏的状态，并提高代码的可维护性。
@State now_qizi:qizi | undefined = undefined
@State old_index:number = -1
@State huihe:number = 1
@State isshow:boolean = true
六、代码优化和设计模式
在实现象棋游戏的过程中，代码优化和设计模式是非常重要的。在你自己编写过程中，可以使用以下优化和实践：
- 使用
@Builder装饰器来简化构建过程。 - 使用arkts的性能优化特性来优化组件的渲染。
- 使用Redux来管理游戏的状态。
- 使用模块化和解耦的设计模式来提高代码的可维护性和可扩展性。
七、结论
通过本文，我们已经了解了如何使用arkts实现一个完整的象棋游戏。我们深入探讨了游戏的底层逻辑，包括棋子的移动规则、棋盘的渲染和用户交互的处理。此外，我们还介绍了如何通过代码优化和设计模式来提高游戏的性能和可维护性。通过本文，读者将能够了解如何构建一个具有较高可玩性和性能的象棋游戏。
最后，附上程序的全部代码：
function yidong(x_old:number,x_new:number,y_old:number,y_new:number,qipan:qizi[]){
if(x_old - x_new == 0 && y_old - y_new != 0){
let juli:number = y_new - y_old
if(Math.abs(juli) == 1){
return true
}else{
let count = 0
for(let i=1;i< Math.abs(juli);i++){
if(juli>0? !Number.isNaN(qipan[(y_old + i) * 9+x_old].x) :!Number.isNaN(qipan[(y_old - i) * 9+x_old].x)){
count += 1
}
}
if(count == 0){
return true
}else {return false}
}
}else if(y_old - y_new == 0 && x_old - x_new != 0){
let juli:number = x_new - x_old
if (Math.abs(juli) == 1) {
return true
}else {
let count = 0
for(let i=1;i< Math.abs(juli);i++){
if(juli>0? !Number.isNaN(qipan[y_old*9+x_old+i].x) :!Number.isNaN(qipan[y_old*9+x_old-i].x)){
count += 1
}
}
if(count == 0){
return true
}else {
return false
}
}
}else{
return false
}
}
function turn_x_y(index:number){
let x = index % 9
let y = Math.floor((index) / 9)
return [x,y]
}
class qizi{
word?:string
x?:number
y?:number
color?:number
constructor(word?:string,index?: number) {
this.word = word
this.x = index! % 9
this.y = Math.floor((index!) / 9)
}
guize(old_index:number,new_index:number,word:string,color:number,qipan:qizi[]):boolean{
let old:number[] = turn_x_y(old_index)
let xin:number[] = turn_x_y(new_index)
let x_old = old[0]
let y_old = old[1]
let x_new = xin[0]
let y_new = xin[1]
if(!Number.isNaN(qipan[new_index].x)){
if (qipan[new_index].color != color){
if (word === "兵") {
if(color == 1?old[1] > 4 :old[1] < 5) { return (color == 1? old[1] - xin[1]== 1: xin[1] - old[1]== 1&& old[0] - xin[0] == 0 )? true : false}
else{return ((color == 1? old[1] - xin[1]== 1: xin[1] - old[1]== 1&& Math.abs(old[0] - xin[0]) == 0) || (Math.abs(old[0] - xin[0]) == 1 && Math.abs(old[1] - xin[1]) == 0))? true : false }
}
else if(word === "馬"){
console.log("",qipan[73].x)
if(y_new - y_old == -2){
if(!Number.isNaN(qipan[(y_old - 1) * 9+x_old].x)){
return false
}else{
if((Math.abs(xin[0] - old[0]) == 1 && Math.abs(xin[1] - old[1]) == 2) || (Math.abs(xin[0] - old[0]) == 2 && Math.abs(xin[1] - old[1]) == 1)){
return true
}else{return false}}
}else if(y_new - y_old == 2){
if(!Number.isNaN(qipan[(y_old + 1) * 9+x_old].x)){
return false
}else{
if((Math.abs(xin[0] - old[0]) == 1 && Math.abs(xin[1] - old[1]) == 2) || (Math.abs(xin[0] - old[0]) == 2 && Math.abs(xin[1] - old[1]) == 1)){
return true
}else{return false}}
}else{
if((Math.abs(xin[0] - old[0]) == 1 && Math.abs(xin[1] - old[1]) == 2) || (Math.abs(xin[0] - old[0]) == 2 && Math.abs(xin[1] - old[1]) == 1)){
return true
}else{return false}
}
}
else if(word === "相"){
if (color == 1 ? y_new > 4 : y_new < 5){
if ( Math.abs(x_old - x_new) == 2 && Math.abs(y_old - y_new) == 2) {
console.log("",(y_old + y_new)/2 , (x_old + x_new))
if(!Number.isNaN(qipan[(y_old + y_new)/2 * 9 + (x_old + x_new)/2].x) ){
return false
}else {return true}
}else{
return false
}
}
}
else if(word === "士"){
if(Math.abs(x_old-x_new) == 1 && Math.abs(y_old - y_new) == 1){
if (x_new > 2 && x_new < 6 && (y_new < 3 || y_new > 6)) {
return true
}else {
return false
}
}else {
return false
}
}
else if(word === "将"){
if(Math.abs(x_old-x_new) == 1 && Math.abs(y_old - y_new) == 0|| Math.abs(y_old - y_new) == 1&& Math.abs(x_old-x_new) == 0){
if (x_new > 2 && x_new < 6 && (y_new < 3 || y_new > 6)) {
return true
}else {
return false
}
}else {
return false
}
}
else if(word === "車"){
return yidong(x_old,x_new,y_old,y_new,qipan)
}
else if(word === "炮"){
// 判断点击的是否是棋子
if(!!Number.isNaN(qipan[y_new* 9+x_new].x)){return yidong(x_old,x_new,y_old,y_new,qipan)}
else {
if(x_old - x_new == 0 && y_old - y_new != 0){
let juli:number = y_new - y_old
if(Math.abs(juli) == 1){
return true
}else{
let count = 0
for(let i=1;i< Math.abs(juli);i++){
if(juli>0? !Number.isNaN(qipan[(y_old + i) * 9+x_old].x) :!Number.isNaN(qipan[(y_old - i) * 9+x_old].x)){
count += 1
}
}
if(count == 1){
return true
}else {return false}
}
}else if(y_old - y_new == 0 && x_old - x_new != 0){
let juli:number = x_new - x_old
if (Math.abs(juli) == 1) {
return true
}else {
let count = 0
for(let i=1;i< Math.abs(juli);i++){
if(juli>0? !Number.isNaN(qipan[y_old*9+x_old+i].x) :!Number.isNaN(qipan[y_old*9+x_old-i].x)){
count += 1
}
}
if(count == 1){
return true
}else {
return false
}
}
}else{
return false
}
}
}
return false
}else {
return false
}
}else {
if (word === "兵") {
if(color == 1?old[1] > 4 :old[1] < 5) { return (color == 1? old[1] - xin[1]== 1: xin[1] - old[1]== 1&& old[0] - xin[0] == 0 )? true : false}
else{return ((color == 1? old[1] - xin[1]== 1: xin[1] - old[1]== 1&& Math.abs(old[0] - xin[0]) == 0) || (Math.abs(old[0] - xin[0]) == 1 && Math.abs(old[1] - xin[1]) == 0))? true : false }
}
else if(word === "馬"){
console.log("",qipan[73].x)
if(y_new - y_old == -2){
if(!Number.isNaN(qipan[(y_old - 1) * 9+x_old].x)){
return false
}else{
if((Math.abs(xin[0] - old[0]) == 1 && Math.abs(xin[1] - old[1]) == 2) || (Math.abs(xin[0] - old[0]) == 2 && Math.abs(xin[1] - old[1]) == 1)){
return true
}else{return false}}
}else if(y_new - y_old == 2){
if(!Number.isNaN(qipan[(y_old + 1) * 9+x_old].x)){
return false
}else{
if((Math.abs(xin[0] - old[0]) == 1 && Math.abs(xin[1] - old[1]) == 2) || (Math.abs(xin[0] - old[0]) == 2 && Math.abs(xin[1] - old[1]) == 1)){
return true
}else{return false}}
}else{
if((Math.abs(xin[0] - old[0]) == 1 && Math.abs(xin[1] - old[1]) == 2) || (Math.abs(xin[0] - old[0]) == 2 && Math.abs(xin[1] - old[1]) == 1)){
return true
}else{return false}
}
}
else if(word === "相"){
if (color == 1 ? y_new > 4 : y_new < 5){
if ( Math.abs(x_old - x_new) == 2 && Math.abs(y_old - y_new) == 2) {
console.log("",(y_old + y_new)/2 , (x_old + x_new))
if(!Number.isNaN(qipan[(y_old + y_new)/2 * 9 + (x_old + x_new)/2].x) ){
return false
}else {return true}
}else{
return false
}
}
}
else if(word === "士"){
if(Math.abs(x_old-x_new) == 1 && Math.abs(y_old - y_new) == 1){
if (x_new > 2 && x_new < 6 && (y_new < 3 || y_new > 6)) {
return true
}else {
return false
}
}else {
return false
}
}
else if(word === "将"){
if(Math.abs(x_old-x_new) == 1 && Math.abs(y_old - y_new) == 0|| Math.abs(y_old - y_new) == 1&& Math.abs(x_old-x_new) == 0){
if (x_new > 2 && x_new < 6 && (y_new < 3 || y_new > 6)) {
return true
}else {
return false
}
}else {
return false
}
}
else if(word === "車"){
return yidong(x_old,x_new,y_old,y_new,qipan)
}
else if(word === "炮"){
// 判断点击的是否是棋子
if(!!Number.isNaN(qipan[y_new* 9+x_new].x)){return yidong(x_old,x_new,y_old,y_new,qipan)}
else {
if(x_old - x_new == 0 && y_old - y_new != 0){
let juli:number = y_new - y_old
if(Math.abs(juli) == 1){
return true
}else{
let count = 0
for(let i=1;i< Math.abs(juli);i++){
if(juli>0? !Number.isNaN(qipan[(y_old + i) * 9+x_old].x) :!Number.isNaN(qipan[(y_old - i) * 9+x_old].x)){
count += 1
}
}
if(count == 1){
return true
}else {return false}
}
}else if(y_old - y_new == 0 && x_old - x_new != 0){
let juli:number = x_new - x_old
if (Math.abs(juli) == 1) {
return true
}else {
let count = 0
for(let i=1;i< Math.abs(juli);i++){
if(juli>0? !Number.isNaN(qipan[y_old*9+x_old+i].x) :!Number.isNaN(qipan[y_old*9+x_old-i].x)){
count += 1
}
}
if(count == 1){
return true
}else {
return false
}
}
}else{
return false
}
}
}
return false
}
}
}
class qizi_black extends qizi{
color:number = 1
constructor(word:string,index: number) {
super(word,index)
}
}
class qizi_red extends qizi{
color:number = 2
constructor(word:string,index: number) {
super(word,index)
}
}
let bing_black_1 = new qizi_black("兵",54)
let bing_black_2 = new qizi_black("兵",56)
let bing_black_3 = new qizi_black("兵",58)
let bing_black_4 = new qizi_black("兵",60)
let bing_black_5 = new qizi_black("兵",62)
let pao_black_1 = new qizi_black("炮",64)
let pao_black_2 = new qizi_black("炮",70)
let che_black_1 = new qizi_black("車",81)
let che_black_2 = new qizi_black("車",89)
let ma_black_1 = new qizi_black("馬",82)
let ma_black_2 = new qizi_black("馬",88)
let xiang_black_1 = new qizi_black("相",83)
let xiang_black_2 = new qizi_black("相",87)
let shi_black_1 = new qizi_black("士",84)
let shi_black_2 = new qizi_black("士",86)
let jiang_black = new qizi_black("将",85)
let bing_red_1 = new qizi_red("兵",27)
let bing_red_2 = new qizi_red("兵",29)
let bing_red_3 = new qizi_red("兵",31)
let bing_red_4 = new qizi_red("兵",33)
let bing_red_5 = new qizi_red("兵",35)
let pao_red_1 = new qizi_red("炮",19)
let pao_red_2 = new qizi_red("炮",25)
let che_red_1 = new qizi_red("車",0)
let che_red_2 = new qizi_red("車",8)
let ma_red_1 = new qizi_red("馬",1)
let ma_red_2 = new qizi_red("馬",7)
let xiang_red_1 = new qizi_red("相",2)
let xiang_red_2 = new qizi_red("相",6)
let shi_red_1 = new qizi_red("士",3)
let shi_red_2 = new qizi_red("士",5)
let jiang_red = new qizi_red("将",4)
@Entry
@Component
struct KeyEventExample {
onPageShow(): void {
for(let i=0;i<90;i++){
this.qipan?.push(new qizi())
}
for(let i of this.qizi_list){
this.qipan![i.y!*9+i.x!] = i
}
}
@Builder
quanpin_zhuanchang(){
Column(){
Button("点击开始游戏")
.onClick(()=>{
this.isshow = false
})
.width("60%")
.height(100)
.shadow({offsetX:0,offsetY:20,radius:100,color:"rgba(0,0,0,0.4)"})
}.width("100%").justifyContent(FlexAlign.Center)
.height("100%")
// .backgroundColor(Color.White)
.backgroundBlurStyle(BlurStyle.Thin)
}
@State qipan:qizi[] = []
@State qizi_list:qizi[] = [
bing_black_1,bing_black_2,bing_black_3,bing_black_4,bing_black_5,
bing_red_1,bing_red_2,bing_red_3,bing_red_4,bing_red_5,
pao_black_1,pao_black_2,pao_red_1,pao_red_2,
che_black_1,che_black_2,che_red_1,che_red_2,
ma_black_1,ma_black_2,ma_red_1,ma_red_2,
xiang_black_1,xiang_black_2,xiang_red_1,xiang_red_2,
shi_black_1,shi_black_2,shi_red_1,shi_red_2,
jiang_black,jiang_red
]
@State now_qizi:qizi | undefined = undefined
@State old_index:number = -1
@State huihe:number = 1
@State isshow:boolean = true
build() {
// 大框
Column(){
Column(){
// 棋盘
Grid(){
ForEach(this.qipan,(item:qizi_black|qizi_red,index)=>{
GridItem(){
Text(item == undefined?"" : item.word)
.fontColor(item == undefined? "" : item.color == 1? Color.Black : Color.Red)
.width(38)
.aspectRatio(1)
.border({width:item.word == undefined? "" :1,color:"rgba(0,0,0,0.3)"})
.borderRadius(19)
.fontSize(23)
.textAlign(TextAlign.Center)
.backgroundColor(item.word == undefined? "" :Color.White)
}
.onClick(()=>{
console.log(this.qipan.indexOf(jiang_black).toString())
if(this.now_qizi != undefined && this.huihe == this.now_qizi.color){
if(this.now_qizi.guize(this.old_index,index,this.now_qizi.word!,this.now_qizi.color!,this.qipan)){
this.qipan![index] = this.now_qizi.color == 1?new qizi_black(this.now_qizi.word!,index):new qizi_red(this.now_qizi.word!,index)
this.qipan[this.old_index] = new qizi()
this.huihe = this.huihe==1?2:1
}else{
AlertDialog.show({message:"落子不符合规则"})
}
this.now_qizi = undefined
}else{
this.now_qizi = this.qipan![index]
this.old_index = index
}
})
})
}
.columnsTemplate(" 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr")
.rowsTemplate(" 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr")
.width("100%").height(420)
}.backgroundImage($r("app.media.qipan"))
.backgroundImageSize({width:"100%"}).padding({top:20})
.width("100%").height(450).backgroundImagePosition(Alignment.Center)
.bindContentCover($$this.isshow,this.quanpin_zhuanchang())
.shadow({offsetX:2,offsetY:2,radius:100,color:"rgba(0,0,0,0.4)"})
}.justifyContent(FlexAlign.Center).width("100%").height("100%")
}
}
图片命名为——qipan
