I am currently designing a custom animation for a checkers game. My goal is to create an effect where the checker piece moves slowly to its next spot on the board.
Below is the CSS code I have used:
@keyframes animateCheckerPiece {
0% {top: 80px}
50% {top: 270px}
100% {top: 80px}
}
.redChecker {
height: 50px;
width: 50px;
background-color: red;
border: solid red 2px;
border-radius: 40px;
position: relative;
}
Here is the HTML source code snippet:
<tr id="row_C">
<td id="C1" class="odd"></td>
<td id="C2" class="even"><div align="center"><div id="r9" class="redChecker" onClick="chooseMove(event);"></div></div></td>
<td id="C3" class="odd"></td>
<td id="C4" class="even"><div align="center"><div id="r10" class="redChecker" onClick="chooseMove(event);"></div></div></td>
<td id="C5" class="odd"></td>
<td id="C6" class="even"><div align="center"><div id="r11" class="redChecker" onClick="chooseMove(event);"></div></div></td>
<td id="C7" class="odd"></td>
<td id="C8" class="even"><div align="center"><div id="r12" class="redChecker" onClick="chooseMove(event);"></div></div></td>
</tr>
Given below is the JavaScript function used in the implementation:
var piece, getId;
function chooseMove(event) {
"use strict";
getId = event.target.id;
document.getElementById(getId).style.borderColor = "yellow";
$("td").addClass("hover");
$("#msg").html("Choose a spot to move to");
}
function movePiece(event) {
"use strict";
var piece = getId;
var getLocId = event.target.id;
$(piece).animate({
top: "-=30px",
}, 2000);
}