Help creating array of picture elements

JavaScript
1

Hello, I have copied the code from Game Tutorial and I have modified it to produce the bellow code. It works but I have many more images to load from each reel. How would I make an array of the variable element myGamePiece instead of calling each one by its name?

    myGamePiece1  = new component(500, 200, "Image5.jpg", 0, -200,    "image", 5);


function component(width, height, color, x, y, type) {
    this.type = type;
    if (type == "image") {
        this.image = new Image();
        this.image.src = color;
    }
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        if (type == "image") {
            ctx.drawImage(this.image, 
                this.x, 
                this.y,
                this.width, this.height);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }
}
2

…did you try making an array and adding the different elements to it?
I don’t understand the question. Did you try that and encounter an error or what’s the problem?

3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

4

I need to load at least 25 images . Tried with array but code never works. No errors, just does not work.

5

Trying to upload the whole code so you can see what I am trying to do…

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<style>
body {
  font-family: Helvetica, sans-serif;
  font-size: 20px;
}

canvas {
    border:2px solid; 
	color: black;
    background-color: #f1f1f1;
}
input {
		text-align: center;
		font-size: 20px;
		width: 150px;
}

table, td, th {
  border: 1px solid black;
}

table {
  width: 1500px;
}

.buttons {
	height: 100px;
	width: 	100px;
}

#sometext {
	width: 700px;
}


</style>

<body onload="startGame()">

<audio id="bg-music"><source src="game_music.mp3" type="audio/mp3"></audio>
<audio id="win-music"><source src="winning.mp3" type="audio/mp3"></audio>

<script>

var easy = 0;
var myGamePiece;
var spinme = 0;
var cash= 1000;
var bets = 5;
var wins = 0;
var mute= 0;
const thespeed = ["0","0","0","0"];
const winlines = ["0","0","0","0"];
const box = ["0","0","0","0","0","0","0","0","0","0","0"];
var win_music = document.getElementById("win-music"); 
var bg_music = document.getElementById("bg-music"); 


function toggle_music() {
	if (mute == 0){
		if (bg_music.paused) {
			bg_music.play();
		}else{
			bg_music.pause();
			bg_music.currentTime = 0
		}
	}	
}

function playAudio(state) {
	if(state == "on")
		win_music.play(); 
	else {
		win_music.pause();
		win_music.currentTime = 0
	}
} 

function getwinnings()
{
	if(box[1] == box[2] && box[2] == box[3]){ 
 		wins +=5;
		winlines[1] = 1;
		}
	if(box[4] == box[5] && box[5] == box[6]){ 
		wins +=5;
		winlines[2] = 1;
		}
	if(box[7] == box[8] && box[8] == box[9]){ 
		wins +=5;
		winlines[3] = 1;
		}
	if(wins > 0) {
		cash += wins;
		document.getElementById("mycash").value = cash;
		document.getElementById("mycash").style.backgroundColor = "green";
		document.getElementById("mywins").value = wins;
		document.getElementById("mywins").style.backgroundColor = "green";
		playAudio("on");
		myGamePiece1.update();
	}
}

	
	<!-- This is the part of the code I am having trouble  with. -->
	<!-- I need at least 25 images for each reel. -->
	<!-- Would like if they were in an array. -->
	<!-- Would be more easy to write the code -->
function startGame() {
    myGamePiece1  = new component(500, 200, "Image5.jpg", 0, -200,    "image", 5);
	myGamePiece2  = new component(500, 200, "Image1.jpg", 0,    0,    "image", 1);
    myGamePiece3  = new component(500, 200, "Image2.jpg", 0,  200,    "image", 2);
    myGamePiece4  = new component(500, 200, "Image3.jpg", 0,  400,    "image", 3);
    myGamePiece5  = new component(500, 200, "Image4.jpg", 0,  600,    "image", 4);
    myGamePiece6  = new component(500, 200, "Image1.jpg", 500, -200,  "image", 1);
	myGamePiece7  = new component(500, 200, "Image3.jpg", 500, 0,     "image", 3);
    myGamePiece8  = new component(500, 200, "Image4.jpg", 500, 200,   "image", 4);
    myGamePiece9  = new component(500, 200, "Image2.jpg", 500, 400,   "image", 2);
    myGamePiece10 = new component(500, 200, "Image5.jpg", 500, 600,   "image", 5);
    myGamePiece11 = new component(500, 200, "Image5.jpg", 1000, -200, "image", 5);
	myGamePiece12 = new component(500, 200, "Image2.jpg", 1000,   0,  "image", 2);
    myGamePiece13 = new component(500, 200, "Image3.jpg", 1000, 200,  "image", 3);
    myGamePiece14 = new component(500, 200, "Image1.jpg", 1000, 400,  "image", 1);
    myGamePiece15 = new component(500, 200, "Image4.jpg", 1000, 600,  "image", 4);
    myGameArea.start();
	mySound = new sound("winning.mp3");
	document.getElementById("mycash").value = cash;
	document.getElementById("mybets").value = bets;
	document.getElementById("mywins").value = wins;
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 1500;
        this.canvas.height = 600;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 1);
        },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop : function() {
        clearInterval(this.interval);
    }
}

function component(width, height, color, x, y, type, id) {
    this.type = type;
    if (type == "image") {
        this.image = new Image();
        this.image.src = color;
    }
	this.id = id;
	this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        if (type == "image") {
			<!-- document.getElementById("sometext").value = thespeed; -->
			<!-- Get ALL reel pos image information -->
			if(this.x == 0 && this.y >=000 && this.y <= 10) box[1] = this.id;
			if(this.x == 500 && this.y >=000 && this.y <= 10) box[2] = this.id;
			if(this.x == 1000 && this.y >=000 && this.y <= 10) box[3] = this.id;
			if(this.x == 0 && this.y >=200 && this.y <= 210) box[4] = this.id;
			if(this.x == 500 && this.y >=200 && this.y <= 210) box[5] = this.id;
			if(this.x == 1000 && this.y >=200 && this.y <= 210) box[6] = this.id;
			if(this.x == 0 && this.y >=400 && this.y <= 410) box[7] = this.id;
			if(this.x == 500 && this.y >=400 && this.y <= 410) box[8] = this.id;
			if(this.x == 1000 && this.y >=400 && this.y <= 410) box[9] = this.id;

			<!-- if this image is passed the 600 pixel point = out of the canavas,  -->
			if(this.y >=600)
			{
				<!-- then reposition the image at -200, before the canevas, begining of picture strip. -->
				this.y -= 1000;
				<!-- if the speed of reel 1 id getting to slow at the end, cut it short -->
				<!-- do the same for the next three reels and their associated speeds -->
				if(thespeed[1] <=3 && this.x == 0   ) 
					thespeed[1] = 0;
				if(thespeed[2] <=3 && this.x == 500 ) 
					thespeed[2] = 0;
				if(thespeed[3] <=3 && this.x == 1000) {
					thespeed[3] = 0;
				}
			}
			<!-- draw the image on the screen at info provides -->
			ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
			
			<!-- for each paylines, draw a yellow line  -->
			if(winlines[1] == 1){
				ctx.beginPath(); ctx.moveTo(0, 100); ctx.lineTo(1500, 100); ctx.stroke(); ctx.lineWidth = 5; ctx.strokeStyle = "yellow";}
			if(winlines[2] == 1){
				ctx.beginPath(); ctx.moveTo(0, 300); ctx.lineTo(1500, 300); ctx.stroke(); ctx.lineWidth = 5; ctx.strokeStyle = "yellow";}
			if(winlines[3] == 1){
				ctx.beginPath(); ctx.moveTo(0, 500); ctx.lineTo(1500, 500); ctx.stroke(); ctx.lineWidth = 5; ctx.strokeStyle = "yellow";}
        }
    }
    <!-- calculate the new position of the picture -->
	this.newPos = function() {
        this.y += this.speedY;
    } 
} 

function updateGameArea() { 
	<!-- if the game is in progress -->
	<!-- move down the images -->
	if(spinme > 0)
		movedown();
	<!-- clear the canavas	 -->
    myGameArea.clear();
	<!-- for the next 5 images of reel 1 -->
	<!-- set the new position and update picture location -->
    myGamePiece1.newPos();
    myGamePiece1.update();
    myGamePiece2.newPos();
    myGamePiece2.update();
    myGamePiece3.newPos();
    myGamePiece3.update();
    myGamePiece4.newPos();
    myGamePiece4.update();
    myGamePiece5.newPos();
    myGamePiece5.update();
	
	<!-- if the easy mode of randomizer is on, easy wins, else -->
	<!-- set the randomizer at very hard calculations. -->
	if(easy > 0)
		thespeed[1] *= 0.994;
	else	
		thespeed[1] *= (0.992 - Math.random()/100);
		
	<!-- for the next 5 images of reel 2 -->
	<!-- set the new position and update picture location -->
    myGamePiece6.newPos();
    myGamePiece6.update();
    myGamePiece7.newPos();
    myGamePiece7.update();
    myGamePiece8.newPos();
    myGamePiece8.update();
    myGamePiece9.newPos();
    myGamePiece9.update();
    myGamePiece10.newPos();
    myGamePiece10.update();

	<!-- if the easy mode of randomizer is on, easy wins, else -->
	<!-- set the randomizer at very hard calculations. -->
	if(easy > 0)
		thespeed[2] *= 0.994;
	else	
		thespeed[2] *= (0.994 - Math.random()/100);
		
	<!-- for the next 5 images of reel 3 -->
	<!-- set the new position and update picture location -->
    myGamePiece11.newPos();
    myGamePiece11.update(); 
    myGamePiece12.newPos();
    myGamePiece12.update();
    myGamePiece13.newPos();
    myGamePiece13.update();
    myGamePiece14.newPos();
    myGamePiece14.update();
    myGamePiece15.newPos();
    myGamePiece15.update();

	<!-- if the easy mode of randomizer is on, easy wins, else -->
	<!-- set the randomizer at very hard calculations. -->
	if(easy > 0)
		thespeed[3] *= 0.994;
	else	
		thespeed[3] *= (0.996 - Math.random()/100);
	
	
	<!-- if reel 3 has stoped and game was started -->
	<!-- set flag spinme = 2 = game done,  --> 
	<!-- get the winning combinations, -->
	<!-- stop the game music -->
	if(thespeed[3]	== 0 && spinme == 1) {
		spinme = 2;
		getwinnings();
		bg_music.pause();
		bg_music.currentTime = 0
	}
}

function movedown() {
	<!-- for each of the 15 images, change the speed -->
	<!-- of display images depending on their reel position -->
    myGamePiece1.speedY = thespeed[1]; 
    myGamePiece2.speedY = thespeed[1];  
    myGamePiece3.speedY = thespeed[1];  
    myGamePiece4.speedY = thespeed[1];  
    myGamePiece5.speedY = thespeed[1];  
    myGamePiece6.speedY = thespeed[2]; 
    myGamePiece7.speedY = thespeed[2]; 
    myGamePiece8.speedY = thespeed[2]; 
    myGamePiece9.speedY = thespeed[2]; 
    myGamePiece10.speedY =thespeed[2];  
    myGamePiece11.speedY = thespeed[3];  
    myGamePiece12.speedY = thespeed[3];  
    myGamePiece13.speedY = thespeed[3];  
    myGamePiece14.speedY = thespeed[3];  
    myGamePiece15.speedY = thespeed[3];  
}

function maxbet()
{
	if(cash >= 15){
		bets = 15;
		cash -= bets;
		gostart();
	}
}
function minbet()
{
	if(cash >= 5){
		bets = 5;
		cash -= bets;
		gostart();
	}
}

function gostart()
{
	if(thespeed[3] == 0 ){
		playAudio("off");
		toggle_music();
		for(let i=1; i<=3; i++) {
			winlines[i] = 0;
			thespeed[i] = 500;
		}	
		wins = 0; 
		spinme=1;
		document.getElementById("mystart").value = document.getElementById("mycash").value;
		document.getElementById("mybets").value = bets;
		document.getElementById("mywins").value = wins;
		document.getElementById("mycash").value = cash;
		document.getElementById("mywins").style.backgroundColor = "white";
		document.getElementById("mycash").style.backgroundColor = "white";
	}
}

function toggle_mute()
{
	var Image_Id = document.getElementById("speaker");
	if (Image_Id.src.match("sound_on.jpg")) {
		Image_Id.src = "sound_off.jpg";
		mute = 1;
		bg_music.pause();
		bg_music.currentTime = 0
	}
	else {
		Image_Id.src = "sound_on.jpg";
		mute = 0;
	}	
}

</script>


<div style="text-align:center" width="auto";> 
<table><tr>
<td><a href= "#" onclick="toggle_mute();"><img src="sound_on.jpg"  height="55px"; width="55px"; 
       onmouseover="toggle_image_border(this)"; id="speaker"></img></a></td>
<td colspan="3"><input id="sometext" type="text" id="001"></td>
<td rowspan="2"><button onclick="minbet()"><img class="buttons" id="spin-button" src="Spin-button.jpg"; ></img></button></td>
<td rowspan="2"><button onclick="maxbet()"><img class="buttons" id="max-bet"     src="Max-Bet.jpg"; ></img></button></td>
</tr><tr>
<td valign="center" height="65px">Start Cash<br><input type="text" id="mystart"></td>
<td valign="center">Bet<br><input type="text" id="mybets"></td>
<td valign="center">Wins<br><input type="text" id="mywins"></td>
<td valign="center">Total Cash<br><input type="text" id="mycash" align="center" value="1000"></td>
</tr></table>
</div>

</body>
</html>
6

I finally made it work with arrays… Case closed!!!

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.