I'm working on a game named Factory Tycoon and have spotted a bug which I can't resolve myself. Every second you get plus what your items per second is on your items but it is failing to do so. Feel free to test the code. Code:
<!DOCTYPE html>
<html>
<head>
<title>Factory Tycoon</title>
<script type="text/javascript">
var money = 1000;
var items = 0;
var itemsps = 1;
var dropper1Cost = 100;
var dropper1Audio = new Audio('Audio/dropper1Sound.mp3');
function addDropper() {
if (money <= dropper1Cost - 1) {
alert('Not Enough Money.')
}
if (money >= dropper1Cost) {
dropper1Audio.play()
itemsps += 1;
money -= dropper1Cost;
dropper1Cost += 100;
}
}
setInterval(function renderMoney() {
document.getElementById('money').innerHTML = "Money:" + money;
})
setInterval(function renderItemsProcessedPS() {
document.getElementById('items').innerHTML = "Items Processed:" + items;
})
setInterval(function renderItemsProcessedPS() {
document.getElementById('itemsps').innerHTML = "Items Processed Per Second:" + itemsps;
}, 1000)
</script>
</head>
<h4 id="money"></h4>
<h4 id="items"></h4>
<h4 id="itemsps"></h4>
<body>
<img src="Images/dropper1IMG.png" onclick="addDropper()">
</html>
There isn't much code as I've only just started to develop it tonight :).
There is a few issues in the code:
<h4> elements need to be inside the <body> element
the </body> end tag is missing
the setInterval is called before all elements had a chance to load, which will make it error, so I wrapped them in an init function and called that on body load
Side note, this code can be optimized with addEventListener for the load event etc., but here you have a start
<!DOCTYPE html>
<html>
<head>
<title>Factory Tycoon</title>
<style>
span { display: inline-block; padding: 5px; background: #ddd; }
</style>
<script type="text/javascript">
var money = 1000;
var items = 0;
var itemsps = 1;
var dropper1Cost = 100;
var dropper1Audio = new Audio('Audio/dropper1Sound.mp3');
function addDropper() {
if (money <= dropper1Cost - 1) {
alert('Not Enough Money.')
}
if (money >= dropper1Cost) {
dropper1Audio.play()
itemsps += 1;
money -= dropper1Cost;
dropper1Cost += 100;
}
}
function init() {
setInterval(function renderMoney() {
document.getElementById('money').innerHTML = "Money:" + money;
})
setInterval(function renderItemsProcessedPS() {
document.getElementById('items').innerHTML = "Items Processed:" + items;
})
setInterval(function renderItemsProcessedPS() {
document.getElementById('itemsps').innerHTML = "Items Processed Per Second:" + itemsps;
}, 1000)
}
</script>
</head>
<body onload="init();">
<h4 id="money"></h4>
<h4 id="items"></h4>
<h4 id="itemsps"></h4>
<span onclick="addDropper()">Click Me</span>
</body>
</html>
Related
function a(response) {
setTimeout(function () {
for (i = 0; i < response.length; i++) {
if (response[i].hasOwnProperty("text")) {
var b = '<img class="img" src="path of my pic"/><p class="someclass">' + response[i].text + '</p><div class="something"></div>';
$(b).appendTo(".chatwindow").hide().fadeIn(1000);
} } } }
How do I use appendTo/append the content one after the other with a time delay? Instead it is displaying all at once, which I dont want like that.Please help me if i have to change anything?
You can use the delay() method for this:
function appendWithDelay() {
for (i = 0; i < 10; i++) {
var template = '<img class="img" src="https://picsum.photos/100"/>';
$(template).hide().appendTo(".chatwindow").delay(i * 1000).fadeIn(1000);
}
}
appendWithDelay();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chatwindow"></div>
Place your settimeout function inside the loop and condition
function a(response) {
for (i = 0; i < response.length; i++) {
if (response[i].hasOwnProperty("text")) {
setTimeout(function () {
var b = '<img class="img" src="path of my pic"/><p class="someclass">' + response[i].text + '</p><div class="something"></div>';
$(b).appendTo(".chatwindow").hide().fadeIn(1000);
}, 1000)
}
}
}
I have found a bug in 1.28:
I produced it by creating lots of entities with label. Howeveer, when I set the clustering enabled, some labels were invisible in 2D.
The screenshot of bug
the code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description"
content="Use Viewer to start building new applications or easily embed Cesium into existing applications.">
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
<style>
#convert {
z-index: 100;
top: 30px;
position: absolute;
}
</style>
<script type="text/javascript">
require.config({
baseUrl: '../../../Source',
waitSeconds: 60
});
</script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
#import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<div>
<button id="convert">2/3D转换</button>
</div>
<script id="cesium_sandcastle_script">
var viewer;
function startup(Cesium) {
'use strict';
//Sandcastle_Begin
viewer = new Cesium.Viewer('cesiumContainer');
document.getElementById("convert").onclick = function () {
if (viewer.scene.mode == Cesium.SceneMode.SCENE3D) {
viewer.scene.mode = Cesium.SceneMode.SCENE2D
} else {
viewer.scene.mode = Cesium.SceneMode.SCENE3D
}
};
var modelLayer = new Cesium.CustomDataSource();
for (var i = 0; i < 50; i++) {
var lon = Math.random() * 1000;
var lat = Math.random() * 500;
modelLayer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.1641667 + lon, -39.9522222 + lat),
label: {
text: '东海舰队超级无敌',
font: '13px Verdana',
position: Cesium.Cartesian3.fromDegrees(-75.1641667 + lon, -39.9522222 + lat, 100000),
verticalOrigin: Cesium.VerticalOrigin.TOP,
eyeOffset: Cesium.Cartesian3(0, 0, -10000)
},
model: {
position: Cesium.Cartesian3.fromDegrees(-75.1641667 + lon, -39.9522222 + lat, 0),
uri: '../../SampleData/models/CesiumAir/Cesium_Air.glb',
minimumPixelSize: 128,
maximumScale: 20000
}
});
}
var pixelRange = 15;
var minimumClusterSize = 3;
var enabled = true;
modelLayer.clustering.enabled = enabled;
modelLayer.clustering.pixelRange = pixelRange;
modelLayer.clustering.minimumClusterSize = minimumClusterSize;
var removeListener;
var pinBuilder = new Cesium.PinBuilder();
var pin50 = pinBuilder.fromText('50+', Cesium.Color.RED, 48).toDataURL();
var pin40 = pinBuilder.fromText('40+', Cesium.Color.ORANGE, 48).toDataURL();
var pin30 = pinBuilder.fromText('30+', Cesium.Color.YELLOW, 48).toDataURL();
var pin20 = pinBuilder.fromText('20+', Cesium.Color.GREEN, 48).toDataURL();
var pin10 = pinBuilder.fromText('10+', Cesium.Color.BLUE, 48).toDataURL();
var singleDigitPins = new Array(8);
for (var i = 0; i < singleDigitPins.length; ++i) {
singleDigitPins[i] = pinBuilder.fromText('' + (i + 2), Cesium.Color.VIOLET, 48).toDataURL();
}
customStyle();
function customStyle() {
if (Cesium.defined(removeListener)) {
removeListener();
removeListener = undefined;
} else {
removeListener = modelLayer.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster) {
cluster.label.show = true;
cluster.billboard.show = true;
cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
if (clusteredEntities.length >= 50) {
cluster.billboard.image = pin50;
} else if (clusteredEntities.length >= 40) {
cluster.billboard.image = pin40;
} else if (clusteredEntities.length >= 30) {
cluster.billboard.image = pin30;
} else if (clusteredEntities.length >= 20) {
cluster.billboard.image = pin20;
} else if (clusteredEntities.length >= 10) {
cluster.billboard.image = pin10;
} else {
cluster.billboard.image = singleDigitPins[clusteredEntities.length - 2];
}
});
}
// force a re-cluster with the new styling
var pixelRange = modelLayer.clustering.pixelRange;
modelLayer.clustering.pixelRange = 0;
modelLayer.clustering.pixelRange = pixelRange;
}
viewer.dataSources.add(modelLayer);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
startup(Cesium);
} else if (typeof require === "function") {
require(["Cesium"], startup);
}
</script>
</body>
</html>
This used to work in Cesium v1.26. I have just encountered this same issue with the current Cesium v1.34 and have logged a bug. The labels will appear if you disable clustering.
I'm trying to figure out how to switch from one image to another after 500 ms. What I have currently keeps switching between images, but I want each image to display for 500 ms and to have the second image disappear after that 500 ms instead of having it loop. This is what I have right now:
<html>
<head>
<title>loop</title>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
function startTimer() {
setInterval(displayNextImage, 500);
}
var images = [], x = -1;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
</script>
</head>
</html>
<body onload = "startTimer()">
<img id="img" src="image1.jpg">
</body>
</html>
Can anyone help me fix this? Thank you!
This should do what you want it to do:
<html>
<head>
<title>loop</title>
<script type = "text/javascript">
var images = [];
var x = 0;
var $img = document.getElementById("img");
images[0] = "image1.jpg";
images[1] = "image2.jpg";
function displayNextImage() {
if (++x < images.length) {
$img.src = images[x];
setInterval(displayNextImage, 500);
}
else {
$img.remove();
}
}
function startTimer() {
setInterval(displayNextImage, 500);
}
</script>
</head>
</html>
<body onload = "startTimer()">
<img id="img" src="image1.jpg">
</body>
</html>
I am trying to create dynamically generated elements when the user clicks on a button. The should slide in from the right, and when the button is clicked again, another should slide in from the right. For some reason, it is not doing exactly what I need it to do. Here's the code:
<html>
<head>
<title>Chat Head</title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
screenWidth = $(window).width();
screenHeight = $(window).height();
msgWidth = 0.7*screenWidth;
msgHeight = 0.7*screenHeight;
$("#note").css("width", msgWidth);
$("#note").css("height", msgHeight);
$("#slide").click(function(){
var textArea = '<textarea class = form-control rows = "3" id = "text"></textarea>';
$(textArea).appendTo('.note');
var effect = 'slide';
var duration = 1000;
$(".note").toggle(effect, {direction: 'right'}, duration);
});
});
</script>
</head>
<style type="text/css">
.note{
display: none;
}
</style>
<body>
<div class="row">
<div class="col-md-12">
<button class = "button" id = "slide">Slide</button>
<hr />
<div class="note">
<!-- <textarea class = "form-control" rows = "2" id = "note"></textarea> -->
</div>
</div>
</div>
</body>
</html>
Here's the JS Fiddle that goes with the code:
http://jsfiddle.net/ma6Jq/2/
Here is an implementation I came up with. http://jsfiddle.net/Ar7qw/1/
<script>
$(document).ready(function(){
var count = 0;
$("#slide").click(function(){
count = count + 1;
screenWidth = $(window).width();
screenHeight = $(window).height();
msgWidth = 0.7*screenWidth;
msgHeight = 0.7*screenHeight;
$("#note"+ count).css("width", msgWidth);
$("#note"+ count).css("height", msgHeight);
var newnote = '<div class="note' + count +'"></div>';
$(newnote).appendTo('.col-md-12');
var textArea = '<textarea class="form-control" rows = "3" id = "text"></textarea>';
$(textArea).appendTo('.note' + count);
$('.note' + count).effect('slide', {direction: 'right'}, 1000);
});
});
</script>
This gets you close. I'm out of time for now.
http://jsfiddle.net/isherwood/ma6Jq/10
.note-box {
margin-left: 150%;
}
.done {
margin-left: 10px;
transition: all 1s;
}
$("#slide").click(function () {
var textArea = '<textarea class="form-control note-box" rows="3"></textarea>';
var duration = 1000;
$(textArea).appendTo('#note').addClass('done', duration);
});
Another implementation for anybody needing one(or a couple different choices of solutions)
http://jsfiddle.net/ma6Jq/13/
var counter = 0;
$("#slide").click(function () {
counter ++;
var textArea = '<div class="note' + counter + '"><textarea class ="form-control" rows = "3" id = "text">'+ counter +'yo</textarea></div>';
$(textArea).appendTo('.note');
var effect = 'slide';
var duration = 1000;
var stringhere = ".note" + counter;
$(stringhere).effect('slide',
{
direction:'right'
}, duration);
/*
$(stringhere).animate({
marginLeft: parseInt($(stringhere).css('marginLeft'),1000) == 0 ?
$(stringhere).outerWidth() :
100
});
*/
/*
$(stringhere).toggle(effect, {
direction: 'left'
}, duration);
*/
});
});
I wish to play a list of words. Each word is represented by audio recordings of that word in three different dialects. All three audio files should start playing simultaneously, for each word. The code below works most of the time, but sometimes the three audio files will play out of sync for a given word. Why is this and how can I fix it?
UPDATE:
I think the issue is that the audio has to be fetched and stored on the client's machine in some sort of cache. This is my conclusion at least since I notice that problems are more prevalent when new words are added to the playlist. Can I cache all the audio for all words before I start playing?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Player</title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var _dialects = ["c","m","u"];
var _playlist =
[
"ta_x",
"me_x",
"ag",
"rith",
"agus",
"ag",
"ceol",
];
var _players = new Array();
for (var i=0;i<_dialects.length;i++)
{
_players[i] = document.getElementById("audio_player_"+(i+1));
}
var _number_of_available_players = _dialects.length;
var _playlist_index = 0;
var _play_button = document.getElementById("play_button");
function play()
{
_playlist_index = 0;
_play_button.disabled = true;
next();
}
function next()
{
if(_number_of_available_players == _dialects.length)
{
if(_playlist_index < _playlist.length)
{
for (var i=0;i<_players.length;i++)
{
if (_players[i].canPlayType('audio/mpeg;'))
{
_players[i].src = "http://www.focloir.ie/media/ei/sounds/" + _playlist[_playlist_index] + "_"+_dialects[i]+".mp3";
}
else
{
_players[i].src = "http://www.focloir.ie/media/ei/sounds_ogg/" + _playlist[_playlist_index] + "_"+_dialects[i]+".ogg";
}
_players[i].play();
}
_playlist_index = _playlist_index + 1;
_number_of_available_players = 0;
}
else
{
_play_button.disabled = false;
}
}
}
function end()
{
_number_of_available_players = _number_of_available_players + 1
next();
}
for (var i=0;i<_players.length;i++)
{
_players[i].addEventListener('ended', end);
}
_play_button.addEventListener('click', play);
}//]]>
</script>
</head>
<body>
<audio id = "audio_player_1"></audio>
<audio id = "audio_player_2"></audio>
<audio id = "audio_player_3"></audio>
<button id = "play_button">Play</button>
</body>
</html>