Alchemy Framework

drag & drop, collision, sprites

by Brett

HTML

<canvas id="canvas" width="480" height="320">

JavaScript

var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;
var FRAMERATE = 30;
var SIZE = 32; //all sprites are of width & height 32

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.addEventListener('mousemove', mouseMoved, false);
canvas.addEventListener('mousedown', mousePressed, false);
canvas.addEventListener('mouseup', mouseReleased, false);
var bgColor = "#ACACAC";
var rsrcDir = "http://people.ucsc.edu/~bhoutz/cmps20/asg1/";
var toLoad = 0;
var loaded = 0;
var mouse = {x:0, y:0};
var elements = [];

function mouseMoved(event){
    var rect = canvas.getBoundingClientRect();
    mouse.x = event.clientX - rect.left;
    mouse.y = event.clientY - rect.top;
}
function mousePressed(event){
    var found = false;
    var e;
    var match;
    for(var i=0;i<elements.length;i++){
        e = elements.shift();
        if(e.checkMouse()&&!found){
            found = true;
            match = e;
            match.selected = true;
        }else{
            elements.push(e);
        }
    }
    if(found) elements.unshift(match);
    //for(var i=0;i<elements.length;i++){alert(elements[i].name);}
}
function mouseReleased(event){
    elements[0].selected = false;
    for(var i=1;i<elements.length;i++){
        if(collision(elements[0], elements[i])){
            
        }
    }
}

function Element(name) {
    this.name = name;
    this.sprite = new Image();
    this.x = 0;
    this.y = 0;
    this.xOff = 0;
    this.yOff = 0;
    this.selected = false;
    this.setSprite = function (source) {
        toLoad++;
        this.sprite.src = rsrcDir + source;
        this.sprite.onload = function () {
            loaded++;
        };
    };
    this.draw = function () {
        context.drawImage(this.sprite, this.x, this.y);
    };
    this.move = function(){
        this.x = mouse.x - this.xOff;
        this.y = mouse.y - this.yOff;
    };
    this.checkMouse = function(){
        var offset = {x:mouse.x-this.x, y: mouse.y-this.y};
       ...