自己用js做的一个贪吃蛇小游戏

最新推荐文章于 2025-02-07 16:05:55 发布
最新推荐文章于 2025-02-07 16:05:55 发布
阅读量745 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/J4ffee/article/details/80837795
版权

html部分

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" href="../css/mypanel.css" rel="stylesheet">

</head>
<body>
    <div id="gamePanel">
        <table id="gameTable">

        </table>

    </div>
    <div id="center">
        <div class="score">
            分数：<span id="code">0</span>
        </div>
        <div class="tool">
            <span style="margin: 0px auto;">道具：</span>
            <table>
                <tr>
                    <td><button>道具1</button></td>
                    <td><button>道具1</button></td>

                </tr>
                <tr>
                    <td><button>道具1</button></td>
                    <td><button>道具1</button></td>
                </tr>
            </table>
        </div>
        <div class="move">
            <table>
                <tr>
                    <td></td>
                    <td><button οnclick="changeDirect('up')" >上</button></td>
                    <td></td>
                </tr>
                <tr>
                    <td><button οnclick="changeDirect('left')" >左</button></td>
                    <td></td>
                    <td><button οnclick="changeDirect('right')" >右</button></td>
                </tr>
                <tr>
                    <td></td>
                    <td><button οnclick="changeDirect('down')" >下</button></td>
                    <td></td>
                </tr>

            </table>
        </div>
    </div>

    <div id="foot">
        <div class="initGame">
            <table>
                <tr>
                    <td>行</td>
                    <td><input type="text" name="row" id="rowNum" value="请输入行数" οnclick="clean(this)" /></td>
                </tr>
                <tr>
                    <td>列</td>
                    <td><input type="text" name="col" id="colNum" value="请输入列数" οnclick="clean(this)" /></td>
                </tr>
                <tr>
                    <td colspan="2"><button οnclick="start()" >确定</button></td>
                </tr>
                
            </table>

        </div>

    </div>
    <script type="text/javascript" src="../js/mypanel.js" ></script>
</body>

</html>

 

css部分

#gamePanel{
    float:left;
    width:600px;
    height:600px;
    border:1px solid red;
    background-color: gray;
    
    
}
#gamePanel table{
    padding:0px;
    margin:50px auto;
    height:500px;
    width:500px;
    border:1px solid green;
    background-color: black;
}
#gamePanel table td{
    margin:0px;
    padding:0px;
    border:1px solid black;
}
#center{
    float:left;
    width:200px;
    height:600px;
    border:1px solid green;
}

#center .score{
    width:200px;
    text-align:center;
    margin:20px auto;
}
#center .tool{
    width:200px;
    height:100px;
    margin-top:50px;
    text-align: center;
}
#center .tool table{
    margin:10px auto;
    width:150px;
    height:50px;
}

#center .move{
    width:200px;
    height:100px;
    
}
#center .move table{
    width:200px;
    margin:0px auto;
    margin-top:20px;
}
#center .move button{
    width:50px;
    height:30px;
}
#foot{
    float:left;
    width:200px;
    height:600px;
    border:1px solid blue;
}

#foot .initGame table{
    text-align:center;    
    width:200px;
    height:100px;
    margin:50px auto;
}
#foot #rowNum,#foot #colNum{
    width:130px;
    

}

 

js部分


var row; //行
var col; //列
var arr = new Array();
var head = new Array(); //蛇头
var body = new Array(); //身子
var foot = new Array(); //尾巴
var snakeArr = new Array();
var food = new Array(); //储存食物坐标
var code = 0; //分数
var flag = 0;
var direct = "right";
var plus=new Array();//要增加的
var bound=new Array();//障碍物
//清空输入框文字
function clean(z) {
    z.value = "";
}
//初始化
function initGame() {
    flag = 1;
    document.getElementById("gameTable").innerHTML = "";
    row = document.getElementById("rowNum").value;
    col = document.getElementById("colNum").value;

    for (var m = 0; m < row; m++) {
        arr[m] = new Array();
        var h = document.createElement("tr");
        for (var n = 0; n < col; n++) {
            var l = document.createElement("td");
            h.appendChild(l);
            arr[m][n] = l;
        }

        document.getElementById("gameTable").appendChild(h);
    }
    snakeArr[0] = [ row / 2, col / 2 ];
    snakeArr[1] = [ row / 2, col / 2 - 1 ];
    snakeArr[2] = [ row / 2, col / 2 - 2 ];
    makeSnake();
    createFood();
    makeBound();
}
//生成食物
function createFood() {
    
    for (var k = 0; k < 3; k++) {
        food[k] = new Array();
        var foodRow = Math.floor(Math.random() * (parseInt(row) ));
        var foodCol = Math.floor(Math.random() * (parseInt(col)));
        while(check(foodRow,foodCol)){
            foodRow = Math.floor(Math.random() * (parseInt(row) ));
            foodCol = Math.floor(Math.random() * (parseInt(col)));
        }
        food[k][0] = foodRow;
        food[k][1] = foodCol;
        
        arr[foodRow][foodCol].style.backgroundColor = "yellow";
    }

}
//检查食物，障碍物是否在蛇身上
function check(x,y){
    for (var i = 0; i < snakeArr.length; i++) {
        for (var j = 0; j < 2; j++) {
            var snakeX = snakeArr[i][0];
            var snakeY = snakeArr[i][1];
            if(x==snakeX&&y==snakeY){
                return true;
            }
        }
    }
    
    return false;
}
//画蛇
function makeSnake() {
    for (var i = 0; i < snakeArr.length; i++) {
        for (var j = 0; j < 2; j++) {
            var snakeX = snakeArr[i][0];
            var snakeY = snakeArr[i][1];
            arr[snakeX][snakeY].style.backgroundColor = "green";
        }
    }
    arr[snakeArr[0][0]][snakeArr[0][1]].style.backgroundColor = "pink";
    arr[snakeArr[snakeArr.length-1][0]][snakeArr[snakeArr.length-1][1]].style.backgroundColor = "pink";
}
//将蛇清除
function cleanSnake() {
    for (var i = 0; i < snakeArr.length; i++) {
        for (var j = 0; j < 2; j++) {
            var snakeX = snakeArr[i][0];
            var snakeY = snakeArr[i][1];
            arr[snakeX][snakeY].style.backgroundColor = "black";
        }
    }

}
//记录分数
function countScore(v, n) {
    for (var t = 0; t < food.length; t++) {
        if (food[t][0] == v && food[t][1] == n) {
            console.log(snakeArr);
            snakeArr[snakeArr.length]=[plus[0],plus[1]];
            code++;
            makeSnake();
            document.getElementById("code").innerHTML = code;
            if (code % 3 == 0 && code >= 3) {
                createFood();
            }
        }
    }

}
//死于障碍物
function die1(){
    for (var t = 0; t < bound.length; t++) {
        if (bound[t][0] == snakeArr[0][0] && bound[t][1] == snakeArr[0][1]) {
             window.clearInterval(window.t);
            alert("die***");
            
        }
    }
    
}
//死于自己吃自己
function die2(){
    for (var i = 1; i < snakeArr.length; i++) {
            if(snakeArr[0][0]==snakeArr[i][0]&&snakeArr[0][1]==snakeArr[i][1]){
                 window.clearInterval(window.t);
                alert("die...");
            }
    }
    
    
}

//制造障碍物
function makeBound(){
    for (var k = 0; k < 5; k++) {
        var boundRow = Math.floor(Math.random() * (parseInt(row) ));
        var boundCol = Math.floor(Math.random() * (parseInt(col)));
        while(check(boundRow,boundCol)){
            boundRow = Math.floor(Math.random() * (parseInt(row) ));
            boundCol = Math.floor(Math.random() * (parseInt(col)));
        }
        bound[k]=[boundRow,boundCol];
        arr[boundRow][boundCol].style.backgroundColor = "red";
    }
    
}

//判断是否撞边
function outIndex() {
    if (snakeArr[0][0] > row - 1) {
        snakeArr[0][0] = row - 1;
        alert("GAME OVER");
        clearInterval(t);
    }
    if (snakeArr[0][1] > col - 1) {
        snakeArr[0][1] = col - 1;
        alert("GAME OVER");
        clearInterval(t);
    }
    if (snakeArr[0][0] < 0) {
        snakeArr[0][0] = 0;
        alert("GAME OVER");
        clearInterval(t);
    }
    if (snakeArr[0][1] < 0) {
        snakeArr[0][1] = 0;
        alert("GAME OVER");
        clearInterval(t);
    }
}


//蛇移动
function move() {
    x = direct;
    if (x == "up") {
        cleanSnake();

        if (snakeArr[0][0] <= snakeArr[1][0]) {
            plus[0]=snakeArr[snakeArr.length - 1][0];
            plus[1]=snakeArr[snakeArr.length - 1][1];
            
            for (var i = snakeArr.length - 1; i > 0; i--) {
                snakeArr[i][0] = snakeArr[i - 1][0];
                snakeArr[i][1] = snakeArr[i - 1][1];

            }
            snakeArr[0][0] = snakeArr[0][0] - 1;

            outIndex();
            die1();
            die2();
        }
        
        makeSnake();
        countScore(snakeArr[0][0], snakeArr[0][1]);
    } else if (x == "down") {
        cleanSnake();

        if (snakeArr[0][0] >= snakeArr[1][0]) {
            plus[0]=snakeArr[snakeArr.length - 1][0];
            plus[1]=snakeArr[snakeArr.length - 1][1];
            for (var i = snakeArr.length - 1; i > 0; i--) {
                snakeArr[i][0] = snakeArr[i - 1][0];
                snakeArr[i][1] = snakeArr[i - 1][1];

            }
            snakeArr[0][0] = snakeArr[0][0] + 1;

            outIndex();
            die1();
            die2();
        }
        
        makeSnake();
        countScore(snakeArr[0][0], snakeArr[0][1]);
    } else if (x == "right") {
        cleanSnake();

        if (snakeArr[0][1] >= snakeArr[1][1]) {
            plus[0]=snakeArr[snakeArr.length - 1][0];
            plus[1]=snakeArr[snakeArr.length - 1][1];
            for (var i = snakeArr.length - 1; i > 0; i--) {
                snakeArr[i][0] = snakeArr[i - 1][0];
                snakeArr[i][1] = snakeArr[i - 1][1];

            }
            snakeArr[0][1] = snakeArr[0][1] + 1;

            outIndex();
            die1();
            die2();
        }
        
        makeSnake();
        countScore(snakeArr[0][0], snakeArr[0][1]);
    } else if (x == "left") {
        cleanSnake();

        if (snakeArr[0][1] <= snakeArr[1][1]) {
            plus[0]=snakeArr[snakeArr.length - 1][0];
            plus[1]=snakeArr[snakeArr.length - 1][1];
            for (var i = snakeArr.length - 1; i > 0; i--) {
                snakeArr[i][0] = snakeArr[i - 1][0];
                snakeArr[i][1] = snakeArr[i - 1][1];

            }
            snakeArr[0][1] = snakeArr[0][1] - 1;

            outIndex();
            die1();
            die2();
        }
        makeSnake();
        countScore(snakeArr[0][0], snakeArr[0][1]);
    }
}
function startGame() {
    move();
}

function changeDirect(x) {
    direct = x;

}
function start() {
    initGame();
    window.t= window.setInterval("startGame()", 500);
}

 

J4ffee
关注
用 js + html 实现贪吃蛇小游戏
05-31
使用 js + html 实现的贪吃蛇小游戏，使用canvas绘制图形，在一般的贪吃蛇游戏的规则基础上增加了障碍物，游戏可以选择简单、一般、困难三种模式，随着分数的增加可以提升等级，增加了游戏的趣味性，并且提供了游戏...
用JS实现贪吃蛇小游戏
01-08
自己也模仿写一个贪吃蛇的小游戏，本人刚接触JS不久如有错误，望评论区指出。 因为一般贪吃蛇游戏中的CSS样式较为简单，所以这里主要讲一下JS的写法。 食物生成 贪吃蛇中的食物是随机生成的且可以删除，这就需要我们...
利用js实现贪吃蛇的小游戏
07-14
利用js实现贪吃蛇的小游戏，用网页打开，请用ie浏览器打开
记录：初次面向对象编写贪吃蛇案列
05-21 362
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> .ma...
用AI写游戏1——js实现贪吃蛇
AnalogElectronic的博客
02-07 287
【代码】用AI写游戏1——js实现贪吃蛇。
【分享】曾经做的一个JS小游戏——《Battle City》
weixin_34179968的博客
12-31 213
　　今天改网盘密码时，找到了个很久前的东西：JavaScript版的坦克大战。07年的夏天制作花了好多个夜晚制作，那段着迷JS游戏的疯狂时光。但因为后来众多浏览器的出现，导致了游戏兼容性大大的下降，最终放弃了更新。  　　 　　尽管到了如今HTML5大红大紫，不过要兼容主流浏览器，还是逃不过IE这关。如此说来，还不如纯粹的div+css制作的js应用兼容性最好了：）　　 　　 　　之前也发...
用js写一个简单的贪吃蛇小游戏
qq_41154692的博客
09-09 255
代码如下： HTML 5 部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
用js做一个简易版的贪吃蛇
zgq_sir的博客
12-31 507
用js做一个简易版的贪吃蛇，话不多说先上个效果图（ps:有点丑 见笑） 首先 要了解 贪吃蛇如果是个对象，应该拥有哪些属性 1.div元素 舞台 2.行 row 3.列 col 4.方向 dir 1.创建食物/蛇 genBlock 2.控制蛇的位置 setPos 3.控制蛇的方式 (键盘）onkeyup 4.判断 （撞墙，吃到自己没有，吃到食物）蛇的row 和蛇的col与食物行...
用html+CSS+js做一个贪吃蛇小游戏
dp6558dfggbhhn_的博客
08-12 901
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。游戏结束提示：当我们检测到蛇头与蛇身任何部分发生碰撞时，我们调用 endGame 函数。这个函数会清除游戏循环，通过 alert 消息弹窗显示出一个游戏结束的提示，并且将游戏重置。游戏重置会清空蛇的数组并将它的起始位置设置为初始位置。移动速度控制：变量 speed 被用来控制蛇移动的速度。
web前端 贪吃蛇小游戏 用javascript实现的适合初学者入门 简单易懂
02-26
【JavaScript实现贪吃蛇小游戏】 贪吃蛇游戏是一款经典的像素级游戏，对于初学者来说，通过JavaScript实现这个游戏是一个很好的学习项目。在这个项目中，你将深入理解JavaScript的基础语法、DOM操作以及事件处理，...
用js做一个贪吃蛇小游戏
c535643152的博客
04-03 341
h5部分代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
JS做贪吃蛇
05-17
使用JScript制作的一款小游戏——贪吃蛇，代码相对容易，便于初学者研究自学
用Javascript做的一个小游戏
10-16
用JavaScript做的配对游戏，源码注释详细，便于学习
利用js实现贪吃蛇小游戏
08-05
使用HTML、CSS、JavaScript技术实现简单的贪吃蛇小游戏
js写贪吃蛇
11-14
js写贪吃蛇，纯js和html 写的绝对可以用 用起来很方便
js编写贪吃蛇游戏（完整无错可运行源码）
10-05
源码分享，完整可运行，轻量级，兼容性好，浏览器直接点开则可运行。
用js做一个小游戏—贪吃蛇
sinuo123_5的博客
03-13 584
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0;...
[ 逻辑锻炼] 用 JavaScript 做一个小游戏 ——2048 （初级版）
weixin_34175509的博客
01-15 527
前言 前段时间发现网上有很多收费或公开课都有教用 js 做 2048 小游戏的，然后自己就也想动手做一个，做这个小游戏主要是为了锻炼自己的逻辑能力，也算是对之前一些学习的总结吧 注： 实现方法完全是自己边玩 2048 边想的，所有些乱还请见谅 另外配色方案是在某个 2048 游戏截屏，然后用 ps 吸取的，非本人原创 代码中有很多都可以使用数组相关的方法来代替，这里是为了自己理解数组方法是什么原...
js实现贪吃蛇小游戏
waveclouds的博客
01-27 499
新建网页 //① 绘制操作界面 function Map(){ //不变的信息通过“私有成员”定义 //变的信息通过“公开的成员”定义 var w = 800; var h = 400;
用JavaScript做一个草莓贪吃蛇小游戏
最新发布
03-08
### 创建 JavaScript '草莓贪吃蛇' 小游戏 为了实现一个简单的基于浏览器的‘草莓贪吃蛇’小游戏，可以采用 HTML5 的 `<canvas>` 元素来绘制游戏界面并利用 JavaScript 来处理逻辑。下面提供了一个简化版的游戏框架。 #### 游戏初始化设置 首先定义画布大小以及一些基本参数： ```html <canvas id="gameCanvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); // 定义方格尺寸和速度 let gridSize = 20; let speed = 7; // 初始化方向向量 (右移) let direction = { x: 1, y: 0 }; // 初始位置设定 let snake = [{ x: 10 * gridSize, y: 10 * gridSize }]; </script> ``` #### 绘制函数 此部分负责刷新屏幕上的图像，包括背景、蛇身及食物的位置。 ```javascript function draw() { // 填充白色背景 ctx.fillStyle = "#FFFFFF"; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制红色的食物（这里假设为草莓） let foodPosition = getFoodPosition(); ctx.fillStyle = '#FF0000'; ctx.fillRect(foodPosition.x, foodPosition.y, gridSize, gridSize); // 绘制绿色的蛇身体节段 ctx.fillStyle = '#008000'; for (let part of snake) { ctx.fillRect(part.x, part.y, gridSize, gridSize); } } ``` #### 更新状态 这部分代码用于更新游戏中对象的状态，比如移动蛇头、检测碰撞等。 ```javascript function update() { const head = { ...snake[0] }; head.x += direction.x * gridSize; head.y += direction.y * gridSize; // 添加新的头部到数组前面 snake.unshift(head); // 如果吃到食物，则增加长度；否则去掉尾巴保持恒定长度 if (!isEating()) { snake.pop(); } else { placeNewFood(); // 放置新食物 } checkCollision(); setTimeout(update, 1000 / speed); // 设置帧率 } update(); // 开始第一次调用 ``` #### 用户输入监听器 允许玩家通过键盘箭头键改变蛇前进的方向。 ```javascript document.addEventListener('keydown', function(event){ switch(event.key){ case "ArrowUp": if(direction.y === 0){direction={x:0,y:-1};} break; // 非垂直运动时才可以上下转向 case "ArrowDown": if(direction.y === 0){direction={x:0,y:1};} break; case "ArrowLeft": if(direction.x === 0){direction={x:-1,y:0};} break; // 非水平运动时才可以左右转向 case "ArrowRight": if(direction.x === 0){direction={x:1,y:0};} break; } }); ``` 上述代码片段展示了构建这样一个简单版本所需的几个核心组件[^1]。当然实际项目可能还需要更多细节优化，例如更复杂的图形效果或是音效支持等功能扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值