Introduction Features
Definitions Principles The AI model
Teaching Register a class
Getting started P5 tutorial Three.js tutorial
Coding course Coding course II Coding for kids WebGL course AI exercises
Starter Worlds
Editor's Choice Showcase Worlds Multi-user Worlds Random Worlds
Advanced search
Docs API docs
Register Forgot password
  
Code viewer for World: New World 

// template is blank 
// define your own World here 

let canvas;
let context;

let request_id;
let fpsInterval = 1000 / 30;
let now;
let then = Date.now();

let goblins = []

let background = [
    [7,7,7,7,7,7,7,30,31,7,7,7,7,7,7,7,7,7,7,7,7,7,7,30,31,7,7,7,7,7,7,7],
    [7,7,7,7,7,7,7,36,37,7,7,7,7,7,7,7,7,7,7,7,7,7,7,36,37,7,7,7,7,7,7,7],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14],
    [14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14]


];

let tilesPerRow = 6;
let tileSize = 24 ;

let IMAGES = { player: "uploads/michael2003/1700158754.png", goblin: "uploads/michael2003/1700158732.png", tiles: "uploads/michael2003/1700158821.png", bullet: "uploads/michael2003/1700158801.png"};

let goblin_spawns = [250, 750 ];

let player = {
    x : 0,
    y : 0,
    width : 64,
    height : 128,
    frameX : 0,
    frameY : 0,
    xChange : 0,
    yChange : 0
};

let Lbullet = {
    x : 0,
    y : 0,
    width : 24,
    height : 24,
    frameX : 4,
    frameY : 3,
    xChange : -100,
    yChange : -100
}; 
let Rbullet = {
    x : 0,
    y : 0,
    width : 24,
    height : 24,
    frameX : 4,
    frameY : 3, 
    xChange : -100,
    yChange : -100
}; 
let Ubullet = {
    x : 0,
    y : 0,
    width : 24,
    height : 24,
    frameX : 4,
    frameY : 3,
    xChange : -100,
    yChange : -100
}; 
let Dbullet = {
    x : 0,
    y : 0,
    width : 24,
    height : 24,
    frameX : 4,
    frameY : 3,
    xChange : -100,
    yChange : -100
}; 



let moveLeft = false;
let moveUp = false;
let moveRight = false;
let moveDown = false;
let shoot = false;

document.addEventListener("DOMContentLoaded", init, false);

function init() {
    canvas = document.querySelector("canvas");
    context = canvas.getContext("2d");
    
    player.x = canvas.width / 2 ;
    player.y = 450;

    window.addEventListener("keydown", activate, false );
    window.addEventListener("keyup", deactivate, false );

    load_images(draw);
}

function draw() {
    window.requestAnimationFrame(draw);
    
    let now = Date.now();
    let elapsed = now - then;
    if (elapsed <= fpsInterval){
        return;
    }
    then = now- (elapsed % fpsInterval);
    
    for(let r = 0; r < 20; r += 1){
        for (let c = 0; c < 32; c+= 1){
            let tile = background[r][c];
            if (tile >= 0){
                let tileRow = Math.floor(tile/tilesPerRow);
                let tileCol = Math.floor(tile % tilesPerRow);
                context.drawImage(IMAGES.tiles,
                     tileCol * tileSize, tileRow * tileSize, tileSize, tileSize,
                    c * tileSize, r * tileSize, tileSize, tileSize);
            }
        }
    }
    
    if  ( goblins.length < 1000 ){
       let spawner = randInt(0,1)
        let g = {
            x : goblin_spawns[spawner] ,
            y : 0,
            width : 64,
            height : 64,
            frameX : 0,
            frameY : 0, 
            xChange : randInt(-1,-4),
            yChange : randInt(1,4)
        }
        goblins.push(g);
    };
    context.clearRect(0, 0, canvas.width, canvas.height );
    for (let g of goblins) {
        context.drawImage(IMAGES.goblin, g.frameX * g.width, g.frameY * g.height , g.width, g.height, g.x, g.y, g.width, g.height);
    };
    context.drawImage(IMAGES.player, player.frameX * player.width, player.frameY * player.height , player.width, player.height, player.x, player.y, player.width, player.height);

    Lbullet.x = player.x + player.width / 2
    Lbullet.y = player.y + player.height /2  
    Rbullet.x = player.x + player.width / 2
    Rbullet.y = player.y
    Ubullet.x = player.x + player.width / 2
    Ubullet.y = player.y   
    Dbullet.x = player.x + player.width / 2
    Dbullet.y = player.y + player.height / 2    
    


    for (let g of goblins){
        if (player_collides(g)){
            stop();
            return;
        }
    }        
    
    for (let g of goblins ) {
        if(player.x - g.x < 10 ){
            g.x = g.x + g.xChange;
            g.frameY= 3;
            g.frameX = (g.frameX + 1) % 7;
        }else if(player.x - g.x > 10){
            g.x = g.x + g.xChange * -1
            g.frameX = (g.frameX + 1) % 7;
            g.frameY= 1;
        }if(player.y - g.y > 0 ){
            g.y = g.y + g.yChange;
            g.frameY= 0
            g.frameX = (g.frameX + 1) % 7; 
        }else if(player.y - g.y < 0){
            g.y = g.y + g.yChange * -1 ;
            g.frameX = (g.frameX + 1) % 7;
            g.frameY= 2  
        }
    }
    /*
    for (let g of goblins){
        if(player_collides(g)){
            g.frameX;
            return;
        }
    }
    */

    
    if(player.frameY = 3){
        player.frameX = 8
    }
    if(player.frameY = 0){
        player.frameX = 0
    }

    if(moveRight){
        player.xChange = 5;
        player.frameY = 6;
        player.frameX = (player.frameX + 1) % 4;
    }
    if(moveUp){
        player.yChange = -5;
        player.frameY = 3;
        player.frameX = (player.frameX + 1);
        if(player.frameX > 10){
            player.frameX = 8;
        }
        
    }
    if(moveLeft){
        player.xChange = -5;
        player.frameY = 1;
        player.frameX = (player.frameX + 1);
        if(player.frameX > 13){
            player.frameX = 12;
        }
    }
    if(moveDown){
        player.yChange = 5;
        player.frameY = 0;
        player.frameX = (player.frameX + 1) % 2;
    } 
    
    if(shoot && moveLeft ){ 
        if(Lbullet.x + Lbullet.width < 0){
            Lbullet.x = Lplayer.x;
        }else{ Lbullet.x = Lbullet.x + Lbullet.xChange }
        context.drawImage(IMAGES.bullet, Lbullet.frameX * Lbullet.width, Lbullet.frameY * Lbullet.height , Lbullet.width, Lbullet.height, Lbullet.x, Lbullet.y, Lbullet.width, Lbullet.height);
        for (let g of goblins){
            if(Lbullet_collides(g)){
                g.frameX = (g.frameX + 1) % 4;
                g.frameY= 4  
                goblins.shift(g)
                return;
            }
        } 
    }
    if(shoot && moveRight ){ 
        if(Rbullet.x + Rbullet.width < 0){
            Rbullet.x = player.x;
        }else{ Rbullet.x = Rbullet.x + Rbullet.xChange * -1}
        context.drawImage(IMAGES.bullet, Rbullet.frameX * Rbullet.width, Rbullet.frameY * Rbullet.height , Rbullet.width, Rbullet.height, Rbullet.x, Rbullet.y, Rbullet.width, Rbullet.height);
        for (let g of goblins){
            if(Rbullet_collides(g)){
                g.frameX = (g.frameX + 1) % 4;
                g.frameY= 4  
                goblins.shift(g)
                return;
            }
        } 
    } 

    if(shoot && moveUp ){ 
        if(Ubullet.y + Ubullet.width < 0){
            bullet.y= player.y;
        }else{ Ubullet.y = Ubullet.y + Ubullet.yChange * 1}
        context.drawImage(IMAGES.bullet, Ubullet.frameX * Ubullet.width, Ubullet.frameY * Ubullet.height , Ubullet.width, Ubullet.height, Ubullet.x, Ubullet.y, Ubullet.width, Ubullet.height);
        for (let g of goblins){
            if(Ubullet_collides(g)){
                g.frameX = (g.frameX + 1) % 4;
                g.frameY= 4  
                goblins.shift(g)
                return;
            }
        } 
    }
    
    if(shoot && moveDown ){ 
        if(Dbullet.y + Dbullet.width < 0){
            Dbullet.y = Dplayer.y;
        }else{ Dbullet.y = Dbullet.y + Dbullet.yChange * -1}
        context.drawImage(IMAGES.bullet, Dbullet.frameX * Dbullet.width, Dbullet.frameY * Dbullet.height , Dbullet.width, Dbullet.height, Dbullet.x, Dbullet.y, Dbullet.width, Dbullet.height);
        for (let g of goblins){
            if(Dbullet_collides(g)){
                g.frameX = (g.frameX + 1) % 4;
                g.frameY= 4  
                goblins.shift(g)
                return;
            }
        } 
    }
 //  setTimeout(function() {
          //  }, 2000);

    //update the player
    player.x = player.x + player.xChange;
    player.xChange = 0;
    player.y = player.y + player.yChange;
    player.yChange = 0;
    
 
}

function randInt(min, max) {
    return Math.round(Math.random() * (max - min) + min)
}

function activate(event) {
    let key= event.key;
    if(key === "ArrowLeft") {
        moveLeft = true;
    }else if (key === "ArrowUp"){
        moveUp = true;
    }else if (key === "ArrowRight"){
        moveRight = true;
    }else if (key === "ArrowDown"){
        moveDown = true;
    }if (key === " "){
        shoot = true;
    }
}

function deactivate(event) {
    let key= event.key;
    if(key === "ArrowLeft") {
        moveLeft = false;
    }else if (key === "ArrowUp"){
        moveUp = false;
    }else if (key === "ArrowRight"){
        moveRight = false;
    }else if (key === "ArrowDown"){
        moveDown = false;
    }if (key === " "){
        shoot = false;
    }
}

function stop() {
    window.removeEventListener("keydown",activate,false);
    window.removeEventListener("keyup", deactivate, false);
    window.cancelAnimationFrame(request_id);
}


function load_images(callback) {
    let num_images = Object.keys(IMAGES).length;
    let loaded = function() {
        num_images = num_images - 1;
        if (num_images === 0){
            callback();
        }
    };
    for(let name of Object.keys(IMAGES)){
        let img = new Image();
        img.addEventListener("load", loaded, false);
        img.src = IMAGES[name];
        IMAGES[name] = img;
    }
}

function player_collides(g) {
    if (player.x + player.width < g.x ||
        g.x + g.width < player.x ||
        player.y > g.y + g.height ||
        g.y > player.y + player.height) {
        return false;
    }else{
        return true;
    }
} 

function Lbullet_collides(g) {
    if (Lbullet.x + Lbullet.width < g.x ||
        g.x + g.width < Lbullet.x ||
        Lbullet.y > g.y + g.height ||
        g.y > Lbullet.y + Lbullet.height) {
        return false;
    }else{
        return true;
    }
}
function Rbullet_collides(g) {
    if (Rbullet.x + Rbullet.width < g.x ||
        g.x + g.width < Rbullet.x ||
        Rbullet.y > g.y + g.height ||
        g.y > Rbullet.y + Rbullet.height) {
        return false;
    }else{
        return true;
    }
}
function Ubullet_collides(g) {
    if (Ubullet.x + Ubullet.width < g.x ||
        g.x + g.width < Ubullet.x ||
        Ubullet.y > g.y + g.height ||
        g.y > Ubullet.y + Ubullet.height) {
        return false;
    }else{
        return true;
    }
}
function Dbullet_collides(g) {
    if (Dbullet.x + Dbullet.width < g.x ||
        g.x + g.width < Dbullet.x ||
        Dbullet.y > g.y + g.height ||
        g.y > Dbullet.y + Dbullet.height) {
        return false;
    }else{
        return true;
    }
}