|
JavaScript - Game Development With Javascript Looking For Teacher
Hello, my name is Tristan (Tsuki_yima) and I would like to get in to game design and Java Script in general, and i have no idea where to start, I am (for the most part) fluent in doing CSS and HTML I can design websites pretty well. But i want to start making games (not really for profit just for fun and what not) but i have no idea where to start using Unity and Java Script. Wondering if somebody can help.
Reply With Quote 01-15-2015, 02:53 PM #2 sunfighter View Profile View Forum Posts Senior Coder Join Date Jan 2011 Location Missouri Posts 4,830 Thanks 25 Thanked 672 Times in 671 Posts Unity costs a lot of money. You should know all about it and have some games under your belt before buying. IMHO, you should learn C++ or C# or javascript and play with it first. Javascript would be the simplest. Then google javascript for game design or something similar. Many places to learn JS W3Schools Online Web Tutorials has both JS and Jquery. I found this Intro To Programming For Games With JavaScript - @jessefreeman | Jesse Freeman when I googled. Maybe try your hand at a few things first, like Tick-Tack-Toe or Hangman. OK, done babbling. Just go for it. Similar TutorialsCode: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Jackhammer
</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
/* <![CDATA[ */
var jackhammers = new Array(11);
var curJackhammer = 0;
var direction;
var begin;
jackhammers[0] = "jackhammer0.gif";
jackhammers[1] = "jackhammer1.gif";
jackhammers[2] = "jackhammer2.gif";
jackhammers[3] = "jackhammer3.gif";
jackhammers[4] = "jackhammer4.gif";
jackhammers[5] = "jackhammer5.gif";
jackhammers[6] = "jackhammer6.gif";
jackhammers[7] = "jackhammer7.gif";
jackhammers[8] = "jackhammer8.gif";
jackhammers[9] = "jackhammer9.gif";
jackhammers[10] = "jackhammer10.gif";
function bounce()
{
if(curJackhammer == 10)
curJackhammer = 0;
else
++curJackhammer;
/*
Firefox does not register an error with the line of code below, but other browsers do . . .
It looks like it is a typo left over from the slightly more advanced technique in 10-4 where
jackhammers.src is defined. Also, were you to comment out the final line in this function you would
see the animation does not work. In browsers other than Firefox which apparently just ignores
this code and no animation occurs, the image element is assigned the source value of "undefined"
and of course no image is named "undefined".
*/
document.getElementsByTagName('img')[0].src = jackhammers[curJackhammer].src;
if(curJackhammer == 0)
direction = "up";
else if(curJackhammer == 10)
direction = "down";
document.getElementsByTagName('img')[0].src = jackhammers[curJackhammer];
}
function startBouncing()
{
if(begin)
clearInterval(begin);
begin = setInterval("bounce()",90);
}
/* ]]> */
</script>
</head>
<body>
<h1>
Jackhammer Man
</h1>
<p>
<img src="jackhammer0.gif" height="113" width="100" alt="Image of a man with a jackhammer." />
</p>
<form action="" enctype="text/plain">
<p>
<input type="button" value="Start Bouncing" onclick="startBouncing();" />
<input type="button" value="Stop Bouncing" onclick="clearInterval(begin);" />
</p>
</form>
</body>
</html>
My teacher insists that the above code is valid (straight out of our book). He says this because (I'm guessing) it runs okay in Firefox and other browsers. It also throws a ton of error messages in Chrome and makes no logical sense. We define the values of the jackhammer array as literal strings, and then the book instructs us to change the source of the image element on the page to jackhammers[i].src. It then has us change the source of the image element again, correctly at the end of the function. It also has us create a useless variable: "direction" (and I say useless because we never use it, it is just fluff I guess). On a side note, would some of you guys like to check out this animation I created here and let me know what you think. Thanks guys. hi, im new to javascript, and programming on the whole, what software do you all use for composing code? this seems to me like somewhat of a common question, but i did a search using the search function and couldnt find any threads on this. sorry if i was being inept and if this question really has been asked a lot before. in that case, help is still greatly appreciated though. Ok so i want to work on an EASY basic game. As simple as Guess what number... But there are some twist... Ok So here is my example... (HTML, i know this.)I'm Guessing a number 1-99. What is it? (java) Lets say its 66 and they guess 53, have the text rusult be in a pop up window be: Too low! (java) Lets say they guess 78, have the text rusult be in a pop up window be: Too high! (java) Lets say they guess 100+, have the text rusult be in a pop up window be: Out of range! (java)But lets say they guess 66, have a text result be in a pop up window be: You've won! (java) I want a text field where you can enter your answer, and it will do the actions above. Can anyone code this? Thanks for reading! This is a simple basic game i want to make. Its a "What Am I" Riddle... The questions is (In HTML which i already know): I'm as light as a feather but no man can hold me for long. What am I? the answer is: Your Breath. (This is where the JAVASCRIPT comes in) Lets say they guess a rock, have a pop up say: Wrong Answer. Please try again. Lets say they guess Your breath -OR- Breath, have a pop up say: Correct! I want a text field where you can enter your answer, and if they choose ANYTHING but the 2 correct answers above, it will display please try again. Can anyone code this please? Thanks for reading. Hi everyone-- I am a fourth grade teacher and I have an idea for a program I could use with my students. I think (key word, I don't know anything about programming) that it should be relatively simple to do. A short description of what the program would do will follow, but my posting is for three main reasons: 1) Is this possible? (I assume it is) 2) As I would be willing to pay for this (up to a certain amount), how much might it cost me if I hired a freelance programmer? 3) Is there anyone out there who would be able to help me with this? Okay, as for the program: it would be a program that would make your own "Jack Attack" (like from the computer game "You Don't Know Jack"). It would give you a place to input up to 10 to 15 keywords (or vocabulary definitions) for the middle and keywords (or vocab words) that would fly past. It would respond to some sort of button input (I'm thinking space bar)....and have an action for wrong answers (buzzer sound) and an action for a right answer (ding! and then move on to next question). Maybe after the game it would give a readout of how many right out of how many possible. It would be really cool to be able to have some background music, maybe manipulate the the colors, fonts, etc. I am wanting to leave the program kind of generic so that I could use this for all sorts of applications: use it for vocabulary words in different subjects, match authors with books, "just for fun" games, maybe even use it for some math facts. Any information you would have is more than appreciated! Thanks for helping a teacher out! Clay A newbie here can you please help me with my javascript game. I cant seem to make it work. Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Play</title> <script type='text/javascript'> function win(x, z){ if(x == z) return "It's a draw"; draw.value++; { if(x == "Fire")&&(z == "Air") return "You Lose, Fire beats Air!"; loss.value++; else if(x == "Fire")&&(z == "Earth") return "It's a draw!"; draw.value++; else if(x == "Fire")&&(z == "Water") return "You Win, Fire is beaten by Water!"; win.value++; } { if(x == "Air")&&(z == "Earth") return "You win, Air beats Earth"; win.value++; else if(x == "Air")&&(z == "Water") return "It's a draw!"; draw.value++; else if(x == "Air")&&(z == "Fire") return "You lose, Air is beaten by Fire!") loss.value++ } { if(x == "Earth")&&(z == "Air") return "You Lose, Earth is beaten by Air" loss.value++; else if(x == "Earth")&&(z == "Water") return "You Win, Earth beats Water"; win.value++; else if(x == "Earth")&&(z == "Fire") return "It's a draw!"; draw.value++; } { if(x == "Water")&&(z == "Fire") return "You win, Water beats Fire"; win.value++; else if(x == "Water")&&(z == "Air") return "It's a draw!"; draw.value++; else if(x == "Water")&&(z == "Earth") return "You lose, Water is beaten by Earth" loss.value++; } } function ran(){ var gen = Math.random(); if(gen <= 0.25) var com = "Fire"; if((gen > 0.25)&&(gen<= 0.50)) var com = "Earth"; if(gen > 0.50)&&(gen<= 0.75)) var com = "Water"; if(gen > 0.75) var com = "Air"; if(document.c.game[0].checked) var use = "Fire"; if(document.c.game[1].checked) var use = "Earth"; if(document.c.game[2].checked) var use = "Water"; if(document.c.game[3].checked) var use = "Air"; alert ("The computer played: " + com +". You played: " + use + ". " + win(com,use)); } </script> <style type="text/css"> body {background-color:#7f9527;} .style1 { color: #FFFFFF; } .style2 { font-family: "After Disaster"; } .style3 { font-family: "After Disaster"; font-size: 30pt; color: #FFFFFF; margin-left: 160px; } .style4 { font-size: xx-large; } .style5 { color: #FFFFFF; font-size: large; } .style6 { color: #FFFFFF; font-family: "After Disaster"; font-size: large; } .style7 { margin-top: 0px; } .style8 { color: #FFFFFF; font-family: "After Disaster"; font-size: xx-large; margin-left: 280px; } .style9 { font-size: large; } .style10 { margin-top: 12px; } </style> </head> <body> <p class="style3" style="width: 581px">Avatar The Last Air bender: Element Fight</p> <p class="style8" style="width: 340px"> <img alt="" src="Avatar_Aang_by_Shira_chan.jpg" width="339" height="244" class="style7" /></p> <p class="style6">Select Your Attack</p> <form name="c" method="post" class="style2"> <span class="style4"><span class="style9"> <input name="game" type="radio" value="Fire" /></span></span><span class="style5">Fire</span><span class="style9"><br /> </span><span class="style4"><span class="style9"> <input name="game" type="radio" value="Earth" /></span></span><span class="style5">Earth</span><span class="style9"><br /> </span><span class="style4"><span class="style9"> <input name="game" type="radio" value="Water" /></span></span><span class="style1"><span class="style9">Water<br /> <span class="style4"> <input name="game" type="radio" value="Air" /></span>Air</span><br /></span> <tr> <td colspan="4" align=center> <span class="style2"> <input type="text" name= "win" readonly="readonly" value="0" size="2"> Wins </input> <input type="text" name= "loss" readonly="readonly" value="0" size="2"> Losses</input> <input type="text" name= "draw" readonly="readonly" value="0" size="2"> Draws</input> </span> </td> </tr> </form> <form method="post"> <br /> <input name="Play" type="button" value="Play" onClick="ran()" style="width: 189px; height: 39px" /> <a href="Instructions.htm"> <input name="Button1" type="button" value="Instructions" style="width: 189px; height: 39px" class="style10" /></a></form> </body> </html> How hard would it be to make a 2d game similar to super smash bros? Basically I want to have a scrolling position (instead of a static image, where the background is always the same) where when the user moves his character object, the area of vision moves with him. Also, will it work with using keyboard keys? I have to integrate it into a database and I know quite a bit of javascript so I am hoping it is possible. Thanks! Max I am creating a guessing word game and when the user types in a guess a pop-up tells the user how many letters the user got right to the actual answer. My problem is I can't seem to display the number of letters the user guessed right. This is what the function looks like: Code: function guessing()
{
words = "album";
guess = document.getElementById("txt1").value;
answer = document.getElementById("result").value = parseInt();
alert("You have " + answer + " matches");
used = false;
for(i = 0; i<=guess.length; i++)
{
for(j = 0; j<=answer.length; j++)
if(!used[j] && guess[i] == words)
{
alert("Congradulations! You got it!");
used[j] = true;
count++;
break;
}
else
{
count = 5;
while(count > 5)
{
alert("Sorry, that's game over!");
count++;
}
}
}
}
Hi guys I need some help with a 2d game that i am making. i am almost done i need only a loading screen but its not working i got this javascript file thats getting an error about : assetsloader is not defined. Maybe you guys can help me. Here is the code: Code: // awesome goblin game
// assetLoader
/**
* Ensure all assets are loaded before using them
* @param {number} dic - Dictionary name ('imgs', 'sounds', 'fonts')
* @param {number} name - Asset name in the dictionary
*/
function assetLoaded(dic, name) {
// don't count assets that have already loaded
if (this[dic][name].status !== 'loading') {
return;
}
this[dic][name].status = 'loaded';
assetsLoaded++;
// progress callback
if (typeof this.progress === 'function') {
this.progress(assetsLoaded, this.totalAssest);
}
// finished callback
if (assetsLoaded === this.totalAssest && typeof this.finished === 'function') {
this.finished();
}
}
// before assetLoader.finished()
/**
* Show asset loading progress
* @param {integer} progress - Number of assets loaded
* @param {integer} total - Total number of assets
*/
assetLoader.progress = function(progress, total) {
var pBar = document.getElementById('progress-bar');
pBar.value = progress / total;
document.getElementById('p').innerHTML = Math.round(pBar.value * 100) + "%";
}
/**
* Show the main menu after loading all assets
*/
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
function mainMenu() {
$('#progress').hide();
$('#main').show();
$('#menu').addClass('main');
}
// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";
// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
heroReady = true;
};
heroImage.src = "images/hero_sheet.png";
// Treasure image
var treasureReady = false;
var treasureImage = new Image();
treasureImage.onload = function () {
treasureReady = true;
};
treasureImage.src = "images/treasure.png";
// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
monsterReady = true;
};
monsterImage.src = "images/monster.png";
// Game objects
var backgrounder = {
speed: 0,
x: 0,
y: 0
};
var hero = {
speed: 256, // movement in pixels per second
x: 0,
y: 0
};
var monster = {
speed: 256,
x: 0,
y: 0
};
var treasure = {
x:0,
y:0
};
var treasureCaught = 0;
var treasureTimer= 0;
var treasureTime= 50;
var monstersCaught = 0;
var delta = 0;
var lives = 3;
var directionMonster = 0;
var directionDuration = 20;
var goThisWay = 1;
// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
// Reset the game when the player catches a monster
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// Throw the monster somewhere on the screen randomly
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};
//restart the game
var restartGame = function (){
//when you die screen turns black
ctx.fillStyle="#000000";//color
ctx.fillRect(32,32,canvas.width-64,canvas.height-64);//draw rectangle with the bushes still in place
//show that you're dead
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.textAlign = "center";
ctx.fillText("GameOver Press R to reset",canvas.width/2, canvas.height/2);
//R to reset pressed
if (82 in keysDown){
//reset assets
lives = 3;
treasureCaught = 0;
}
};
// Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up
//check if hero walks from screen
if (hero.y <= 32){
//if hero walks from screen top, stay at exact y axle
hero.y = hero.y;
}
else{
//move hero up
hero.y -= hero.speed * modifier;
}
// end of upmovement
}
if (40 in keysDown) { // Player holding down
//check if hero walks from screen
if (hero.y >= canvas.height -64){
//if hero walks from screen bottom, stay at exact y axle
hero.y = hero.y;
}
else{
//move hero down
hero.y += hero.speed * modifier;
}// end of downmovement
}
if (37 in keysDown) { // Player holding left
//check if hero walks from screen
if (hero.x <= 32){
//if hero walks from screen left, stay at exact x axle
hero.x = hero.x;
}
else{
//move hero left
hero.x -= hero.speed * modifier;
}//end of left movement
}
if (39 in keysDown) { // Player holding right
//check if hero walks from screen
if (hero.x >= canvas.width -64){
//if hero walks from screen right, stay at exact x axle
hero.x=hero.x;
}
else{
//move hero right
hero.x += hero.speed * modifier;
}//end of right movement
}
// Are they touching? MONSTER
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
--lives;
reset();
}
// Are they touching? TREASURE
if (
hero.x <= (treasure.x + 32)
&& treasure.x <= (hero.x + 32)
&& hero.y <= (treasure.y + 32)
&& treasure.y <= (hero.y + 32)
) {
treasureTimer = treasureTime;
++treasureCaught;
}
};
//make our monster move :)
var monsterMove = function (modifier){
++directionMonster;
if (directionMonster <= directionDuration){
//bewegingen
//rechts => links
if (goThisWay == 1) {
monster.x = monster.x - (monster.speed * modifier);
if (monster.x <= 32){
goThisWay = 2;
}
}
//links => rechts
if (goThisWay == 2) {
monster.x = monster.x + (monster.speed * modifier);
if (monster.x >= canvas.width-64){
goThisWay=1;
}
}
//boven => onderen
if (goThisWay == 3) {
monster.y = monster.y + (monster.speed * modifier);
if (monster.y >= canvas.height-64){
goThisWay=4;
}
}
//onderen => boven
if (goThisWay == 4) {
monster.y = monster.y - (monster.speed * modifier);
if (monster.y <= 32){
goThisWay=3;
}
}
//bepalen welke richting
if (directionMonster ==directionDuration){
directionMonster = 0;
goThisWay = Math.floor((Math.random() * 4) + 1);
//console.log (goThisWay);
}
}
};
// Draw everything
var render = function () {
if (bgReady) {
//backgrounder.x = backgrounder.x +1;
backgrounder.x = 0;
ctx.drawImage(bgImage, backgrounder.x, 0);
}
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}
if (treasureReady) {
ctx.drawImage(treasureImage, treasure.x, treasure.y);
}
// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Treasure caught: " + treasureCaught, 32, canvas.height-64);
ctx.fillText("Lives: " + lives, 32, 32);
};
var spawnTreasure = function(){
if (treasureTimer >= treasureTime){
treasure.x = 32 + (Math.random() * (canvas.width - 64));
treasure.y = 32 + (Math.random() * (canvas.height - 64));
treasureTimer = 0;
}
++treasureTimer;
};
// The main game loop
var main = function () {
var now = Date.now();
delta = now - then;
if (lives > 0){
update(delta / 1000);
render();
monsterMove(delta / 1000);
spawnTreasure();
}
else {
restartGame();
}
then = now;
// Request to do this again ASAP
requestAnimationFrame(main);
};
// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
// Let's play this game!
var then = Date.now();
reset();
main();
Reply With Quote 01-14-2015, 10:11 PM #2 felgall View Profile View Forum Posts Visit Homepage Master Coder Join Date Sep 2005 Location Sydney, Australia Posts 6,745 Thanks 0 Thanked 666 Times in 655 Posts In the code you posted there are no references to assetsLoader at all. There is exactly one reference to assetLoader (without the 's') and that is to add a progress() function to every occurrence of the assetLoader object that you haven't defined (at least not in the code you posted). Hey all, I'm trying to code a javascript game for my final project as a mini game within an interactive website, but I'm having some problems since I don't know javascript. It's supposed to be a piano game with a specific pattern to one song (so the game has the same pattern everytime) and I can't get it to work. This is my code right now (I started working with a code I found online). I'm really struggling, if anyone has any ideas on what I'm doing wrong it would be greatly appreciated! Code:
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Brian Gosselin (bgaudiodr@aol.com) -->
<!-- Web Site: http://www.bgaudiodr.iwarp.com -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://www.javascriptsource.com -->
<!-- Begin
var image_directory = "http://www.your-web-site-address-here.com/simon-says-pics/";
var ok = false;
var pcbusy = false;
var userturn = true;
var butdown = false;
var stage = 1;
var cnt = 1;
var pcclicks = new Array();
var userclicks = new Array();
var pos;
var tst = true;
var msg = "Click Go!";
btn1 = new Image();
btn1.src = image_directory + "purple.gif";
btn2 = new Image();
btn2.src = image_directory + "yellow.gif";
function updown(isdn) {
if (isdn) {
document.f[('pl'+pos)].src = image_directory + 'yellow.gif';
}
else {
document.f[('pl'+pos)].src= image_directory + 'purple.gif';
}
}
function getPattern() {
if(stage=1)
return new Array(1);
if(stage=2)
return new Array(1,2);
if(stage=3)
return new Array(1,2,3);
if(stage=4)
return new Array(1,2,3,4);
if(stage=5)
return new Array(1,2,3,4,5);
if(stage=6)
return new Array(1,2,3,4,5,6);
else
return new Array(1,2,3,4,5,6,7);
}
function dopc() {
document.f.st.value = stage;
if (cnt <= stage) {
pcbusy = true;
userturn = false;
document.f.s.value = getPattern()[0];
pos=getPattern()[cnt - 1];
setTimeout("updown(true)",500);
setTimeout("updown(false) ; pcclicks[cnt]=pos; cnt++; dopc()",1200);
}
else {
userclicks = new Array();
cnt = 1;
document.f.s.value = "Player's Turn";
pcbusy = false;
userturn = true;
document.f.b.focus();
}
}
function testclicks() {
tst = true;
for(i = 1;cnt > i; i++) {
if (pcclicks[i] == userclicks[i]) {
tst = true && tst;
}
else {
tst = false && tst;
}
}
if(tst) {
setTimeout("stage++ ; document.f.st.value=stage ; alert('That is correct! Advancing to the next level....'); document.f.s.value=msg ; document.f.b.focus()",300);
}
else {
setTimeout("stage=1 ; cnt=1 ; pcclicks=new Array() ; document.f.st.value=stage ; alert('Sorry, that is not correct. Start a new game if you would like to play again.') ; document.f.s.value=msg",300);
}
cnt = 1;
}
function testclk(downflag, pos) {
if (userturn&&(!pcbusy)) {
if (downflag) {
document.f[('pl'+pos)].src = image_directory + 'yellow.gif';
}else{
document.f[('pl'+pos)].src = image_directory + 'purple.gif';
}
if (ok && !downflag) {
userclicks[cnt] = pos;
cnt++;
if (pcclicks.length == userclicks.length) {
testclicks();
}
}
}
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<embed src="G#.wav" autostart="false" hidden="true" name="sound1" enablejavascript="true">
<!-- <a href="#" onclick="playSound('G#.wav');"></a> !-->
<img src="piano.png" />
<center>
<form name="f">
<table cellspacing="20" cols="8" width="600">
<tr height="60">
<td align="center" width="20%"><img src="purple.gif" onclick="playsound('G#.wav')"; name="1" onMousedown="testclk(true,1)" onMouseup="testclk(false,1)"></td>
<td align="center" width="20%"><img src="purple.gif" name="2" onMousedown="testclk(true,2)" onMouseup="testclk(false,2)"></td>
<td align="center" width="20%"><img src="purple.gif" name="3" onMousedown="testclk(true,3)" onMouseup="testclk(false,3)"></td>
<td align="center" width="20%"><img src="purple.gif" name="4" onMousedown="testclk(true,4)" onMouseup="testclk(false,4)"></td>
<td align="center" width="20%"><img src="purple.gif" name="5" onMousedown="testclk(true,5)" onMouseup="testclk(false,5)"></td>
<td align="center" width="20%"><img src="purple.gif" name="6" onMousedown="testclk(true,6)" onMouseup="testclk(false,6)"></td>
<td align="center" width="20%"><img src="purple.gif" name="7" onMousedown="testclk(true,7)" onMouseup="testclk(false,7)"></td>
<td align="center" width="20%"><img src="purple.gif" name="8" onMousedown="testclk(true,8)" onMouseup="testclk(false,8)"></td>
</tr>
<tr height = 60>
<td width="20%" align="center"><font size="3">Level<br></font><input type="text" size="2" value="1" name="st" readonly></td>
<td align="center" colspan="3"><input type="text" name="s" value="Click 'Go!' to start" readonly></td>
<td align="center"><input type="button" value=" Go! " name="b" onClick="ok=true ; if(!pcbusy) dopc()"></td>
</tr>
</table>
</form>
</center>
<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br/>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 4.21 KB -->
Hi, well i searched at google and was not exactly able to find what i was looking for, i am looking for a script the shows by logo while loading the game at back end, shows loading percentage or bar representing how game is loaded and then makes the my logo disappear once the game is loaded e-g like this site has used http://www.gamegape.com/en-2095-elemental-battles.html if some thing like this is not available can someone atleast tell me how this site has done it, so we could copy it from them ^_^ i need a racing game in java graphics doesn't matter but speed should be good ?
Hi there, On this website: http://www.lutanho.net/stroke/online.html it's allowed to "copy the games to your PC and play them offline". That's nice but how do I do that? I've tried to download/copy the game "WordGrid" to my PC but it didn't work. Help would be appreciated. Thanks in advance........... Hey guys I need help on making the images on this game show up. Im not sure how to get the card images to load when hitting the deal button. Code: <html>
<head>
<title>
Blackjack </title>
<script LANGUAGE="JavaScript1.1">
var dealer_hand = new Array();
var player_hand = new Array();
var game_over = false;
function Card(num,suit) {
this.num = num;
this.suit = suit;
this.fname = fname;
}
function fname() {
return this.num + this.suit + ".gif";
}
function Deck() {
this.cards = new Array(52);
this.next_card = 0;
// fill the deck (in order, for now)
for (i=1; i<14; i++) {
this.cards[i-1] = new Card(i,"c");
this.cards[i+12] = new Card(i,"h");
this.cards[i+25] = new Card(i,"s");
this.cards[i+38] = new Card(i,"d");
}
this.shuffle = shuffle;
this.dealCard = dealCard;
}
function shuffle() {
for (i=1; i<1000; i++) {
// switch two randomly selected cards
card1 = Math.floor( 52*Math.random() );
card2 = Math.floor( 52*Math.random() );
temp = this.cards[card2];
this.cards[card2] = this.cards[card1];
this.cards[card1] = temp;
}
this.next_card = 0;
}
function dealCard() {
return this.cards[ this.next_card++ ];
}
var deck = new Deck();
deck.shuffle();
function newGame() {
if ( deck.next_card > 39 ) {
deck.shuffle();
}
dealer_hand = new Array();
player_hand = new Array();
dealer_hand[ 0 ] = deck.dealCard(); // This is the hole card.
document.images[0].src = "http://www.litchzen.com/cardback.PNG"; // The hole card is not shown
dealer_hand[ 1 ] = deck.dealCard();
document.images[ 1 ].src = dealer_hand[ 1 ].fname();
for ( i=2; i<6; i++) {
document.images[i].src = "http://www.litchzen.com/cardback.PNG";
}
num = i + 1;
player_hand[ 0 ] = deck.dealCard();
document.images[ 6 ].src = player_hand[ 0 ].fname();
player_hand[ 1 ] = deck.dealCard();
document.images[ 7 ].src = player_hand[ 1 ].fname();
for (i=8; i<12; i++) {
document.images[i].src = "http://www.litchzen.com/cardback.PNG";
}
window.status = "";
document.form1.dealer.value = "";
document.form1.result.value = "";
document.form1.player.value = score( player_hand );
game_over = false;
} // end function newGame()
function hit() {
var total = 0;
var new_card = 0; // index for the new card position
if ( game_over ) {
window.status = "Game over. Click the Deal button to start a new hand."
} else {
new_card = player_hand.length;
player_hand[ new_card ] = deck.dealCard();
document.images[ new_card + 6 ].src = player_hand[ new_card ].fname();
total = score( player_hand );
if ( total > 21 ) { // Busted, game over.
document.form1.player.value = total + " busted";
document.images[ 0 ].src = dealer_hand[ 0 ].fname();
document.form1.dealer.value = score( dealer_hand );
winner();
game_over = true;
} else {
document.form1.player.value = total;
}
}
} // end function hit()
function stand() {
var total = 0;
var new_card = 0;
if ( game_over ) {
window.status = "Game over. Click the Deal button to start a new hand."
} else {
document.images[ 0 ].src = dealer_hand[ 0 ].fname();
while ( score( dealer_hand ) < 17 ) {
new_card = dealer_hand.length;
dealer_hand[ new_card ] = deck.dealCard();
document.images[ new_card ].src = dealer_hand[ new_card ].fname();
}
total = score( dealer_hand );
if ( total > 21 ) { // Busted
document.form1.dealer.value = total + " busted";
} else {
document.form1.dealer.value = total;
}
}
winner();
game_over = true; // The game ends after the player stands.
} // end function stand()
function score(hand) {
var total = 0;
var soft = 0; // This variable counts the number of aces in the hand.
var pips = 0; // The trump pictures on a card used to be called pips.
for ( i=0; i<hand.length; i++ ) {
pips = hand[i].num;
if ( pips == 1 ) {
soft = soft + 1;
total = total + 11;
} else {
if ( pips == 11 || pips == 12 || pips == 13 ) {
total = total + 10;
} else {
total = total + pips;
}
}
}
while ( soft > 0 && total > 21 ) { // Count the aces as 1 instead
total = total - 10; // of 11 if the total is over 21
soft = soft - 1;
}
return total;
} // end function score
function winner() {
var player_total = score( player_hand );
var dealer_total = score( dealer_hand );
if ( player_total > 21 ) { // Busted
document.form1.result.value = "Dealer wins";
} else {
if ( dealer_total > 21 ) { // Busted
document.form1.result.value = "Player wins";
} else {
if ( player_total == dealer_total ) {
document.form1.result.value = "Tie game";
} else {
if ( player_total > dealer_total ) {
document.form1.result.value = "Player wins";
} else {
document.form1.result.value = "Dealer wins";
}
}
}
}
}
</script>
</head>
<body>
<h1>Blackjack Javascript Example</h1>
<hr>
<form NAME="form1">
<table>
<tr>
<td> <B>Dealer: </B>
<td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>
<td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>
<td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>
<td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>
<td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>
<td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>
<td> </td>
</tr>
<tr>
<td> <B>Player: <B>
<td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>
<td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>
<td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>
<td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>
<td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>
<td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>
</tr>
<tr>
<td> <B>Dealer Sco </B><BR>
<input TYPE="TEXT" SIZE=12 NAME="Dealer" VALUE="0"></td>
<td> <B>Player Sco </B><BR>
<input TYPE="TEXT" SIZE=12 NAME="You" VALUE="0">
<td> <input TYPE="BUTTON" VALUE=" Stay " onClick="stand();">
<td> <input TYPE="BUTTON" VALUE=" Hit " onClick="hit();">
<td> <a href="#" onClick="newGame();"
onMouseOver = "window.status = 'Deal a new hand.'; return true; "
onMouseOut = "window.status = '';">
<img border=0 src="http://us.cdn3.123rf.com/168nwm/fuzzbones/fuzzbones1105/fuzzbones110500782/9628185-deal-word-in-male-hand.jpg" height=50 width=106></a>
<td> <B>Game Result:</B><BR>
<input TYPE="TEXT" SIZE=10 NAME="result" VALUE=""</td>
</tr>
</table>
</form>
<P>Click the Deal button to start a new game.<BR>
Click the Hit button to get another card.<BR>
Click the Stay button to end your turn.
Try and get as close to 21 as possible to win. Good luck!</P>
</body>
</html>
Ok basically i am making a blackjack game and so far i have a random generator for my cards, once i press deal 4 cards are dealt at random, but when i try to insert a new button for the player to press for another card "hit", the card comes down and is not random at all. I could really do with this help. Thank you. Code: <html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var deck=new Array; var hand=new Array(53); var hcrd=new Array(53); var hsut=new Array(53);
var isPlaying=-1; var betn=1; var dpos=0; var crdts; var ncard=0;
/* ----------------------------------------------------------------------------------------- */
function initdeck(){
crd=0;
for(i=0;i<4;i++){
if(i==0){st="club";} else if(i==1){st="heart";} else if(i==2){st="diamond";}else{st="spade";}
for(c=1;c<14;c++){
if(c==1){num="ace";}else if(c==11){num="jack";}
else if(c==12){num="queen";}else if(c==13){num="king";}else{num=c;}
deck[crd++]=st+"|"+num;
} //for c
} //for i
}
/* ----------------------------------------------------------------------------------------- */
function showcard(cnum)
{
p = hand[cnum].indexOf("|");
s = hand[cnum].substring(0,p);
c = hand[cnum].substring(p+1,hand[cnum].length);
if(cnum==0){document.images.card1.src="cards/"+s+c+".jpg";}
else if(cnum==1){document.images.card2.src="cards/"+s+c+".jpg";}
else if(cnum==2){document.images.card3.src="cards/"+s+c+".jpg";}
else if(cnum==3){document.images.card4.src="cards/"+s+c+".jpg";}
else{document.images.card11.src="cards/"+s+c+".jpg";}
}
function hit(ncard)
{
p = hand[ncard].indexOf("|");
s = hand[ncard].substring(0,p);
c = hand[ncard].substring(p+1,hand[ncard].length);
if(ncard==4){document.images.card5.src="cards/"+s+c+".jpg";}
else if(ncard==5){document.images.card6.src="cards/"+s+c+".jpg";}
else if(ncard==6){document.images.card7.src="cards/"+s+c+".jpg";}
}
function stand()
{
document.images.card8.src="cards/"+s+c+".jpg";
}
function deal()
{
if(isPlaying < 0)
{ // new game
dpos = 0; isPlaying=1;
for(i=0;i<500;i++)
{ //shuffle the cards(mix up the deck)
tmp = Math.round(Math.random()*51); tmp2= Math.round(Math.random()*51);
stmp = deck[tmp]; deck[tmp] = deck[tmp2]; deck[tmp2] = stmp;
}
for(i=0;i<53;i++)
{
hand[i]=deck[dpos++];showcard(i);
hand[i]=deck[dpos++];hit(i);
}
}
}
function quit(){window.close();}
/* ----------------------------------------------------------------------------------------- */
initdeck();
// End -->
</script>
</HEAD>
<BODY>
<table>
<tr><form name="drwcrd">
<td width=590></td>
<td><b>Computer</b></td>
</tr><tr></form>
<table>
<tr><form name="drwcrd">
<td width=500></td>
<td width=30 align=center><img name="card1" src="cards/cardback.jpg"></td>
<td width=30 align=center><img name="card3" src="cards/cardback.jpg"></td>
<td width=30 align=center><img name="card8" src=""></td>
<td width=30 align=center><img name="card9" src=""></td>
<td width=30 align=center><img name="card10" src=""></td>
<table>
<tr><form name="drwcrd">
<td width=590></td>
<td><b>Player</b></td>
</tr><tr></form>
<table>
<tr><form name="drwcrd">
<td width=500></td>
<td width=30 align=center><img name="card2" src="cards/cardback.jpg"</td>
<td width=30 align=center><img name="card4" src="cards/cardback.jpg"</td>
<td width=30 align=center><img name="card5" src=""</td>
<td width=30 align=center><img name="card6" src=""</td>
<td width=30 align=center><img name="card7" src=""</td>
</tr><tr></form>
<table>
<tr><td><input type="button" value ="DEAL Cards" onClick="javascript:deal();"></td>
<td><input type="button" value ="Hit" onClick="javascript:hit();"></td>
<td><input type="button" value ="Stand" onClick="javascript:stand();"></td>
</body>
</html>
if anyone has any help id be grateful or if anyone has any ideas on how to approach this differently. thanks in advance please excuse the code its a little messy atm. sorry guys im trying to make a dice game and i don't know nothing so can you guys help me with the code? This is what i am trying to do. i need help how to get started n stuff Something that will create a random number b/w 1 n 6 and decide if the user is a winner. He will win only if the #s are equal so i want a text box for the first number and text box for the second. a button to click to play the game(roll the dice) button to start over and reset all values textbox to display the # of tries(rolls) textbox 2 display the # of wins. Also i want toKeep track of the number of times the user rolls the dice and display this in the appropriate textbox and the number of times the user wins the game and display this in the appropriate textbox. Well my friend helped me with this but he made 2 player i only want one player and i want the number of tries and win the user wins if the #s are equal and i want a start over button that resets everything. Also the max number i want is 6 and only one roll the dice button but 2 textboxes so if you get same # you win it should appear in alert and text box for tries and wins. Also, i am gonna have 2 pics one for the first textbox the other for the second both of the pics are gonna be dice and i am gonna have 12 pics but only 2 appear at a time so if a guy gets 5 the dice with the #5 appears and the other text gets 4 the dice with the # 4 appears Code: <html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var die = 6;
var dice = 2;
var ary=[];
function dice_roll(die, dice,nu) {
var txt=document.form.text;
for (var roll=0,loop=0; loop < dice; loop++) {
roll = roll + Math.round(Math.random() * die) % die + 1;
}
if (ary.length==0&&nu==0){
txt[0].value =ary[0]= roll;
txt[1].value = 0;
}
if (ary.length==1&&nu==1){
txt[1].value = ary[1]= roll;
if (ary[0]==ary[1]){
alert('Draw');
}
else if (ary[0]>ary[1]){
alert('Player 1 Wins');
}
else {
alert('Player 2 Wins');
}
ary=[];
}
}
// End -->
</script>
<body>
<form name=form>
<table border=2 cellpadding=5>
<tr>
<td colspan=2 align=middle>No. of sides/dice</td>
</tr>
<tr>
<td valign=top align=middle>
<p><input type=radio checked name=sides onClick="die = 6">6 Sided
</td>
<td valign=top align=middle>
<p><input name=number type=radio onClick="dice = 2" checked>
2
</td>
</tr>
<tr>
<td colspan=2 >
Player 1
</td>
</tr>
<tr>
<td align=middle colspan=4>
<input type=button value="Roll Dice" name=button onClick="dice_roll(die, dice,0)">
<input type=text size=10 name=text value="0" disabled="disabled" >
</td>
</tr>
<tr>
<td colspan=2 >
Player 2
</td>
</tr>
<tr>
<td align=middle colspan=4>
<input type=button value="Roll Dice" name=button onClick="dice_roll(die, dice,1)">
<input type=text size=10 name=text value="0" disabled="disabled" >
</td>
</tr>
</table>
</form>
</center>
</body>
</html
Hello, this is my first post here, but I'm having some trouble figuring out what I messed up on my code I'm making a Javascript game of Hangman for one of my classes and I originally had the input as a text box where you physically type in the letter and if it was wrong, it would draw the next sequence of the hangman picture and place the letter in another text box as a "Used Letters," or if you're right, it would place the letter you chose in the box for the word you're guessing. However, I decided that instead of doing that, I wanted to make it more visually appealing and add buttons with the letters on them instead. As you can see in the code which is down-loadable here (the one with the _2 is the one I'm currently using, but the original is supplied as well), the buttons register for the picture changing, but do not register for the "Used Letters" field or for filling in the actual word. One of the button's values is also replaced by "undefined" after each click of another button and I'm not really sure why If anyone could take a look at my code and see if you can figure out what the deal is, that'd be awesome! can u like make games like pong wikth javascript? my friend said he did, but i dont think u can.
Hi everyone. Right now I'm doing a guessing game assignment for my class. I'm new to the forums so sorry if copy/pasting code into the thread here isn't the right thing to do. I have ran firebug a few times on this code and for some reason the variable "Football" is the only answer that is declared true. How can I fix this code so that all of the variables in the array display the true statement when typed in the box? Note: I have the questions looped to ask 3 times. Thanks! <html> <head> <h1>Welcome to the guessing game!</h1> <h2>Second Submission Attempt</h2> </head> <body> <script type = "text/javascript"> var sportsAry = new Array(6); sportsAry[0] = "Football"; sportsAry[1] = "Basketball"; sportsAry[2] = "Rollerblading"; sportsAry[3] = "Hiking"; sportsAry[4] = "Biking"; sportsAry[5] = "Swimming"; var firstName; var points = 0; var finalscore; var ask; do { firstName = prompt("Please enter your first name.",""); } while (firstName == "" || firstName == null || firstName == parseInt(firstName)); alert("Welcome to the Game, " + firstName + " !"); for (var count = 0; count < 3; count++){ ask = prompt("Please guess a sport : ",""); if (ask == null){ alert("You are chicken!!!"); } else if (ask == ""){ alert("You forgot to enter a game!"); count--; }else { for ( var i = 0; i < sportsAry.length; i++){ if (ask.toUpperCase() == sportsAry[i].toUpperCase()) { points +=5; alert("You have guessed correctly! You have gained 5 points"); break; }else if (ask.toUpperCase() !== sportsAry[i].toUpperCase()) { points -=5; alert("You have guessed incorrectly, you gain no points."); break; } } } } if (points == 15){ document.write(firstName + ", you are a mind reader!" + "<br>"); } else if (points < 15){ document.write(firstName + ", you are pretty good!"); }else { document.write(firstName + ", you do not display ESP tendencies at this time."); } </script> </body> </html> Create a game where 6 dice are 'rolled' by you and 6 dice are 'rolled' by the player (simulated by the click of a button). Add up both rolls. The goal is to come as close to a score of 100 as possible, without passing 100. Have a STOP button to signify when you are ready to stop rolling and compute the winner. The highest score under 100 wins. Display the number of times you win and the number of times the computer wins using javascript. So far I have the following code, however, my dice images are not working(they display as little broken symbols when I run the game). The game itself is running just fine but I can't figure out how to get the game to do the "Add up both rolls" step and beyond. If anyone can help it would be much appreciated. Thanks. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dice Game</title>
<link href="Dicegame.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id='human' class='playerArea'>
<h3>Human</h3>
<div id='humanDice'>
</div>
<p id='humanTotal' class='total'></p>
</div>
<div id='computer' class='playerArea'>
<h3>Computer</h3>
<div id='computerDice'>
</div>
<p id='computerTotal' class='total'></p>
</div>
<div id='roll'>
<a href='#' onclick='play(); return false;'>Roll</a>
</div>
<script type='text/javascript' src='lib.js'></script>
<script type='text/javascript' src='dicegame.js'></script>
</body>
</html>
*the external links are as follows* *Dicegame.css* body { background-color: #004400; } div.playerArea { position: absolute; top: 100px; bottom: 200px; width: 300px; background-color: #0996FF; border: 3px solid #0027C6; padding: 0 1em; } div#human { left: 100px; } div#computer { right: 100px; } div#roll { position: absolute; bottom: 50px; left: 100px; right: 100px; height: 100px; background-color: #FFFF00; border: 3px solid #FFBE00; } div#roll:hover { background-color: #FFFF99; } div#roll a { display: block; position: absolute; top: 0px; bottom: 0px; width: 100%; color: #004400; text-align: center; font-size: 90px; text-decoration: none; } div#roll a:hover { color: #FF0000; } p.total { margin: 10px; font-weight: bold; font-size: 8em; text-align: center; } p.winner { color: #00CC00; } p.loser { color: #CC0000; }[/CODE] *dicegame.js* Code: window.onload=function(){
Nifty("div.playerArea", "big");
}
function roll()
{
var result = 0;
result = Math.floor((Math.random() * 6) + 1);
return result;
}
function play()
{
// create dice array
var humanDice = new Array();
var computerDice = new Array();
// totals
var humanTotal = 0;
var computerTotal = 0;
// output
var out = "";
// roll the dice
for (var i = 0; i < 6; i++)
{
humanDice[i] = roll();
humanTotal += humanDice[i];
computerDice[i] = roll();
computerTotal += computerDice[i];
}
// display human dice
out = displayDice(humanDice);
document.getElementById('humanDice').innerHTML = out;
// display computer dice
out = displayDice(computerDice);
document.getElementById('computerDice').innerHTML = out;
document.getElementById('humanTotal').innerHTML = humanTotal;
document.getElementById('computerTotal').innerHTML = computerTotal;
if (humanTotal > computerTotal)
{
document.getElementById('humanTotal').className = 'total winner';
document.getElementById('computerTotal').className = 'total loser';
}
else if (computerTotal > humanTotal)
{
document.getElementById('humanTotal').className = 'total loser';
document.getElementById('computerTotal').className = 'total winner';
}
else
{
document.getElementById('humanTotal').className = 'total';
document.getElementById('computerTotal').className = 'total';
}
}
function displayDice(dice)
{
var out = "";
for (var i = 0; i < dice.length; i++)
{
out += "<img src='die" + dice[i] + ".png'/>";
}
return out;
}
*lib.js* Code: function output(text, tag)
{
document.write("<" + tag + ">" + text + "</" + tag + ">");
}
|
|||||||