I haven't quite got the functions down to the point where each function does just one thing and the whole thing isn't really object oriented yet. still planning the thing out.
<!DOCTYPE HTML>
<html>
<head>
<style type = "text/css">
canvas { border: 1px dotted black}
</style>
</head>
<body>
<h3>GORILLAS TOSSING GORILLAS AT GORILLAS</h3>
<canvas id="gameScreen" width="800" height="400" >sorry, your browser sucks</canvas>
<button id="play" onclick="playGame()" type="button">play game</button>
<script>
var game_screen = document.getElementById("gameScreen");
var context = game_screen.getContext("2d");
function drawGorilla(){
// gorilla legs
context.fillStyle = "brown";
context.beginPath();
context.arc(95, 85, 10, 2* Math.PI,0);
context.closePath();
context.fill();
context.fillStyle = "white";
context.beginPath();
context.arc(95, 85, 4, 2* Math.PI,0);
context.closePath();
context.fill();
//leg cut off
context.fillRect(77,88,30,10);
// body
context.fillStyle = "brown";
context.fillRect(90,66,10,14);
context.beginPath();
context.arc(95,66,9, Math.PI, 2 * Math.PI, true);
context.closePath();
context.fill();
// head
context.fillRect();
}
function aGorilla(color){
this.color = color;
aGorilla.toss = function(){};
}
function aMissile(angle,power){
this.angle = angle;
this.power = power;
aMissile.isHit = function(){};
aMissile.explode = function(){};
}
function building(width,height,color){
this.width = width;
this.height = height;
this.color = color;
building.draw= function(){};
}
var wind = {};
var skyline = {};
function placeGorilla(x,y){
context.fillRect(x,y,20,20);
}
function setUp(){
// skyline
// place gorillas
var gorilla1 = {
xpos : 100,
ypos : 200
}
var gorilla2 = {
xpos : 700,
ypos : 200
}
placeGorilla(gorilla1.xpos,gorilla2.ypos);
placeGorilla(gorilla2.xpos,gorilla2.ypos);
// set wind
wind.direction = 0;
wind.strength = 0;
}
function takeTurns(){
}
function cleanUp(){
}
function playGame(){
setUp();
takeTurns();
cleanUp();
}
</script>
</body>
</html>
No comments:
Post a Comment