HTML+JS实现贪吃蛇游戏-CSDN博客

本文链接：https://blog.csdn.net/yzp3055506633/article/details/78116963

实现思想：我觉得最难的地方怎么去移动吧，我是将蛇尾添加在蛇头这样来移动蛇的，不过我使用div写的，如果很大的话效率就不高了，最好的方法是用表格吧，在用二维数组来存蛇…..这样效率很高，你们可以试一试……对了这个还有一个小bug 就是向前移的时候不能想后这样就会判断到你撞到自己了。。。。所以仅供娱乐参考。。。

效果：用html+js 实现贪吃蛇
这里写图片描述

这里写图片描述

html的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="play.js"></script>
    <style>
        #background{
            width: 1200px;
            height:600px;
            background-color: pink;
            margin: auto;
            margin-top: 50px;
            position: relative;
        }
        #s1{
            width: 40px;
            height: 40px;
            background-color: seagreen;
            position: absolute;
            top:40px;
            left: 40px;
        }
        #s2{
            width: 40px;
            height: 40px;
            background-color: seagreen;
            position: absolute;
            top:40px;
            left: 80px;
        }
        #s3{
            width: 40px;
            height: 40px;
            background-color: seagreen;
            position: absolute;
            top:40px;
            left: 120px;
        }
        #score{
            width: 100px;
            height: 100px;
            position: absolute;
            top:200px;
            left: 500px;
            font-size: 50px;
            color:seagreen;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body id="body">
<div id="background">
    <div id="score"></div>
    <div id="s1"></div>
    <div id="s2"></div>
    <div id="s3"></div>
</div>
</body>
</html>

js代码：

<!--w:87  s:83  a:65  d:68-->
var snack1=["s1","s2","s3"];
window.onload=function () {
    setInterval(createsnack,10);
    setInterval(show,10);
    var body = document.getElementById("body");
    body.onkeydown=function (e) {
        chosedir(e.keyCode+"");
    }
}
var flag=true;
var k=4;
var name="s"+k;

//create snake
function createsnack() {
    if(flag){
        var food = document.createElement("div");
        var back = document.getElementById("background");
        food.setAttribute("id","s"+k);
        food.style.width="40px";
        food.style.height="40px";
        food.style.backgroundColor="seagreen";
        food.style.position="absolute";
        var top = (Math.random()*14).toFixed(0);
        var left = (Math.random()*29).toFixed(0);
        food.style.left=left*40+"px";
        food.style.top=top*40+"px";
        back.appendChild(food);
        name="s"+k;
        k++;
        flag=false;
    }
}
var interval;
var flag1=true
function show() {
    var score = document.getElementById("score");
    if(flag1){
        score.innerHTML=(snack1.length-3)*10;
        flag1=false;
    }
}
// 控制上下左右移动
function chosedir(em) {
    clearInterval(interval);
    switch (em){
        case "87":
            interval = setInterval(toup,100);
            break;
        case "83":
            interval = setInterval(todown,100);
            break;
        case "65":
            interval = setInterval(toleft,100);
            break;
        case "68":
            interval = setInterval(toright,100);
            break;
    }
}
// 向上

function toup() {
    isknock();
    var fd = document.getElementById(name);
    if(getcss(document.getElementById(snack1[snack1.length-1]),"top")==getcss(fd,"top")*1+40&&getcss(document.getElementById(snack1[snack1.length-1]),"left")==getcss(fd,"left")){
        snack1[snack1.length]=name;
        flag=true;
        flag1=true;
    }
    var length=snack1.length;
    console.log(length);
    var last = document.getElementById(snack1[length-1]);
   var first = document.getElementById(snack1[0]);
   var k= getcss(last,"top")*1-40;
   first.style.top=k+"px";
   first.style.left=getcss(last,"left")+"px";
   snack1[length]=snack1[0];
   for(var k=0;k<length;k++){
       snack1[k]=snack1[k+1];
   }
    snack1.pop();
}
// 向下
function todown() {
    isknock();
    var fd = document.getElementById(name);
    if(getcss(document.getElementById(snack1[snack1.length-1]),"top")==getcss(fd,"top")-40&&getcss(document.getElementById(snack1[snack1.length-1]),"left")==getcss(fd,"left")){
        snack1[snack1.length]=name;
        flag1=true;
        flag=true;
    }
    var length=snack1.length;
    var last = document.getElementById(snack1[length-1]);
    var first = document.getElementById(snack1[0]);
    var k= getcss(last,"top")*1+40;
    first.style.top=k+"px";
    first.style.left=getcss(last,"left")+"px";
    snack1[length]=snack1[0];
    for(var k=0;k<length;k++){
        snack1[k]=snack1[k+1];
    }
    snack1.pop();
}
// 向左
function toleft() {
    isknock();
    var fd = document.getElementById(name);
    if(getcss(document.getElementById(snack1[snack1.length-1]),"left")==getcss(fd,"left")*1+40&&getcss(document.getElementById(snack1[snack1.length-1]),"top")==getcss(fd,"top")){
        snack1[snack1.length]=name;
        flag=true;
        flag1=true;
    }
    var length=snack1.length;
    console.log(length);
    var last = document.getElementById(snack1[length-1]);
    var first = document.getElementById(snack1[0]);
    var k= getcss(last,"left")*1-40;
    first.style.left=k+"px";
    first.style.top=getcss(last,"top")+"px";
    snack1[length]=snack1[0];
    for(var k=0;k<length;k++){
        snack1[k]=snack1[k+1];
    }
    snack1.pop();
}
// 向右
function toright() {
    isknock();
    var fd = document.getElementById(name);
    if(getcss(document.getElementById(snack1[snack1.length-1]),"left")==getcss(fd,"left")-40&&getcss(document.getElementById(snack1[snack1.length-1]),"top")==getcss(fd,"top")){
        snack1[snack1.length]=name;
        flag=true;
        flag1=true;
    }
    var length=snack1.length;
    var last = document.getElementById(snack1[length-1]);
    var first = document.getElementById(snack1[0]);
    var k= getcss(last,"left")*1+40;
    first.style.left=k+"px";
    first.style.top=getcss(last,"top")+"px";
    snack1[length]=snack1[0];
    for(var k=0;k<length;k++){
        snack1[k]=snack1[k+1];
    }
    snack1.pop();
}
function getcss(id,css) {
    var position = window.getComputedStyle(id,null)[css];
    return position.substring(0,position.length-2);
}

// 是否碰撞
function isknock() {
    var last = document.getElementById(snack1[snack1.length-1]);
    if(getcss(last,"top")*1>600||getcss(last,"top")*1<-40||getcss(last,"left")*1<-40||getcss(last,"left")*1>1200){
        alert("Game Over!!!!");
    }
    for(var t=0;t<snack1.length-1;t++){
        if(getcss(last,"top")==getcss(document.getElementById(snack1[t]),"top")&&getcss(last,"left")==getcss(document.getElementById(snack1[t]),"left")){
            alert("Game Over!!!!");
        }
    }
}