I can't seem to figure out why the game is not showing up on the desktop in this index HTML

I have come across a game online and I am trying to run it from my desktop. Do I need to do anything special with the URLs or images to ensure that the file recognizes where everything is located? I have all the files and .png images in one folder at the same level.

I expect to see the game on the screen. It's a left-to-right horizontal scroller with enemy ships appearing from the right side of the screen, while the main ship is on the left side (similar to the old style defender game).

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="app.css">
  </head>

  <body>
    <div id="game-over-overlay"></div>

    <div id="game-over">
      <h1>GAME OVER</h1>
      <button id="play-again">Play Again</button>
    </div>

    <div class="wrapper">
      <div id="instructions">
        <div>
          move with <span class="key">arrows</span> or <span class="key">wasd</span>
        </div>
        <div>
          shoot with <span class="key">space</span>
        </div>
      </div>
      <div id="score"></div>
    </div>

    <script type="text/javascript" src="resources.js"></script>
    <script type="text/javascript" src="input.js"></script>
    <script type="text/javascript" src="sprite.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

If someone could test this game link and provide assistance with any errors encountered, it would be greatly appreciated.

Error Messages:

 Uncaught SyntaxError: Unexpected end of input resources.js:61
 Uncaught SyntaxError: Unexpected end of input input.js:43
 Uncaught SyntaxError: Unexpected end of input sprite.js:54
 Uncaught SyntaxError: Unexpected end of input app.js:302

Answer №1

Is your setup on a web server? Your description suggests that you might have simply downloaded those files and clicked on index.html.

You should consider getting something like , launching the Apache service, moving your files to the /xampp/htdocs/ directory... then navigate to

http://localhost/index.html 

to view the content.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Generating random numbers within specified character limits using Javascript and Selenium

Just starting to learn javascript - I am working on creating random user IDs for my selenium test scenarios. The line of code I am using for the value is as follows: javascript{Math.floor(Math.random()*11111)} However, there is a specific field that need ...

Using AngularJS's $watchCollection in combination with ng-repeat

Encountering difficulties receiving notifications for changes in a list when utilizing an input field within ng-repeat directly. However, I am able to modify values and receive notifications from $watchCollection. To illustrate: <!DOCTYPE html> < ...

Instructions for importing a JSON 3D model and placing it at the center in Three.js

Is there a way to accurately load a JSON object and position it at the origin? I have tried using object.position.x and mesh.position.x but haven't been successful in aligning the object with the origin. My goal is to calculate the maximum and minimum ...

Attempting to verify the existence of a value in an SQL table prior to insertion

I have a simple table that contains an ID column and a location name column. Additionally, I have created an HTML form where users can input a new location into the table. Before adding the new location, I want to check if that location already exists in m ...

Issue with swal() not triggering in Internet Explorer 11

Looking for some assistance here, I believe I might be missing a small detail. The _layout.cshtml file includes all the necessary scripts to ensure that sweetheart works on IE: (this used to work in previous versions, but we haven't had to support I ...

Using Typescript: invoking static functions within a constructor

This is an illustration of my class containing the relevant methods. class Example { constructor(info) { // calling validateInfo(info) } static validateInfo(info):void { // validation of info } I aim to invoke validateInfo ...

Issue with storage functionality in Vuex Axios response

Every time I send data to the Vuex storage using an axios response, for example: ** Sidebar.vue ** created(){ this.getRoles(); }, methods: { getRoles(){ var _this = this var roles = null this.$http.get('/api/userroles/ ...

Angular 2 FileReader: A comprehensive guide

I have a situation where I need to upload an image in section X and pass the base 64 data of the uploaded image to section Y. But I am encountering some difficulties in section X HTML: <input type="file" id="hotspot" (change)="uploadHotSpot($event)"&g ...

What is the most effective way to retrieve specific data from this object using JavaScript?

I attempted to retrieve the number of hashtags used at a specific time using the Twitter API and an npm module called hashtag-count. Below is the program and the generated results object: var HashtagCount = require("hashtag-count") require('dotenv&ap ...

Determining the Number of Sub-Menu Items Using jQuery without Reliance on CSS Classes

I've scoured the depths of Google and SO in search of answers, but nothing quite fits the bill. My mission is to create a submenu without using classes, adding a style attribute to each individual <li> within the sub <ul> that sets a min- ...

What is the most effective method for delivering npm packages using django?

Currently, I am utilizing django as the backend along with a few javascript packages installed via npm. To access these packages, I have configured django to serve /node_modules by including it in the STATICFILES_DIRS. While this setup has been functional, ...

What is the best way to create a sliding menu that appears from the right side on a mobile device using HTML, CSS, and JQuery

Is there a way to have the menu slide in smoothly from the right side after clicking on the menu bar icon, including sliding the menu bar icon itself? The current code displays the menu directly upon clicking on the menu bar, but I would like it to slide i ...

Learn how to efficiently reload a card in React upon submitting new data

Is there a way to automatically refresh the card component after submitting data without having to manually refresh the page? I've tried using useEffect but it's not updating the data even though the value is changing. Any suggestions on how to r ...

The FullCalendar plugin on the list was experiencing functionality issues

I came across this code snippet that is causing me some trouble: .... import { FullCalendarComponent } from '@fullcalendar/angular'; import { EventInput } from '@fullcalendar/core'; import dayGridPlugin from '@fullcalendar/daygrid& ...

When attempting to process JSON using the fetch method, the value for a valid JSON key

Currently, I am facing a challenge wherein I need to fetch data from my REST server to populate the frontend of my UI. This requires me to make requests not only to my own server but also to other servers. One specific request involves retrieving a list of ...

Is MongoDB caching its collection in memory?

Utilizing mongoDB for storing a set of polygons and executing $geoIntersects queries to determine the polygon containing a specific point. My mongoose Schema is structured as follows: var LocationShema = mongoose.Schema({ name: String, geo: { ...

Issue encountered when displaying various data options in the dropdown menus within a modal window

My goal is to display a modal when a button is clicked. The modal renders perfectly fine, but I am facing an issue with duplication of dropdowns inside the modal when the "add more" button is clicked. The main issues are: 1. Selecting the first option in ...

Is there a way to incorporate a loading spinner into a MaterialUI DataTable without having to specify a fixed height for the parent component?

Currently, I am using a MaterialUI DataTable with the following setup: <div style = {{height: 300}}> <DataGrid loading={true} getRowHeight={() => "auto"} getEstimatedRowHeight={() => 250} ...

How to transfer identification from one AngularJS page to another

I need help figuring out how to retrieve an ID from the list.html page and use that same ID to display corresponding details on the list-detail.html page. I am new to using angularjs and struggling with getting the details based on the ID. Below is my code ...

The 'Image' component does not have a propType defined for the native prop 'RCTImageView.overlayColor' with a native type of 'number'

Greetings, I am encountering an issue while attempting to run my react native application on Android. The app has been functioning flawlessly on iOS for several months, but this is our first endeavor at utilizing it on Android. We are using react-native .1 ...