Babylon.JS For Racing Cars Game Development #javascript #typescript #animation

Game

Const Score = Document.QuerySelector('.Score'); Const HighScore = Document.QuerySelector('.HighScore'); Const StartScreen = Document.QuerySelector('.StartScreen'); Const GameArea = Document.QuerySelector('.GameArea'); Const ClickToStart = Document.QuerySelector('.ClickToStart'); // Const Grass = Document.QuerySelector('.Grass'); // Const Garden = Document.QuerySelector('.Garden'); ClickToStart.AddEventListener('Click', Start); Document.AddEventListener('Keydown', Keydown); Document.AddEventListener('Keyup', Keyup); Let Keys = { ArrowUp: False, ArrowDown: False, ArrowLeft: False, ArrowRight: False, } Let Player = { Speed: 5, Score: 0, HighScore: 0 }; Function Keydown(E) { Keys[E.Key] = True } Function Keyup(E) { Keys[E.Key] = False; } // Starting The Game Function Start() { GameArea.InnerHTML = ""; StartScreen.ClassList.Add('Hide'); Player.IsStart = True; Player.Score = 0; Window.RequestAnimationFrame(Play); // Creating The Road Lines For (I = 0; I < 5; I++) { Let RoadLines = Document.CreateElement('Div'); RoadLines.SetAttribute('Class', 'RoadLines'); RoadLines.Y = (I * 140); RoadLines.Style.Top = RoadLines.Y + "Px"; GameArea.AppendChild(RoadLines); } // Creating The Opponents Car For (I = 0; I < 3; I++) { Let Opponents = Document.CreateElement('Div'); Opponents.SetAttribute('Class', 'Opponents'); Opponents.Y = ((I) * -300); Opponents.Style.Top = Opponents.Y + "Px"; GameArea.AppendChild(Opponents); Opponents.Style.Left = Math.Floor(Math.Random() * 350) + "Px"; Opponents.Style.BackgroundColor=RandomColor(); } Let Car = Document.CreateElement('Div'); Car.SetAttribute('Class', 'Car'); GameArea.AppendChild(Car); Player.X = Car.OffsetLeft; Player.Y = Car.OffsetTop; } Function RandomColor(){ Function C(){ Let Hex=Math.Floor(Math.Random()*256).ToString(16); Return ("0"+String(Hex)).Substr(-2); } Return "#"+C()+C()+C(); } //Play The Game Function Play() { Let Car = Document.QuerySelector('.Car'); Let Road = GameArea.GetBoundingClientRect(); If (Player.IsStart) { MoveLines(); MoveOpponents(Car); If (Keys.ArrowUp && Player.Y > (Road.Top + 70)) { Player.Y -= Player.Speed } If (Keys.ArrowDown && Player.Y < (Road.Height - 75)) { Player.Y += Player.Speed } If (Keys.ArrowRight && Player.X < 350) { Player.X += Player.Speed } If (Keys.ArrowLeft && Player.X > 0) { Player.X -= Player.Speed } Car.Style.Top = Player.Y + "Px"; Car.Style.Left = Player.X + "Px"; HighScore.InnerHTML = "HighScore" + ":" + (Player.HighScore - 1); Player.Score++; Player.Speed += 0.01; If (Player.HighScore < Player.Score) { Player.HighScore++; HighScore.InnerHTML = "HighScore" + ":" + (Player.HighScore - 1); HighScore.Style.Top="80px"; } Score.InnerHTML = "Score" + ":" + (Player.Score - 1); Window.RequestAnimationFrame(Play); } } Function MoveLines() { Let RoadLines = Document.QuerySelectorAll('.RoadLines'); RoadLines.ForEach(Function (Item) { If (Item.Y >= 700) Item.Y -= 700; Item.Y += Player.Speed; Item.Style.Top = Item.Y + "Px"; }) } Function MoveOpponents(Car) { Let Opponents = Document.QuerySelectorAll('.Opponents'); Opponents.ForEach(Function (Item) { If (IsCollide(Car, Item)) { EndGame(); } If (Item.Y >= 750) { Item.Y -= 900; Item.Style.Left = Math.Floor(Math.Random() * 350) + "Px"; } Item.Y += Player.Speed; Item.Style.Top = Item.Y + "Px"; }) } //Check Whether The Cars Collide Or Not Function IsCollide(A, B) { ARect = A.GetBoundingClientRect(); BRect = B.GetBoundingClientRect(); Return !((ARect.Top > BRect.Bottom) || (ARect.Bottom < BRect.Top) || (ARect.Right < BRect.Left) || (ARect.Left > BRect.Right)) } //Game Is End Function EndGame() { Player.IsStart = False; Player.Speed = 5; StartScreen.ClassList.Remove('Hide'); }

Pesquisar este blog

Automotivenewsdeutschland

Babylon.JS For Racing Cars Game Development #javascript #typescript #animation

https://automotivenewsbrazil.blogspot.com/2023/08/babylonjs-javascript.html?m=1

Comentários

Postar um comentário

Postagens mais visitadas deste blog

#Stuttgart #VelocittaCircuit #Deutschland 🇩🇪🇧🇷🇩🇪🇧🇷🇩🇪🇧🇷🏁🏁🏁🔥🔥🔥

Miniatura Porsche GT2RS (991) #Stuttgart #Porsche #Deutschland 🏁🏁🏁🇩🇪🇩🇪🇩🇪🇧🇷🇧🇷🇧🇷

New BUGATTI #ROSICIDRAM #SAOPAULOSP #BRASIL