使用easeljs和javascript为蛇游戏添加图像

时间：2014-01-30 10:19:12

标签： javascript canvas easeljs

这是index.html文件。     

<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>

这是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();
}

这是gamescreen.js文件。

 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;
    }


}
}
在gameScreen.js文件中，我使用蛇体添加的新蛇体并不是一个接一个追加。它正在添加一个在另一个之下。请建议我如何顺利地移动蛇体和一旦它与食物碰撞后添加的额外蛇部分。

1 个答案:

答案 0 :(得分：1)

我认为你问题的根源在于你没有预装你的图像。考虑来自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;

在进行位图声明之前，不会从服务器加载图像。因为加载图像是异步的，所以图像不一定会在到达行snake.regX = snake.image.width/2;时加载，并且宽度和高度都是0.您可以通过查看我添加的控制台日志来确认。关闭注册点后，您的所有定位也将关闭。

我的建议是使用属于套件的库来预加载图片。 http://www.createjs.com/Docs/PreloadJS/modules/PreloadJS.html

相关问题
最新问题