Pc贪吃蛇
<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>手机扫一扫
移动阅读更方便
你可能感兴趣的文章