资讯专栏INFORMATION COLUMN

【题目】【4天2】会移动的汽车

Raaabbit / 506人阅读

摘要:题目用原型的方法,绘制会动的汽车,要求可以一下制作一组汽车让汽车向右移动移动的距离可以手动控制分析用构造函数方方创建一组车辆的坐标绘制汽车向右移动可手动更改移动距离用构造函数创建一组坐标用原型方法向内部添加属性方法,绘制汽车向右移动,可手动

题目:用原型的方法,绘制会动的汽车,要求1.可以一下制作一组汽车;2.让汽车向右移动;3.移动的距离可以手动控制

分析:

用构造函数方方创建一组车辆的坐标

绘制汽车

向右移动(可手动更改移动距离)

//用构造函数创建一组坐标
var Car = function (x, y) {
    this.x = x;
    this.y = y;
};

//用原型方法向Car内部添加属性(方法),绘制汽车
Car.prototype.draw = function () {
    var carHtml = "";
    this.carElement = $(carHtml);

    this.carElement.css({
        position : "absolute",
        left : this.x,
        top : this.y
    });
    $("body").append(this.carElement);
};

//向右移动,可手动修改参数
Car.prototype.moveRight = function (distance) {
    this.x += distance;
    
    this.carElement.css({
        left : this.x,
        top : this.y
    })
};

//调用Car,可随时新建n辆汽车,且独立
var tesla = new Car(20.20);
tesla.draw();

//setinterval()方法,周期性的调用函数
setInterval(function () {tesla.moveRight(10)},10);

注意:如果用这种方法调用setInterval(tesla.moveRight(10),10)setInterval()会调用windowsmoveRight,而不是teslamoveRight,看到的效果是:只在页面加载时,运行了一次,就没有后文了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107695.html

相关文章

  • 题目】【8】canvas画板

    摘要:和监听用户是否在绘画。再绘画不在绘画。监测用户是在使用橡皮檫,是在使用橡皮擦,停止使用铅笔。使用,会变为使用,后面会增加一个属性值。的作用是获取宽度也就是宽度移动端支持多点触控,所以要获取需要加上,表示第一个值 canvas画板,比较简易,目前还有很多bug1、手机端上下会晃动2、下载按钮微信上没法用3、下载后背景色是透明4、切换成橡皮擦后,需要先点铅笔才能绘画,不能直接点颜色 ...

    Xufc 评论0 收藏0
  • 王者编程大赛之一

    摘要:首发于樊浩柏科学院本次王者编程大赛分为个组别,分别为研发测试移动战场。本章只叙述前道相对简单的题目,后续题目及解题思路将在王者编程大赛系列中列出。 首发于 樊浩柏科学院 本次王者编程大赛分为 3 个组别,分别为研发、测试、移动战场。这里只讨论研发战场所考的 题目,本次大赛共有 7 道题,主要考查点为基础算法,解题所用语言不做限制,但是需要在 在线验证平台 使用标准输入并验证通过,最后...

    justCoding 评论0 收藏0

发表评论

0条评论

Raaabbit

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<