Q-Bert Part I TutorialIn this tutorial, I will try to explain how I wrote the SVG version of Q-Bert. We will go through the process step by step. In this first part I will cover the creation of the gameboard and the animated moves. Files
Structure of a fieldWe start with a simple description of a "field". One "field" consists of a "block" and the pathes which we will later use as motion pathes for the moves. 
<svg xmlns="http://www.w3.org/2000/svg">
<g transform="translate(200 200)">
<g id="wuerfel">
<path fill="darkblue" d="M-50 0L0 -25L50 0L0 25z"/>
<path fill="blue" d="M-50 0L-50 50L0 75L0 25z"/>
<path fill="#13007c" d="M50 0L50 50L0 75L0 25z"/>
<path stroke="black" stroke-width="1" fill="none" d="M0 0C0 -100 50 -75 50 75"/>
<path stroke="black" stroke-width="1" fill="none" d="M0 0C0 -100 -50 -75 -50 75"/>
<path stroke="black" stroke-width="1" fill="none" d="M0 0C0 -125 50 -175 50 -75"/>
<path stroke="black" stroke-width="1" fill="none" d="M0 0C0 -125 -50 -175 -50 -75"/>
</g>
</g>
</svg>
Creating the gameboardFirst we put the block field created in the last example and put it in a defs section. Additionaly we insert a group for the gameboard(id="gb").
<defs>
<g id="wuerfel">...</g>
</defs>
<g id="gb" transform="translate(400 100)"/>
Now we add a script that copies the group("wuerfel") and places these copies to the right position. Note! we add a new id for each copied path, so we can later reference them. 
Moving aroundWhat we need next is a character that can move around. For that we create a template ("bert_temp") , and the character that is actually moving around ("bert"). I also changed the structure of the file a bit , so one can move around the gameboard with a single animateMotion. 
<defs>
<radialGradient id="grd_12" cx="40%" cy="40%" fx="30%" fy="30%">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="black"/>
</radialGradient>
<g id="bert_temp">
<circle cx="0" cy="0" r="25" fill="url(#grd_12)"/>
</g>
<g id="wuerfel">...</g>
</defs>
<g transform="translate(400 100)">
<g id="gb"/>
<g id="bert" pointer-events="none" fill-opacity="1" transform="translate(0 -25)">
<use xlink:href="#bert_temp"/>
<animateMotion id="bmove" begin="indefinite" dur="0.4s" fill="freeze">
<mpath id="bm2" xlink:href="#tp"/>
</animateMotion>
</g>
</g>
Now it gets a bit more complicated. First we declare a few variables.
var isAnimating=0 //flag that holds the state of animation
var GameState="play" //game state will be used later, for now only "play" exists
var position=0 // current position on the board
var bm2=document.getElementById("bm2") //reference to the mpath of berts animateMotion
var mAnim=document.getElementById("bmove") // bert animateMotion element
mAnim.addEventListener("end",changeColor,false) //the changeColor function will only be use to set
isAnimating to 0 again
And add a few lines to the createGame() function. Since the transformation we set in the function will not take effect on the pathes when they get referenced by animateMotion, we have to add the transformation by hand, and we add an event listener for onclick to each field. This will, at first, look a bit strange, but the pathes are invisible so it doesnt matter. In the createGame() function we just added
n.setAttribute("onclick",
"selectMove("+p+")")
so we need a selectMove() function. This function checks if the move you selected is leagal, and if so executes it, by setting the apropriate path to the mPath element and then starting the animation. Position get incremented or decremented appropriatly ,and isAnimating is set to 1. As long as isAnimating is 1 no userinput will be alowed.
function selectMove(ind){
if(isAnimating==0){if(GameState=="play"){
if((position-8)==ind){
bm2.setAttribute("xlink:href","#ru_"+position)
position-=8
isAnimating=1
mAnim.beginElement()
}
if((position+8)==ind){
bm2.setAttribute("xlink:href","#rd_"+position)
position+=8
isAnimating=1
mAnim.beginElement()
}
if((position+1)==ind){if(ind!=8){
bm2.setAttribute("xlink:href","#ld_"+position)
position++
isAnimating=1
mAnim.beginElement()
}}
if((position-1)==ind){if(ind!=7){
bm2.setAttribute("xlink:href","#lu_"+position)
position--
isAnimating=1
mAnim.beginElement()
}}
}}
}
Now only one function is missing. It is quite simple as mentioned above.
function changeColor(){
isAnimating=0
}
Thats it for the first part, I hope it was informative. |
