ET - Software Development Projects - StarCatcher

StarCatcher Project

Starter code for your main page.

You can change the theme of this game to anything you like by using different images that are either avoiding the targets or catching them. I have had students use this code as a template to make dodge-ball games, butterfly catching games, asteroid games, etc...

Instructions:

Use the code below to start your main page for the game.
Copy the block of code into a new HTML file called 'index' in a 'StarCatcher' named folder. Save it as an HTML file.

You will need to have three images to start. Make a folder called 'images' and search the Internet for two spaceships and a star image. Save the images into the 'image' folder with the names "star.png, spaceship1.png, and spaceship2.png. You can use .jpg format but you will have to change the code to reflect the different extension if you do so.

HTML file

                
<!-- StarCatcher Game for David's Soft Dev class 2015-->
<!DOCTYPE html>
<html>
<head>
    <title>StarCatcher - Software Development</title>
<!--    our link to the javascript file that will control the game actions -->
    <script type="text/javascript" src="scScripts.js"></script>
<!--    out styles will be internal until we need to move them to an external file -->
    <style type="text/css">
        html, body {margin: 5px;}
        canvas {display: block;}
        #game {
            margin-left: auto;
            margin-right: auto;
            width: 800px;
            height: 500px;
            background-color: lightblue;
            border-radius: 10px;
        }
        .centerText {text-align: center;}
            
    </style>
</head>
<body>
    <h2 class="centerText">Game ON!</h2>
    <div id="game">
        <canvas id="myCanvas"></canvas>
    </div>
</body>
</html>