Week 5: Web Comics – Chunqi Wan & Joseph Yang (Syed)

Project Name: Stella Beyond

Partner: Joseph Yang

Instructor: Nimrah Syed

Project Link

Description

Unlike traditional comics, our project is more like an interactive web game based on dialogue communication and item collections. The goal of the game is to play the main character, Roman, collect poison from the three planets to kill the monster who caused the explosion of earth. It could be divided into 3 parts: Prologue, exploration, and epilogue. The playable functions of the game mainly focus on the exploration part, during which the player could freely explore 3 planets rather than read my long script. The story itself is very straightforward and easy to understand, but reading the script may introduce you more details for further imagination.

Working Process

  1. a) Prologue: Joseph did this part. The trick is only to click “next” button and the script along with images would proceed accordingly. It was really smart of him to incorporate array to present the script. Clicking on the “back” button displays the story review.
  2. b) Exploration: I did this part. For each of the 3 planets I created 3 separate htmls, but linked to the same javascript file because I wanted a variable (tool list) to be readable in all 3 of them. I experienced many difficulties during the process. They were:

1) Dragger (addEventListener) read null.

→I fixed this problem by placing the js link at the bottom of html instead of at the top.

2) I placed 3 draggers for 3 htmls in the same javascript file, and the dragger read null for the other two when I browsed one of them.

→I fixed this problem by separating them into 3 javascript files on suggestion of professor.

3) There is a tool bar at the left of the page. I expected it to keep track of the player’s item collection process by pushing the new element to the global variable array.

→I did not figure out how to do this, maybe I could fix it by using only 1 html for the 3 planets. To achieve this through another approach, I added two buttons after the drag event to ask the user whether they want to proceed with the item they currently hold.

c) Epilogue: We did epilogue together. Instead of using buttons to control the script display, we would like to implement scroll function to make the story telling more smoothly. We opened the example and made something similar. We met problems when doing CSS formatting, and figured it out that the reason was due to different decoding system of Safari. We changed it to Chrome and it worked well.

Post-mortem

The game we made essentially meets our goals to present a fantasy story and free map exploration, though it is far from perfect. I have to admit that it lacks visual effects to make the game more vividly, and the interaction is limited to item collection and plain text display.

Challenges and Learnings

1) Visual assets: Either of us could paint, so we have to rely on my poor Photoshop shills to prepare all the visual assets. Photoshop filters are life-savers. They can add effects to images to unify the style of images from different sources.

2) Javascript: Javascript is too difficult. The dragger function took me a lot of time to code and debug. For the global variable tool list, I managed to access it from 3 different htmls, but it would restrain the order of exploration from planet 1 to 3 and close the access to the two other planets, which I did not feel like doing. Therefore, I tried another approach to reach the epilogue. Learnings are that understanding function parameters could be very helpful when errors are reported instead of copying and pasting the examples.

3) Story telling: I did the script, and I am a little worried that the script is too long for the player to read. I hope that I have undervalue the patience of modern people who are accustomed to fast reading.

In the upcoming projects, we would pay more attention to the CSS formatting to better demonstrate the story contents and provide a more immersive game environment. We are happy about the progress we made, and we will keep up with that.

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}
var count01 = 0;
var count02 = 0;
var kiete = 0;
var toollist = [];
var countcount = 0;


var dragger = document.getElementById('dragger');
if (dragger){
  dragger.addEventListener("dragend", dragend);
  function dragend(e) {
    console.log("drag end");
    var xno = e.clientX;
    if (count01 >= 1 && xno<100 && count02 < 1){
      // saltedFish = 1;
      // saltedFishF();
      toollist.push("Red Leaves");
      document.getElementsByClassName("navigation-box")[0].innerHTML = toollist;
      document.getElementsByClassName("navigation-box")[0].style.color = "Crimson";
      document.getElementById('dragger').style.opacity = "0";
      count02++;
      document.getElementById('planet01').style.opacity = "0.1";
      document.getElementById("text01").style.opacity = "0.1";
      var question = document.createElement("h4");
      question.id = "question01";
      question.innerHTML = "Do you wanna use red leaves to kill the monster?"
      question.style.color = "white";
      document.body.appendChild(question);

      var option01 = document.createElement("button");
      option01.id = "option01";
      option01.innerHTML = "I wanna choose another plant!";
      document.body.appendChild(option01);
      var el=document.getElementById('option01');
      el.addEventListener('click', clickFunction);
        function clickFunction(e){
        window.location.href="main.html";
      }

      var option02 = document.createElement("button");
      option02.id = "option02";
      option02.innerHTML = "Let's save the earth!";
      document.body.appendChild(option02);
      var el2=document.getElementById('option02');
        el2.addEventListener('click', clickFunction02);
        function clickFunction02(){
          window.location.href="end01.html";
      }
      }
    }
}

function Move(){
  document.getElementById('planet01').src = "js/planet01.png";
  if (count01==0) {
    document.getElementsByClassName('flowbox')[0].style.left = "60%";
    document.getElementsByClassName('flowbox')[0].style.top = "30%";
    document.getElementsByClassName('flowbox')[0].style.background = "transparent";
    document.getElementById('text01').innerHTML = "OMG I'd better LEAVE..."
    document.getElementById("text01").style.fontSize = "x-large";
  }
  if (count02<1){
    document.getElementById("dragger").style.opacity = "0.5";
  }
  count01++;
}

function Back(){
  if (count01>=1) {
    document.getElementsByClassName('flowbox').remove();
    if (kiete <1) {
      document.getElementById("dragger").style.opacity = "0";
    }
    if (count02>=1 && kiete <1){
      document.getElementById("dragger").remove();
      kiete = 1;
    }
  }
  document.getElementById('planet01').src = "js/planet01-x.png";
}

function battle01(){
  window.location.href = "end1.html"
}
function battle02(){
  window.location.href = "end2.html"
}
function battle03(){
  window.location.href = "end3.html"
}

Leave a Reply