Commit 70a0d254 authored by colmoneill's avatar colmoneill
Browse files

Update 08-spritesheets/03-spritesheets-in-gameloop/assets/js/script.js

parent dbfc062d
const canvas = document.getElementById("the_canvas")
const context = canvas.getContext("2d");
let image = new Image();
image.src = "assets/img/calcifer.jpg";
const scale = 2;
const width = 16;
const height = 18;
const scaledWidth = scale * width;
const scaledHeight = scale * height;
const walkLoop = [0, 1, 0, 2];
const frameLimit = 7;
const foodWidth = 32;
const foodHeight = 32;
let currentLoopIndex = 0;
let frameCount = 0;
let currentDirection = 0;
let speed = 2;
let randomX = Math.abs(Math.floor(Math.random() * 1099) - 50);
let randomY = Math.abs(Math.floor(Math.random() * 499) - 50);
let randomFoodX = Math.abs(Math.floor(Math.random() * 7));
let randomFoodY = Math.abs(Math.floor(Math.random() * 4));
function randoPos(rangeX, rangeY, delta){
this.x = Math.abs(Math.floor(Math.random() * rangeX) - delta);
this.y = Math.abs(Math.floor(Math.random() * rangeY) - delta);
}
let character = new Image();
character.src = "assets/img/Green-16x18-spritesheet.png";
let foodSprite = new Image();
foodSprite.src = "assets/img/fruitnveg64wh37.png";
// GameObject holds positional information
// Can be used to hold other information based on requirements
......@@ -12,11 +39,12 @@ function GameObject(spritesheet, x, y, width, height) {
this.y = y;
this.width = width;
this.height = height;
this.mvmtDirection = "None";
}
// Default Player
let player = new GameObject(image, 0, 0, 200, 200);
let player = new GameObject(character, 0, 0, 200, 200);
let foods = new GameObject(foodSprite, randomX, randomY, 100, 100);
// The GamerInput is an Object that holds the Current
// GamerInput (Left, Right, Up, Down, MouseClicks)
......@@ -56,35 +84,78 @@ function input(event) {
}
}
// Spritesheet atlas references
// row 0 down
// row 1 up
// row 2 left
// row 3 right
function update() {
// console.log("Update");
// Check Input
if (gamerInput.action === "Up") {
console.log("Move Up");
player.y -= 1; // Move Player Up
//console.log("Move Up");
player.y -= speed; // Move Player Up
currentDirection = 1;
} else if (gamerInput.action === "Down") {
console.log("Move Down");
player.y += 1; // Move Player Down
//console.log("Move Down");
player.y += speed; // Move Player Down
currentDirection = 0;
} else if (gamerInput.action === "Left") {
console.log("Move Left");
player.x -= 1; // Move Player Left
//console.log("Move Left");
player.x -= speed; // Move Player Left
currentDirection = 2;
} else if (gamerInput.action === "Right") {
console.log("Move Right");
player.x += 1; // Move Player Right
//console.log("Move Right");
player.x += speed; // Move Player Right
currentDirection = 3;
} else if (gamerInput.action === "None") {
//console.log("player no longer moving")
}
}
function drawFrame(image, frameX, frameY, canvasX, canvasY) {
context.drawImage(image,
frameX * width, frameY * height, width, height,
canvasX, canvasY, scaledWidth, scaledHeight);
}
function animate() {
if (gamerInput.action != "None"){
frameCount++;
if (frameCount >= frameLimit) {
frameCount = 0;
currentLoopIndex++;
if (currentLoopIndex >= walkLoop.length) {
currentLoopIndex = 0;
}
}
}
else{
currentLoopIndex = 0;
}
drawFrame(player.spritesheet, walkLoop[currentLoopIndex], currentDirection, player.x, player.y);
}
foodPosition = new randoPos(1099, 499, 50);
function manageFood(){
// place the piece of food
context.drawImage(foodSprite, randomFoodX*64, randomFoodY*64, 64, 64, foodPosition.x, foodPosition.y, foodWidth, foodHeight);
// check for collision (eating)
if ((player.x + scale) >= (foodPosition.x) && player.x <= (foodPosition.x + foodWidth) ) {
console.log(" collision !");
}
// place new food
}
function draw() {
// Clear Canvas
context.clearRect(0, 0, canvas.width, canvas.height);
//console.log("Draw");
console.log(player);
context.drawImage(player.spritesheet,
player.x,
player.y,
player.width,
player.height);
context.clearRect(0,0, canvas.width, canvas.height);
manageFood();
animate();
}
function gameloop() {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment