预览
源码
<!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>