I want to create a word-puzzle game, where the user creates words by moving over the grid of letters. I don’t understand how to implement the vertical and horizontal moving (only these directions should be enabled) and select letters in the grid. For this time I have added only animation of the size when ‘onDrag’ method is called. I use Canvas and drawRoundRect to create a movable rectangular.The code I wrote:
@Composable
fun GameField() {
var selectedWord by remember { mutableStateOf("") }
var offsetX by remember {
mutableStateOf(0f)
}
var offsetY by remember {
mutableStateOf(0f)
}
var width by remember {
mutableStateOf(0.dp)
}
var height by remember {
mutableStateOf(0.dp)
}
Box(
modifier = Modifier
.fillMaxWidth()
.height(200.dp),
contentAlignment = Alignment.Center
) {
LazyVerticalGrid(
columns = GridCells.Fixed(6),
modifier = Modifier,
verticalArrangement = Arrangement.spacedBy(1.dp)
) {
items(letters) { item ->
LetterItem(
letter = item,
modifier = Modifier,
selectedWord = selectedWord,
onWordSelected = { selectedWord = it }
)
}
}
MovableRectangle(
modifier = Modifier
.pointerInput(Unit) {
detectDragGestures(
onDragStart = { offset ->
offsetX = offset.x
offsetY = offset.y
},
onDrag = { change, dragAmount ->
width += dragAmount.x.toDp()
height += dragAmount.y.toDp()
},
onDragEnd = {
height = 0.dp
width = 0.dp
}
)
},
color = colorResource(id = Color.Blue),
width = width.value,
height = height.value,
offsetX = offsetX,
offsetY = offsetY,
)
}
}
New contributor
pplum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.