Zhen Liu's week 2 house
by ZhenLiu
HTML
<div id="drawing">
<div id="ear">Please Click Topbase</div>
</div>
JavaScript
//Zhen Liu 2018/10/4
"use strict"
var draw = SVG('drawing').size(1000,1000);
// Draw the Canvas with the width of 600 and height 400
/* This function draw the base(top and bottom base)
It has 3 parameters
1) basex = x position of the base
2) basey = y position of the base
3) c = the color of the base
*/
function makeBaseD3(basex,basey,c1,c2) {
var midBase = draw.rect(500,150).fill(c1).stroke({width:2});
midBase.x(basex); midBase.y(basey)
var BottomBase = draw.rect(320,35).fill(c2).stroke({width:2});
BottomBase.x(basex-45); BottomBase.y(basey+150)
}
makeBaseD3(70,100,'#98754d','#c39765')
function drawBaseD1(basex, basey, c1, c2){
/*this function draw the base of the tree house. it has four parameters,
1. basex = x location of the base,
2. basey = y location of the base,
3. c1 = the color of the first two parts of base,
4. c2 = the color of the bottom part of base,
*/
//draw the top part of the base
var topBase = draw.rect(150, 85).fill(c1).
//this is light brown color.
stroke({
width: 2
})
topBase.move(basex, basey);
topBase.on('click', changeColor);
function changeColor() {
topBase.fill('#f00');
}}
drawBaseD1(195,15, '#A0522D', '#ff7c4d');
//add a rectangle as the top part of the base.
/* This function draw the windowA
It has 3 parameters
1) basex = x position of the windowA
2) basey = y position of the windowA
3) c = the color of the windowA
*/
function makeWinA(WinAx,WinAy,c1) {
var WinA1= draw.rect(55,115).radius(10).fill(c1).stroke({width:2});
WinA1.x(WinAx); WinA1.y(WinAy);
var WinA2= draw.rect(55,115).radius(10).fill(c1).stroke({width:2});
WinA2.x(WinAx-60); WinA2.y(WinAy);
}
makeWinA(160,125,'#a0fcfe');
function drawtopbasewin(winAx, winAy, c) {
/*this function draw the top base window. it has three parameters,
1. winAx = x location of the top base window,
2. winAy = y location of the top base window,
3. c = the color of the window
*/
var topbasewin =...