I am a newbie, in crafty as well as js, so pardon me if I might have made very silly errors in the following program.
What is wrong with the following code? The following code is supposed to create 5*5 matrix where each block would be a 60 pixel high and wide iceblock as stored in iceblock.jpg.
window.onload=function()
{
Crafty.init(500,500);
Crafty.canvas();
Crafty.sprite(60,"iceblock.jpg",{block : [0,0]});
Crafty.c("iceblock",function(){
init: function(){
this.addComponent("2D, Canvas, Mouse, block");
this.w = 60;
this.h = 60;
}
});
};
for(var i=0;i<5;i++)
{
for(var j=0;j<5;j++)
{
Crafty.e("iceblock").attr({x: i*60,y: j*60})
}
}
The corresponding HTML code is:-
<!DOCTYPE html>
<head>
<script type="text/javascript" src="crafty.js"></script>
<script type="text/javascript" src="assignment.js"></script>
<title>My Crafty Game</title>
</head>
<body>
</body>
</html>
When I open the HTML page, the complete output page is blank.
This is the link to the image.
http://postimage.org/image/ivqfhmjt9/
PS:- Is there a less annoying way to indent our code instead of putting 4 spaces infront of each line? Very time consuming and tedious.
For reference, see this thread https://groups.google.com/forum/?fromgroups#!topic/craftyjs/OkG5rFb3tqo
Or the code here http://jsfiddle.net/cYxeZ/
Related
I need help on my game, in this chase I need help for On-click event. I have a image that for each time I click on it I get 1 score point. I need help to create this quite basic event or someone who be kind enough to write a script for me.
I created a basic code for the clicker game:
<html>
<head>
<title>My Work</title>
</head>
<body>
<img id="nokia" src="phone.jpg" />
</body>
</html>
I haven't made that much progress as you can see, I need help with a on-click event in either html or in JavaScript also a score board system would be a nice touch however I can probably figure this out.
I got a friend to write some code but time was limited I got a half done code if you like to finish it or to tell me what he was trying to do here is that code:
<html>
<head>
<title>My Work</title>
<script>
(function() {
var score = 0;
var phone = document.getElementById("nokia");
phone.onclick=function(){
score++;
output = document.getElementById("score");
output.innerHTML = score;
};
})();
</script>
</head>
<body>
<img id="nokia" src="phone.jpg" />
<div id="score"></div>
</body>
</html>
All help is greatly appreciated! :)
You would do something like this (plain js)
document.getElementById('nokia').onclick=function(){
var score = parseInt(document.getElementById("score").innerHTML);
score++;
document.getElementById("score").innerHTML = score;
}
Here a full example as fiddle: https://jsfiddle.net/sbunu38g/
Note: You will need to set the content of your score div to 0 at the beginning. Otherwise you will receive NaN after clicking the image
Update:
As asked in comments - to be able to use this in your header element you will need to wrap window.onload function around it. By this you will ensure the needed elements are loaded before trying to attack the onclick eventhandler
window.onload = function() {
document.getElementById('nokia').onclick=function(){
var score = parseInt(document.getElementById("score").innerHTML);
score++;
document.getElementById("score").innerHTML = score;
}
};
It seems like I followed the directions completely in my assignment powerpoint, I checked if I was using each function right, tripple checked my spelling, and I have no idea why it wont work, I'm very new to javascript, I tried debugging it from top to bottom, however it seems something is making my script not work, or I am doing something wrong all together. What am I doing wrong with my code?
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>Rollover Banner </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- VARIABLE DECLARATION -->
if (document.images)
{
var photos = new Array (“images1/nj1.jpg”,”images1/nj2.jpg”,”images1/dice1.jpg”);
var photoURLs = new Array (“msn.com”,”imdb.com”,”tv.com”);
}
var i = 0;
function newLocation()
{
document.location.href="http://www." + photoURLs[i];
}
function rotate()
{
i = Math.floor(Math.random()*3);
document.banner.src = photos[i];
document.write(i); //doesnt do anything
setTimeout("rotate()", 1000);
}
</SCRIPT>
</HEAD>
<BODY >
<a href="javascript:newLocation()"> <!--doesnt direct to anything -->
<img src="images1/nj2.jpg" name="banner"> <!--loads -->
</a>
<SCRIPT language="Javascript">
rotate();
</SCRIPT>
</BODY>
</HTML>
Make sure that you are not using smart quotes in your arrays. Try retyping the " character, even if it looks normal.
Smart quotes are a very annoying issue for developers alike.
Addition:
The find and replace feature is very helpful with this.
I followed a simple tutorial from here. Which basically has the following code
<!doctype html>
<html>
<head>
<base href="http://chessboardjs.com/" />
<link rel="stylesheet" href="/css/chessboard.css" />
</head>
<body>
<div id="board" style="width: 400px"></div>
<script src="/js/chess.js"></script>
<script src="/js/jquery-1.10.1.min.js"></script>
<script src="/js/chessboard.js"></script>
<script>
var init = function() {
var board, game = new Chess();
var makeRandomMove = function() {
var possibleMoves = game.moves();
if (game.game_over() === true || game.in_draw() === true || possibleMoves.length === 0) return;
var randomIndex = Math.floor(Math.random() * possibleMoves.length);
game.move(possibleMoves[randomIndex]);
board.position(game.fen());
window.setTimeout(makeRandomMove, 500);
};
board = new ChessBoard('board', 'start');
window.setTimeout(makeRandomMove, 500);
};
$(document).ready(init);
</script>
</body>
</html>
Everything works fine without any problems. But when I removed <base href="..."> and substituted all links with this base url ( http://chessboardjs.com/css/chessboard.css ). I got the same animation but now with a terrible blinking effect.
This blinking effect does not appear in IE 11.0.1, Firefox 25.0.1, but appears in Chrome 31.0.1650.57 m
I do not understand what is the reason (in my opinion nothing should change).
P.S. after some time I thought that the reason is due to the Chrome's warning while using jQuery event.returnValue is deprecated. Please use the standard event.preventDefault() instead., but when I was able to get rid of it, the problem was still there. So I am completely puzzled.
I am the creator of chessboard.js
This is likely related to Issue 52
Check that whatever webserver is serving the image files for the chess pieces is setting an appropriate expires header for them; it should be returning an HTTP 304 Not Modified after an image file has already been requested.
What is probably happening is the web server is re-serving the image files on every board update and causing the "flicker" effect.
I might change how this functions in future versions, but for now that should probably do the trick.
Really getting in to javascript and looking around at some patterns. One I have come accross is the module pattern. Its seems like a nice way to think of chucks of functionality so I went ahead and tried to implement it with jQuery. I ran in to a snag though. Consider the following code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>index</title>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var TestClass2 = (function(){
var someDiv;
return {
thisTest: function ()
{
someDiv = document.createElement("div");
$(someDiv).append("#index");
$(someDiv).html("hello");
$(someDiv).addClass("test_class");
}
}
})();
TestClass2.thisTest();
});
</script>
</head>
<body id="index" onload="">
<div id="name">
this is content
</div>
</body>
</html>
The above code alerts the html content of the div and then adds a class. These both use jQuery methods. The problem is that the .html() method works fine however i can not add the class. No errors result and the class does not get added. What is happening here? Why is the class not getting added to the div?
Ah, now that you've updated your question I can better answer your question. You should change the append to appendTo considering you're wanting to move the newly created element inside of the already present #index.
$(document).ready(function() {
var TestClass2 = (function() {
var someDiv = $("#name");
return {
thisTest: function() {
someDiv = document.createElement("div");
$(someDiv)
.html("hello")
.addClass("test_class")
.appendTo("#index");
}
}
})();
TestClass2.thisTest();
});
Hope this helps!
I copied and pasted your code and it works for me.
Make sure you're not simply viewing source to see if the class is applied because doing so simply shows you the HTML that was sent from the server - any DOM updates that occur through JavaScript will not be reflected.
To view the live DOM, use a tool like Firebug or WebKit's Inspector (comes built-in to Safari and Chrome).
Your code works great!
http://jsfiddle.net/lmcculley/p3fDX/
I'm learning javascript and jquery and have written a very basic script inside my file. I'm experiencing two problems...
The browser never finishes loading the document, it just sits there with the loading icon animating in the tab. Any ideas?
I can't seem to debug this using firebug. When I set a breakpoint anywhere in the document load function, it never hits. Any ideas?
Here's my code...
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link media="screen" type="text/css" href="default.css" rel="stylesheet">
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var strMarkup = "";
var strXMLFile = "";
//Parse XML and generate accordion elements
var arrayAccordianElements = ParseXML(strXMLFile);
});
function ParseXML(strPath)
{
var arrayEvents = new Array();
arrayEvents[0] = "test1";
arrayEvents[1] = "test2";
arrayEvents[2] = "test3";
//Return the accordian elements
return arrayEvents;
}
</script>
</head>
<body>
hello
</body>
</html>
As you experts can see, my webpage should simply display "hello" after processing some javascript that creates an array inside of a function. Do you see any problems? I apologize if they're obvious problems, I'm a noob :)
Thanks in advance for all your help!
Runs fine for me in Safari 4.0.3. Make sure your path to jQuery is correct? If it is incorrect and there's something misconfigured and jQuery fails to load, that will hang indefinitely.
Code-wise I don't see anything that would cause an infinite loop at all. However, knowing firefox etc, there may be a variety of things out of your control. Start with restarting the browser. Profile the script with Firebug (Console > Profile > Reload the page > Press profile again), and see what part takes most time.
One thing, probably unrelated, close your link tag. is sufficient.