| michaelvb101 |
01-28-2013 07:22 PM |
Javascipt/EaselJS Game Only Works on 1 Computer (Noob)
I have to start with that I have no real experience in javascript. This is the first game I have ever made.
I'm working on a game for kids, where you have a player chasing letters to make a word.
The problem that I have is pretty weird. The game that I build works perfectly on the computer I build it on, but it doesn't work on other computers.
I have no idea if it's the code or that it has something to do with programs installed on the pc.
If anyone can help me out, that would be great! I've been trying for the last 3 days to fix it.
Game is online at: http://athena.fhict.nl/users/i286940/game2/
.Rar file with all files used: http://athena.fhict.nl/users/i286940/game2/game2.rar
Please help me out!!
Code:
<!DOCTYPE html>
<html>
<head>
<title>Proftaak Game</title>
<!-- Import EaselJS Framework -->
<script src="easel.js"></script>
<script src="checklopen.js"></script>
</head>
<body onload="startNu();">
<canvas id="testCanvas" width="800" height="600" onclick=startGame();>
</canvas>
</body>
</html>
Script:
Code:
var canvas;
var stage;
var numberOfImagesLoaded = 0;
var Player = new Image();
var rechtslopen = false;
var linkslopen = false;
var springen = false;
var rechtsIngedrukt = false;
var linksIngedrukt = false;
var spatieIngedrukt = false;
var springtNu = false;
var springdelay = 0;
var xSpeed = 0;
var ySpeed = 6;
var letter1Raak = false;
var letter2Raak = false;
var letter3Raak = false;
var letter4Raak = false;
var gameisgestart = false;
var woordGoed;
var woord;
//Geluid
var h2 = new Audio("h2.mp3");
var o2 = new Audio("o2.mp3");
var n2 = new Audio("n2.mp3");
var d2 = new Audio("d2.mp3");
var jump2 = new Audio("jump2.mp3");
var cheer = new Audio("cheer.mp3");
var hit = new Audio("hit2.mp3");
var snd = new Audio("geluid.mp3");
//Platformen
var platform;
var platformSrc = new Image();
var platform2;
var platform2Src = new Image();
var platform3;
var platform3Src = new Image();
var platform4;
var platform4Src = new Image();
var platform5;
var platform5Src = new Image();
var platform6;
var platform6Src = new Image();
var hondPlaatje;
var hondPlaatjeSrc = new Image();
// Achtergrond
var achtergrond;
var achtergrondSrc = new Image();
// Beginscherm
var beginscherm;
var beginschermSrc = new Image();
var button;
var buttonSrc = new Image();
//Enemy
var enemyImg = new Image();
var enemys; //declaratie
enemys = new Array(); // initialisatie geen argumente
//functie van het opstarten
function startNu()
{
canvas = document.getElementById("testCanvas");
Player.onload = handleImageLoad;
Player.onerror = handleImageError;
Player.src = "Player.png";
platformSrc.onload = handleImageLoad;
platformSrc.onerror = handleImageError;
platformSrc.src = "platform.png";
platform2Src.onload = handleImageLoad;
platform2Src.onerror = handleImageError;
platform2Src.src = "platform2.png";
platform3Src.onload = handleImageLoad;
platform3Src.onerror = handleImageError;
platform3Src.src = "platform3.png";
platform4Src.onload = handleImageLoad;
platform4Src.onerror = handleImageError;
platform4Src.src = "platform4.png";
platform5Src.onload = handleImageLoad;
platform5Src.onerror = handleImageError;
platform5Src.src = "platform5.png";
platform6Src.onload = handleImageLoad;
platform6Src.onerror = handleImageError;
platform6Src.src = "platform6.png";
hondPlaatjeSrc.onload = handleImageLoad;
hondPlaatjeSrc.src = "hond.png";
achtergrondSrc.src = 'achtergrond.png';
achtergrondSrc.name = 'achtergrond';
achtergrondSrc.onload = handleImageLoad;
beginschermSrc.src = 'beginscherm.jpg';
beginschermSrc.name = 'beginscherm';
beginschermSrc.onload = handleImageLoad;
enemyImg.src = 'enemy2.png';
// Letters aanmaken als tekst. Letters worden random op het scherm neergezet.
letter1 = new Text("H", "72px Arial bold", "red");
letter1.x = Math.random() * 700 + 50 ;
letter1.y = Math.random() * 500 + 50;
letter2 = new Text("O", "72px Arial bold", "red");
letter2.x = Math.random() * 700 + 50 ;
letter2.y = Math.random() * 500 + 50;
letter3 = new Text("N", "72px Arial bold", "red");
letter3.x = Math.random() * 700 + 50 ;
letter3.y = Math.random() * 500 + 50;
letter4 = new Text("D", "72px Arial bold", "red");
letter4.x = Math.random() * 700 + 50 ;
letter4.y = Math.random() * 500 + 50;
//Dit is voor het eindscherm
woordGoed = new Text("Goed Gedaan!", "72px Arial bold", "red");
woordGoed.x = 100;
woordGoed.y = 100;
woord = new Text("Het woord was HOND", "52px Arial", "green");
woord.x = 50;
woord.y = 200;
}
// Functie die images laadt, plaatjes worden eerst geladen en de game gaat pas verder als alle plaatjes zijn geladen.
function handleImageLoad(e)
{
if(e.target.name = 'achtergrond')
{
achtergrond = new Bitmap(achtergrondSrc);
}
if(e.target.name = 'platform')
{
platform = new Bitmap(platformSrc);
}
if(e.target.name = 'platform2')
{
platform2 = new Bitmap(platform2Src);
}
if(e.target.name = 'platform3')
{
platform3 = new Bitmap(platform3Src);
}
if(e.target.name = 'platform4')
{
platform4 = new Bitmap(platform4Src);
}
if(e.target.name = 'platform5')
{
platform5 = new Bitmap(platform5Src);
}
if(e.target.name = 'platform6')
{
platform6 = new Bitmap(platform6Src);
}
if(e.target.name = 'beginscherm')
{
beginscherm = new Bitmap(beginschermSrc);
}
numberOfImagesLoaded++;
// als 10 plaatjes zijn geladen, dan gaat de game verder.
if (numberOfImagesLoaded == 10)
{
numberOfImagesLoaded = 0;
beginScherm();
}
}
//functie voor het beginscherm
function beginScherm()
{
stage = new Stage(canvas);
stage.addChild(beginscherm);
onClick = clickHandler; //als er wordt geklikt, dan startgame
stage.update();
}
function clickHandler(e)
{
startGame();
}
// Functie als je Game Start
function startGame()
{
gameisgestart = true;
// Maak een stage en connect met de canvas
stage = new Stage(canvas);
stage.addChild(achtergrond);
//keyup en down
document.onkeydown = handleKeyDown;
document.onkeyup = handleKeyUp;
// Maak een sprite van monster rennen
var spriteSheet = new SpriteSheet
(
{
//Welke plaatje
images: [Player],
//Breedte en hoogte van sprites
frames: { width:64, height:64, regX:32, regY: 32 },
animations:
{
walk: [0, 9, "walk", 4],
die: [10, 21, false, 4],
jump: [22, 32, "jump", 4],
celebrate: [33, 43, "celebrate", 1],
idle: [44, 44]
}
})
//BMP Player Configuratie
bmpAnimation = new BitmapAnimation(spriteSheet);
bmpAnimation.name = "Player";
bmpAnimation.x = 50;
bmpAnimation.y = 0;
bmpAnimation.scaleX = 1.5;
bmpAnimation.scaleY = 1.5;
hondPlaatje = new Bitmap(hondPlaatjeSrc);
// bmpAnimation.gotoAndPlay("celebrate");
platform.x = 0;
platform.y = 400;
platform2.x = 300;
platform2.y = 400;
platform3.x = 635;
platform3.y = 400;
platform4.x = 150;
platform4.y = 250;
platform5.x = 500;
platform5.y = 250;
platform6.x = 340;
platform6.y = 100;
hondPlaatje.x = 100;
hondPlaatje.y = 230;
//zet alles op het scherm
stage.addChild(bmpAnimation, platform, platform2, platform3, platform4, platform5, platform6, letter1);
stage.update();
//ticker instellingen
Ticker.addListener(window);
Ticker.useRAF = true;
Ticker.setFPS(80);
}
//Functie als images niet laden
function handleImageError(e)
{
console.log("Error Loading Image : " + e.target.src);
}
//Tick functie, wordt elke frame ge-update
function tick()
{
if (gameisgestart)
{
maakEnemys();
}
if (enemys.length != 0) {
for (var i = 0; i < enemys.length; i++) {
var currentEnemy = enemys[i];
currentEnemy.x -= 5;
if (currentEnemy.x < -100) {
stage.removeChild(currentEnemy);
enemys.splice(i, 1);
}
}
}
//Botsing detector
if (enemys.length != 0) {
for (var enemy = 0; enemy < enemys.length; enemy++) {
var aEnemy = enemys[enemy];
//variabelen om te kijken of enemy.y+x en enemy.y+x gelijk zijn
var yas = aEnemy.y - bmpAnimation.y;
var xas = aEnemy.x - bmpAnimation.x;
//if statement die kijkt of botsing gebeurd, en daarna enemy verwijdert van stage en uit array.
if (xas < 10 && xas > -80 && yas < 40 && yas > -70 ) {
stage.removeChild(aEnemy);
enemys.splice(enemy, 1);
hit.play();
stage.update();
}
}
stage.update();
}
if (gameisgestart) {
//Kijkt of speler de letter raakt.
var yas2 = letter1.y - bmpAnimation.y;
var xas2 = letter1.x - bmpAnimation.x;
if (letter1Raak == false && letter2Raak == false && letter3Raak == false && letter4Raak == false && xas2 < 10 && xas2 > -60 && yas2 < 80 && yas2 > -10) {
h2.play();
letter1Raak = true;
letter2Raak = false;
letter3Raak = false;
letter4Raak = false;
stage.removeChild(letter1);
stage.addChild(letter2);
}
//Kijkt of speler de letter2 raakt.
var yas3 = letter2.y - bmpAnimation.y;
var xas3 = letter2.x - bmpAnimation.x;
if (letter1Raak == true && xas3 < 10 && xas3 > -60 && yas3 < 80 && yas3 > -10) {
o2.play();
letter1Raak = false;
letter2Raak = true;
letter3Raak = false;
letter4Raak = false;
stage.removeChild(letter2);
stage.addChild(letter3);
}
//Kijkt of speler de letter3 raakt.
var yas4 = letter3.y - bmpAnimation.y;
var xas4 = letter3.x - bmpAnimation.x;
if (letter2Raak == true && xas4 < 10 && xas4 > -60 && yas4 < 80 && yas4 > -10) {
n2.play();
letter1Raak = false;
letter2Raak = false;
letter3Raak = true;
letter4Raak = false;
stage.removeChild(letter3);
stage.addChild(letter4);
}
//Kijkt of speler de letter4 raakt.
var yas5 = letter4.y - bmpAnimation.y;
var xas5 = letter4.x - bmpAnimation.x;
if (letter3Raak == true && xas5 < 10 && xas5 > -60 && yas5 < 80 && yas5 > -10) {
d2.play();
letter1Raak = false;
letter2Raak = false;
letter3Raak = false;
letter4Raak = true;
stage.removeChild(letter4);
}
//Als laatste letter geraakt wordt... dan verwijdert ie elementen en voegt elementen toe voor eindscherm
if (letter4Raak)
{
letter4Raak = false;
stage.removeChild(bmpAnimation, platform, platform2, platform3, platform4, platform5, platform6, letter1, enemys);
stage.addChild(woord,woordGoed,hondPlaatje);
cheer.play();
}
}
if (gameisgestart)
{
//functie lopen
checkLopen();
}
//functie voor springen
if (spatieIngedrukt)
{
checkSpringen();
}
//Functie voor achtergrond muziek
if (!snd.play())
{
snd.play();
}
stage.update();
}
//Functie als toets indrukt
function handleKeyDown(e)
{
//cross browser issues exist ( komt later)
if ( !e )
{
var e = window.event;
}
if ( e.keyCode == 39 )
{
rechtsIngedrukt = true;
stage.update();
}
if (e.keyCode == 32 )
{
spatieIngedrukt = true;
stage.update();
}
if ( e.keyCode == 37 )
{
linksIngedrukt = true;
stage.update();
}
}
//Functie als key loslaat
function handleKeyUp(e)
{
//cross browser issues exist ( komt later)
if ( !e )
{
var e = window.event;
}
if ( e.keyCode == 39 )
{
rechtsIngedrukt = false;
stage.update();
}
if (event.keyCode == 32 )
{
spatieIngedrukt = false;
stage.update();
}
if ( e.keyCode == 37 )
{
linksIngedrukt = false;
stage.update();
}
}
//Functie die checkt of gelopen wordt en lopen uitvoert
function checkLopen()
{
xSpeed = 0;
if (!rechtsIngedrukt&&!linksIngedrukt)
{
bmpAnimation.gotoAndPlay("idle");
}
if (rechtsIngedrukt&&linksIngedrukt)
{
bmpAnimation.gotoAndPlay("walk");
}
else
{
if (rechtsIngedrukt)
{
if (rechtslopen == false)
{
bmpAnimation.gotoAndPlay("walk");
bmpAnimation.scaleX = -1.5;
rechtslopen = true;
}
xSpeed = 6;
}
else
{
rechtslopen = false;
}
if (linksIngedrukt)
{
if (linkslopen == false)
{
bmpAnimation.gotoAndPlay("walk");
bmpAnimation.scaleX = 1.5;
linkslopen = true;
}
xSpeed = -6;
}
else
{
linkslopen = false;
}
if (spatieIngedrukt&&!springtNu)
{
if (springen == false)
{
jump2.play();
springen = true;
}
ySpeed = -13;
}
else
{
springen = false;
springtNu = true;
ySpeed = 5;
}
if (rechtsIngedrukt&&spatieIngedrukt)
{
bmpAnimation.gotoAndPlay("walk");
}
if (linksIngedrukt&&spatieIngedrukt)
{
bmpAnimation.gotoAndPlay("walk");
}
}
if (bmpAnimation.x < 10)
{
bmpAnimation.x = 10;
}
if (bmpAnimation.x > 790)
{
bmpAnimation.x = 790;
}
if (ySpeed > 0 && bmpAnimation.y >= 508)
{
ySpeed = 508-bmpAnimation.y;
springtNu = false;
}
// Platformen, waar ze staan etc
if (ySpeed > 0 && bmpAnimation.y >= 352 && bmpAnimation.y < 382 && bmpAnimation.x > 0 && bmpAnimation.x < 175)
{
ySpeed = 352-bmpAnimation.y;
springtNu = false;
}
if (ySpeed > 0 && bmpAnimation.y >= 352 && bmpAnimation.y < 382 && bmpAnimation.x > 280 && bmpAnimation.x < 480)
{
ySpeed = 352-bmpAnimation.y;
springtNu = false;
}
if (ySpeed > 0 && bmpAnimation.y >= 352 && bmpAnimation.y < 382 && bmpAnimation.x > 630 && bmpAnimation.x < 800)
{
ySpeed = 352-bmpAnimation.y;
springtNu = false;
}
//Tweede rij platformen
if (ySpeed > 0 && bmpAnimation.y >= 202 && bmpAnimation.y < 232 && bmpAnimation.x > 138 && bmpAnimation.x < 320)
{
ySpeed = 202-bmpAnimation.y;
springtNu = false;
}
if (ySpeed > 0 && bmpAnimation.y >= 202 && bmpAnimation.y < 232 && bmpAnimation.x > 488 && bmpAnimation.x < 675)
{
ySpeed = 202-bmpAnimation.y;
springtNu = false;
}
//Bovenste Rij
if (ySpeed > 0 && bmpAnimation.y >= 52 && bmpAnimation.y < 82 && bmpAnimation.x > 318 && bmpAnimation.x < 510)
{
ySpeed = 52-bmpAnimation.y;
springtNu = false;
}
bmpAnimation.x += xSpeed;
bmpAnimation.y += ySpeed;
stage.update();
}
function checkSpringen()
{
if (springen)
{
springdelay += 1;
}
if (springdelay > 15)
{
springen = false;
springtNu = true;
springdelay = 0;
}
}
//functie die enemys aanmaakt
function maakEnemys()
{
if (enemys.length < 4)
{
enemy = new Bitmap(enemyImg); // eerst een enemy maken
enemy.x = 1000 + Math.random() * Math.random() * 1000 + Math.random(); // enemy plaatsen
enemy.y = Math.random() * 600 * 1.054 * Math.random();
stage.addChild(enemy); // plaatsen op scherm
enemys.push(enemy);
}
}
|
