标签：arr 20 timeY 项目 clearInterval JS 60 贪吃蛇 timeX
预览
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>七彩贪吃蛇</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #000000;
}
div {
width: 1000px;
height: 500px;
margin: 20px auto;
}
canvas {
border: 1px solid #000;
background-color: #000;
}
#startGame {
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 20px;
color: #0000FF;
background-color: #FFC0CB;
margin: 20px 40%;
}
span {
display: inline-block;
color: red;
}
</style>
<body>
<div>
<canvas id="cvs" width="1000" height="500"></canvas>
<span id="span">0分</span>
<button id="startGame">开始游戏</button>
</div>
</body>
<script type="text/javascript">
let ctx = cvs.getContext('2d')
let x = 60
let y = 20 //初始位置
let f = {}
let arr = [{
x: 20,
y: 20
},
{
x: 40,
y: 20
},
{
x: 60,
y: 20
}
]
//网格
function gridding(x, y, x1, y1) {
ctx.beginPath()
ctx.lineWidth = 0.2
ctx.strokeStyle = '#800080'
ctx.moveTo(x, y)
ctx.lineTo(x1, y1)
ctx.closePath()
ctx.stroke()
}
function maps() {
for(let i = 20; i <= cvs.width; i += 20) {
gridding(i, 0, i, cvs.height)
}
for(let i = 20; i <= cvs.height; i += 20) {
gridding(0, i, cvs.width, i)
}
}
maps()
//填充矩形
function fillRects(x, y) {
ctx.fillStyle = getRandomColor()
ctx.fillRect(x, y, 20, 20);
ctx.stroke();
}
// 蛇身位置
function initial() {
for(let i = 0; i < arr.length; i++) {
fillRects(arr[i].x, arr[i].y)
}
}
initial()
//随机颜色
function getRandomColor() {
return '#' + (function(color) {
return(color += '0123456789abcdef' [Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
})('');
}
function cler(x, y) {
ctx.clearRect(0, 0, cvs.width, cvs.height)
}
// 定时器
let timeX = setInterval(moveX, 100)
let timeY = setInterval(moveY, 100)
let a = 20
clearInterval(timeX)
clearInterval(timeY)
timeX = 0
timeY = 0
//移动
function moveX() {
x += a
fillRects(x, y)
cler()
maps()
fillRects(f.x, f.y)
arr.push({
x: x,
y: y
})
arr = arr.slice(1)
initial()
gameOver()
Decide()
if(x == f.x && y == f.y) {
arr.push({
x: f.x,
y: f.y
})
food()
}
span.innerHTML = arr.length - 3 + '分'
}
function moveY() {
y += a
fillRects(x, y)
cler()
maps()
fillRects(f.x, f.y)
arr.push({
x: x,
y: y
})
arr = arr.slice(1)
initial()
gameOver()
Decide()
// console.log('y==='+y)
if(x == f.x && y == f.y) {
arr.push({
x: f.x,
y: f.y
})
food()
}
}
// 开始游戏
startGame.onclick = function() {
console.log(timeX, timeY)
if(this.innerHTML == '开始游戏') {
this.innerHTML = '暂停游戏'
timeX = setInterval(moveX, 100)
console.log(timeX)
// 键盘事件
a = 20
document.addEventListener('keydown', function(e) {
let event = e || window.event
let ke = event.keyCode
// 右
if(timeX == false) {
if(ke == 39) {
clearInterval(timeY)
timeY = 0
clearInterval(timeX)
timeX = 0
a = 20
timeX = setInterval(moveX, 100)
}
// 左
else if(ke == 37) {
clearInterval(timeY)
timeY = 0
clearInterval(timeX)
timeX = 0
a = -20
timeX = setInterval(moveX, 100)
}
} else if(timeY == false) {
// 上
if(ke == 38) {
clearInterval(timeX)
timeX = 0
a = -20
timeY = setInterval(moveY, 100)
}
// 下
if(ke == 40) {
// console.log(timeY)
clearInterval(timeY)
timeY = 0
clearInterval(timeX)
timeX = 0
a = 20
timeY = setInterval(moveY, 100)
}
}
//
})
} else {
this.innerHTML = '开始游戏'
clearInterval(timeX)
clearInterval(timeY)
timeX = 0
timeY = 0
}
console.log(timeX, timeY)
}
//游戏结束
function gameOver() {
if(x > 1000 - 20) {
clearInterval(timeX)
clearInterval(timeY)
timeY = 0
timeX = 0
alert('呀呀哎呀啊')
cler()
maps()
arr = [{
x: 20,
y: 20
},
{
x: 40,
y: 20
},
{
x: 60,
y: 20
}
]
x = 60
y = 20
initial()
startGame.innerHTML = '开始游戏'
}
if(x < 0) {
clearInterval(timeX)
clearInterval(timeY)
timeY = 0
timeX = 0
alert('呀呀哎呀啊')
cler()
maps()
arr = [{
x: 20,
y: 20
},
{
x: 40,
y: 20
},
{
x: 60,
y: 20
}
]
x = 60
y = 20
initial()
startGame.innerHTML = '开始游戏'
}
if(y > 500 - 20) {
clearInterval(timeX)
clearInterval(timeY)
timeY = 0
timeX = 0
alert('呀呀哎呀啊')
cler()
maps()
x = 60
y = 20
arr = [{
x: 20,
y: 20
},
{
x: 40,
y: 20
},
{
x: 60,
y: 20
}
]
initial()
startGame.innerHTML = '开始游戏'
}
if(y < 0) {
clearInterval(timeX)
clearInterval(timeY)
timeY = 0
timeX = 0
alert('呀呀哎呀啊')
cler()
maps()
x = 60
y = 20
arr = [{
x: 20,
y: 20
},
{
x: 40,
y: 20
},
{
x: 60,
y: 20
}
]
initial()
startGame.innerHTML = '开始游戏'
}
}
// 食物
function food() {
let a = (Math.floor(Math.random() * 49 + 1)) * 20
let b = (Math.floor(Math.random() * 24 + 1)) * 20
return f = {
x: a,
y: b
}
}
food()
fillRects(f.x, f.y)
//判断是否撞到自己了
function Decide() {
for(let i = 0; i < arr.length - 1; i++) {
if(arr[i].x == arr[arr.length - 1].x && arr[i].y == arr[arr.length - 1].y) {
clearInterval(timeX)
clearInterval(timeY)
timeY = 0
timeX = 0
alert('撞到自己了！')
cler()
maps()
x = 60
y = 20
arr = [{
x: 20,
y: 20
},
{
x: 40,
y: 20
},
{
x: 60,
y: 20
}
]
initial()
startGame.innerHTML = '开始游戏'
}
}
}
</script>
</html>
标签：arr,20,timeY,项目,clearInterval,JS,60,贪吃蛇,timeX 来源： https://www.cnblogs.com/zhuhukang/p/15838821.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。