Saltar al contenido

ejemplo de código de juego de plataformas simple vanilla js

Ejemplo 1: javascript de plataformas

//pt1//if you don't have a canvas, this adds itif(document.getElementsByTagName('canvas').length==0)var canvas =""document.body.innerHTML+= canvas;//variable declarationvar keys =[];var ctx =document.getElementById('canvas').getContext('2d');var level =[];//eventsdocument.body.addEventListener("keydown",function(e)
                keys[e.keyCode]=true;);document.body.addEventListener("keyup",function(e)
                keys[e.keyCode]=false;);//make the level and playervar player =
                x:0,
                y:0,
                yv:0,
                xv:0,
                slope:0,
                width:25,
                height:25,
                color:'#FCA738';var ground =
                x:0,
                y:470,
                width:800,
                height:30,
                color:'#155261';var ceiling =
                x:0,
                y:0,
                width:800,
                height:30,
                color:'#155261';var leftWall =
                x:0,
                y:0,
                width:30,
                height:600,
                color:'#155261';var rightWall =
                x:770,
                y:0,
                width:30,
                height:600,
                color:'#155261';var ceilingBlock =
                x:100,
                y:400,
                width:50,
                height:20,
                color:'#155261'//this pushes all of the static objects into the level
            level.push(ground, leftWall, rightWall, ceilingBlock, ceiling);//start the enginewindow.onload= start;//this function is called at the startfunctionstart()
                player.x=50;
                player.y=400;update();//this function is called every framefunctionupdate() the player jump heightphysics(player, level,1.5,0.7,0.9,9);//this function draws the playerfunctiondrawPlayer()
                ctx.clearRect(0,0,800,500);
                ctx.fillStyle= player.color;
                ctx.fillRect(player.x, player.y, player.width, player.height);//this function draws the levelfunctiondrawLvl()for(var i =0; i < level.length; i++)
                    ctx.fillStyle= level[i].color;
                    ctx.fillRect(level[i].x, level[i].y, level[i].width, level[i].height);//this function handles the platformer physicsfunctionphysics(p1, lvl, speed, gravity, friction, jumpheight)//gravity
                p1.yv+= gravity;
                p1.y+= p1.yv;//y collisionfor(var i =0; i < lvl.length; i++)if(collisionBetween(p1, lvl[i]))
                        p1.y+=-p1.yv;if(keys[38])
                            p1.yv=-jumpheight;else
                           p1.yv=0;

Ejemplo 2: javascript de plataformas

//pt2//x movementif(keys[39])
                    p1.xv-= speed;if(keys[37])
                    p1.xv+= speed;
                p1.xv*= friction;
                p1.x+=-p1.xv;//slopes
                p1.slope=0;for(var i =0; i < lvl.length; i++)if(collisionBetween(p1, lvl[i]))if(p1.slope!=-8)
                            p1.y-=1;
                            p1.slope+=1;//x collisionfor(var i =0; i < lvl.length; i++)if(collisionBetween(p1, lvl[i]))
                        p1.y+= p1.slope;
                        p1.x-=-p1.xv;//wall jumpingif(keys[38])
                            p1.yv=-jumpheight +1;if(p1.xv>0)
                                p1.xv=-10;else
                                p1.xv=10;else
                            p1.xv=0;//this function detects the collision between the two given objectsfunctioncollisionBetween(p1, lvl)if(lvl.x< p1.x+ p1.width&&
                    lvl.x+ lvl.width> p1.x&&
                    lvl.y< p1.y+ p1.height&&
                    lvl.y+ lvl.height> p1.y)returntrue;elsereturnfalse;

Eres capaz de añadir valor a nuestra información dando tu experiencia en las anotaciones.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *