Html实现贪吃蛇

最新推荐文章于 2024-05-15 03:57:42 发布

不做大多数

最新推荐文章于 2024-05-15 03:57:42 发布

阅读量2k

点赞数 4

分类专栏：个人学习文章标签：游戏 html jquery dom

本文链接：https://blog.csdn.net/qq_44023710/article/details/113174296

版权

个人学习专栏收录该内容

28 篇文章 2 订阅

订阅专栏

HTML实现贪吃蛇

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Snake</title>
</head>
<body style="text-align:center;margin:100px;background-color:#aaaaaa">
<canvas id="canv" width="400" height="400" style="background-color:gray">
</canvas>
<script>
//声明变量
var box=document.getElementById('canv').getContext('2d');
var snake;
var direction;//1向右，-1向左，20向下，-20向上
var n;//下次移动相关
var food;
var istrue;
//绘制地图
function draw(point,color){
box.fillStyle=color;
box.fillRect(point%20*20+1,~~(point/20)*20+1,18,18);
}

(function() {ready() ; } () );

function ready(){
for(var i=0;i<400;i++){
draw(i,"#313131");}
snake=[66,65,64];
direction=1;
food=344;
istrue=true;
draw(food,"yellow");
draw(66,"#00b7ee");
draw(65,"#00b7ee");
draw(64,"#00b7ee");
}

//核心算法
function run(){
istrue=true;
document.getElementById("butn").setAttribute("disabled",true);
snake.unshift(n=snake[0]+direction);
if(snake.indexOf(n,1)>0||n<0||n>399||(direction==-1&&n%20==19)||(direction==1&&n%20==0)){
ready();
document.getElementById("butn").removeAttribute("disabled");
return alert("游戏结束");}
draw(n,"#00b7ee");
if(n==food)
{
while(snake.indexOf(food=~~(Math.random()*400))>0){continue;};
draw(food,"yellow");
}
else{
draw(snake.pop(),"#313131");
}
setTimeout(arguments.callee,200);//每过200ms执行一次事件
}

//添加键盘事件
document.onkeydown=function(e){
if(istrue){
if(direction==1||direction==-1){
if(e.keyCode==38)
{direction=-20;istrue=false;}
if(e.keyCode==40)
{direction=20;istrue=false;}}
if(direction==20||direction==-20){
if(e.keyCode==39)
{direction=1;istrue=false;}
if(e.keyCode==37)
{direction=-1;istrue=false;}
}}}

</script>
<div>
<button id="butn" type="button" onclick="run()">开始游戏</button>
</div>
</body>
</html>

在这里插入图片描述
这个是我之前在GitHub上看到的，学习借鉴使用

不做大多数

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Html实现贪吃蛇

HTML实现贪吃蛇<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>Snake</title></head><body style="text-align:center;margin:100px;background-color:#aaaaaa"
复制链接

扫一扫