JavaScript Game Development: Incorporating .png Assets into Duck Hunt Levels

I am currently working on enhancing the classic game Duck Hunt by adding different characters to different levels. I have obtained the original source code from GitHub (https://github.com/MattSurabian/DuckHunt-JS) and have successfully created 3 levels with unique .png files for each level through CSS. However, I am unsure about where in the JavaScript scripting to make adjustments so that each level features a different character. My assumption is that I will need to use an if statement specifying the character based on the level ID.

The section of JavaScript code below is responsible for handling the ducks (duckA / duckB):

{var e=t%2===0?"duckA":"duckB";this.duckMax++,this.liveDucks.push(new Duck(this.duckMax.toString(),e,this.level.speed,this.playfield).fly())}},
killDuck:function(t){this.levelStats.ducksKilled+=1,this.liveDucks=_(this.liveDucks).reject(function(e){return e.id===t.id}),
0===this.liveDucks.length&&this.playfield.trigger("wave:end",this.curWave)},
drawDucks:function(){var t="",e=this.level.ducks*this.curWave-this.levelStats.ducksKilled;e=e>25?25:e;

Here are the details of the Levels:

levels=[
{id:1,title:"Level 1",waves:1,ducks:10,pointsPerDuck:100,speed:2,bullets:15,time:25},
{id:2,title:"Level 2",waves:1,ducks:10,pointsPerDuck:150,speed:4,bullets:15,time:20},
{id:3,title:"Level 3",waves:1,ducks:10,pointsPerDuck:200,speed:6,bullets:15,time:18}],

I aim to introduce duckC / duckD in Level 2 (id 2) and duckE / duckF in Level 3 (id 3). Can anyone provide assistance?

UPDATE:

I have made modifications to the sections of code in duckhunt.min.js as shown below, but only the default two ducks are being loaded. Any thoughts on why this might be happening?

Duck.prototype.hatch=function(){
$('<div id="'+this.id+'" class="duck1 '+this.className+'"></div>').appendTo(this.game),
this.DOM=$("#"+this.id),
this.bindEvents()
$('<div id="'+this.id+'" class="duck2 '+this.className+'"></div>').appendTo(this.game),
this.DOM=$("#"+this.id),
this.bindEvents()},

releaseDucks:function(){
for(var t=0;t<this.level.ducks;t++)
{var e=t%2===0?"duckA":"duckB";
this.duckMax++,
this.liveDucks.push(new Duck(this.duckMax.toString(),e,this.level.speed,this.playfield).fly())
}
{var e=t%2===0?"duckC":"duckD";
this.duckMax++,
this.liveDucks.push(new Duck(this.duckMax.toString(),e,this.level.speed,this.playfield).fly())
}
},

Answer №1

Within the file duck.js, you will find where the duck's DOM element is being generated:

The Duck object has a method called hatch that creates the HTML element for the duck and appends it to the game container.
    Duck.prototype.hatch = function(){
        $('<div id="'+this.id+'" class="duck '+this.className+'"></div>').appendTo(this.game);
        this.DOM = $("#"+this.id);
        this.bindEvents();
    };

When creating instances of Duck, the constructor passes either 'duckA' or 'duckB' based on this.className depending on the type of duck needed in the game. Update duckhunt.js to incorporate the level data instead:

To release ducks according to the current level, modify the releaseDucks function:
    releaseDucks : function(){
        for(var i=0;i<this.level.ducks;i++){
            var duckClass = "duck"+this.level.id;
            this.duckMax++;
            this.liveDucks.push(new Duck(this.duckMax.toString(),duckClass,this.level.speed,this.playfield).fly());
        }
    },

Name your classes as duck1, duck2, duck3, ... and apply styling similar to the original repository!

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

Error encountered in AngularJS and JSON server: [$injector:unpr] An unidentified provider was found: $resourceProvider <- $resource <- menuFactory

Hello everyone, I recently created a small AngularJS application and utilized a JSON server for my backend operations. Unfortunately, I am encountering an issue with the provider in my code. Upon running it, I am receiving errors as shown below: Uncaugh ...

`In HTML, trigger blocks based on the number chosen by the user`

I am working on creating a web page where users can select the number of friends they have, and based on that input, a corresponding number of invisible boxes will be triggered. For example, if a user selects 3 friends, 3 boxes will appear for them to ente ...

"Running 'npm run build' in Vuejs seems to have a mind of its own, acting

Recently, I completed a project and uploaded it to Github. The issue arises when I attempt to clone it to my live server - only about 1 out of 10 times does everything function correctly after running npm run build. My setup consists of Ubuntu 16 with ngin ...

Having difficulty converting a local variable into a global variable in JavaScript and Express

I am facing challenges trying to convert a local variable into a global variable while working with Express and Javascript. Below is my JavaScript code snippet: // Setting up Express and EJS const express = require("express"); const JSON = requi ...

Exploring ways to reach a specific digit level in JavaScript

As a newcomer to JavaScript, I've been searching online and trying different solutions but none have worked for me. Currently, I have a variable called num = 71.666666666 I'm looking to limit this number to 71.66 So far, I have attempted the f ...

retrieve the month and year data from the input date

I encountered a situation where I'm working with the following unique HTML code: <input type="date" id="myDate"/> <button type="button" class="btn btn-secondary" id="clickMe">MyButton</ ...

jQuery - patience is required until all elements have completely faded away

I am facing a unique challenge: I need to trigger an action after two specific elements have been faded out simultaneously. The code snippet for this task is as follows: $("#publish-left, #publish-right, #print-run").fadeOut(function(){ //do something ...

Two servers, each with its own designated form, and a singular database

Hello, I'm managing two servers. One of them has a form and MySQL database where I input data. The other server only includes a form where I want the data filled in to be sent securely to the first server's database. What is the best method for i ...

Resize image to fit the window, and subsequently switch between full size and adjusted size upon clicking

I need assistance in creating a code snippet that will automatically adjust the size of an image to fit the user's screen resolution. Additionally, I want to provide users with the option to toggle between viewing the actual image size and the adjuste ...

The amazing property of AngularJS - Scope

I have saved this HTML code in a file. Here is the HTML : <!-- checkbox 1 --> <input type="checkbox" name="checkbox1" id="checkbox-group1" ng-model="checkbox1" value="group1"> <input type="checkbox" name="checkbox1" id="checkbox-group2" ng ...

VueJS with Vuetify: Issue with draggable cards in a responsive grid

I am currently working on creating a gallery that allows users to rearrange images. To test this functionality, I am using an array of numbers. It is important that the gallery is responsive and displays as a single column on mobile devices. The issue I ...

The sidebar stays fixed in place and doesn't adapt to varying screen resolutions

Check out my website at . I have a fixed, blue sidebar on the left side of the page to ensure its content is always visible. However, I'm facing an issue with smaller resolutions like 1024x768 where some bottom content is cut off. How can I adjust the ...

Achieving parent element offset in JavaScript using AngularJS

console.dir(element[0].parentElement) console.dir(element[0].parentElement.offsetTop) In AngularJS, I am attempting to retrieve the offset of a parent element. I am looking to gather details about the parentElement. The first row shows that parentElemen ...

Exploring the different routing options for Nuxt.js: Dynamic versus Basic Routing

Can anyone suggest the best way to set up routing in Next.js for only Home, Gallery, and Contact us? Should I use dynamic routing or just keep it basic? Any ideas on how to path them? I'm still learning, so I would appreciate some guidance. I've ...

When launching the VueJS app in the browser, I am encountering a blank screen with no visible errors. What could be causing this issue?

I've recently embarked on a Vue.js app development journey and everything seems to be in order, except for the fact that the page displays as completely blank in the browser. There are no error messages in the terminal either. Despite my efforts to re ...

Display or conceal a div depending on the selected radio button

I am attempting to display a hidden div based on the input of a radio button. If the "yes" option is checked, the hidden div should be shown. Conversely, if the "no" option is checked, the div should be hidden. I'm not sure why this code isn't w ...

An error occurred while using $http.jsonp: unexpected character '<'

Even though I am receiving a response from the request, the .then() section of my code does not seem to be triggering. Can you help me figure out what mistake I might be making? window.distance24Result = function(data){ alert(data.distance); }; $http.js ...

retrieve scanned image information with node.js

Hey, I'm currently dealing with an issue that involves a form containing various types of questions such as boolean and text field answers. The user fills out the form, scans it, then uploads it to a node.js server. The node server will extract answe ...

Creating a progress bar with blank spaces using HTML, CSS, and JavaScript

Upon running the code below, we encounter an issue when the animation starts. The desired effect is to color the first ten percent of the element, then continue coloring incrementally until reaching 80%. However, as it stands now, the animation appears mes ...

Several treeviews for selecting data

I need some help with a specific assignment. The back end code is all set, but I'm struggling with the UI component. The task requires two tree views, one on the left and one on the right. The left tree view will contain states with multiple children, ...