<!DOCTYPE html><html><head>? ? <meta charset="UTF-8">? ? <title>Document</title>? ? <style>? ? ? ? #canvas{? ? ? ? ? ? box-shadow: 0 5px 40px black;? ? ? ? }? ? </style></head><body>? ? <canvas id="canvas" width="800" height="500"></canvas></body><script>? ? var canvas = document.getElementById('canvas');? ? var context = canvas.getContext('2d');? ? //構(gòu)造對象方塊? ? function Rect (x,y,w,h,color) {? ? ? ? this.x = x;? ? ? ? this.y = y;? ? ? ? this.w = w;? ? ? ? this.h = h;? ? ? ? this.color = color;? ? }? ? //畫方塊的方法? ? Rect.prototype.draw = function () {? ? ? ? context.beginPath();? ? ? ? context.fillStyle = this.color;? ? ? ? context.rect(this.x,this.y,this.w,this.h);? ? ? ? context.fill();? ? ? ? context.stroke();? ? }? ? //構(gòu)造對象蛇? ? function Snake () {? ? ? ? //定義一個空數(shù)組存放組成整蛇的方塊對象? ? ? ? var snakeArray = [];? ? ? ? //畫出4個方塊，設(shè)置成灰色? ? ? ? for (var i = 0; i < 4; i++) {? ? ? ? ? ? var rect = new Rect(i*20,0,20,20,"gray");? ? ? ? ? ? //之所以用splice（往前加）而不是用push（往后加），是為了讓蛇頭出現(xiàn)在數(shù)組第一個位置? ? ? ? ? ? snakeArray.splice(0,0,rect); ? ??? ? ? ? }? ? ? ? //把數(shù)組第一個作為蛇頭，蛇頭設(shè)成紅色? ? ? ? var head = snakeArray[0];? ? ? ? head.color = "red";? ? ? ? //此處將兩個后面常用的東西定為屬性，方便后面調(diào)用? ? ? ? this.head = snakeArray[0]; ?//蛇頭? ? ? ? this.snakeArray = snakeArray; ?//整蛇數(shù)組? ? ? ? //給定初始位置向右(同keyCode右箭頭)? ? ? ? this.direction = 39;? ? }? ? //畫蛇的方法? ? Snake.prototype.draw = function () {? ? ? ? for (var i = 0; i < this.snakeArray.length; i++) {? ? ? ? ? ? this.snakeArray[i].draw();? ? ? ? }?? ? }? ? //蛇移動的方法? ? Snake.prototype.move = function () {? ? ? ? //此處是核心部分，蛇的 移動方式? ? ? ? //1、畫一個灰色的方塊，位置與蛇頭重疊? ? ? ? //2、將這個方塊插到數(shù)組中蛇頭后面一個的位置? ? ? ? //3、砍去末尾的方塊? ? ? ? //4、將蛇頭向設(shè)定方向移動一格? ? ? ? var rect = new Rect(this.head.x,this.head.y,this.head.w,this.head.h,"gray");? ? ? ? this.snakeArray.splice(1,0,rect);? ? ? ? //判斷是否吃到食物，isEat判定函數(shù)寫在最后了? ? ? ? //吃到則食物重新給位置，不砍去最后一節(jié)，即蛇變長? ? ? ? //沒吃到則末尾砍掉一節(jié)，即蛇長度不變? ? ? ? if (isEat()){? ? ? ? ? ? food = new getRandomFood();? ? ? ? }else{? ? ? ? ? ? this.snakeArray.pop();? ? ? ? }? ? ? ? //設(shè)置蛇頭的運動方向，37 左，38 上，39 右，40 下? ? ? ? switch (this.direction) {? ? ? ? ? ? case 37:? ? ? ? ? ? ? ? this.head.x -= this.head.w? ? ? ? ? ? ? ? break;? ? ? ? ? ? case 38:? ? ? ? ? ? ? ? this.head.y -= this.head.h? ? ? ? ? ? ? ? break;? ? ? ? ? ? case 39:? ? ? ? ? ? ? ? this.head.x += this.head.w? ? ? ? ? ? ? ? break;? ? ? ? ? ? case 40:? ? ? ? ? ? ? ? this.head.y += this.head.h? ? ? ? ? ? ? ? break;? ? ? ? ? ? default: ? ?? ? ? ? ? ? ? ? break;? ? ? ? }? ? ? ? // gameover判定? ? ? ? // 撞墻? ? ? ? if (this.head.x > canvas.width || this.head.x < 0 || this.head.y > canvas.height || this.head.y < 0){? ? ? ? ? ? clearInterval(timer);? ? ? ? }? ? ? ? // 撞自己，循環(huán)從1開始，避開蛇頭與蛇頭比較的情況? ? ? ? for (var i = 1; i < this.snakeArray.length; i++) {? ? ? ? ? ? if (this.snakeArray[i].x == this.head.x && this.snakeArray[i].y == this.head.y){? ? ? ? ? ? ? ? clearInterval(timer);? ? ? ? ? ? }? ? ? ? }? ? }? ? //畫出初始的蛇? ? var snake = new Snake()? ? snake.draw();? ? //畫出初始的食物? ? var food = new getRandomFood()? ? //定時器? ? var timer = setInterval(function () {? ? ? ? context.clearRect(0,0,canvas.width,canvas.height);? ? ? ? food.draw();? ? ? ? snake.move();? ? ? ? snake.draw();? ? }, 100)? ? //鍵盤事件，其中的if判定是為了讓蛇不能直接掉頭? ? document.onkeydown = function (e) {? ? ? ? var ev = e||window.event; ? ? ? //window.event存在則為IE瀏覽器，否則不是，傳e這個參數(shù)? ? ? ? switch(ev.keyCode){? ? ? ? ? ? case 37:{? ? ? ? ? ? ? ? if (snake.direction !== 39){? ? ? ? ? ? ? ? ? ? snake.direction = 37;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? break;? ? ? ? ? ? }? ? ? ? ? ? case 38:{? ? ? ? ? ? ? ? if (snake.direction !== 40){? ? ? ? ? ? ? ? ? ? snake.direction = 38;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? break;? ? ? ? ? ? }? ? ? ? ? ? case 39:{? ? ? ? ? ? ? ? if (snake.direction !== 37){? ? ? ? ? ? ? ? ? ? snake.direction = 39;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? break;? ? ? ? ? ? }? ? ? ? ? ? case 40:{? ? ? ? ? ? ? ? if (snake.direction !== 38){? ? ? ? ? ? ? ? ? ? snake.direction = 40;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? break;? ? ? ? ? ? } ? ?? ? ? ? }? ? ? ? ev.preventDefault();? ? }? ? //隨機函數(shù)，獲得[min,max]范圍的值? ? function getNumberInRange (min,max) {? ? ? ? var range = max-min;?? ? ? ? var r = Math.random();? ? ? ? return Math.round(r*range+min)? ? }? ? //構(gòu)建食物對象? ? function getRandomFood () {? ? ? ? //判定食物是否出現(xiàn)在蛇身上，如果是重合，則重新生成一遍? ? ? ? var isOnSnake = true;? ? ? ? //設(shè)置食物出現(xiàn)的隨機位置? ? ? ? while(isOnSnake){ ? ? ? ? ? ??? ? ? ? ? ? //執(zhí)行后先將判定條件設(shè)置為false，如果判定不重合，則不會再執(zhí)行下列語句? ? ? ? ? ? isOnSnake = false;? ? ? ? ? ? var indexX = getNumberInRange(0,canvas.width/20-1);? ? ? ? ? ? var indexY = getNumberInRange(0,canvas.height/20-1);? ? ? ? ? ? var rect = new Rect(indexX*20, indexY*20, 20, 20, "green");? ? ? ? ? ? for (var i = 0; i < snake.snakeArray.length; i++) {? ? ? ? ? ? ? ? if(snake.snakeArray[i].x == rect.x && snake.snakeArray[i].y == rect.y){? ? ? ? ? ? ? ? ? ? //如果判定重合，將其設(shè)置為true，使隨機數(shù)重給? ? ? ? ? ? ? ? ? ? isOnSnake = true;? ? ? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? }? ? ? ? //返回rect，使得實例化對象food有draw的方法? ? ? ? return rect;? ? }? ? //判定吃到食物，即蛇頭坐標(biāo)與食物坐標(biāo)重合? ? function isEat () {? ? ? ? if (snake.head.x == food.x && snake.head.y == food.y){? ? ? ? ? ? return true;? ? ? ? } else {? ? ? ? ? ? return false;? ? ? ? }? ? }</script></html>//就設(shè)置食物出現(xiàn)的隨機位置那里，那一片的數(shù)字，20，我看不懂是什么意思，有人能告訴一下么
能幫忙看下這個貪吃蛇的代碼么？別人的，我看不懂
慕工程6005648
2017-03-24 14:57:43
