Hank_c_java - 云代码空间
——
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>贪吃蛇</title>
<style>
canvas {
border: 1px #333 solid;
background-color: rgb(122, 157, 253);
display: block;
margin: 0 auto ;
}
#w, #s, #a, #d{
width: 200px;
height: 20px;
background-color: #399;
}
#w:hover, #s:hover, #a:hover, #d:hover{
background-color: blue;
}
</style>
</head>
<body>
<!-- 1.定义一个画板 -->
<canvas id="huabu" width="600px" height="600px"></canvas>
<input type="button" value="上" id="w" />
<input type="button" value="下" id="s" />
<input type="button" value="左" id="a" />
<input type="button" value="右" id="d" />
<script>
var w = document.getElementById('w')
var s = document.getElementById('s')
var a = document.getElementById('a')
var d = document.getElementById('d')
var huabu = document.getElementById('huabu');
var tools = huabu.getContext('2d');
var isAte = false;
var isGameOver = false;
var snake = [{x: 3, y: 2}, {x: 2, y: 2},{x: 1, y: 2}];
var dirctionX = 1;
var dirctionY = 0;
var sorce = 0;
//监听按键
document.addEventListener('keydown',function(event){
//console.log("您按下了" + event.keyCode + "键");
//上：38； 下：40； 左：37； 右39； w：87 a：65； s:83; d：68；
if(event.keyCode === 38){
dirctionX = 0;
dirctionY = -1;
}else if(event.keyCode === 40){
dirctionX = 0;
dirctionY = 1;
}else if(event.keyCode === 37){
dirctionX = -1;
dirctionY = 0;
}else if(event.keyCode === 39){
dirctionX = 1;
dirctionY = 0;
}
})
/*
tools.moveTo(0,30.5);
tools.lineTo(600,30.5);;
tools.moveTo(0,60.5);
tools.lineTo(600,60.5);
*/
var x = (Math.floor(Math.random() * 20)) * 10;
var y = (Math.floor(Math.random() * 20)) * 10;//随机食物
w.onclick = function(){
dirctionX = 0;
dirctionY = -1;
}
s.onclick = function(){
dirctionX = 0;
dirctionY = 1;
}
a.onclick = function(){
dirctionX = -1;
dirctionY = 0;
}
d.onclick = function(){
dirctionX = 1;
dirctionY = 0;
}
setInterval(function(){
if(isGameOver){
tools.font="100px Arial";
tools.strokeText("GAME OVER!", 0, 300);
return;
}
var oldHead = snake[0];//旧的
var newHead = {//新的
x: oldHead.x + dirctionX,
y: oldHead.y + dirctionY
}
if(newHead.x < 0 || newHead.y < 0 || newHead.x >= 60 || newHead.y >= 60){
isGameOver = true;
}else{
snake.unshift(newHead);
if(snake[0].x * 10 === x && snake[0].y * 10 === y){
//重新绘制食物
isAte = true;
//给🐍增加一节：🐍吃掉食物，就不执行pop()，就相当于增加了一节
}else{
isAte = false;
snake.pop();
}
}
tools.clearRect(0, 0, 600, 600);
//🐍吃食物
//------------------------------绘制食物 开始------------------------------——
tools.fillStyle = '#cccc00';
//tools.fillRect(x,y,width,height):绘制矩形
tools.fillRect(x, y ,10, 10);
if(isAte == true){
x = (Math.floor(Math.random() * 20)) * 10;
y = (Math.floor(Math.random() * 20)) * 10;
sorce++;
}
//------------------------------绘制食物 结束------------------------------——
//-------------------------------------------------------------------------
//------------------------------绘制🐍 开始------------------------------——
/*
tools.fillStyle = "rgb(24, 143, 87)"
tools.fillRect(snake[0].x * 30, snake[0].y * 30, 30, 30);
tools.fillStyle = '#340';
tools.fillRect(snake[1].x * 30, snake[1].y * 30, 30, 30);
tools.fillRect(snake[2].x * 30, snake[2].y * 30, 30, 30);
*/
for(var i = 0; i < snake.length; i++){
if(i === 0){
tools.fillStyle = "rgb(24, 143, 87)"
}else{
tools.fillStyle = '#340';
}
tools.fillRect(snake[i].x * 10, snake[i].y * 10, 10, 10);
}
//------------------------------绘制🐍 结束------------------------------——
//-------------------------------------------------------------------------
//------------------------------绘制网格 开始------------------------------——
/*for(var i = 0; i < 60; i++){
tools.moveTo(0, 10*i+0.5);
tools.lineTo(600, 10*i+0.5);
}
for(var i = 0; i < 60; i++){
tools.moveTo(10*i+0.5, 0);
tools.lineTo(10*i+0.5, 600);
}*/
tools.strokeWidth = 5;
tools.strokeStyle = 'white';
// 描边
tools.stroke();
tools.font="20px Arial";
tools.strokeText("当前分数：" + sorce, 10, 50);
//------------------------------绘制网格 结束------------------------------——
}, 1000 / 3);
</script>
</body>
</html>