Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Bolita Javascript

    Cargado por

    Oscar Jaime Bedoya Cano
    5 vistas8 páginas
    código javascript juego

    Título original

    bolitaJavascript

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    código javascript juego

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    5 vistas8 páginas

    Bolita Javascript

    Cargado por

    Oscar Jaime Bedoya Cano
    código javascript juego

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 8

    <!

    DOCTYPE html>

    <html>

    <head>

    <title>Page Title</title>

    </head>

    <body>

    <p Id="resultado"> Mostrar Texto </p>

    <button onclick="mover()"> Iniciar </button>

    <button onclick="detener()"> Detener </button>

    <p Id="mensaje"> posición bola</p>

    <p Id="mensajeBarra"> posición barra</p>

    <div Id="cuadrito" onMouseEnter="cambiarColor()" onMouseLeave="retornarColor()"

    onClick="mostrarMensaje()"

    > </div>

    <div Id="bolita" onMouseEnter="cambiarColor()" onMouseLeave="retornarColor()"

    onClick="mostrarMensaje()"> </div>
    <script>

    document.getElementById("cuadrito").style.top= "400px";

    document.getElementById("cuadrito").style.left= "10px";

    window.addEventListener(

    "keydown",

    (event) => {

    if (event.defaultPrevented) {

    return;

    switch (event.key) {

    case "ArrowDown":

    document.getElementById("resultado").innerHTML="abajo ";

    document.getElementById("cuadrito").style.position="absolute";

    var obj = document.getElementById("cuadrito");

    var topVal = parseInt(obj.style.top, 10);

    obj.style.top = (topVal + 10) + "px";


    break;

    case "ArrowUp":

    // Do something for "up arrow" key press.

    document.getElementById("resultado").innerHTML="arriba ";

    document.getElementById("cuadrito").style.position="absolute";

    var obj = document.getElementById("cuadrito");

    var topVal = parseInt(obj.style.top, 10);

    obj.style.top = (topVal - 10) + "px";

    break;

    case "ArrowLeft":

    document.getElementById("resultado").innerHTML="izquierda ";

    var obj = document.getElementById("cuadrito");

    var leftVal = parseInt(obj.style.left, 10);

    obj.style.left = (leftVal - 10) + "px";

    // Do something for "left arrow" key press.

    break;

    case "ArrowRight":
    document.getElementById("resultado").innerHTML="derecha ";

    var obj = document.getElementById("cuadrito");

    var leftVal = parseInt(obj.style.left, 10);

    obj.style.left = (leftVal + 10) + "px";

    // Do something for "right arrow" key press.

    break;

    case "Enter":

    // Do something for "enter" or "return" key press.

    cambiarColor();

    break;

    case "Escape":

    // Do something for "esc" key press.

    retornarColor();

    break;

    default:

    return; // Quit when this doesn't handle the key event.

    // Cancel the default action to avoid it being handled twice

    event.preventDefault();

    },

    true,

    );
    function cambiarColor(){

    document.getElementById("cuadrito").style.backgroundColor="red";

    function retornarColor(){

    document.getElementById("cuadrito").style.backgroundColor="blue";

    document.getElementById("resultado").innerHTML="Mostrar resultado";

    function mostrarMensaje(){

    document.getElementById("resultado").innerHTML="11-1";

    let intervalID2;

    function mover(){

    intervalID2= setInterval(mov,100);

    }
    function detener(){

    clearInterval(intervalID2);

    let j =20;

    let jStr;

    function mov(){

    j=j+10;

    jStr = parseInt(j,10);

    var obj = document.getElementById("bolita");

    document.getElementById("bolita").style.top= jStr+"px";

    const rect = obj.getBoundingClientRect();

    const rect2 = document.getElementById("cuadrito").getBoundingClientRect();

    document.getElementById("mensaje").innerHTML= rect.top;

    document.getElementById("mensajeBarra").innerHTML= rect2.top;

    if( (rect.top > rect2.top -rect.height) && ((rect.left > rect2.left) && ( rect.left < (rect2.left +
    rect2.width) ) ) ){
    detener();

    subirBolita();

    function subirBolita(){

    // deter funcion TIMER bajada

    // aplicar lógica para subida ( funcion mov pero hacia arriba , dentro de otro timer)

    // top + bolita

    // left

    function reiniciar(){

    </script>

    <style>
    #cuadrito {

    position: absolute;

    background-Color:blue;

    width:140px;

    height:20px;

    border: 1px solid red;

    top: 100px;

    left: 50px;

    #bolita {

    position: absolute;

    background-Color:green;

    width:20px;

    height:20px;

    border: 1px solid red;

    border-radius: 100% 100% 100% 100%;

    top: 150px;

    left: 150px;

    </style>

    </body>

    </html>

    También podría gustarte