Js实现小车的跑

最新推荐文章于 2021-06-16 18:35:48 发布
最新推荐文章于 2021-06-16 18:35:48 发布
阅读量2.1k 收藏 2
点赞数 1
分类专栏： 学习总结，Js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011060906/article/details/76651249
版权
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            position: absolute;
            left:0;
            top:0;
        }
    </style>
    <script>
        var mleft=0;
        var mtop=0;
        var div1;
        var car;
        onload=function(){
            car=document.getElementsByTagName("img")[0];
            car.style.left=mleft+"px";
            car.style.top=mtop+"px";
        };
        window.addEventListener("keydown",function(e){
            switch (e.keyCode){
                case 37:
                    if(mleft>0)mleft-=5;
                    car.style.left=mleft+"px";
                    car.style.transform="rotateY(-180deg)";
                    break;
                case 38:
                    if(mtop>0)mtop-=5;
                    console.log(mtop);
                    car.style.top=mtop+"px";
                    car.style.transform="rotateZ(-90deg)";
                    break;
                case 39:
                    if(mleft<(document.body.clientWidth-205))mleft+=5;
                    car.style.left=mleft+"px";
                    car.style.transform="rotateZ(0deg)";
                    break;
                case 40:
                    mtop+=5;
                    car.style.top=mtop+"px";
                    car.style.transform="rotateZ(90deg)";
                    break;
            }
        },true);
    </script>
</head>
<body>
<div class="div1"></div>
<img src="img/c.gif" alt="" width="200px"/>
</body>
</html>
ah_ty
关注
专栏目录
js键盘事件-让小车走动
HaiRong_21的博客
09-11 217
图片不知道怎么贴在网上，就。。。需要的话自己网上找一个小车子的图片，更改一下img的src地址吧哈哈。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
js百度地图小车html,Web js实现百度地图实时轨迹画线 小车车行驶轨迹 | 彬菌
weixin_39639505的博客
06-23 1609
版权声明：转载原创文章请以超链接形式请注明原文章出处，尊重作者，尊重原创！恰饭广告注意：1.百度地图ak换成自己在百度地图官网申请2.建议使用firefox浏览器，google被墙无法调用gps3.发布到服务器必须使用https，对于localhost和本地测试不用4.电脑开启位置服务，手机打开gps定位5.百度地图坐标和gps坐标不一致，要在百度地图正确显示位置必须把gps坐标转为百度坐标con...
javascript 3种百度地图车辆平滑移动，轨迹回放，多车同时平滑移动
12-26
javascript 3种百度地图车辆平滑移动，轨迹回放，多车同时平滑移动
car.js
weixin_33929309的博客
05-19 153
为什么80%的码农都做不了架构师？>>> ...
js 案例小车
方丈山的博客
11-21 326
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .animtion:hover{ animation-name: car; ...
JS制作小车上下左右移动
H&B Blog
07-22 1667
假设一个在html页面元素，你可以通过按键盘上下左右键来控制它的位置并且能改变它的方向，下面我们用’小车’来实现。 方法一 这个方法需要用四张不同的小车图片，当我们按下键盘上下左右键后通过if判断键值来改变小车的移动方向并且更换对应的图片，最终达到小车开动的效果。 图片： 详细代码: <!DOCTYPE html> <html lang="en"> <head...
WebGIS 让小车沿着指定路径行走
10-16
在这里，小车的运动需要通过编程来实现，可能使用JavaScript库如Three.js或者Cesium.js，这些库提供了丰富的API用于创建3D对象、管理场景和动画控制。路径规划可能依赖于GIS的数据处理，如解析GPS轨迹数据，然后通过...
html制作小车,HTML5 实现小车动画效果(Canvas/CSS3/JQuery) 付完整源码
weixin_42128270的博客
06-16 1363
【实例简介】分三种方式实现：(1)canvas元素结合JS(2)纯粹的CSS3动画(暂不被所有主流浏览器支持，比如IE)(3)CSS3结合Jquery实现知道如何使用CSS3动画比知道如何使用元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，比如CSS)，而我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。目前，浏...
ros3d地图与小车模型显示
04-03
利用ros3djs实现 turtlebot3 在web 端3d显示但不包含键盘控制也不包含后端只是前端代码。上传的代码我已经验证过了，严格按照步骤一步一步做，先把 自己 turtlebot3 仿真搭起来跑通。技术支持需要另外收费； 注意...
javascript插件制作汽车手动触屏旋转
10-31
javascript插件制作汽车手动触屏旋转 javascript插件制作汽车手动触屏旋转
jquery实现简单的人物跑动
03-14
jquery实现简单的人物跑动，公初学者看看
学习javaScript代码之开动的小汽车
weixin_42902525的博客
03-18 383
学习javaScript代码之开动的小汽车 这两天通过学习自己写了一小段代码，望指教！ &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device
HTML语言中的car是什么意思,在JavaScript实现简单的汽车移动动画
weixin_39913105的博客
06-02 483
Javascript是一种非常通用的语言，从编程机器人到制作交互式网站Javscript几乎遍布各地，但最有趣的使用是制作动画，是的，您可以使用Javascript制作有吸引力的动画。在本教程中，我们将学习如何使用Javascript制作移动汽车动画，但首先我们将向您介绍setInterval()，该方法用于在指定的时间间隔内一次又一次地调用特定函数setInterval()是一个javscrip...
HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
蓝叶菱的专栏
02-11 3418
HTML5正在变得越来越流行。在这个移动设备日益增长的时代，对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近，Adobe宣布Flash将不再支持移动设备。这意味着，Adobe自身也认为对移动设备来讲HTML5是一项重要的技术。而桌面系统的改变也是迟早的事。 HTML的一大劣势就是对于多媒体技术支持的缺乏。在HTML中，你无法直接显示一个视频或在屏幕上绘画。在HTML
jquery实战（1）
奔跑的小车车博客专栏
01-22 305
1.行为和动作的分离，注意和JavaScript源生的区别 //行为和结构相分离被称为“不唐突的JavaScript”，而jquery的发明者哪里让该库能帮助作者易于在页面中实现这种分离。 //你会问但是没有onclick特性的话，该如何设置按钮的特性呢？ Click Me /* 简单多了，但现在你却发现，按钮什么也干不了。 不是把按钮的行为嵌入到按钮的标记里，而是将它转移到页面节的脚本
Js实现div跟着鼠标的移动
热门推荐
ahty的专栏
08-03 1万+
html> html lang="en"> head> meta charset="UTF-8"> title>title> style> img{ position: absolute; left: 0; top: 0; } sty
H5 canvas制作画图
ahty的专栏
08-12 5947
1 概述    随着前端技术的发展，canvas使用的越累越多，而且越来越多的H5技术被应用到实际开发中，尤其是js插件更是无处不用，今天主要是分享一下如何去使用canvas在H5界面中制一个超级简单的画图工具。 2 效果图如下： 3 主要功能 支持选择画笔的颜色 支持选择画笔的线条粗细
DOM补充
ahty的专栏
08-02 4351
 一、节点的创建，插入与克隆 1. createElement("p")   创建一个节点（会自动补齐标签） 2. appendChild(p)       在元素末尾插入节点p 3. insertBefore(btn,p)  在元素内的p元素之前插入btn元素 4. cloneNode            克隆节点 如： var div=docu
51单片机实现的小车避障系统设计
"基于51单片机的小车避障电路实现" 51单片机是一种广泛应用的微控制器，常用于各种嵌入式系统的设计，包括小型自动化设备和电子玩具等。在这个项目中，51单片机被用来实现一个模型小车的自动避障功能。这种功能对于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ah_ty

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值