關于局部變量變?yōu)槿?num無法被獲取
<!DOCTYPE html>
<html dir="ltr">
<head>
? <meta charset="utf-8">
? <title>貪吃蛇</title>
? <style media="screen">
? ? .map {
? ? ? width: 800px;
? ? ? height: 600px;
? ? ? background-color: #ccc;
? ? ? position: relative;
? ? ? margin: auto;
? ? }
? </style>
</head>
<body>
? <div class="map"></div>
? <script type="text/javascript">
? ? //map的這個div
? ? var map = document.querySelector(".map");
? ? //食物對象
? ? (function() {
? ? ? var elements = [];
? ? ? // var num=11;
? ? ? //? window.num = num;
? ? ? function Food(width, height, color, x, y) {
? ? ? ? this.width = width;
? ? ? ? this.height = height;
? ? ? ? this.color = color;
? ? ? ? this.x = x;
? ? ? ? this.y = y;
? ? ? ? console.log(this.width);
? ? ? ? console.log(window);
? ? ? ? var num=11;
? ? ? ? window.num = num;
? ? ? };
? ? ? //食物方法 初識化 在地圖
? ? ? Food.prototype.init = function(map) {
? ? ? ? remove();
? ? ? ? //把div創(chuàng)建
? ? ? ? var div = document.createElement("div");
? ? ? ? //方地圖
? ? ? ? map.appendChild(div);
? ? ? ? //初始化div
? ? ? ? div.style.position = "absolute";
? ? ? ? div.style.width = this.width + "px";
? ? ? ? div.style.height = this.height + "px";
? ? ? ? div.style.backgroundColor = this.color;
? ? ? ? this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width;
? ? ? ? this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height;
? ? ? ? div.style.left = this.x + "px";
? ? ? ? div.style.top = this.y + "px";
? ? ? ? elements.push(div);
? ? ? ? // console.log(elements);
? ? ? };
? ? ? function remove() {
? ? ? ? for (var i = 0; i < elements.length; i++) {
? ? ? ? ? var ele = elements[i];
? ? ? ? ? ele.parentNode.removeChild(ele);
? ? ? ? ? elements.splice(i, 1);
? ? ? ? }
? ? ? }
? ? ? window.Food = Food;
? ? }());
? ? //小蛇 自調用
? ? (function() {
? ? ? var elements=[];
? ? ? function Snake(width, height, direction) {
? ? ? ? // 方塊（每個）寬高
? ? ? ? this.width = width;
? ? ? ? this.height = height;
? ? ? ? // 身體數組
? ? ? ? this.body = [{
? ? ? ? ? ? x: 3,
? ? ? ? ? ? y: 2,
? ? ? ? ? ? color: "red"
? ? ? ? ? }, //頭
? ? ? ? ? {
? ? ? ? ? ? x: 2,
? ? ? ? ? ? y: 2,
? ? ? ? ? ? color: "orange"
? ? ? ? ? }, //身體
? ? ? ? ? {
? ? ? ? ? ? x: 1,
? ? ? ? ? ? y: 2,
? ? ? ? ? ? color: "orange"
? ? ? ? ? } //身體
? ? ? ? ];
? ? ? ? //方向
? ? ? ? this.direction = direction||"right";
? ? ? ? //初始化小蛇
? ? ? ? Snake.prototype.init = function(map) {
? ? ? ? ? //刪除上一次小蛇
? ? ? ? ? remove();
? ? ? ? ? //每個div進行循環(huán)（）
? ? ? ? ? for (var i = 0; i < this.body.length; i++) {
? ? ? ? ? ? var obj = this.body[i];
? ? ? ? ? ? //創(chuàng)建
? ? ? ? ? ? var div = document.createElement('div');
? ? ? ? ? ? //放到地圖上
? ? ? ? ? ? map.appendChild(div);
? ? ? ? ? ? //設置樣式
? ? ? ? ? ? div.style.width = this.width + "px";
? ? ? ? ? ? div.style.height = this.height + "px";
? ? ? ? ? ? div.style.position = "absolute";
? ? ? ? ? ? div.style.left = obj.x * this.width + "px";
? ? ? ? ? ? div.style.top = obj.y * this.height + "px";
? ? ? ? ? ? //背景顏色
? ? ? ? ? ? div.style.backgroundColor = obj.color;
? ? ? ? ? ? elements.push(div);
? ? ? ? ? ? ? ? console.log(num);
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? ? //小蛇移動
? ? ? Snake.prototype.move = function(food, map) {
? ? ? ? //針對身體
? ? ? ? for (var i = this.body.length - 1; i > 0; i--) {
? ? ? ? ? this.body[i].x = this.body[i - 1].x;
? ? ? ? ? this.body[i].y = this.body[i - 1].y;
? ? ? ? }
? ? ? ? //對于頭部
? ? ? ? // console.log(this.direction);
? ? ? ? switch (this.direction) {
? ? ? ? ? case "right":
? ? ? ? ? this.body[0].x += 1
? ? ? ? ? break;
? ? ? ? ? case "left":
? ? ? ? ? ? this.body[0].x -= 1
? ? ? ? ? ? break;
? ? ? ? ? case "top":
? ? ? ? ? ? this.body[0].y += 1
? ? ? ? ? ? break;
? ? ? ? ? case "bottom":
? ? ? ? ? ? this.body[0].y -= 1
? ? ? ? ? ? break;
? ? ? ? ? // default:"請使用方向鍵進行移動"
? ? ? ? }
? ? ? }
? ? ? function remove() {
? ? ? ? for (var i = elements.length - 1; i >=0 ; i--) {
? ? ? ? ? var ele=elements[i];
? ? ? ? ? // console.log(Snake);
? ? ? ? ? // console.dif(Snake);
? ? ? ? ? ele.parentNode.removeChild(ele);
? ? ? ? ? elements.splice(i,1);
? ? ? ? }
? ? ? }
? ? ? window.Snake = Snake;
? ? }());
? ? //測試
function a() {
? ? ? console.log(window.num);
? ? ? console.log(Food);
? ? ? alert("sds")
};
a();
? ? console.log(window);
? ? // console.log(num);
? ? // console.log(devicePixelRatio);
? ? // console.log(Food.length);
? ? var fd = new Food(20, 20, "green");
? ? fd.init(map);
? ? var sna = new Snake(20, 20);
? ? sna.init(map);
? ? sna.move(map);
? ? sna.init(map);
? //? ?sna.move(map);
? //? ?sna.init(map);
? //? ?sna.move(map);
? //? ?sna.init(map);
? ?</script>
</body>
</html>
