<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
.map{
width: 800px;
height: 600px;
background-color: #CCC;
position: relative;
}
</style>
</head>
<body>
<div class="map"></div>
<script src="common.js"></script>
<script>
//产生随机数对象的
(function (window) {
function Random() {
}
Random.prototype.getRandom=function (min,max) {
return Math.floor(Math.random()*(max-min)+min);
};
//把局部对象暴露给window顶级对象,就成了全局的对象
window.Random=new Random();
})(window);//自调用构造函数的方式,分号一定要加上
//产生小方块对象
(function (window) {
//console.log(Random.getRandom(0,5));
//选择器的方式来获取元素对象
var map=document.querySelector(".map");
//食物的构造函数
function Food(width,height,color) {
this.width=width||20;//默认的小方块的宽
this.height=height||20;//默认的小方块的高
//横坐标,纵坐标
this.x=0;//横坐标随机产生的
this.y=0;//纵坐标随机产生的
this.color=color;//小方块的背景颜色
this.element=document.createElement("div");//小方块的元素
}
//初始化小方块的显示的效果及位置---显示地图上
Food.prototype.init=function (map) {
//设置小方块的样式
var div=this.element;
div.style.position="absolute";//脱离文档流
div.style.width=this.width+"px";
div.style.height=this.height+"px";
div.style.backgroundColor=this.color;
//把小方块加到map地图中
map.appendChild(div);
this.render(map);
};
//产生随机位置
Food.prototype.render=function (map) {
//随机产生横纵坐标
var x=Random.getRandom(0,map.offsetWidth/this.width)*this.width;
var y=Random.getRandom(0,map.offsetHeight/this.height)*this.height;
this.x=x;
this.y=y;
var div=this.element;
div.style.left=this.x+"px";
div.style.top=this.y+"px";
};
//实例化对象
var fd=new Food(20,20,"green");
fd.init(map);
console.log(fd.x+"===="+fd.y);
})(window);
</script>
</body>
</html>
03-JavaScript-高级-第1天.zip
168 浏览量
2023-12-21
10:03:29
上传
评论
收藏 5.15MB ZIP 举报
03-JavaScript-高级-第1天.zip （70个子文件） 
三者之间的关系.png 16KB
02其他资料 01教学资料 media 引用类型的存储方式.png 7KB 课程大纲.png 223KB 普通类型的存储方式.png 7KB Node.js_logo.svg.png 8KB 1497840546666.png 50KB Unofficial_JavaScript_logo_2.svg.png 29KB session.png 20KB 构造函数-实例-原型之间的关系.png 7KB 9F437BB7-6844-4FC2-9C91-2D9648433DCA.png 209KB 1497497605587-8288640195.png 28KB 1498288540967.png 16KB code-00.png 50KB 1496981558575.png 4KB
作用域.jpg 33KB 1498289626813.png 205KB 20160823024542444.jpg 106KB javascript的基本组成.png 12KB 1496916239525.png 1.81MB java-script.jpg 179KB 1497840569051.png 18KB 1498700592589.png 37KB 1498288494687.png 16KB 1497165666684.png 5KB 1498743207418.png 62KB 06-2.png 37KB mxdxkf.png 1008KB js-dom-bom.png 20KB cookie.png 14KB 1496915188338.png 11KB 1497169919418.png 13KB 1498743288621.png 58KB 1498743269100.png 43KB 1497317567484.png 302KB 1497154623955.png 122KB 1497497865969.png 51KB EWWZBag.jpg 223KB 1497497605587.png 28KB 1498743216279.png 62KB 06-1.png 36KB 5f7b98babbb1fbdb7f99354940a1f65.jpg 105KB browser-js.png 19KB 664ba37eeee9f4623c06c066867f1d38_r.jpg 94KB
03-JavaScript高级.md 59KB 04源代码 
02复习.html 2KB 22作业.html 424B 03创建对象的三种方式.html 1KB 16原型中的方法是可以相互访问的.html 1KB common.js 8KB 01课程介绍.html 911B 09原型.html 1KB 15原型的简单的语法.html 1KB 13总结三者之间的关系.html 674B 14利用原型共享数据.html 1KB 11复习原型.html 1KB 08原型添加方法解决数据共享问题.html 637B .idea workspace.xml 34KB modules.xml 274B 04源代码.iml 281B 19把局部变量变成全局变量.html 826B 17实例对象使用属性和方法层层的搜索.html 816B 10体会面向过程和面向对象的编程思想.html 2KB 20把随机数对象暴露给window成为全局对象.html 842B 06构造函数和实例对象之间的关系.html 2KB 12构造函数和实例对象和原型对象之间的关系.html 1KB 21案例随机小方块.html 2KB 05工厂模式创建对象.html 1KB 18为内置对象添加原型方法.html 2KB 07构造函数创建对象带来的问题.html 1KB 04自定义构造函数创建对象做的事情.html 620B资源评论
