Ok this will be long please bear with me (Im new to Javascript programming btw)
So our task in school is to get an open source game and modify it
The one I found is good it's a tank shooter, however the thing is the game instantly start upon opening the index.html I wanted to add start menu/button and have option for 2,3,or 4 players
Here is the code in index.html, I'll put my observations next to it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Neon Tankz</title>
<link rel="stylesheet" href="style.css">
<script src="p5.min.js"></script>
<script src="p5.play.js"></script>
<script src="Extensions/array-extensions.js"></script>
<script src="Extensions/vector-extensions.js"></script>
<script src="Entities/sprite-entity.js"></script>
<script src="Entities/Map/tile.js"></script>
<script src="Entities/Map/grid.js"></script>
<script src="Entities/Map/game-map.js"></script>
<script src="Entities/Scoreboard/score.js"></script>
<script src="Entities/Scoreboard/scoreboard.js"></script>
<script src="Entities/bullet.js"></script>
<script src="Entities/cannon.js"></script>
<script src="Entities/player.js"></script>
<script src="main.js"></script>
</head>
<body style="background-color: black;display: flex; justify-content: center;">
<div>
<input type="button" style="position: absolute; top: 0; left: 0;" onclick="location.reload(true);"
value="Reload">
<button onclick="stopMusic()"> Staph Moosic</button>
<button id="mylink" onclick="myclick()">
Load
</button>
</div>
</body>
</html>
You might be confused about the load, reload and Staph Moosic
Load = is a testing button for start or loading game,
Reload = reloads the game, or refresh the browser,
Staph Moosic = stops the music (I added a music in main.js)
Here are the observations I noticed and what I did:
main.js has preload() and load() function and it is the file where I can modify no. of players, removing it will leave the index blank
So I assumed that with bunch of loaded scripts, main.js is needed to run?
So I tried to make another copy of main.js (main2.js) but this file is modified to only two players
and changed the previous to
<script src= "main2.js">
and it works, the game started with two players only.
At this point, I don't know what solution I can do apart from creating multiple copies of index.html (rename each of them) and each has different main.js depending on how many players
and have index.html to just an html that links to those multiple htmls
I know it's kind of weird solution are there other solutions?
EDIT
This is the code in main.js
/*Im trying to add more maps value1 and value2 are for the maps,
Currently there are two maps (map1.txt and map2.txt)
It doesn't do anything much, don't mind this lool
*/
var value1 = "1";
var value2 = "2";
//This is for the background music
var myMusic;
//This code is to make the myMusic loop
myMusic = new Audio("Images/bgMusic.wav");
myMusic.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);
//This code is to play music
myMusic.play();
function start() {
decision = true;
}
const config = {
screen: {
width: 1000,
height: 500,
},
players: [],
groups: {},
bullets: {
deathTimer: 4000
},
mapTile: {
dimension: 20
//this changes the size of the map previously 22
}
};
function preload() {
loadStrings("Entities/Map/map" + value2 + ".txt", mapText => config.map = new GameMap(mapText));
for (const group of ["players", "bullets", "tiles"]) {
config.groups[group] = new Group();
}
function load() {
function removePlayer() {
config.players.remove(this);
if (config.players.length === 1) {
let resetBoard = false;
for (const score in config.scoreboard.scores) {
if (config.scoreboard.scores[score].value > 8) {
config.scoreboard.reset();
resetBoard = true;
break;
}
}
if (!resetBoard) {
config.scoreboard.scores[config.players[0].name].increment();
}
//in my observation, the player score which is below will only increment if that player stays
//removing this, will not change the score no matter who survives
for (const player of config.players) {
player.destroy();
}
config.players.length = 0; //idk what this do but setting it to other value makes the screen hang after one wins
load();
}
}
//the no. of players can be determined
//When you remove this config.players.push...
//A player will be removed with no errors
config.players.push(new Player("Player1", "Happy", {
forward: 87, // W
backward: 83, // S
rotateLeft: 65, // A
rotateRight: 68, // D
shoot: 81 // Q this is the fire button for the player 1
}, removePlayer));
config.players.push(new Player("Player2", "Neutral", {
forward: 73, // I
backward: 75, // K
rotateLeft: 74, // J
rotateRight: 76, // L
shoot: 85 // U // this is the fire button for the player 2
}, removePlayer));
config.players.push(new Player("Player3", "Smiley", {
forward: 38, // Up arrow
backward: 40, // Down arrow
rotateLeft: 37, // Left arrow
rotateRight: 39, // Right arrow
shoot: 191 // Forward slash ('/') this is the fire button for the player 3
}, removePlayer));
config.players.push(new Player("Player4", "Neo", {
//the name "smiley" refers to the image that is provided
forward: 84, // T
backward: 71, // G
rotateLeft: 70, // F
rotateRight: 72, // H
shoot: 82 // R this is the fire button for the player 4
}, removePlayer));
//always take note when changing the controls, the program follows the ascii dec of UPPERCASE letters
}
load();
config.scoreboard = new Scoreboard(config.players);
}
function setup() {
createCanvas(config.screen.width, config.screen.height + 100);
//the 100 was added for the position of scoreboard?
}
function draw() {
clear();
config.map.update();
config.map.draw();
config.groups.bullets.draw();
//deleting this will make a bullet invisible
config.groups.players.overlap(config.groups.bullets, function (player, bullet) {
var mySound;
mySound = new Audio("Images/boxHit.wav");
mySound.play();
player.spriteEntity.destroy();
bullet.spriteEntity.destroy();
});
for (const player of config.players) {
player.update(config.players);
player.draw();
}
config.scoreboard.draw();
}
function keyPressed(event) {
for (const player of config.players) {
player.keyPressed(event.keyCode);
}
}
//This function is to stop music
//it doesnt totally work, because when a player gets hit, then the play will go on
function stopMusic() {
myMusic.pause();
}
function playMusic() {
myMusic.play();
}
Should I add all the js files? It might make the question long, Im new to this stack overflow
About this index.html goes blank
I'm sorry for misunderstanding, the index file doesnt go white and all
What I meant is to be like this
This is the game with
<script src="main.js"></script>
This is the game without
<script src="main.js"></script>
I'm sorry for misunderstanding I have level 0 in communication skills xD
Related
I am trying to make a playable on Unity Ads using Phaser 3 but it seems that there are multiple specifications to use it, one of the Unity Ads specifications and as in their documentation "Advertisements should be designed not to need any network requests (XHR), but for example, analytics calls to track user interaction are allowed"
So I don't know how to add the Phaser CDN to my file.
Note: the Playable should be in one file and images must be in base 64.
So I need to know if there is an example of how to make playable on unity ads using phaser 3.
The following code shows a black screen when I test it
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
padding: 200px;
}
</style>
</head>
<body>
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.min.js"></script>
<script>
class Test extends Phaser.Scene{
constructor(){
super('test')
this.imageData = 'data:image/png;base64,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';
this.brain = null;
}
create () {
this.textures.addBase64('brain', this.imageData);
this.textures.once('addtexture', function () {
this.brain = this.add.sprite(this.wid, 300, 'brain');
this.brain.setInteractive()
this.brain.on('pointerdown',()=>{
mraid.open('https://play.google.com/store/apps/details?id=[name of a game]')
})
}, this);
// this.btn = this.add.image(400, 300, 'btn')
// .setScale(0.3)
}
}
// Wait for the SDK to become ready
if (mraid.getState() === 'loading') {
mraid.addEventListener('ready', onSdkReady);
} else {
onSdkReady();
}
function viewableChangeHandler(viewable) {
// start/pause/resume gameplay, stop/play sounds
if(viewable) {
showMyAd();
} else {
// pause
}
}
function onSdkReady() {
mraid.addEventListener('viewableChange', viewableChangeHandler);
// Wait for the ad to become viewable for the first time
if (mraid.isViewable()) {
showMyAd();
}
}
function showMyAd() {
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene:[Test]
};
new Phaser.Game(config);
}
</script>
</body>
</html>
I don't really know how unity ads works, but you could simply inline the minified phaser-code-file into a script-tag above the gamecode, and so there are no calls to external source / cdn's.
...
<script> !function(t,e){"object"==typeof exports&& ... </script>
...
(This will obviously increase your html-file significantly (~ 1 MB), but works)
Tip: if you are using a bundler like webpack or so, this could be done automatically, maybe even images an such.
I don't have any JSON files in this program only js and html my theory is that the program is running the html like a JSON file I'm using replit and kaboom to run the game
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>kaboom</title>
<meta charset="utf-8">
<style>
* {
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
{{kaboom}}
</body>
</html>
js code:
import kaboom from "kaboom";
// initialize context
kaboom();
scene();
const SPEED = 320
var METEORX = 2
const NiceX = 20
//onsole.log(str(METEORX))
// load assets
loadSprite("grass", "sprites/grass.png");
loadSprite("Player", "sprites/Player.png");
loadPedit("meteor", "sprites/meteor.pedit");
loadPedit("air Meteor", "sprites/air Meteor.pedit");
// add a character to screen
const meteor = add ([
sprite("air Meteor"),
pos(rand(0, width()), 40),
area(),
move(DOWN, 300),
"meteor",
"enemy",
cleanup(20)
])
var player = add([
// list of components
"player",
sprite("Player"),
pos(center()),
area(),
body(),
health(3)
]);
add([
rect(width(), 48),
"ground",
pos(0, height() - 48),
outline(4),
area(),
solid(),
color(127, 200, 255),
])
onCollide("player", "enemy", () => {
player.hurt(1.5)
})
loadPedit("ground meteor", "sprites/ground meteor.pedit");
var difficulty = 5;
onCollide("enemy", (niceMeteor) => {
addExplosion()
destroy(niceMeteor)
})
onKeyPress("space", () => {
if (player.grounded()) {
player.jump()
}
})
onKeyDown("d", () => {
player.move(SPEED, 0)
})
onKeyDown("a", () => {
player.move(-SPEED, 0)
})
The most likely scenario is that one of the sprites you have specified does not exist. In this case you should also see an error: ERROR: sprite not found: "<your sprite name here>". (I think it's a bug that kaboom tries to parse the response as JSON at all in this case, because it's getting a 404 response with content-type text/html).
Another possibility, however improbable, is that one of your sprite files is corrupt. Kaboom's .pedit file format is actually a JSON file with image data embedded as base64:
{
"version": "1",
"width": 32,
"height": 32,
"palette": [[0,0,0,255],[255,255,255,255],[255,255,128,255],[255,128,255,255],[0,128,128,255],[128,0,255,255],[255,0,128,255],[0,255,255,255]],
"anims": {
"Test": {"from":0,"to":1,"loop":true}
},
"frames":[
"data:image/png;base64,...",
"data:image/png;base64,..."
]
}
So if one of those files got corrupted during editing that could also cause this error. Normally in order to figure this out I would suggest you look at the stack trace for the error that is being thrown, which is visible in your web browser's developer console. However, Kaboom does not produce good stack traces for calls to loadPedit. So your best bet is probably to put some console.log('loading sprite XXX') statements before each load call. Once you know which pedit file is invalid you can rename that file from whatever.pedit to whatever.json and inspect the contents in your repl.
I have a similar slideshow displayed a few times here! It works fine but I don't get the right mapping on an a-sky. I am not a coder but I guess drawImage is just made for rectangular objects instead of spherical? Is there an alternative to drawImage which works for spherical?
Here are my codes:
AFRAME.registerComponent('draw-canvas', {
schema: {
type: 'selector'
},
init: function() {
var canvas = this.canvas = this.data;
var ctx = this.ctx = canvas.getContext('2d');
var i = 0; // Start Point
var images = []; // Images Array
var time = 3000; // Time Between Switch
// Image List
images[0] = "Tulips.jpg";
images[1] = "Tulips2.jpg";
images[2] = "Tulips3.jpg";
// Change Image
function changeImg() {
document.getElementById('pic01').src = images[i];
ctx.drawImage(document.getElementById('pic01'), 0, 0, 300, 300);
// Check If Index Is Under Max
if (i < images.length - 1) {
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
// Run function every x seconds
setTimeout(function() {
changeImg()
}, time);
}
// Run function when page loads
window.onload = changeImg;
console.log("Hello World!");
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Texture</title>
<meta name="description" content="Canvas Texture - A-Frame">
<script src="./components/aframe-v0.6.0.js"></script>
<script src="./components/slideshow.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="pic01" src="Tulips.jpg">
<img id="pic02" src="Tulips2.jpg">
<img id="pic03" src="Tulips3.jpg">
<canvas id="slide" name="slide" crossOrigin="anonymous"> </canvas>
</a-assets>
<a-sky material="shader: flat; src: #slide" draw-canvas="#slide">
<a-sky/>
</a-scene>
</body>
</html>
And if anybody knows how to nicely fade over the pictures, please feel free to share! I bet a lot of people would be happy about a nice A-Frame Slideshow.
I've got a solution, but I've altered quite a lot of Your stuff.
I've got rid of the canvas, You already have three image assets, no need to rewrite, or buffer them on each other.
Just store the asset id's and use setAttribute("material", "src", picID)
Furthermore I've added the a-animation component, so Your slideshow will have a nice smooth transition. You need to set the animation duration to the slideshow's time / 2, for it goes back and forth.
This said, check out my fiddle.
As for the drawImage part of the question, drawImage draws (writes) an image onto a canvas element. The mapping is fine, since You only need to make sure You have a spherical photo, otherwise it will get stretched all over the model.
I have been practicing using sprites for a game I am going to make and have watched and read a few tutorials, I thought I was close to getting my sprite to appear so I could finally start my game but while practicing I cant get it to work, I have dont 2 seperate tutorials where I can get the sprite and the background to appear by themselfs but cannot get them to work together, I have been using EaselJS too. some of the sprite animation code has been copied from tutorials too.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>sprite prac<title>
<!-- EaselJS library -->
<script src="lib/easel.js"></script>
<script>
// Initialize on start up so game runs smoothly
function init() {
canvas = document.getElementById("canvas");
stage = new Stage(canvas);
bg = new Image();
bg.src = "img/grassbg.jpg";
bg.onload = setBG;
stage.addChild(background);
imgMonsterARun = new Image();
imgMonsterARun.onload = handleImageLoad;
imgMonsterARun.onerror = handleImageError;
imgMonsterARun.src = "img/MonsterARun.png";
stage.update();
}
function handleImageLoad(e) {
startGame();
}
// Simple function for setting up the background
function setBG(event){
var bgrnd = new Bitmap(bg);
stage.addChild(bgrnd);
stage.update();
}
function startGame() {
// create a new stage and point it at our canvas:
stage = new createjs.Stage(canvas);
// grab canvas width and height for later calculations:
screen_width = canvas.width;
screen_height = canvas.height;
// create spritesheet and assign the associated data.
var spriteSheet = new createjs.SpriteSheet({
// image to use
images: [imgMonsterARun],
// width, height & registration point of each sprite
frames: {width: 64, height: 64, regX: 32, regY: 32},
animations: {
walk: [0, 9, "walk"]
}
});
// create a BitmapAnimation instance to display and play back the sprite sheet:
bmpAnimation = new createjs.BitmapAnimation(spriteSheet);
// start playing the first sequence:
bmpAnimation.gotoAndPlay("walk"); //animate
// set up a shadow. Note that shadows are ridiculously expensive. You could display hundreds
// of animated rats if you disabled the shadow.
bmpAnimation.shadow = new createjs.Shadow("#454", 0, 5, 4);
bmpAnimation.name = "monster1";
bmpAnimation.direction = 90;
bmpAnimation.vX = 4;
bmpAnimation.x = 16;
bmpAnimation.y = 32;
// have each monster start at a specific frame
bmpAnimation.currentFrame = 0;
stage.addChild(bmpAnimation);
// we want to do some work before we update the canvas,
// otherwise we could use Ticker.addListener(stage);
createjs.Ticker.addListener(window);
createjs.Ticker.useRAF = true;
createjs.Ticker.setFPS(60);
}
//called if there is an error loading the image (usually due to a 404)
function handleImageError(e) {
console.log("Error Loading Image : " + e.target.src);
}
function tick() {
// Hit testing the screen width, otherwise our sprite would disappear
if (bmpAnimation.x >= screen_width - 16) {
// We've reached the right side of our screen
// We need to walk left now to go back to our initial position
bmpAnimation.direction = -90;
}
if (bmpAnimation.x < 16) {
// We've reached the left side of our screen
// We need to walk right now
bmpAnimation.direction = 90;
}
// Moving the sprite based on the direction & the speed
if (bmpAnimation.direction == 90) {
bmpAnimation.x += bmpAnimation.vX;
}
else {
bmpAnimation.x -= bmpAnimation.vX;
}
// update the stage:
stage.update();
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="500" height="500" style="border: thin black solid;" ></canvas>
</body>
</html>
There are a few places where you are using some really old APIs, which may or may not be supported depending on your version of EaselJS. Where did you get the easel.js script you reference?
Assuming you have a version of EaselJS that matches the APIs you are using, there are a few issues:
You add background to the stage. There is no background, so you are probably getting an error when you add it. You already add bgrnd in the setBackground method, which should be fine. If you get an error here, then this could be your main issue.
You don't need to update the stage any time you add something, just when you want the stage to "refresh". In your code, you update after setting the background, and again immediately at the end of your init(). These will fire one after the other.
Are you getting errors in your console? That would be a good place to start debugging. I would also recommend posting code if you can to show an actual demo if you continue to have issues, which will help identify what is happening.
If you have a newer version of EaselJS:
BitmapAnimation is now Sprite, and doesn't support direction. To flip Sprites, use scaleX=-1
Ticker no longer uses addListener. Instead it uses the EventDispatcher. createjs.Ticker.addEventListener("tick", tickFunction);
You can get new versions of the CreateJS libraries at http://code.createjs.com, and you can get updated examples and code on the website and GitHub.
We are working on visualization of sorting algorithms, required to add sleep and wait logic to help visualize the selected element and the element to which it is compared. After searching li'l bit, we found a code "function sleep(milliseconds){...}" which should work as desired but has failed so far.
In function insertionSort(){...}, the current element is depicted with color red and the element to which it is compared with is depicted with color blue, once the current element is swapped with the other the color of the element is again changed to white from blue (working correctly, verified using debugger), However during execution, these color transformations were not visible (only the element in red is displayed after each iteration)
var element = function(value, color)
{
this.value = value;
this.color = color;
};
var x = [];
x[0] = new element(2, "white");
x[1] = new element(1, "white");
x[2] = new element(5, "white");
x[3] = new element(4, "white");
x[4] = new element(3, "white");
x[5] = new element(7, "white");
x[6] = new element(6, "white");
x[7] = new element(8, "white");
x[8] = new element(10, "white");
x[9] = new element(9, "white");
var i = 1;
var context;
var delayTime = 1000;
function myFunction()
{
var bar = document.getElementById("bar");
width = bar.width;
height = bar.height;
context = bar.getContext("2d");
window.setInterval(insertionSort, 3000);
}
function insertionSort()
{
if(i>=0 && i<x.length)
{
var j = i;
x[j].color = "red";
drawGraph(j);
while(j>0 && x[j-1].value > x[j].value)
{
x[j-1].color = "blue";
x[j].color = "red";
drawGraph();
//need to add delay here
sleep(delayTime);
//swap
var temp = x[j];
x[j] = x[j-1];
x[j-1] = temp;
drawGraph();
// and here...
sleep(delayTime);
x[j].color = "white";
drawGraph();
j = j-1;
}
x[j].color = "white";
i++;
}
else if(i>=x.length)
{
for(k=0;k<x.length;k++)
{
x[k].color = "white";
}
drawGraph();
i=-1;
}
}
function sleep(milliseconds)
{
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++)
{
if ((new Date().getTime() - start) > milliseconds)
{
break;
}
}
}
function drawGraph()
{
context.StrokeStyle = "black";
context.clearRect ( 0 , 0 , width, height);
for(k=0;k<x.length;k++)
{
context.fillStyle = x[k].color;
//x and y coordinate of top left corner of rectangle
context.strokeRect(400+k*20, 18, 20, x[k].value*10);
context.fillRect(400+k*20, 18, 20, x[k].value*10);
}
}
<html>
<head>
<script language="javascript" type="text/javascript" src="../p5.js"></script>
<!-- uncomment lines below to include extra p5 libraries -->
<!--<script language="javascript" src="../addons/p5.dom.js"></script>-->
<!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style> body {padding: 0; margin: 0;} </style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<canvas id="bar" width="1000" height="400" style="border:2px"></canvas>
</body>
</html>
The approach to used in that implementation of sleep() would be terrible in any programming language, because it consumes a lot of CPU while waiting. In JavaScript, however, it's especially bad, because a JavaScript program is required to relinquish control frequently; it is not permitted to keep computing for an extended period of time. In Chrome browser, for example, Chrome will consider the program to be unresponsive, and will suggest to the user that they kill it.
But even if that weren't the case, it won't produce the desired effect, which I assume is that some animation happens on the screen, with some delay from one step to the next. The way JavaScript works in the browser, is that any changes you make to the page get rendered when your program relinquishes control; nothing updated on-screen while any JavaScript code is running. If you call a sleep function like that one, you are not relinquishing control, you are running JavaScript the whole time, and therefore the browser will not update the screen during that time. It will only update when your entire insertionSort method returns, and the browser has that 3000ms time window (from your setInterval) to take care of its own stuff (rendering).
Unfortunately, you will have to find a way to split up that algorithm, so that each step that you want to be distinctly visible to the user happens in its own timed callback.
It will probably be something along the lines of:
function stepOne() {
do the first bit;
setTimeout(secondStep, delay)
}
secondStep() {
do some more stuff;
setTimeout(thirdStep, delay)
}
and so on. The way you control the speed of the animation is with the delay parameter from one step to the next.
It's going to be tricky, especially because you aren't just trying to animate Insertion Sort, but various algorithms. So then, do you break them all up as in: insertionSortStepOne/Two/Three, shellSortStepOne/Two/Three? that would be quite ugly.
Depending on how ambitious you are, and how much you want to get out of this assignment, you might explore this feature of ES6 (a newer version of JavaScript)
function*
What this lets you do is let your function, with all its nested loops, remain structured pretty much as it is, but you insert points where it relinquishes control. Later, it is called back to continue from the point where it left off. You would use setTimeout or setInterval to do that. I've not experimented with this myself, but it seems super-cool.