<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>贪吃块</title> <script crossorigin="anonymous" integrity="sha384-mlceH9HlqLp7GMKHrj5Ara1+LvdTZVMx4S1U43/NxCvAkzIo8WJ0FE7duLel3wVo" src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script> </head> <style> body{ background: #ECAD9E; width: 100%; height: 100%; } #title{ position: absolute; width: 98%; height: 17%; line-height:100%; font-size:150%; top: calc(0); left: calc(1%); text-align:center; background: #BEEDC7; border: 3px solid #19CAAD; border-radius: 5px; } #ppp{ width: 40px; height: 40px; background: red; position: absolute; left: 100px; top: 100px; } #stage{ position: absolute; width: 98%; height: 66%; top: calc(17%); left: calc(1%); background: #BEE7E9; border: 3px solid #F4606C; border-radius: 5px; } #food{ position: absolute; width: 10px; height: 10px; top:calc(50%); left: calc(50%); background: green; visibility: visible; } </style> <script type="text/javascript"> var setInter; var times = 100; var grade = 0; var isContinue = true; var speed = 0;//控制小方块速度 $(function() { var stage = $("#stage"); var food =$("#food"); var snake = $("#ppp"); $(document).keyup(function(event) {//键盘监听 //var real = String.fromCharCode(event.keyCode); clearInterval(setInter); var t = event.keyCode; var p = $("#ppp"); var ptxt = p.val(); p.val(ptxt + t); speed = 150-grade*5; if(50>=speed){//速度最快是50毫秒 speed = 50; } setInter = setInterval(function(){move(t);},speed); }); function move(t){//移动 var go = "<span style='color:green;'>go</span>"; var ready = "<span style='color:red;'>ready</span>"; switch (t){ case 37: $("#content").html(go); moveLeft(); break; case 38: $("#content").html(go); moveTop(); break; case 39: $("#content").html(go); moveRight(); break; case 40: $("#content").html(go); moveBottom(); break; default: $("#content").html(ready); break; } showFood(); eatFood(); } function eatFood(){//判断是否吃到食物 var ft = parseInt(food.css("top"))+10; var fl = parseInt(food.css("left"))+10; var fb = parseInt(food.css("top")); var fr = parseInt(food.css("left")); var st = parseInt(snake.css("top")); var sl = parseInt(snake.css("left")); var sb = parseInt(snake.css("top"))+parseInt(snake.css("height")); var sr = parseInt(snake.css("left"))+parseInt(snake.css("width")); if(ft>st&&fl>sl&&fb<sb&&fr<sr){ food.css("visibility","hidden"); var co = food.css("background-color"); snake.css({"width":parseInt(snake.css("width"))+10+"px","height":parseInt(snake.css("width"))+10+"px","background-color":co}); grade++; return; } } function showFood(){//生成食物 isSucceed(); if(!isContinue){ return true; } if(food.css("visibility")=="visible")return; var r = Math.random()*255; var g = Math.random()*255; var b = Math.random()*255; var s ="rgb("+r+","+g+","+b+")"; food.css({"top":Math.random()*490,"left":Math.random()*690,"background":s}); var ft = parseInt(food.css("top"))+10; var fl = parseInt(food.css("left"))+10; var fb = parseInt(food.css("top")); var fr = parseInt(food.css("left")); var st = parseInt(snake.css("top")); var sl = parseInt(snake.css("left")); var sb = parseInt(snake.css("top"))+parseInt(snake.css("height")); var sr = parseInt(snake.css("left"))+parseInt(snake.css("width")); if(ft>st&&fl>sl&&fb<sb&&fr<sr){ showFood(); return; } food.css("visibility","visible"); } function moveLeft(){//左移 var snake = $("#ppp"); var odlLeft = snake.css("left"); gameOver(0,parseInt(odlLeft)); snake.css("left",parseInt(odlLeft)-10+"px"); } function moveTop(){//上移 var snake = $("#ppp"); var odTop = snake.css("top"); gameOver(0,parseInt(odTop)); snake.css("top",parseInt(odTop)-10+"px"); } function moveRight(){//右移 var snake = $("#ppp"); var odlLeft = snake.css("left"); var max = stage.width()-snake.width(); gameOver(parseInt(odlLeft),max); snake.css("left",parseInt(odlLeft)+10+"px"); } function moveBottom(){//下移 var snake = $("#ppp"); var odBottom = snake.css("top"); var bottomMax = stage.outerHeight()-snake.height(); gameOver(parseInt(odBottom),bottomMax); snake.css("top",parseInt(odBottom)+10+"px"); } function gameOver(pos,max){//游戏结束 if(!isContinue){ return true; } if(pos >= max){ alert("游戏结束！！你的得分"+grade); window.location.reload(); } } function isSucceed(){ if(!isContinue){ return true; } if(49<grade){ isContinue = false; alert("恭喜你,通关了!你的得分"+grade); window.location.reload(); } } }); </script> <body> <div id="title"> <h5 style="color:orangered;">消遣娱乐</h5> <h4 id="content">ready</h4> </div> <div id="stage"> <div id="ppp"></div> <div id="food"></div> </div> </body> </html>