I add <!DOCTYPE html> and it breaks my code and without it it work perfectly
Question
Every time i add the rats at the top dont fall down. I saw other people had this problem and it had to do with adding px to certain things. i have that in some of my code but i have no clue where else it needs it.
CSS
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Balloons Toss</title>
<meta charset="utf-8" />
<meta name="Author" content="Tyler Chretien" />
<meta name="Author" content="Karishma" />
<meta name="Author" content="Eric Nguygen" />
<meta name="robots" content="noindex, nofollow" />
<style>
#SPAN_1:hover{color:blue;}
#SPAN_1{color:black;}
#SPAN_2:hover{color:blue;}
#SPAN_2{color:black;}
table.center {
margin-left:auto;
margin-right:auto;
width: 560px;
text-align: center;
}
@font-face{
font-family: memes;
src: url(DeterminationSansWeb.woff);
}
body{
font-family: memes, sans-serif;
background-color: black;
}
.blackbox{
color: white;
width: 300px;
}
td{
height: 900px;
}
img, body{
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
img {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
}
</style>
JavaScript
<script>
var numberOfMonster= 0, setupScore, setupMonster, names=["rat.gif"],
catleft = 325, catright= 250, ratleft, ratright, countElement, howfast=
10, score = 0;
/*This function is the initial setup for the game aka score, sound,
monster spawn */
function myFunction()
{
spawntheMonster( 0 );
document.all.coolscore.innerHTML= 0;
setupScore=setInterval(function(){score++;
document.all.coolscore.innerHTML=score;}, 1000 );
setupMonster=setInterval(function(){spawntheMonster( 0 );}, 3000 );
document.getElementById('sound').play();
}
/*Next four function are deticated for moving the cat and setting
boundaries */
function leftArrowPressed()
{
var element = document.getElementById("cat");
if(parseInt(element.style.right.substring(element.style.right.length
- 2 , 0 )) > 0 ) {
element.style.right = parseInt(element.style.right) -
20 + 'px';
}
}
function rightArrowPressed()
{
var element = document.getElementById("cat");
if(parseInt(element.style.right.substring(element.style.right.length -
2
, 0 )) < 480 ) {
element.style.right = parseInt(element.style.right)
+ 20 + 'px';
}
}
function upArrowPressed()
{
var element = document.getElementById("cat");
if(parseInt(element.style.top.substring(element.style.top.length - 2
,
0 )) > 0 ) {
element.style.top = parseInt(element.style.top) -
20 + 'px';
}
}
function downArrowPressed()
{
var element = document.getElementById("cat");
if(parseInt(element.style.top.substring(element.style.top.length - 2 ,
0 )) < 740 ) {
element.style.top = parseInt(element.style.top) +
20 + 'px';
}
}
/* connects the id's of arrow keys and w,a,s,d to the previous
functions to be able to move */
function movetheguy(event){
switch (event.keyCode) {
case 39:
leftArrowPressed();
break;
case 37:
rightArrowPressed();
break;
case 38:
upArrowPressed();
break;
case 40:
downArrowPressed();
break;
case 68:
leftArrowPressed();
break;
case 65:
rightArrowPressed();
break;
case 87:
upArrowPressed();
break;
case 83:
downArrowPressed();
break;
}
}
/* sets spawn, attributes, and clickablity of the rats */
function spawntheMonster(monster){
var widthrandom = Math.floor(Math.random() * 112 )* 5 - 20;
widthrandom = "position:absolute; right: "+widthrandom+"; top:
000;";
var z = document.createElement("IMG");
z.setAttribute("src", names[monster]);
z.setAttribute("style", widthrandom);
z.setAttribute("width", "40");
z.setAttribute("height", "54");
z.setAttribute("id", numberOfMonster+"mon");
z.setAttribute("onLoad", "setInterval(moveguydown, 100, this);");
z.setAttribute("onClick", "this.style.top=parseInt(this.style.top)-75;");
document.getElementById("back1").appendChild(z);
numberOfMonster++;
}
/* moves the rats */
function moveguydown(moveMonster){
if(parseInt(moveMonster.style.top)>= 900 ){
moveMonster.style.top= -500;
moveMonster.style.right=Math.floor(Math.random() * 112 )* 5 -
20; //check this
}
else
moveMonster.style.top=parseInt(moveMonster.style.top)+howfast;
overlap(moveMonster);
}
/* randomly spawns the rats */
function randomspawn(){
spawntheMonster(Math.floor(Math.random() * names.length));
}
/* This function displays the end screen and resets game*/
function die(){
var highscore=document.all.coolscore.innerHTML;
var count;
for(count= 0 ; count<numberOfMonster; count++){
countElement=document.getElementById(count+"mon");
document.getElementById("back1").removeChild(countElement);
}
numberOfMonster = 0;
document.all.coolscore.innerHTML=
"GAME OVER<br><span onClick='location.reload();'>Click to restart!
</span><br>SCORE: "+score+
"<font size='5'><br>Thanks to<br>Cat By: PRguitarman<br>Sound By: Jay
Man<br>Rats By: Yacht Club Games";
clearInterval(setupScore);
clearInterval(setupMonster);
}
/* Compares hit boxes and checks to see if you die */
function overlap(obj){
catleft =parseInt(cat.style.right)+ 75;
catright=parseInt(cat.style.right);
ratleft =parseInt(obj.style.right)+parseInt(obj.width);
ratright=parseInt(obj.style.right);
cattop =parseInt(cat.style.top);
catbot=parseInt(cat.style.top)+ 150;
rattop =parseInt(obj.style.top)+parseInt(obj.height);
ratbottom=parseInt(obj.style.top);
if(rattop<catbot && ratbottom>cattop && ratright<catleft &&
ratleft>catright)
die();
}
/* Switches difficulty and sound */
function twospeeds(){
if(howfast== 30 ){//fast
back1.style.backgroundImage="url('large0.gif')";
howfast= 10;}
if(howfast== 10){//WAY too fast
back1.style.backgroundImage="url('large2.gif')";
howfast= 30;
document.getElementById('sound').src="sun.mp3";
document.getElementById('sound').play();
}
}
</script>
</head>
html
<body onKeyDown="" onkeyup="movetheguy(event);" >
<table class="center" style="position: relative;">
<tbody><tr>
<td id="back1" style="vertical-align: text-top; font-size:400%;
background-
image: url('large0.gif'); position: relative;">
<div class = "no-copy" id="coolscore">
<span onclick="myFunction();" id="SPAN_1">CLICK HERE
TO START</span>
<span onclick="twospeeds();" id="SPAN_2" style="font-
size:42px;">Click here for Insane mode</span>
<span style="font-size:24px;"><br>Use the Arrow Keys
or WASD to move<br>Click on the rats to move them up</span>
</div>
<br><br><br><br><img alt = "cat" src="cat.gif" width="75" height="150"
id="cat" style="position: absolute; right: 250px; top: 500px">
</td>
</tr>
</tbody>
</table>
<audio id="sound" hidden src="sound.mp3" >
</audio>
<audio id="sound2" hidden src="sun.mp3" >
</audio>
<footer style="border-top: 1px solid blue">
<a href="http://elvis.rowan.edu/~chretient7/"
title="Link to my home page">
Tyler Chretien
</a>
<span style="float: right;">
<a href="http://validator.w3.org/check/referer">HTML5</a> /
<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">
CSS3 </a>
</span>
</footer>
</body>
</html>
https://github.com/Crouton18/game/blob/master/balloon.html
You can check by removing the in the code how it suppose to work. But in general the rats need to be falling down and when the cat gets hit the game ends.
1 answers
solution1
2 2019-05-10 01:04:51
Because the HTML tag is XHTML. Use this doctype instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Everytime i add <!DOCTYPE html> it breaks my code
Adding DOCTYPE html to my index.html breaks my javascript
Code Does Not Work WIth <!DOCTYPE html> at the top
“Add custom HTML” block in WordPress previews my code perfectly, but when I come back, it's all messed up
When I add .push function in my code for loop breaks
setting doctype breaks my css and javascript
pageX pageY not working in IE8 if i add <!DOCTYPE html>
My jQuery ,jQuerymobile code doesn't work on PC, but perfectly on server
How to add line breaks in jumbled html code
!doctype html ruins my script
Related Tags