碰撞练习
2017-07-23 16:06
239 查看
一:碰撞练习的css部分:
<style>
* {
padding: 0;
margin: 0;
}
#wrap {
width: 400px;
height: 200px;
/*margin: 0 auto;
margin-top: 100px;*/
border: 1px solid red;
position: relative;
}
#bird {
width: 20px;
height: 20px;
position: absolute;
background-color: red;
}
</style>
二:碰撞练习的Html部分
<body>
<div id="wrap">
<div id="bird"></div>
</div>
</body>
三:碰撞练习的js部分
<script type="text/javascript">
var wrap = document.getElementById("wrap");
var bird = document.getElementById("bird");
var arrA = [];
function randomNum(m, n) {
return Math.floor(Math.random() * (n - m) + m);
}
function randomtree(m) {
for (var i = 0; i < m; i++) {
var div1 = document.createElement("div");
div1.style.width = "50px";
div1.style.height = randomNum(50, 80) + "px";
div1.style.backgroundColor = "greenyellow";
div1.style.position = "absolute";
div1.style.left = "80px";
if(i%2==0){
div1.style.top = "0px";
}else{
div1.style.bottom = "0px";
}
wrap.appendChild(div1);
arrA.push(div1);
}
console.log(arrA);
}
randomtree(2);
bird.onmousedown = function(e) {
document.onmousemove = function() {
var event1 = event || e;
bird.style.left = event1.clientX - 10 + "px";
bird.style.top = event1.clientY - 10 + "px";
//判断是否碰到上面的柱子
if (bird.offsetLeft > (arrA[0].offsetLeft +arrA[0].offsetWidth) || bird.offsetLeft+bird.offsetWidth < arrA[0].offsetLeft)
{
console.log("正常");
arrA[0].style.backgroundColor = "greenyellow";
} else if (bird.offsetTop > (arrA[0].offsetTop + arrA[0].offsetHeight))
{
console.log("正常");
arrA[0].style.backgroundColor = "greenyellow";
} else {
arrA[0].style.backgroundColor = "red";
}
//判断是否碰到下面的柱子
if (bird.offsetLeft > (arrA[1].offsetLeft + arrA[1].offsetWidth) || bird.offsetLeft+bird.offsetWidth < arrA[1].offsetLeft)
{
console.log("正常");
arrA[1].style.backgroundColor = "greenyellow";
} else if (bird.offsetTop+bird.offsetHeight<arrA[1].offsetTop)
{
console.log("正常");
arrA[1].style.backgroundColor = "greenyellow";
} else {
arrA[1].style.backgroundColor = "red";
}
}
}
bird.onmouseup = function(e) {
document.onmousemove = "";
arrA[0].style.backgroundColor = "greenyellow";
}
</script>
</html>
<style>
* {
padding: 0;
margin: 0;
}
#wrap {
width: 400px;
height: 200px;
/*margin: 0 auto;
margin-top: 100px;*/
border: 1px solid red;
position: relative;
}
#bird {
width: 20px;
height: 20px;
position: absolute;
background-color: red;
}
</style>
二:碰撞练习的Html部分
<body>
<div id="wrap">
<div id="bird"></div>
</div>
</body>
三:碰撞练习的js部分
<script type="text/javascript">
var wrap = document.getElementById("wrap");
var bird = document.getElementById("bird");
var arrA = [];
function randomNum(m, n) {
return Math.floor(Math.random() * (n - m) + m);
}
function randomtree(m) {
for (var i = 0; i < m; i++) {
var div1 = document.createElement("div");
div1.style.width = "50px";
div1.style.height = randomNum(50, 80) + "px";
div1.style.backgroundColor = "greenyellow";
div1.style.position = "absolute";
div1.style.left = "80px";
if(i%2==0){
div1.style.top = "0px";
}else{
div1.style.bottom = "0px";
}
wrap.appendChild(div1);
arrA.push(div1);
}
console.log(arrA);
}
randomtree(2);
bird.onmousedown = function(e) {
document.onmousemove = function() {
var event1 = event || e;
bird.style.left = event1.clientX - 10 + "px";
bird.style.top = event1.clientY - 10 + "px";
//判断是否碰到上面的柱子
if (bird.offsetLeft > (arrA[0].offsetLeft +arrA[0].offsetWidth) || bird.offsetLeft+bird.offsetWidth < arrA[0].offsetLeft)
{
console.log("正常");
arrA[0].style.backgroundColor = "greenyellow";
} else if (bird.offsetTop > (arrA[0].offsetTop + arrA[0].offsetHeight))
{
console.log("正常");
arrA[0].style.backgroundColor = "greenyellow";
} else {
arrA[0].style.backgroundColor = "red";
}
//判断是否碰到下面的柱子
if (bird.offsetLeft > (arrA[1].offsetLeft + arrA[1].offsetWidth) || bird.offsetLeft+bird.offsetWidth < arrA[1].offsetLeft)
{
console.log("正常");
arrA[1].style.backgroundColor = "greenyellow";
} else if (bird.offsetTop+bird.offsetHeight<arrA[1].offsetTop)
{
console.log("正常");
arrA[1].style.backgroundColor = "greenyellow";
} else {
arrA[1].style.backgroundColor = "red";
}
}
}
bird.onmouseup = function(e) {
document.onmousemove = "";
arrA[0].style.backgroundColor = "greenyellow";
}
</script>
</html>
相关文章推荐
- android练习:碰撞的小球
- 键盘事件/透明度及碰撞检测的实例练习
- LeetCode 分类练习(3)—— 指针碰撞
- 郭克华手机编程教学视频----我的练习源码(32)Sprite 2:碰撞检测和动画
- 编程苦手GW——OpenGL学习练习,相互碰撞的彩色小球
- 树-堆结构练习——合并果子之哈夫曼树 优先队列
- Android课程---课下练习(表格、线性和相对布局)
- ENBM 练习配置
- 编程练习3
- 机器学习练习之正则化
- 【读书笔记《Android游戏编程之从零开始》】18.游戏开发基础(碰撞检测)
- 关于for循环的几个小练习,例如奇数偶数,阶乘,求和等
- jdk8 lambda 练习
- Java练习-001
- python学习第六章字典部分课后练习自己尝试的代码
- 算法练习
- C语言第十篇:循环语句练习
- Oracle练习
- 第十六天 练习2
- IDOC练习(一、发送端配置)