用js实现小球的自由移动代码

2024-04-22 08:56:25

正在学习javascript 的朋友可以把它当作小练习动手做一做。加强自己的动手编码能力。

参考代码：

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>ggggg</title>
<link rel="stylesheet" type="text/css" href="">
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<script type="text/javascript">

//定义全局变量
    //小球坐标
    ballX=0;
    ballY=0;
    //小球在x,y轴移动的方向
    directX=1;
    directY=1;
    //小球移动
    function ballMove(){
        //小球移动
        ballX+=2*directX;
        ballY+=2*directY;
        //同时修改小球的top 和width
        div2.style.top=ballY+'px';
        div2.style.left=ballX+'px';
        //window.alert(div1.offsetWidth);//offsetwidth在JS中是获取元素的宽,对应的还有offsetHeight
        //判断转向
        //learInterval(i);
        if(ballX+div2.offsetWidth>=div1.offsetWidth ||ballX<=0){
            directX=-directX;
        }
        if(ballY+div2.offsetHeight>=div1.offsetHeight || ballY<=0){
            directY=-directY;
        }
    }
    //定时器
    var i=setInterval("ballMove()",10);
</script>
</head>
<body>
    <div id="div1" style="width:400px;height:300px;border:1px solid silver;POSITION: absolute; TOP: 100px">
        <div id="div2" style="position:absolute;left:0px;top:0px;"><img src="ball.png"></div>
    </div>
</body>
</html>

图:

用JS实现3D球状标签云示例代码

Matter: 1.发现实例不足,无法悬停(有待解决) 2.无法系统随机自动上色(有待解决) 首先使用标签云的一家高知名度的网站---照片共享网站Flickr.标签云的设计者是交互设计师Stewart Butterfield.之后,标签云被诸如del.Technorati等网站采纳. 首次公布的外观标签云(或至少是一个加权名单),可归结起来主要是"潜意识档案" ,在 Douglas Coupland的Microserfs( 1995 ) .在Lester Leaps Out,威尔士诗人
Android重力传感器实现滚动的弹球

熟知: 什么是传感器: 所谓传感器能够探测如光.热.温度.重力.方向等等的功能! Android中提供传感器有哪些: 1. 加速度传感器(重力传感器) 2. 陀螺仪传感器 3. 光传感器 5. 恒定磁场传感器 6. 方向传感器 7. 恒定的压力传感器 8. 接近传感器 9. 温度传感器一. 问题描述 Android中有多达11种传感器,不同的手机设备支持的传感器类型也不尽相同 1. 重力传感器 GV-sen
Java基于swing实现的弹球游戏代码

本文实例讲述了Java基于swing实现的弹球游戏代码.分享给大家供大家参考. 主要功能代码如下: 复制代码代码如下: package Game; import java.awt.Graphics; import java.awt.Insets; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.util.ArrayList; import java.util.Random;
非html5实现js版弹球游戏示例代码

开始前的html页面开始后的html游戏界面 html页面布局,即index.html文件源码如下: 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" co
解析Java中的定时器及使用定时器制作弹弹球游戏的示例

在我们编程过程中如果需要执行一些简单的定时任务,无须做复杂的控制,我们可以考虑使用JDK中的Timer定时任务来实现.下面LZ就其原理.实例以及Timer缺陷三个方面来解析java Timer定时器. 一.简介在java中一个完整定时任务需要由Timer.TimerTask两个类来配合完成. API中是这样定义他们的,Timer:一种工具,线程用其安排以后在后台线程中执行的任务.可安排任务执行一次,或者定期重复执行.由TimerTask:Timer 安排为一次执行或重复执行的任务.
Java实力弹弹球实现代码

先看看效果图: 直接上代码了. 微调按钮加画布画几个圆,再实现监听... package cn.hncu.threadDemo.thread2; import java.awt.Canvas; import java.awt.Color; import java.awt.Graphics; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.FocusEven
使用基于jquery的gamequery插件做JS乒乓球游戏

我建议大家先学会些基础的JS,再学jquery,这样会更好接受些新的东西.今天我们要试着做个js经典游戏,打乒乓球的游戏,这款游戏大概是我做得最多次的了,我有用过xna.flash.js都做过同一款.先上张截图,不然大伙还不知道是什么东西. 它的演示地址是:http://www.lovewebgames.com/demo/gamepingbang/ 采用的技术是jquery+gamequery, jquery大家都知道是什么了,本文重点介绍下gamequery,gamequery是一款jquer
python开发的小球完全弹性碰撞游戏代码

完成这个小球的完全弹性碰撞游戏灵感来自于: 下面是我花了一周下班时间所编写的一个小球完全弹性碰撞游戏: 游戏初始化状态: 最下面的游标和修改小球的移动速度源码部分: 复制代码代码如下: #python tkinter#python version 3.3.2 from tkinter import * ''' 判断两个小球 { 圆心:A(x1,y1) 半径:r X轴速度:Vax Y轴速度:Vay 圆心:B(x2,y2) 半径:R X轴
java算法实现预测双色球中奖号码

双色球选号规则红球是1~33选6个,蓝球1~16选1个. 它有17721088种排列组合, 这个代码实现了如何将一组双色球号码转换成第n个排列组合数字, 以及如何根据第n个排列组合数字生成一组双色球号码. 分析一下今年的中奖号码所隐含的排列组合序号,也许你会找到规律, 哈哈,或许你能用它算出下一次的中奖号码,赶快试试吧! DoubleColorBall.java import java.util.Arrays; public class DoubleColorBall { /** * 根据双色
java实现会反弹的小球示例

Java实现简单的球的弹射,碰到墙壁就反弹一下,代码如下复制代码代码如下: package tsct; import java.awt.Color;import java.awt.Graphics;import java.awt.Image;import java.awt.event.WindowStateListener;import java.io.File;import java.io.IOException; import javax.imageio.ImageIO;import

用js实现小球的自由移动代码

相关推荐

随机推荐