ActionScript 3.0/Tutorial

Een Snake Game maken

Dit is een tutorial hoe je het spelletje Snake kunt maken. In dit spel ben je een slang die fruit moet pakken. Dan groeit de slang met één segment. De slang wordt steeds langer naarmate je meer fruit eet. Het fruit verplaatst zich op het moment dat je het eet naar een willekeurige plek en daar moet je dan weer heen. Je bent af als je de muur raakt. In deze versie ben je niet af als de slang zichzelf raakt, omdat het dan nu te ingewikkeld zou worden.

Voordat je begint

Je hebt maar twee dingen in je bibliotheek, namelijk het slanggedeelte en het voedsel. Het slanggedeelte hebben we hier SnakePart genoemd en het voedsel simpelweg Food. Je maakt bijvoorbeeld een groen rondje in Flash en zet het daarna om in een symbool via Wijzigen en dan Omzetten in symbool. Je geeft het dan de naam en maakt er een filmclip van bij Type.

Begin

Het eerste stukje code is vrij simpel. Je hebt eerst de typische dingen zoals display, events en text. Daarna krijg je een timer, omdat de slang met een regelmatige interval moet bewegen. Als laatste van dit stuk heb je dan ook nog een geometrisch punt voor een positionering. Hieronder zie je de actionscript code

Package {
Import flash.display.*;
Import flash.events.*;
Import flash.text.*;
Import flash.utils.Timer;
Import flash.geom.Point;
Public class Snake1 extends MovieClip {

Je hebt hieronder een aantal constanten. Je hebt als eerste dat je de grid, het schermpje waar je in speelt, die maak je 20 bij 20. De snelheid staat bij startSpeed is 200 milliseconden, wat betekent dat de slang 5 keer per seconde een beweging maakt. En daaronder is het startpunt waar de slang begint als je het spel opent. Je ziet dat je de getallen kan delen door 20 in verband met de gridsize.

Hieronder zie je de actionscript code

//constants
Private const gridSize:int = 20;
Private const rightWall:int = 520;
Private const leftWall:int =0;
Private const topWall:int = 0;
Private const bottomWall:int = 380;
Private const startSpeed:int = 200;
Private const startPoint:Point = new Point(260,180);

Nu zet je alles in de sprite, die we gameSprite noemen. Je hebt ook food, waar het nieuwe eten wordt gemaakt als de slang het ene opeet. Daaronder heb je de timer, die zorgt voor regelmatige intervallen zodat de slang beweegt. En dan heb je ook nog de array bij snakeParts, omdat we natuurlijk meer dan één gedeelte willen maken.

Hieronder zie je de actionscript code

//game state
Private var gameSprite: Sprite;
Private var food:Food = new Food();
Private var gameTimer:Timer;
Private var snakeParts:Array;

Nu zetten we ermee hoe we slang willen laten bewegen. X wordt hier op 0 gezet dat betekent dat de slang elke beurt naar rechts gaat. En als je de Y op 0 zet ga je naar boven en als het 1 zou zijn dan gaat die naar beneden.

Hieronder zie je de actionscript code

//snake velocity
Private var snakeMoveX:Number = 0;
Private var snakeMoveY: Number= 0;
Private var nextMoveX:Number = 1;
Private var nextMoveY:Number = 0;

Nu moeten we eerst de sprite aanmaken, zodat alles in de gameSprite zit.

Hieronder zie je de actionscript code

Public function Snake();
// create game sprite
gameSprite = new Sprite();
addChild(gameSprite);

Hier maken we eerst de snakePartsarray. Dan maken we alleen firstSnakePart en die komt gewoon uit de bibliotheek. Daarna zetten we dat naar het startpunt. En met snakeParts.push(firstSnakePart) zetten we het op de array en daarna voegen we het toe aan de gamesprite.

Hieronder zie je de actionscript code

//create first part of snake
snakeParts = new Array();
var firstSnakePart = new SnakepPart();
firstSnakePart.x = startPoint.x;
firstSnakePart.y=startPoint.y;
snakeParts.push(firstSnakePart);
gameSprite.addChild(firstSnakePart);

Hier doen we nog eens hetzelfde maar dan met food.

Hieronder zie je de actionscript code

// create first food
gameSprite.addChild(food);
placeFood();

De besturing

Je wilt de slang natuurlijk kunnen bewegen. Hiervoor gebruiken we de keyDownFunction, deze functie reageert op een "key" oftewel een toets van je toestenbord die wordt ingedrukt. Omdat je gebruikt maakt van verschillende toetsen zul je de functie If moeten gebruiken. Vervolgens zeg je wat de if functie moet doen. Bij de eerste if wordt de voorwaarde gesteld dat de gebeurtenis het indrukken is van de toets 37, dit is het naar links, de variabele snakeMoveX gelijk wordt gesteld aan -1. Dit doe ook voor het naar boven pijltje (code 40), het naar beneden pijltje (code 38) en het naar rechts pijltje (code 39).

Hieronder zie je de actionscript code

Public function keyDownFunction(event:KeyboardEvent) { 
If (event.keyCode == 37) {
snakeMoveX = -1;
snakeMoveY= 0;
}
Else If (event.keyCode == 39) {
snakeMoveX = 1;
nextMoveY= 0;
}
Else If (event.keyCode == 38) {
snakeMoveX = 0;
snakeMoveY= -1;
}
Else If (event.keyCode == 40) {
nextMoveX = 0;
nextMoveY= 1;
}

Om de slang daadwerkelijk van richting te laten veranderen maken we zelf een functie aan genaamd moveSnake. Deze functie is afhankelijk van de gebeurtenissen van de Timer en dit zetten we dan ook in de voorwaarde. Dan nemen wij de x en de y van het eerste deel van de slang en stellen dit gelijk aan de dus nieuwe snakeMoveX en snakeMoveY maal de grote van het scherm, zodat de slang zich in deze beweging zal verplaatsen met de juiste snelheid.

Hier onder zie je de actionscript code

Public function moveSnake(event:TimerEvent) {
snakeParts[0].x += snakeMoveX*gridSize;
snakeParts[0].y += snakeMoveY*gridSize;
}

Kijken voor een botsing

We gaan nu kijken of de slang niet tegen een muur "aanbotst" dit doen we met de If functie. De slang botst tegen een muur aan als zijn waardes voor het bewegen groter is dan de rechtermuur of kleiner is dan de linkermuur of groter is dan de onderkant of kleiner is dan de bovenkant. Dit kunnen we doen doordat we alle kanten een waarde hebben gegeven. Dit moet dus allemaal in de voorwaarde worden gezet dit doe je door || te gebruiken. (Dit krijg je door tweemaal op de toets boven de enter te drukken, terwijl je shift ingedrukt houdt). Als dit het geval is dan is het spel afgelopen, doordat de functie Gameover wordt geactiveerd die we later nog zullen aanmaken. Maar als dit niet het geval is moeten we kijken of de slang misschien eten raakt. Dit doe je ook met de if-functie waar je nu in de voorwaarde de x en y van de slang gelijk stelt aan de x en de y van het voedsel, want anders raakt de slang het voedsel niet. Als dit gebeurt, wordt er nieuw voedsel geplaatst door de functie placeFood en er wordt door de functie newSnakePart een deel van de slang gemaakt, deze twee functies zullen we later nog aanmaken. Ook wordt de vertraging van de Timer die we hebben ingesteld verminderd met twee waardoor de slang zich sneller zal verplaatsen en het spel dus moeilijker wordt. Om het aangemaakt deel van de slang toe te voegen wordt de functie placeTail aangeroepen die we later zullen maken en stel je de coördinaten van het eerste deel van de slang gelijk aan de snakeMoveX en snakeMovey.

Hieronder zie je de actionscript code

If ((snakeMoveX > rightWall) || (snakeMoveX < leftWall) || (snakeMoveY > bottomWall) || (snakeMoveY < topWall)) {
gameOver(); }
Else ((snakeMoveX ==food.x) && (snakeMoveY ==food.y)) {
placeFood();
newSnakePart();
gameTimer.delay -=2;
}
placeTail();
snakeParts[0].x = newX;
snakeParts[0].y = newY;
}

Het plaatsen van het voedsel

Om verder te komen met dit spel moet je met je slang voedsel eten. We gaan nu bezig met de code die ervoor zorgt dat het voedsel op willekeurige plaatsen op het scherm wordt geplaatst. Om het voedsel te plaatsen maken we zelf een functie aan, genaamd placeFood. Deze functie maakt een variabele foodX en foodY aan waarin een cijfer wordt geplaatst en hierdoor moeten we aangeven dat het om een int gaat. Voor het x coördinaat laat het een willekeurig getal vermenigvuldigen met de rechtermuur min de linkermuur deelt dit door de grote van het scherm en vermenigvuldig het weer met de grote van het scherm, zodat er een getal uitkomt dat voorkomt in het scherm. Dit doe je ook voor de y coördinaat met de onderkant en bovenkant van het scherm. Vervolgens stel je de FoodX en FoodY gelijk aan Food.x en Food.y, want die omschrijving heb je gebruikt om te kijken of de slang niet tegen voedsel "botst".

Hier is de code

Public function placeFood() {
Var foodX:int = Math.floor(Math.random()*(rightWall - leftWall)/gridSize)*gridSize;
Var foodY:int = Math.floor(Math.random()*(bottomWall – topWall)/gridSize)*gridSize;
Food.x = foodX;
Food.y = foodY;
}

Toevoegen van de staart

Als de slang voedsel gegeten heeft zal hij groeien en komt er dus een deel van een staart bij dit doen we met de functie die we placeTail noemen, maar voor we dit kunnen doen zullen we eerst een snakePart moeten aanmaken. Dit doen we met de functie newSnakePart, deze functie maak teen variabele newPart aan waarin een snakePart wordt geplaatst. Dit newPart voegen we toe aan het spel door de functie addChild te gebruiken en een newPart bij de snakeParts te doen. Vervolgens zal de functie placeTail dit nieuwe snakePart toevoegen op de een plekje na de snakePart die er al was. Op voorwaarde dat de aangemaakte i groter is als nul als dit zo is zal dit worden gedaan en er wordt één bij de i opgeteld.

Hier is de code

Public function newSnakePart() {
Var newPart:SnakePart = new SnakePart();
gameSprite.addChild(newPart);
snakeParts.push(newPart);
}

Public function placeTail(){
For(var i:int=snakeParts.length-1;i>0;i==){
snakeParts[i].x = snakeParts[i-1].x;
snakeParts[i].y = snakeParts[i-1].y;
}

Game Over

Als je de muur raakt is het de bedoeling dat de game stopt en je dus Game Over bent. Dit doen we door zelf een functie gameOver aan te maken. Deze functie haalt de KeyboardEvent keyDownFunction weg uit de lijst van gebeurtenissen waardoor je de slang niet meer kunt besturen en het stopt de Timer waardoor de slang ook niet meer zal bewegen, want de beweging van de slang is namelijk afhandelijk van de tijd.

Public function gameOver(){
Stage.removeEventlistener(KeyboardEvent.KEY_DOWN, keyDownFunction);
gameTimer.stop();