Learning HTML and JavaScript with a Simple Shooting Game: Lesson 7

preview_player
Показать описание

  1. Timothy James
  2. JavaScript (Programming Language)
  3. HTML (Programming Language)
  4. Space Invaders (Video Game)
  5. Shooter Game (Media Genre)
  6. coding
Рекомендации по теме
HTML, CSS, and 0:31:49

HTML, CSS, and Javascript in 30 minutes

4: How to 0:08:20

4: How to Include JavaScript in Our HTML | JavaScript Tutorial | Learn JavaScript | For Beginners

How Much HTML, 0:11:00

How Much HTML, CSS, & JavaScript Is Enough? | Realistic Expectations

What is HTML, 0:06:51

What is HTML, CSS, and JavaScript?

HTML, CSS, JavaScript 0:03:58

HTML, CSS, JavaScript Explained [in 4 minutes for beginners]

HTML in 5 0:05:12

HTML in 5 minutes

Pikachu | HTML 0:01:00

Pikachu | HTML CSS JavaScript

I learned HTML 0:14:59

I learned HTML CSS & JavaScript | Now What? #grindreel

Portfolio Website with 0:00:25

Portfolio Website with HTML & CSS & JavaScript Tutorial #portfoliowebsite #html #css #javasc...

How Much HTML, 0:08:51

How Much HTML, CSS, & JavaScript Is Enough In 2023 | Setting Realistic Expectations

Learn JavaScript - 3:26:43

Learn JavaScript - Full Course for Beginners

Learn HTML in 1:00:00

Learn HTML in 1 hour 🌎

HTML Tutorial for 1:09:34

HTML Tutorial for Beginners: HTML Crash Course

Full Stack Web 7:29:12

Full Stack Web Development for Beginners (Full Course on HTML, CSS, JavaScript, Node.js, MongoDB)

You'll Never Get 0:05:10

You'll Never Get A Job By Just 'Learning' HTML, CSS & JavaScript

Stop wasting time 0:06:56

Stop wasting time when you're learning to code!

HTML CSS and 1:25:42

HTML CSS and Javascript Website Design Tutorial - Beginner Project Fully Responsive

Squares | HTML 0:01:00

Squares | HTML CSS

God Tier HTML 0:00:50

God Tier HTML Programming

Should I Learn 0:02:25

Should I Learn HTML or JavaScript First?

Maybe the easiest 0:00:32

Maybe the easiest way to share HTML, CSS, and JS?

Solar System | 0:01:00

Solar System | HTML CSS

Learn HTML & 5:21:44

Learn HTML & CSS – Full Course for Beginners

HTML & CSS 4:02:43

HTML & CSS Full Course for free 🌎 (2023)

Комментарии
Автор

Thank you very much for that. Keep up the good work.

EnglischLernen
Автор

Thanks for awesome tutorial and game!!

mdbdrrhm
Автор

Thank you for this lessons!
Can you tell me please, how to make a lot of lasers? I mean I want to shoot more than one laser

blablablaraza
Автор

I was wondering how can i make a menu with a play button and controls button and a button under game over to play again or go to the menu

alessiobs
Автор

Hello. I noticed that even after 'game over', you can still move, shoot lasers and gain points. Any ideas how to make the game stop?

Cozeris
Автор

I've been trying to add a high score table but I'm struggling (old man syndrome!) Can you do a tutorial on it please? Maybe with an option to add names to a high score table, say 1 to 10? Thank you in advaNCE.

athertonsecretary
Автор

<html> <head> <style> #hero { background: #ff0000; width: 20px; height: 20px; position: absolute; } #background { background: width: 500px; height: 500px; position: absolute; left: 0px; top: 0px; } .laser { background: #00ff00; width: 2px; height: 50px; position: absolute; } .enemy { background: #0000ff; width: 35px; height: 35px; position: absolute; } #score { color: font-size: 18pt; position: absolute; left: 20px; top: 20px; } #gameover { color: #ff0000; font-size: 20px; position: absolute; left: 160px; top: 200px; visibility: hidden; } </style> </head> <body> <div id="background"></div> <div id="hero"></div> <div class="laser" id="laser0"></div> <div class="laser" id="laser1"></div> <div class="laser" id="laser2"></div> <div id="score"></div> <div id="gameover">GAME OVER</div> <script> var LEFT_KEY = 37; var UP_KEY = 38; var RIGHT_KEY = 39; var DOWN_KEY = 40; var SPACE_KEY = 32; var HERO_MOVEMENT = 3; var lastLoopRun = 0; var score = 0; var iterations = 0; var controller = new Object(); var enemies = new Array(); function createSprite(element, x, y, w, h) { var result = new Object(); result.element = element; result.x = x; result.y = y; result.w = w; result.h = h; return result; } function toggleKey(keyCode, isPressed) { if (keyCode == LEFT_KEY) { controller.left = isPressed; } if (keyCode == RIGHT_KEY) { controller.right = isPressed; } if (keyCode == UP_KEY) { controller.up = isPressed; } if (keyCode == DOWN_KEY) { controller.down = isPressed; } if (keyCode == SPACE_KEY) { controller.space = isPressed; } } function intersects(a, b) { return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y; } function ensureBounds(sprite, ignoreY) { if (sprite.x < 20) { sprite.x = 20; } if (!ignoreY && sprite.y < 20) { sprite.y = 20; } if (sprite.x + sprite.w > 480) { sprite.x = 480 - sprite.w; } if (!ignoreY && sprite.y + sprite.h > 480) { sprite.y = 480 - sprite.h; } } function setPosition(sprite) { var e = e.style.left = sprite.x + 'px'; e.style.top = sprite.y + 'px'; } function handleControls() { if (controller.up) { hero.y -= HERO_MOVEMENT; } if (controller.down) { hero.y += HERO_MOVEMENT; } if (controller.left) { hero.x -= HERO_MOVEMENT; } if (controller.right) { hero.x += HERO_MOVEMENT; } if (controller.space) { var laser = getFireableLaser(); if (laser) { laser.x = hero.x + 9; laser.y = hero.y - laser.h; } } ensureBounds(hero); } function getFireableLaser() { var result = null; for (var i = 0; i < lasers.length; i++) { if (lasers[i].y <= -120) { result = lasers[i]; } } return result; } function getIntersectingLaser(enemy) { var result = null; for (var i = 0; i < lasers.length; i++) { if (intersects(lasers[i], enemy)) { result = lasers[i]; break; } } return result; } function checkCollisions() { for (var i = 0; i < enemies.length; i++) { var laser = if (laser) { var element = element.style.visibility = 'hidden'; enemies.splice(i, 1); i--; laser.y = -laser.h; score += 100; } else if (intersects(hero, enemies[i])) { gameOver(); } else if (enemies[i].y + enemies[i].h >= 500) { var element = element.style.visibility = 'hidden'; enemies.splice(i, 1); i--; } } } function gameOver() { var element = element.style.visibility = 'hidden'; element = element.style.visibility = 'visible'; } function showSprites() { setPosition(hero); for (var i = 0; i < lasers.length; i++) { setPosition(lasers[i]); } for (var i = 0; i < enemies.length; i++) { setPosition(enemies[i]); } var scoreElement = scoreElement.innerHTML = 'SCORE: ' + score; } function updatePositions() { for (var i = 0; i < enemies.length; i++) { enemies[i].y += 4; enemies[i].x += getRandom(7) - 3; ensureBounds(enemies[i], true); } for (var i = 0; i < lasers.length; i++) { lasers[i].y -= 12; } } function addEnemy() { var interval = 50; if (iterations > 1500) { interval = 5; } else if (iterations > 1000) { interval = 20; } else if (iterations > 500) { interval = 35; } if (getRandom(interval) == 0) { var elementName = 'enemy' + var enemy = createSprite(elementName, getRandom(450), -40, 35, 35); var element = element.id = enemy.element; element.className = 'enemy'; enemies[enemies.length] = enemy; } } function getRandom(maxSize) { return parseInt(Math.random() * maxSize); } function loop() { if (new Date().getTime() - lastLoopRun > 40) { updatePositions(); handleControls(); checkCollisions(); addEnemy(); showSprites(); lastLoopRun = new Date().getTime(); iterations++; } setTimeout('loop();', 2); } document.onkeydown = function(evt) { toggleKey(evt.keyCode, true); }; document.onkeyup = function(evt) { toggleKey(evt.keyCode, false); }; var hero = createSprite('hero', 250, 460, 20, 20); var lasers = new Array(); for (var i = 0; i < 3; i++) { lasers[i] = createSprite('laser' + i, 0, -120, 2, 50); } loop(); </script> </body> </html>

game7-multilaser.html

Abrir com o Documentos Google



Exibindo gam

alessiobs
Автор

i wrote evry coding whats here...but the game doesnt work...it got stckd...can u hlp me?

abithajeevani
Автор

Is it possible to make the hero be affected by gravity and jump?
Just curious.

vesentrin
Автор

Can anyone tell me how to add my own image to the hero?

(If that wasn't clear)

Basically, I have images I've made (that are jpg's) that i want to make the enemies and the hero look like.

(if that wasn't clear)
Instead of the red block for the hero and the blue block for the enemy, I want to use my own pictures.

Any help would be very much appreciated!

Deedwns