Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
- var view = {x: 0, y: 0};
- var questionsArray = [];
- var moveCount = 0;
- var moveCharacter = false;
- var theArray = [];
- var mapArray = [
- [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
- [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
- [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
- [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
- [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
- [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
- [0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0],
- [0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
- [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
- [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
- [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
- [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
- [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
- [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
- [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
- ];
- function isPositionWall(ptX, ptY) {
- var gridX = Math.floor(ptX / 36);
- var gridY = Math.floor(ptY / 36);
- /*if(gridX > 0 || gridX >= mapArray[0].length)*/
- if(mapArray[gridX][gridY] === 1) {
- return true;
- /*if(gridY < 0 || gridY >= mapArray.length)
- return true;
- return mapArray[gridX][gridY];*/
- }
- }
- var Question = function(question, answer1, answer2, correctAnswer) {
- this.question = question;
- this.answer1 = answer1;
- this.answer2 = answer2;
- this.correctAnswer = correctAnswer;
- this.addToArray = function(){
- theArray.push(this);
- };
- this.addToArray();
- }
- Question.prototype.checkAnswer = function(answer1, answer2) {
- if (answer1.innerHTML == this.correctAnswer) {
- console.log("correct");
- moveCharacter = true;
- } else {
- console.log("nope")
- }
- }
- var question1 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
- var question2 = new Question("Jo ar ne?", "Ne", "Jo", "Ne");
- var question3 = new Question("Aha ar ne?", "Aha", "Ne", "Aha");
- var question4 = new Question("Ja ar ne?", "Taip", "Ne", "Taip");
- var question5 = new Question("Jojo ar ne?", "Jojo", "Ne", "Jojo");
- var question6 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
- var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
- var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
- var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
- var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
- var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
- var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
- var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
- var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
- var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
- var StyleSheet = function(image, width, height, x, y) {
- this.image = image;
- this.width = width;
- this.height = height;
- this.x = x;
- this.y = y
- this.draw = function(image, sx, sy, swidth, sheight, x, y, width, height) {
- context.drawImage(image, sx, sy, swidth, sheight, x, y, width, height);
- };
- this.drawimage = function(image, x, y, width, height) {
- context.drawImage(image, x, y, width, height);
- };
- };
- /* Initial Sprite Position */
- var boatPosX = canvas.height/2 - 50;
- var boatPosY = canvas.height/2 - 50;
- function render(viewport) {
- context.save();
- context.translate(view.x, view.y);
- requestAnimationFrame(render);
- var oldPosX = boatPosX;
- var oldPosY = boatPosY;
- for (let i = 0; i < mapArray.length; i++) {
- for (let j = 0; j < mapArray[i].length; j++) {
- if (mapArray[j][i] == 0) {
- this.sprite.draw(
- background,
- 190,
- 230,
- 26,
- 26,
- i * this.sprite.width,
- j * this.sprite.height,
- this.sprite.width,
- this.sprite.height
- );
- }
- if (mapArray[j][i] == 1) {
- this.sprite.draw(
- background,
- 30,
- 30,
- 26,
- 26,
- i * this.sprite.width,
- j * this.sprite.height,
- this.sprite.width,
- this.sprite.height
- );
- }
- if (mapArray[j][i] == 2) {
- this.sprite.draw(
- background,
- 200,
- 20,
- 26,
- 26,
- i * this.sprite.width,
- j * this.sprite.height,
- this.sprite.width,
- this.sprite.height
- );
- }
- }
- }
- this.ship.drawimage(boat, boatPosX, boatPosY, 50, 50);
- /*var lineHeight = 16 * 2.286;
- var textWidth = context.measureText(theArray[moveCount].question).width * 3;
- context.textAlign = 'left';
- context.textBaseline = 'top';
- context.font="14px Verdana";
- context.fillStyle = 'rgba(0, 0, 0 ,0.9)';
- context.fillRect(boatPosX + ship.width / 2, boatPosY - ship.height / 2, textWidth, lineHeight);
- context.fillStyle = 'white';
- context.fillText(theArray[moveCount].question, boatPosX + ship.width / 2, boatPosY - ship.height / 2);
- answerBtn1.innerHTML = theArray[moveCount].answer1;
- answerBtn2.innerHTML = theArray[moveCount].answer2;*/
- if(isPositionWall(boatPosX + 36, boatPosY)) {
- //boatPosX = oldPosY;
- //console.log("collision");
- }
- //console.log(mapArray[Math.floor(boatPosX / 36)][Math.floor(boatPosX / 36)]);
- context.restore();
- };
- var btn1 = document.getElementsByClassName("button1")[0];
- var btn2 = document.getElementsByClassName("button2")[0];
- var btn3 = document.getElementsByClassName("button3")[0];
- var btn4 = document.getElementsByClassName("button4")[0];
- var answerBtn1 = document.getElementsByClassName("answer1")[0];
- var answerBtn2 = document.getElementsByClassName("answer2")[0];
- console.log(theArray);
- answerBtn1.addEventListener("click", function(e) {
- theArray[moveCount].checkAnswer(answerBtn1, answerBtn2);
- });
- answerBtn2.addEventListener("click", function(e) {
- question1.checkAnswer(answerBtn2, answerBtn2);
- });
- btn1.addEventListener("click", function(e) {
- if (moveCharacter == true) {
- moveCount++;
- boatPosX -= 5;
- view.x += 5
- moveCharacter = false;
- }
- });
- btn2.addEventListener("click", function(e) {
- boatPosX += 5;
- view.x -= 5
- moveCount++;
- });
- btn3.addEventListener("click", function(e) {
- boatPosY += 5;
- view.Y += 5
- moveCount++;
- });
- btn4.addEventListener("click", function(e) {
- boatPosY -= 5;
- view.Y += 5
- moveCount++;
- });
- function move(e) {
- if (e.keyCode == 39) {
- boatPosX += 5;
- view.x -= 5
- moveCount++;
- console.log(moveCount);
- console.log("right");
- }
- if (e.keyCode == 37) {
- boatPosX -= 5;
- view.x += 5
- moveCount++;
- console.log(moveCount);
- console.log("left");
- }
- if (e.keyCode == 38) {
- boatPosY -= 5;
- view.Y += 5
- moveCount++;
- console.log(moveCount);
- console.log("up");
- }
- if (e.keyCode == 40) {
- boatPosY += 5;
- view.Y += 5
- moveCount++;
- console.log(moveCount);
- console.log("down");
- }
- }
- document.onkeydown = move;
- var background = new Image();
- background.src = "ground.png";
- var sprite = new StyleSheet(background, 36, 36, 16, 16);
- var boat = new Image();
- boat.src = "ship.png";
- var ship = new StyleSheet(boat, 36, 36, 16, 16);
Add Comment
Please, Sign In to add comment