原生javascript制作贪吃蛇小游戏的方法分析

2023-07-31 15:05:06 216

本文实例讲述了原生javascript制作贪吃蛇小游戏的方法。分享给大家供大家参考，具体如下：

HTML部分










游戏玩法：上下左右控制小蛇的方向。
撞到边缘游戏结束。
长按方向键即可加速。

js开始

function$(id){
returndocument.getElementById(id);
}
window.onload=function(){
//创建背景
js_background();
//随机食物
js_food();
//创建贪吃蛇
create_snake();
document.onkeydown=function(event){
letevt=event||window.event;
switch(evt.keyCode){
case37:direction="left";break;
case38:direction="up";break;
case39:direction="right";break;
case40:direction="down";break;
default:;
//console.log(evt.keyCode);
}
start_snake()
}
}

//贪吃蛇方向//创建背景

//贪吃蛇方向//创建背景
vardirection="right";
//创建背景
functionjs_background(){
letbg=document.createElement("div");
bg.id="js_bg";
bg.style.cssText="position:relative;margin:50pxauto;background:skyblue;width:800px;height:600px;";
document.body.appendChild(bg);
}

//随机食物

varfood_left=0;
varfood_top=0;
functionjs_food(){
food_left=parseInt(Math.random()*800/20)*20;
food_top=parseInt(Math.random()*600/20)*20;
letfoodDiv=document.createElement("div");
foodDiv.style.cssText="position:absolute;width:20px;height:20px;border-radius:50%;background:yellow;";
foodDiv.style.left=food_left+"px";
foodDiv.style.top=food_top+"px";
foodDiv.id="foodDiv";
$("js_bg").appendChild(foodDiv);
}

//创建贪吃蛇

functioncreate_snake(){
letlis=document.getElementsByTagName("li");
lis[0].style.backgroundColor="black";
lis[0].style.zIndex=1;
for(leti=0;i
//定时器


//定时器
lettimre=setInterval(start_snake,200);
letlis=document.getElementsByTagName("li");
functionstart_snake(){
letleft=parseFloat(lis[0].style.left);
lettop=parseFloat(lis[0].style.top);
//console.log(top)
switch(direction){
case"left":left=(left-20);break;
case"up":top=(top-20);break;
case"right":left=(left+20);break;
case"down":top=(top+20);break;
default:;
}
if(left<0||left>800-20||top<0||top>600-20){
window.clearInterval(timre);
alert("亲，您GameOver");
return;
}
//for(leti=1;i<=lis.length-1;i++){
//lis[i].style.left=lis[i-1].style.left;
//lis[i].style.top=lis[i-1].style.top;
//}
for(vari=lis.length-1;i>0;i--){
lis[i].style.left=lis[i-1].style.left;
lis[i].style.top=lis[i-1].style.top;
}
//改变第一节
lis[0].style.left=left+"px";
lis[0].style.top=top+"px";
//console.log(food_top+"----------");
//console.log(top);
if(left==food_left&&top==food_top){
eat();
}
}
functioneat(){
$("js_bg").removeChild($("foodDiv"));
js_food();
//alert("ll");
letli=document.createElement("li");
$("js_bg").appendChild(li);
//create_snake();
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript时间与日期操作技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

原生javascript制作贪吃蛇小游戏的方法分析

热门推荐

随机推荐