贪吃蛇网页小游戏，有排名
资源内容介绍
贪吃蛇网页小游戏，有排名 <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title></title></head><body><canvas id="snakegame" width="400px" height="400px" style="border:black solid 2px;"></canvas><h2>分数</h2><h2 id="sc">0</h2><button id="rank" onclick="rankPage()">排行榜</button><audio src="eatFruit.mp3" id="eatFruit"></audio><audio src="gameOver.mp3" id="gameOver"></audio><script>var myCanvas = document.getElementById("snakegame");var context = myCanvas.getContext("2d");//为键盘按下事件设置事件监听，并指定事件处理函数keyPush()document.addEventListener("keydown",keyPush);//全局变量//控制setIntervalvar t;//游戏分数记录var score;//果实位置var xFruit;var yFruit;//蛇var trail;var xHead;var yHead;var snakeLen;//蛇在xy两个方向的移动速度var vx;var vy;//方向键键盘码var left = 37;var up = 38;var right = 39;var down = 40;//键盘事件的事件处理函数，通过方向键实现方向的转变function keyPush(e){switch(e.keyCode){case left:if(vx != 1 && vy != 0){vx=-1;vy=0;}break;case up:if(vx != 0 && vy != 1){vx=0;vy=-1;}break;case right:if (vx != -1 && vy != 0){vx=1;vy=0;}break;case down:if (vx != 0 && vy != -1){vx=0;vy=1;}break;}}//填充单个网格(x,y)function paintCell(x,y){context.fillRect((x-1)*20+1,(y-1)*20+1,18,18);}//以红色绘制果实function paintFruit(){context.fillStyle = "red";paintCell(xFruit,yFruit);}//随机设定果实位置function randomFruit(){xFruit = Math.floor((Math.random()*1000))%20 + 1;yFruit = Math.floor((Math.random()*1000))%20 + 1;paintFruit();}//以绿色绘制贪吃蛇function paintSnake(){context.fillStyle = "lime";for (var i=0; i<trail.length;i++){paintCell(trail[i].x, trail[i].y);}}//初始化蛇function initSnake(){//初始化游戏分数score = 0;trail = [];xHead = 10;yHead = 10;vx = 1;vy = 0;snakeLen = 3;for (var i=0;i<snakeLen;i++){trail.push({x:xHead+i-2,y:yHead});}randomFruit();//初始化时，添加果实paintSnake();}//清空画布function refreshCanvas(){context.clearRect(0,0,myCanvas.width,myCanvas.height);}//移动蛇function moveSnake(){//蛇下一时刻的头部坐标xHead = (vx+xHead+19)%20+1;yHead = (vy+yHead+19)%20+1;//在蛇移动之后检查是否吃到自己selfEat();//将新的头部坐标添加入trailtrail.push({x:xHead,y:yHead});//将尾部的坐标移除数组while (trail.length > snakeLen){trail.shift();}//判断是否吃到果实eatFruit();//清空画布refreshCanvas();//重新绘制蛇paintSnake();//重新绘制果实paintFruit();}//判断贪吃蛇是否吃了果实function eatFruit(){if (xHead == xFruit && yHead == yFruit){fruitEatingSound();score += 100;var s = document.getElementById("sc");s.innerText = score;randomFruit();snakeGrow();}}//蛇在吃果实之后变长function snakeGrow(){snakeLen++;xHead = (vx+xHead+19)%20+1;yHead = (vy+yHead+19)%20+1;trail.push({x:xHead,y:yHead});}//蛇在吃到自己之后游戏结束function selfEat(){for (var i=0;i<trail.length;i++){if (xHead == trail[i].x && yHead == trail[i].y){gameOverSound();endGame();}}}function bubbleSort(arr){var swapped = true;var j=0;var tmp;while (swapped){swapped = false;j++;for (var i=0;i < arr.length-j;i++){if (arr[i]>arr[i+1]){tmp = arr[i];arr[i] = arr[i+1];arr[i+1] = tmp;swapped = true; }}}}function endGame(){clearInterval(t);setTimeout(function(){alert("Good Game");var scores = localStorage.getItem("scores");if (scores){var rank = JSON.parse(scores);if (rank.length == 10){if (score < Number(rank[9].score)){location.reload();}else{sessionStorage["score"] = score;document.getElementById("rank").click();}}else{sessionStorage["score"] = score;document.getElementById("rank").click();}}else{sessionStorage["score"] = score;document.getElementById("rank").click();}},200);}function fruitEatingSound(){ var fruitSound = document.getElementById("eatFruit");fruitSound.currentTime = 0;fruitSound.play();}function gameOverSound(){var endGameSound = document.getElementById("gameOver");endGameSound.currentTime = 0;endGameSound.play();}function rankPage(){if (sessionStorage["score"]){location.href = "record.html";}else{var c = confirm("查看排行榜将放弃本次游戏");if (c == true){location.href = "record.html";}}}//初始化蛇之后，每隔100毫秒调用moveSnake进行蛇的移动initSnake();t = setInterval(moveSnake,200);</script></body></html>