How to Code a Simple Game in HTML5

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

====================
I'm asking my followers to vote on one of 9 new game ideas I'd like to begin working on. You can help me out by voting here:

Tumblr Blog:

Google +:

Facebook:

Twitter:

====================
====================
My Name Is Professor Ian Boswell - A Game Designer from Jacksonville Florida and this is my Youtube Channel where I play Games and post videos about various random, fun, and crazy things including videos about the games I work on as well as the games I like to play in my spare time!

Рекомендации по теме

Комментарии

When I scroll down I see a lot of hateful comments, so I just wanted to clarify that this tutorial has helped me an incredible amount. I now develop games in html5 both with and without engine, and I thank that mostly to you. Thank you Ian Boswell!

zellenny

I looked at the thumbnail and saw your desktop wallpaper, but I thought you made that in html5 in 30minutes so I had to click, that's some next level unintentional god tier clickbait

YP

If anyone is still watching in 2019, keep in mind that at 25:22 when he said "There we go", he cut the video and corrected some stuff in the code. I was stuck at it for 20 minutes until I realized he had changed stuff, and made it look smooth with editing.

TheKaimukas

I was really afraid of seeing Internet Explorer, since you already used Paint and Notepad...

krmax

This came to me in a dream last night. I was giving a simple little whack-a-mole game tutorial to a classroom full of 3rd graders to try and encourage them to open up note pad and make their own games during classroom time. Because, hey, who needs edutainment when you can make your own?

I firmly believe that creativity is the only thing worth fostering in schools any more and it's probably not considered at all by most school curricula.

ianboswell

i have a pet mole... well not really a pet he comes by my backyard everyday....
well honestly idk if its the same mole once i pet him me and the mole are like

EnderRealmMC

Great video!!! Making games in HTML5/Javascript is a lot of fun. Javascript has become my FAVORITE toolset to use as I like making web games and I like for people to be able to play my games right out of the box without having to download. I've been doing 2D games for a moment, but now I'm trying to get started more into 3D game development.

Henry_GamesX

It's Too Blurry, I Can't See All Of The Code

imwinpacgaming

8:00 i cant scroll down when i take it away. Help. also get better screen recording quality. i can make out if it is (, [, {

mnbvcx

The text is small, I can't see the script neither on my Laptop nor on my Desktop LED Monitor with the quality of the video set to 1080p. Your tutorial is really good just the quality needs to be higher or you add the full code in the description

luciathesylveon

I was really excited about this until I realized that reading what you’re typing is impossible. MAKE THE TEXT BIG ENOUGH FOR YOU AUDIENCE TO READ.

josephlarrivy

I cant see it and your going too quick

gdfuzzycsfc

Im having trouble starting 14:00
Because I typed “#mole2{left:45%;} but for some reason the mole didn’t appear in the center, neither the 3 appeared, it looks like my chrome doesn’t understand this part

alejandrox

I think this is all the code, I have tested it and it works! I've commented out everything with the mole faces as it won't work unless you make/have those images, so it should work if you save this code as .html:

<html>
<head>

<style>

body {
width:100%;
height:100%;
overflow:hidden;
}

.mole {
background-color:rgb(128, 64, 0);
border-radius:100px 100px 0px 0px;
height:100%;
width:10%;
position:absolute;
top:100%;

background-size:100%;
background-repeat:no-repeat;
background-position:0% 5%;
}

.left_ear {
background-color:rgb(128, 64, 0);
border-radius:100px;
position:absolute;
float:left;
min-width:30%;
padding-top:30%;
z-index:-1;
}

.right_ear {
background-color:rgb(128, 64, 0);
border-radius:100px;
position:absolute;
float:right;
min-width:30%;
padding-top:30%;
left:70%;
z-index:-1;
}

.try_again a {
color: black;
}

#mole1 {
left: 10%;
}

#mole2 {
left: 45%;
}

#mole3 {
left: 80%;
}

.score {
font-family: Arial;
font-size: 5vw;
position: absolute;
right: 5%;
z-index: 3;
}

</style>

<script>

var add = 0;

function game_over() {

jQuery('.mole').animate({'top':'100%'}, 300);
jQuery('.score').html('GAME OVER');
jQuery('.score').append('<div class="try_again">TRY AGAIN</div>');

}

function start() {

add = 0;
jQuery('.score').html('Score: ' + add);
jQuery('.mole').animate({'top':'0%'}, 5000, function(){
game_over();

});

}

//jQuery(this).css('background-image', 'url(hurt.bmp)');
jQuery(this).stop().animate({'top':'100%'}, 300, function(){

add = add - (-1);
jQuery('.score').html('Score: ' + add);
//jQuery(this).css('background-image', 'url(mole.bmp)');
jQuery(this).animate({'top':'0%'}, 5000);

});

});

start();

});

</script>

</head>

<body>

<div class="score">Score: 0</div>

<div class="mole", id="mole1">
<div class="left_ear"></div>
<div class="right_ear"></div>
</div>

<div class="mole", id="mole2">
<div class="left_ear"></div>
<div class="right_ear"></div>
</div>

<div class="mole", id="mole3">
<div class="left_ear"></div>
<div class="right_ear"></div>
</div>

</body>

</html>

bazmehdii

Really nice friendly beginner html game tut - thanks Ian!

freeelectron

Could you please post a picture of the final code in the description?

thesecretmiles

its a great tutorial until you realize the video maker couldn't be bothered to use a bigger font on their ultra hd monitor recording in obs at 1080 p.
you can't tell the brackets, or read parts of the code at high resolution. shame...

VictorianGodMan

Wow "- (-1)" Thats Great you just made a ultra negativa number now please pay your bill for all the Clickbait

jungleinsanity

Ive been just thinking about coding since 2014 ive tried many times, but i just dont know how. How do you make that do that, so many things. Scoreboard, guns, cars, menu etc. I could use help. I unfortunately can't make myself to learn .

scarf

is there away to instill an event where after every hover interatction the moles speed increases by a small amount so it gets harder for the player?

ryspyalot

How to Code a Simple Game in HTML5

coding is easy, actually

Learn To Code Like a GENIUS and Not Waste Time

How To Learn Programming for BEGINNERS! (2022/2023)

basics of CODING in 10 minutes

How to create your first website💻 #coding #website #webdev #code #shorts #html

Python Basics: Your FIRST Program in Under a Minute! 🚀

Simple JavaScript Basics #javascript #code #tutorial #javascriptdeveloper

learn Arduino programming in 20 seconds!! (Arduino projects)

Write Readable Code: Simple Tips for Debugging Faster

Boost Your Coding Skills Fast: Simple Tips for Effective Practice! #code #shorts

Morse code but INSANELY easy

Why you SHOULDN’T build a mobile app 📱👩‍💻 #technology #programming #software #career #tech...

Start Making Games

Simple Code, High Performance

5 Easiest Coding Language to learn (my opinion)

Not easy but simple #coding #developer #development #grind #programming #motivation #tech #code

Learn Morse Code - Easy Way

How to learn coding using Mobile 🔥🔥 | Practically | Python for Beginners

Simple SQL code || Structured Query Language || SQL || RDBMS #programming

Fanuc Robot Tutorial 3: Introduction to Robot Coding - Write a Simple Code Using Teach Method

Code-It-Yourself! Tetris - Programming from Scratch (Quick and Simple C++)

HTML Introduction: How to Code a Simple Web Page

Hacking Linux with These Simple Commands Pt:1

Best simple movement code for Scratch! #scratch #code #simple