html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title > 贪吃蛇 </title>
- <style type="text/CSS">
- *{
- margin: 0;
- padding: 0;
- }
- h1{
- text-align: center;
- }
- #score{
- text-align: center;
- font-size: 50px;
- }
- #snakeMap{
- margin: 0 auto;
- border: 5px solid red;
- }
- .row{
- height: 20px;
- }
- .col{
- height: 20px;
- width: 20px;
- border: 1px solid black;
- float: left;
- box-sizing: border-box;
- }
- .moveSnake{
- background-color: greenyellow;
- }
- .food{
- background-color: orange;
- }
- </style>
- </head>
- <body>
- <h1 > 贪吃蛇 </h1>
- <div id="score">0</div>
- <div id="snakeMap">
- </div>
- </body>
- <script type="text/javascript">
- var snakeMap = document.getElementById("snakeMap");
- var score = document.getElementById("score");
- var rowNumber = 20;
- var colNumber = 14;
- snakeMap.style.width = 20 * colNumber + "px";
- snakeMap.style.height = 20 * rowNumber + "px";
- var divsSnake = [];
- for (var i = 0; i <rowNumber; i++) {
- var rowDiv = document.createElement("div");
- rowDiv.className = "row";
- snakeMap.appendChild(rowDiv);
- var rowArray = [];
- for (var j = 0; j < colNumber; j++) {
- var colDiv = document.createElement("div");
- colDiv.className = "col";
- rowDiv.appendChild(colDiv);
- rowArray.push(colDiv);
- }
- divsSnake.push(rowArray);
- }
- var snakeBodys = [];
- for (var i = 0; i < 3; i++) {
- snakeBodys[i] = divsSnake[0][i];
- divsSnake[0][i].className = "moveSnake col";
- }
- var directionSnake = "right";
- var changeDirection = true;
- var timeOut;
- // 添加键盘按键事件, 通过键盘上的上下左右控制蛇的移动方向
- document.onkeydown = function (e) {
- clearTimeout(timeOut);
- if (!changeDirection) {
- return;
- }
- var event1 = window.event || e;
- if (directionSnake == "right" && event1.keyCode == 37) {// 左按键: 37; 右移动
- return;
- }else if (directionSnake == "left" && event1.keyCode == 39) {// 右按键: 39; 左移动
- return;
- }else if (directionSnake == "top" && event1.keyCode == 40) {// 下按键: 40; 上移动
- return;
- }else if (directionSnake == "bottom" && event1.keyCode == 38) {// 上按键: 38; 下移动
- return;
- }
- switch (event1.keyCode){
- case 37:{
- directionSnake = "left";
- break;
- }
- case 38:{
- directionSnake = "top";
- break;
- }
- case 39:{
- directionSnake = "right";
- break;
- }
- case 40:{
- directionSnake = "bottom";
- break;
- }
- }
- console.log(directionSnake);
- changeDirection = false;
- timeOut = setTimeout(function () {
- changeDirection = true;
- },300);
- }
- var x = 2;
- var y = 0;
- var foodX = 0;
- var foodY = 0;
- var scores = 0;
- var timerMove = setInterval(function () {
- clearTimeout(timeOut);
- changeDirection = true;
- switch (directionSnake){
- case "right":{
- // 向右移动
- x++;
- break;
- }
- case "left":{
- // 向左移动
- x--;
- break;
- }
- case "top":{
- // 向上移动
- y--;
- break;
- }
- case "bottom":{
- // 向下移动
- y++;
- break;
- }
- }
- if (x < 0 || y < 0 || x>= colNumber || y>= rowNumber) {
- clearTimeout(timerMove);
- alert("gameover");
- return;
- }
- for (var i = 0; i <snakeBodys.length; i++) {
- if (snakeBodys[i] == divsSnake[y][x]) {
- clearTimeout(timerMove);
- alert("gameover 蛇咬到身体了");
- return;
- }
- }
- if (foodX == x && foodY == y) {
- divsSnake[y][x].className = "moveSnake col";
- snakeBodys.push(divsSnake[y][x]);
- scores++;
- score.innerHTML = scores;
- ranFoods ();
- }else{
- snakeBodys[0].className = "col";
- snakeBodys.shift();
- divsSnake[y][x].className = "col moveSnake";
- snakeBodys.push(divsSnake[y][x]);
- }
- },500);
- function randomFun (m,n) {
- return Math.floor(Math.random() * (n - m + 1) + m);
- }
- function ranFoods () {
- foodY = randomFun(0,rowNumber - 1);
- foodX = randomFun(0,colNumber - 1);
- if (divsSnake[foodY][foodX].className == "moveSnake col") {
- ranFoods ();
- } else{
- divsSnake[foodY][foodX].className = "food col";
- }
- }
- ranFoods ();
- </script>
- </html>
来源: http://www.qdfuns.com/article/33609/0fa0fae1d1ffbf03f65c47089536c8b4.html