<!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的這個(gè)div? ? var map = document.querySelector(".map");? ? //食物對(duì)象? ? (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;? ? ? };? ? ? //食物方法 初識(shí)化 在地圖? ? ? 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;? ? }());? ? //小蛇 自調(diào)用? ? (function() {? ? ? var elements=[];? ? ? function Snake(width, height, direction) {? ? ? ? // 方塊（每個(gè)）寬高? ? ? ? this.width = width;? ? ? ? this.height = height;? ? ? ? // 身體數(shù)組? ? ? ? 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();? ? ? ? ? //每個(gè)div進(jìn)行循環(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);? ? ? ? ? ? //設(shè)置樣式? ? ? ? ? ? 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);? ? ? ? ? }? ? ? ? }? ? ? }? ? ? //小蛇移動(dòng)? ? ? Snake.prototype.move = function(food, map) {? ? ? ? //針對(duì)身體? ? ? ? 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;? ? ? ? }? ? ? ? //對(duì)于頭部? ? ? ? // 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:"請(qǐng)使用方向鍵進(jìn)行移動(dòng)"? ? ? ? }? ? ? }? ? ? 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;? ? }());? ? //測(cè)試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>
js局部變量變?yōu)槿譄o法獲取 num
慕九州8427191
2018-10-24 14:46:05
