CODEWITHSUNDEEP
javascriptcanvaseaseljs
monisha
monisha

Reputation: 245

appending images using easeljs and javascript for snake game

This is index.html file. 

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Dragon Progression</title>
<script type="text/javascript" src="library/easeljs-0.6.0.min.js"></script>
<script type="text/javascript" src="libs/ndgmr.Collision.js"></script>
<script type="text/javascript" src="js/startScreen.js"></script>
<script type="text/javascript" src="js/gameScreen.js"></script>

</head>

<body onLoad="renderStartScreen()">

<canvas id="canvas1" width="1024" height="698">

    Browser does not support canvas. Please upgrade browser.

    </canvas>

</body>  </html>

This is StartScreen.js

var introBackground;
var startScreenBtn;
var startScreenBtnImg;
var stage;
var stageHeight;
var stageWidth;
//this function render start screen
function renderStartScreen()
{
stage = new createjs.Stage("canvas1");
stage.enableMouseOver();
stageWidth = document.getElementById("canvas1").width;
stageHeight = document.getElementById("canvas1").height;

introBackground = new createjs.Bitmap("assets/images/bg.jpg");
introBackground.x = introBackground.y = 0;
stage.addChild(introBackground);

startScreenBtn = new createjs.Container();
startScreenBtn.x = 500;
startScreenBtn.y = 300;
startScreenBtnImg =  new createjs.Bitmap("assets/images/start_button_normal.png");
stage.addChild(startScreenBtn);
startScreenBtn.addChild(startScreenBtnImg);


var btnBg = new createjs.Shape();
btnBg.graphics.beginFill("#FFFFFF");
btnBg.graphics.drawRect(0, 0, 143, 35); 
btnBg.alpha = 0.01;
startScreenBtn.addChild(btnBg);
startScreenBtn.addEventListener("mouseover", onstartScreenBtnOver);
startScreenBtn.addEventListener("mouseout", onstartScreenBtnOut);
startScreenBtn.addEventListener("click", onstartScreenBtnClick);
createjs.Ticker.setFPS(45);
createjs.Ticker.addEventListener("tick", startScreenTickHandler);

}
//event handler function get called on start button roll over
function onstartScreenBtnOver()
{
startScreenBtnImg.image.src = "assets/images/start_button_over.png";
}
//event handler function get called on start button roll out
function onstartScreenBtnOut()
{
startScreenBtnImg.image.src = "assets/images/start_button_normal.png";
}
//event handler function get called on start button click
function onstartScreenBtnClick(event)
{
cleanupStartScreen();
}
//event handler function get called on specified interval 
function startScreenTickHandler()
{
stage.update();
}
//clean start screen and loads main game
function cleanupStartScreen()
{
stage.removeAllChildren();
stage.update();
stage.removeAllEventListeners();
createjs.Ticker.removeEventListener("tick", startScreenTickHandler);
loadMainGame();
}

This is gamescreen.js file.

 var background;
var snakeArray = [];
//var snakeBody;
var snake;
var snakeWidth=25;
var food;
var keyCode;
var CHECK_HIT_ALPHA = 1;
var currDirection;
var tempX;
var tempY;
var prevX;
var prevY;


function loadMainGame()
{
background = new createjs.Bitmap("assets/images/loading_background.jpg");
background.x=0;
background.y=0;
//snake = new createjs.Container();


//snakeTail = new createjs.Shape();
//snakeTail.graphics.beginFill("#E2DC1E").drawPolyStar(40,65,15,3,0,360);
createSnakeHead();
createFood();
snakeArray.currDirection = "";
stage.addChild(background,snake,food);
createjs.Ticker.addEventListener("tick", snakeMovement);
//createjs.Ticker.addEventListener("tick", snakeBodyMovement);
window.onkeydown=function(e)
{

    keyCode = e.keyCode || e.which || window.Event; 
    if(keyCode == 37 && currDirection != "right")
    {
        currDirection = "left";
        snake.rotation= -90;
        tempX = snakeArray[0].x;
        tempY = snakeArray[0].y;
    }
    else if(keyCode == 39 && currDirection !="left")
    {
        currDirection = "right";
        snake.rotation = 90;
        tempX = snakeArray[0].x;
        tempY = snakeArray[0].y;
    }
    else if(keyCode == 38 && currDirection != "down")
    {
        currDirection = "up";
        snake.rotation = 360;
        tempX = snakeArray[0].x;
        tempY = snakeArray[0].y;
    }
    else if(keyCode == 40 && currDirection != "up")
    {
        currDirection = "down";
        snake.rotation = 180;
        tempX = snakeArray[0].x;
        tempY = snakeArray[0].y;
    }
}

}
function createSnakeHead()
{
    snake = new createjs.Bitmap("assets/images/snake.png");
snake.type = "head";
var randX = Math.floor(Math.random()*800);
var randY = Math.floor(Math.random()*500);
snake.x = randX;
snake.y = randY;
snake.regX = snake.image.width/2;
snake.regY = snake.image.height/2;
snakeArray.push(snake);
}

function createFood()
{
food = new createjs.Bitmap("assets/images/food.png");
 var randX = Math.floor(Math.random()*800);
var randY = Math.floor(Math.random()*500);
food.x = randX;
food.y = randY;
}

function snakeMovement()
{
 console.log(snakeArray.length);
for(var i=0;i<=snakeArray.length-1;i++)
 {
     if(currDirection=="left")
     {
        snakeArray[i].rotation= -90;
        snakeArray[i].x = snakeArray[i].x - 2;
         prevX = snakeArray[i].x;
         prevY = snakeArray[i].y;
         if (snakeArray[i].x <= 0) 
        {
            snakeArray[i].x = stageWidth; 
         }
        snakeBodyMovement(prevX,prevY);
     }
     else if(currDirection == "right")
    {
         //tempX = snakeArray[0].x;
         snakeArray[i].rotation= 90;
        snakeArray[i].x = snakeArray[i].x + 2;
        prevX = snakeArray[i].x;
        prevY = snakeArray[i].y;
         if (snakeArray[i].x  >= stageWidth) 
        {
            snakeArray[i].x = 0; 
        }
         snakeBodyMovement(prevX,prevY);
         snakeArray[i].currDirection = "right";
     }
     else if(currDirection == "up")
    {
        //tempY = snakeArray[0].y;
        snakeArray[i].rotation= 360;
        snakeArray[i].y = snakeArray[i].y - 2;
        prevX = snakeArray[i].x;
        prevY = snakeArray[i].y;
         if(snakeArray[i].y <=0)
         {
             snakeArray[i].y = stageHeight;
         }
         snakeBodyMovement(prevX,prevY);
        snakeArray[i].currDirection = "up";
    }
     else if(currDirection == "down")
     {
         //var tempY = snakeArray[0].y;
         snakeArray[i].rotation= 180;
         snakeArray[i].y = snakeArray[i].y + 2;
         prevX = snakeArray[i].x;
         prevY = snakeArray[i].y;
         if(snakeArray[i].y >= stageHeight)
         {
            snakeArray[i].y = 0;
        }
         snakeBodyMovement(prevX,prevY);
         snakeArray[i].currDirection = "down";
     }
 }
foodSnakeCollision();
stage.update();
}

function foodSnakeCollision()
{
var intersection = ndgmr.checkPixelCollision(snake,food,CHECK_HIT_ALPHA);
if(intersection)    
{
    console.log("Eat food");
    var randX = Math.floor(Math.random()*800);
    var randY = Math.floor(Math.random()*500);
    food.x = randX;
    food.y = randY;
    createSnake();  
}
}

function createSnake()
{   
var snakeBody = new createjs.Bitmap("assets/images/snake.png");
snakeBody.type = "body";
snakeBody.regX = snake.image.width/2;
 snakeBody.regY = snake.image.height/2;
if(currDirection=="left")
{   

    snakeBody.x = snakeArray[snakeArray.length-1].x + 25;
    snakeBody.y =snakeArray[snakeArray.length-1].y +0;
}
if(currDirection == "right")
{
     snakeBody.x = snakeArray[snakeArray.length-1].x - 25;
    snakeBody.y =snakeArray[snakeArray.length-1].y - 0;
}
if(currDirection == "up")
{
    snakeBody.x = snakeArray[snakeArray.length-1].x + 0;
    snakeBody.y =snakeArray[snakeArray.length-1].y + 25;
}
if(currDirection == "down")
{
    snakeBody.x = snakeArray[snakeArray.length-1].x - 0;
    snakeBody.y =snakeArray[snakeArray.length-1].y - 25;
}
snakeArray.push(snakeBody);
console.log(snakeArray.length + "after collision");
stage.addChild(snakeBody);
}

function snakeBodyMovement(prevX,prevY)
{
for(var i=1;i<=snakeArray.length-1;i++)
{
    if(currDirection == "left")
    {
        snakeArray[i].x = prevX + 15;
        snakeArray[i].y = prevY;
    }
    else if(currDirection == "right")
    {
        snakeArray[i].x = prevX - 15;
        snakeArray[i].y = prevY;
    }
    else if(currDirection == "up")
    {
        snakeArray[i].x = prevX;
        snakeArray[i].y = prevY + 15;
    }
    else if(currDirection == "down")
    {
        snakeArray[i].x = prevX;
        snakeArray[i].y = prevY - 15;
    }


}
}

in gameScreen.js file,the new snakebody that i add using snakebody is not appending one after the other. It is adding one below the other.Please suggest how do i smoothly move the snake body and the additional snake parts that gets added once it collides with the food.

Upvotes: 1

Views: 648

Answers (1)

Andrew
Andrew

Reputation: 1030

I think the root of your problem here is that you aren't preloading your images. Consider your code block from GameScreen.js

snake = new createjs.Bitmap("assets/images/snake.png");
snake.type = "head";
var randX = Math.floor(Math.random()*800);
var randY = Math.floor(Math.random()*500);
snake.x = randX;
snake.y = randY;
console.log("Snake head width: " + snake.image.width);
snake.regX = snake.image.width/2;
snake.regY = snake.image.height/2;

The image isn't loaded from the server until the declaration of the Bitmap is made. Because loading images is asynchronous, your image won't necessarily be loaded by the time it hits the line snake.regX = snake.image.width/2; and the width and height will both be 0. You can confirm this by looking at the console log I have added. With your registration points off, all your positioning will be off as well.

My suggestion would be to use the library that is part of the suite to preload your images. http://www.createjs.com/Docs/PreloadJS/modules/PreloadJS.html.

Upvotes: 1

Related Questions