Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- "use strict";
- (function()
- {
- window.addEventListener("load", main);
- }());
- function main()
- {
- var canvas = document.getElementById("canvas");
- var ctx = canvas.getContext("2d");
- var spArray; //sprite array
- canvas.addEventListener("initend", initEndHandler);
- init(ctx); //carregar todos os componentes
- //funções locais para gestão de eventos
- function initEndHandler(ev)
- {
- //instalar listeners do rato
- ctx.canvas.addEventListener("click", cch);
- spArray = ev.spArray;
- spArray[1].clickable = true;
- //iniciar a animação
- startAnim(ctx, spArray);
- }
- var cch = function(ev)
- {
- canvasClickHandler(ev, ctx, spArray);
- }
- document.onkeydown = function(ev){
- canvasKeyDownHandler(ev, ctx, spArray);
- }
- document.onkeyup = function(ev){
- canvasKeyUpHandler(ev, ctx, spArray);
- }
- }
- //init: carregamento de componentes
- function init(ctx)
- {
- var nLoad = 0;
- var totLoad = 2;
- var spArray = new Array(totLoad);
- var img;
- //estilos de texto
- ctx.fillStyle = "#993333";
- ctx.font = "12px helvetica";
- ctx.textBaseline = "bottom";
- ctx.textAlign = "center";
- //carregar imagens e criar sprites
- var img = new Image();
- img.addEventListener("load", imgLoadedHandler);
- img.id="car";
- img.src = "resources/car.png"; //dá ordem de carregamento da imagem
- var img = new Image();
- img.addEventListener("load", imgLoadedHandler);
- img.id="turbo";
- img.src = "resources/turbo.png";
- function imgLoadedHandler(ev)
- { var img = ev.target;
- if(img.id == "car"){
- var nw = img.naturalWidth;
- var nh = img.naturalHeight;
- var sp = new SpriteImage(0, 0, nw/4, nh/4, 1, false, img);
- spArray[0] = sp;
- nLoad++;
- if (nLoad == totLoad)
- {
- var ev2 = new Event("initend");
- ev2.spArray = spArray;
- ctx.canvas.dispatchEvent(ev2);
- }
- }
- else if(img.id == "turbo"){
- var nw = img.naturalWidth;
- var nh = img.naturalHeight;
- var sp = new SpriteImage(250, 150, nw, nh, 2, false, img);
- spArray[1] = sp;
- nLoad++;
- if (nLoad == totLoad){
- var ev2 = new Event("initend");
- ev2.spArray = spArray;
- ctx.canvas.dispatchEvent(ev2);
- }
- }
- }
- var mm = function mouseM(ev){
- mouseMove(ev, spArray, ctx);
- }
- ctx.canvas.addEventListener("mousemove", mm);
- var mu = function mouseUp(ev){
- ctx.canvas.dispatchEvent("mouseup");
- ev.mouseup=null;
- }
- ctx.canvas.addEventListener("mouseup", mu);
- var md = function mouseD(ev){
- mouseDown(ev, spArray, ctx);
- }
- ctx.canvas.addEventListener("mousedown", md);
- collision(spArray);
- }
- function mouseDown(ev, spArray, ctx){
- var mousex = ev.offsetX;
- var mousey = ev.offsetY;
- var turbo = spArray[1];
- clear(ctx, turbo);
- turbo.x = mousex;
- turbo.y = mousey;
- draw(ctx, turbo);
- }
- function mouseMove(ev, spArray, ctx){
- var mousex = ev.offsetX;
- var mousey = ev.offsetY;
- var turbo = spArray[1];
- if(mousex>=turbo.x && mousex<=turbo.x+turbo.width){
- clear(ctx, turbo);
- turbo.x = mousex;
- turbo.y = mousey;
- draw(ctx, turbo);
- }
- }
- //iniciar animação
- function startAnim(ctx, spArray)
- {
- draw(ctx, spArray);
- animLoop(ctx, spArray);
- }
- //desenhar sprites
- function draw(ctx, spArray)
- {
- var dim = spArray.length;
- for (let i = 0; i < dim; i++)
- {
- spArray[i].draw(ctx);
- }
- }
- //apagar sprites
- function clear(ctx, spArray)
- {
- var dim = spArray.length;
- for (let i = 0; i < dim; i++)
- {
- spArray[i].clear(ctx);
- }
- }
- //-------------------------------------------------------------
- //--- controlo da animação: coração da aplicação!!!
- //-------------------------------------------------------------
- var auxDebug = 0; //eliminar
- function animLoop(ctx, spArray)
- {
- var al = function(time)
- {
- animLoop(ctx, spArray);
- }
- var reqID = window.requestAnimationFrame(al);
- var time = setInterval(function(){
- time++;
- }, 1);
- render(ctx, spArray, reqID, time);
- }
- //resedenho, actualizações, ...
- function render(ctx, spArray, reqID, dt)
- {
- var cw = ctx.canvas.width;
- var ch = ctx.canvas.height;
- //apagar canvas
- ctx.clearRect(0, 0, cw, ch);
- //animar sprites
- var sp = spArray[0];
- if (sp.x + sp.width < cw)
- {
- if (sp.x + sp.width + sp.speed > cw)
- sp.x = cw - sp.width;
- else
- sp.x = sp.x + sp.speed;
- }
- else
- {
- window.cancelAnimationFrame(reqID);
- //make clickable
- sp.clickable = true;
- }
- //redesenhar sprites e texto
- var txt = "Time: " + 10*Math.round(dt) + " msec";
- ctx.fillText(txt, cw/2, ch);
- draw(ctx, spArray);
- }
- //-------------------------------------------------------------
- //--- interacção com o rato
- //-------------------------------------------------------------
- function canvasClickHandler(ev, ctx, spArray)
- {
- if (spArray[0].clickedBoundingBox(ev))
- {
- spArray[0].reset(ev, ctx);
- spArray[0].speed=1;
- animLoop(ctx, spArray);
- }
- else if (spArray[1].clickedBoundingBox(ev)){
- console.log("Clicou turbo");
- }
- }
- function canvasKeyDownHandler(ev, ctx, spArray){
- clear(ctx, spArray);
- var key = ev.keyCode;
- if(key==39 && spArray[1].x<ctx.canvas.width){
- spArray[1].x+=2;
- }
- else if(key==37 && spArray[1].x>0){
- spArray[1].x-=2;
- }
- else if(key==38 && spArray[1].y>0){
- spArray[1].y-=2;
- }
- else if(key==40 && spArray[1].y<ctx.canvas.height){
- spArray[1].y+=2;
- }
- draw(ctx, spArray);
- collision(spArray);
- }
- function canvasKeyUpHandler(ev, ctx, spArray){
- spArray[1].clear(ctx);
- draw(ctx, spArray);
- }
- function collision(spArray){
- var car = spArray[0];
- var turbo = spArray[1];
- var min_x = car.x;
- var max_x = car.x+car.width;
- var min_y = car.y;
- var max_y = car.y+car.height;
- var min_x1 = turbo.x;
- var max_x1 = turbo.x+turbo.width;
- var min_y1 = turbo.y;
- var max_y1 = turbo.y+turbo.height;
- if((min_x1>=min_x && min_x1<=max_x && min_y1>=min_y && min_y1<=max_y) || (max_x1>=min_x && max_x1<=max_x && max_y1>=min_y && max_y1<=max_y) || (min_x1>=min_x && min_x1<=max_x && max_y1>=min_y && max_y1<=max_y) || (max_x1>=min_x && max_x1<=max_x && min_y1>=min_y && min_y1<=max_y)){
- var player = new Audio();
- player.src = 'resources/turbo.mp3';
- player.play();
- spArray[0].speed+=20;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement