原生js前端开发的小游戏_贪吃蛇

前端开发百度百科|前端开发本地环境搭建|前端部署 开发环境 生产环境

html 代码

<!DOCTYPE html>
<head lang=”en”>
<metacharset=”UTF-8″>
<title>前端开发ppt模板:贪吃蛇</title>
<style>
.box{
position:relative;
height:510px;
width:510px;
margin:0auto;
border:2pxsolid#f55056;
background-color:#FCFBB5;
}
.zhu{
height:10px;
width:10px;
position:absolute;
background-color:springgreen;
border-radius:40%;
left:100px;
top:100px;
}
.dan{
height:10px;
width:10px;
position:absolute;
background-color:blueviolet;
border-radius:40%;
}
.over{
height:310px;
width:510px;
background-color:#fff;
position:absolute;
top:0;
left:0;
padding-top:200px;
text-align:center;
font:50030px/50px”微软雅黑”;
display:none;
}
.shuoming{
width:510px;
margin:0auto;
}
</style>
</head>
<body>
<divclass=”box”>
<divid=”cho”>
<divclass=”zhu”></div>
<divclass=”zhu” style=left:90px;></div>
<divclass=”zhu” style=left:80px;></div>
</div>
<divclass=”dan”></div>
<divclass=”over”>
game over
<br/> F5刷新
</div>
</div>
<divclass=”shuoming”>
WASD控制方向,碰到自己游戏结束
</div>
<script>
//box大盒子
varbox=document.getElementsByClassName(‘box’)[0];
//cho放蛇的盒子
varcho=document.getElementById(‘cho’);
//dan蛋
vardan=document.getElementsByClassName(‘dan’)[0];
//x,y记录蛇头坐标
varx=100;
vary=100;
//xx,yy记录蛋坐标
varxx=0;
varyy=0;
//cont记录进行方向
varcont=4;
//t计时器
vart=null;
//立一个flag,如果游戏结束,就变为false
varflag=true;
//suiji函数,生成一个位置随机的蛋
functionsuiji(){
xx=parseInt(Math.random() *50) *10;
yy=parseInt(Math.random() *50) *10;
//得到蛇身体每个点的元素,for循环遍历,如果蛋的位置和蛇身体的点重叠,则调用自己重新生成一个蛋
varsh=document.getElementsByClassName(‘zhu’);
for (vari=1;i<sh.length;i++) {
if (xx===parseInt(sh[i].style.left) &&yy===parseInt(sh[i].style.top)) {
suiji();
return;
}
}
dan.style.top =yy+’px’;
dan.style.left =xx+’px’;
}
//调用suiji函数,一开始就生成一个蛋
suiji();
//contro函数,控制蛇行进,每次移动10像素
functioncontro(){
//先获取蛇身体每个点,遍历循环,如果蛇头坐标和身体重合,调用over函数,游戏结束
varsh=document.getElementsByClassName(‘zhu’);
for (vari=1;i<sh.length;i++) {
if (i>4&&x===parseInt(sh[i].style.left) &&y===parseInt(sh[i].style.top)) {
over();
}
}
//蛇身移动:
// 按照进行方向在原来蛇头坐标上移动10像素,得到新的蛇头坐标
if (cont===0) {
if (y>0) {
y-=10;
}else{
y=500;
}
}elseif (cont===1) {
if (x<500) {
x+=10;
}else{
x=0;
}
}elseif (cont===2) {
if (y<500) {
y+=10;
}else{
y=0;
}
}else{
if (x>0) {
x-=10;
}else{
x=500;
}
}
//获取到蛇身最后一个点,把他揪下来放到蛇头那个点的前面,坐标为刚才所出来的新坐标,倒数第二个点就成了最后一个了
varzhu=cho.lastElementChild;
zhu.style.top =y+’px’;
zhu.style.left =x+’px’;
varwei=cho.firstElementChild;
cho.insertBefore(zhu,wei);
//判断移动后的蛇头坐标是否和蛋的坐标重合,如果重合,调用long函数让蛇变长,再调用suiji函数让蛋的位置重新随机
if (x===xx&&y===yy) {
long();
suiji();
}
}
//获取键盘按下事件,根据键值更改记录行进方向的cont值
document.onkeydown = function (e) {
vare=e|| window.event;
if (flag&& (e.keyCode==87||e.keyCode==68||e.keyCode==83||e.keyCode==65)) {
if ((e.keyCode==87) &&cont!==2) {
cont=0;
}
if ((e.keyCode==68) &&cont!==3) {
cont=1;
}
if ((e.keyCode==83) &&cont!==0) {
cont=2;
}
if ((e.keyCode==65) &&cont!==1) {
cont=3;
}
//用计时函数每隔一定时间调用contro函数让蛇移动10像素,先清除上一次按键触发的计时
clearInterval(t);
contro();
t=setInterval(function(){
contro();
},130);// 100控制蛇的速度,越大,蛇越慢
}
}
//long函数,让蛇变长,把蛇身最后一个点克隆一下,放在盒子最后,位置和最后一个点重合,暂时看不到
//下次移动的时候,会把克隆出来的点挪到最前面
functionlong(){
varzhi=cho.lastElementChild;
varzhizhi=zhi.cloneNode(true);
cho.appendChild(zhizhi);
contro();
}
//over函数,游戏结束,停止计时器,让结束提示的盒子显示出来
functionover(){
flag=false;
clearInterval(t);
setTimeout(function(){
vargover=document.getElementsByClassName(‘over’)[0];
gover.style.display =’block’;
},500)
}
</script>
</body>
</html>
js前端模块化开发教程|移动web前端js开发框架|js前端开发入门
» 本文来自:前端开发者 » 《原生js前端开发的小游戏_贪吃蛇》
» 本文链接地址:https://www.rokub.com/3732.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!