用js实现了贪吃蛇，希望对大家的学习有益你也可以查看我其他开源项目https://github.com/lizhilicctv
下面是代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.box {
background: #fff;
width: 600px;
height: 600px;
margin: 0 auto;
position: relative;
}
.box2 {
position: absolute;
width: 50px;
height: 50px;
background: #999;
}
.boxs {
position: absolute;
width: 10px;
height: 10px;
background: #f00;
}
</style>
</head>
<body style="background: #ccc;">
<h1 style="text-align: center;margin: 35px;">简易版贪吃蛇</h1>
<div class="box">
<div class="box2"></div>
<div class="boxs"></div>
</div>
</body>
</html>
<script>
var spder = 100,
fenshu = 0;
$(function() {
var top = parseInt(Math.random() * 500),
left = parseInt(Math.random() * 500);
$(".box2").css("top", top).css("left", left);
$(document).keydown(function(event) {
clearInterval(window.rightl);
clearInterval(window.topl);
clearInterval(window.leftl);
clearInterval(window.bottoml);
if (event.which == 40) {
bottomShow()
} else if (event.which == 39) {
rightShow()
} else if (event.which == 38) {
topShow()
} else if (event.which == 37) {
leftShow()
}
});
})
function smallbox() {
var top = parseInt(Math.random() * 500),
left = parseInt(Math.random() * 500);
if (parseInt($(".box2").css("left")) > left && parseInt($(".box2").css("left")) + 50 < left) {
smallbox()
return
}
if (parseInt($(".box2").css("top")) > top && parseInt($(".box2").css("top")) + 50 < top) {
smallbox()
return
}
$(".boxs").css("top", top).css("left", left).show();
}
smallbox()
function bottomShow() {
window.bottoml = setInterval(function() {
eat()
if (parseInt($(".box2").css("top")) <= 0 || parseInt($(".box2").css("top")) >= 550 || parseInt($(".box2").css(
"left")) <= 0 || parseInt($(".box2").css("left")) >= 550) {
return
}
$(".box2").css("top", parseInt($(".box2").css("top")) + 10)
}, spder);
}
function rightShow() {
window.rightl = setInterval(function() {
eat()
if (parseInt($(".box2").css("top")) <= 0 || parseInt($(".box2").css("top")) >= 550 || parseInt($(".box2").css(
"left")) <= 0 || parseInt($(".box2").css("left")) >= 550) {
over()
return
}
$(".box2").css("left", parseInt($(".box2").css("left")) + 10)
}, spder);
}
function topShow() {
window.topl = setInterval(function() {
eat()
if (parseInt($(".box2").css("top")) <= 0 || parseInt($(".box2").css("top")) >= 500 || parseInt($(".box2").css(
"left")) <= 0 || parseInt($(".box2").css("left")) >= 500) {
over()
return
}
$(".box2").css("top", parseInt($(".box2").css("top")) - 10)
}, spder);
}
function leftShow() {
window.leftl = setInterval(function() {
eat()
if (parseInt($(".box2").css("top")) <= 0 || parseInt($(".box2").css("top")) >= 500 || parseInt($(".box2").css(
"left")) <= 0 || parseInt($(".box2").css("left")) >= 500) {
over()
return
}
$(".box2").css("left", parseInt($(".box2").css("left")) - 10)
}, spder);
}
function over() {
clearInterval(window.rightl);
clearInterval(window.topl);
clearInterval(window.leftl);
clearInterval(window.bottoml);
if (fenshu < 1000) {
alert('大侠的技术不行啊，分数为：' + fenshu)
} else if (fenshu >= 1000 && fenshu < 2000) {
alert('大侠咱们切磋一下吧，分数为：' + fenshu)
} else {
alert('大侠请收下我的膝盖，分数为：' + fenshu)
}
location.reload();
return
}
function eat() {
if (parseInt($(".box2").css("top")) + 50 >= parseInt($(".boxs").css("top")) &&
parseInt($(".box2").css("top")) - 10 <= parseInt($(".boxs").css("top")) &&
parseInt($(".box2").css("left")) + 50 >= parseInt($(".boxs").css("left")) &&
parseInt($(".box2").css("left")) - 10 <= parseInt($(".boxs").css("left"))) {
spder -= 1
fenshu += 5 * (100 - spder)
$(".box2").css('background', 'rgb(' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ',' +
parseInt(Math.random() * 255) + ')');
if (!$(".boxs").is(":hidden")) {
setTimeout(smallbox, 500);
$(".boxs").hide()
}
}
}
</script>
| 
开发技术
发布于：2021-12-04 14:28
|
阅读数：422
|
评论：0
QQ好友和群
QQ空间
