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

最新推荐文章于 2024-05-16 02:28:14 发布
最新推荐文章于 2024-05-16 02:28:14 发布
阅读量704 收藏 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
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自己写的一个JS 小游戏和地图编辑器
06-10
兼容各大浏览器 小游戏 为先开发的 地图编辑器是之后做的 没有保存功能 不过其中的地图自动化处理 技术实现了2D游戏中地图编辑的功能
【前端｜JS实战第1篇】使用JS来实现属于自己的贪吃蛇游戏！
A_D_H_E_R_E的博客
08-20 4448
通过这个项目，你不仅可以学习如何使用 JavaScript 来实现一个小游戏，还可以熟练学习js操作dom、数据的常用方法、定时器setInterval、css样式、事件监听器以及实现需求的逻辑思维等等知识，对前面学习的一些理论知识进行了实践，相信你跟着一套教程下来会对前面学习到的知识有更深的理解。后续我们这个前端专栏还会讲述ES6、垃圾回收、js算法技巧、Vue入门实战、React实战、前端面试题。
使用JS和Canvas做一个html5小游戏_html canvas用javascript制作一款网页游戏(1)
最新发布
2401_84976170的博客
05-16 808
这是游戏的截图：1.有计算抓住的怪物的数量2.有背景，英雄，怪物。
js 编写的简单游戏代码,js小游戏游戏代码大全
chatgpt002的博客
10-18 5415
像素鸟曾经是一个火爆一时的小游戏，我们尝试用JavaScript来实现像素鸟的核心功能。操作方式：鼠标点击胜利条件：无失败条件：小鸟碰到了屏幕上下的水管就算失败看似是小鸟在向前飞行，实际上是水管在向后移动，以减少内存的消耗。对于水管的显示，使用背景图片的background-size属性，设置100% 100% 即可让背景图片完全覆盖随机高度的div。对于水管的移动，使用css3的动画属性，这可以很方便的控制水管移动的距离、速度与方向。
纯生Html + Css +Js实现贪吃蛇（附源码）（个人练习）
m0_53479584的博客
08-05 1091
如题，今天用原生js实现贪吃蛇小游戏，主要是记录一下以及加深学习，大佬勿喷！
分享 10 个基于 Three.js 实现的小游戏
前端达人
07-29 5447
今天给大家分享10个基于Three.js 实现的小游戏。只需一个浏览器，就可以「打开下方链接,部分支持移动端」在线玩耍，简直不要泰裤辣！该学的学、想玩的玩，今天星期五，祝大家周末愉快。《Slow Roads》3D赛车游戏01Slow Roads是一款程序生成的休闲驾驶游戏，可让您暂时脱离生活，无休止地奔向遥远的地平线。设置适合您心情的风景，播放一些音乐，然后开车就行了。只需一个浏览器，就能驾车从森...
用js做一个贪吃蛇小游戏
c535643152的博客
04-03 293
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 实现小游戏 贪吃蛇
m0_64191440的博客
08-16 3101
JS 超详细 贪吃蛇 案例 速速围观
用JS实现贪吃蛇小游戏
01-08
自己也模仿写一个贪吃蛇的小游戏，本人刚接触JS不久如有错误，望评论区指出。 因为一般贪吃蛇游戏中的CSS样式较为简单，所以这里主要讲一下JS的写法。 食物生成 贪吃蛇中的食物是随机生成的且可以删除，这就需要我们...
web前端 贪吃蛇小游戏 用javascript实现的适合初学者入门 简单易懂
02-26
【JavaScript实现贪吃蛇小游戏】 贪吃蛇游戏是一款经典的像素级游戏，对于初学者来说，通过JavaScript实现这个游戏是一个很好的学习项目。在这个项目中，你将深入理解JavaScript的基础语法、DOM操作以及事件处理，...
JavaScript编写一个贪吃蛇游戏
10-20
在本文中，我们将探讨如何使用JavaScript来实现一个经典的贪吃蛇游戏。贪吃蛇游戏是一种非常受欢迎的休闲游戏，玩家通过控制蛇的方向使其不断吃食物，每吃一颗食物，蛇的身体就会增长一节。以下将详细讲解游戏的关键...
用 js + html 实现贪吃蛇小游戏
05-31
使用 js + html 实现的贪吃蛇小游戏，使用canvas绘制图形，在一般的贪吃蛇游戏的规则基础上增加了障碍物，游戏可以选择简单、一般、困难三种模式，随着分数的增加可以提升等级，增加了游戏的趣味性，并且提供了游戏...
20行js代码实现的贪吃蛇小游戏
01-19
最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏，感觉被惊艳到了，就试着读了一下这段代码，阅读过程中不断为作者写法的巧妙而叫绝，其中我发现自己对运算符优先级和一些js的技巧不是很清楚，所以看...
用JS写一个《俄罗斯方块》小游戏
KISS
04-06 2678
最近网上上映一部名叫，想起自己学习JS时，编写《俄罗斯方块》小游戏程序作为练习，现在分享一下，看能不能蹭一下热度。: )
js实现贪吃蛇
m0_58730471的博客
01-28 1070
贪吃蛇
用JavaScript写的贪吃蛇游戏（很简单，很详细）
热门推荐
编程界明世隐的博客
02-05 2万+
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:620px; height:450px; position:absolute; margin:0 auto
使用js实现贪吃蛇
NEWonclick的博客
01-10 465
js 手写贪吃蛇.
用js写一个贪吃蛇小游戏
03-27
以下是一个简单的贪吃蛇游戏的思路，可供参考： 1. 创建一个画布，并在画布上绘制一个蛇头和一个食物。 2. 定义蛇的初始位置、长度、方向等信息。 3. 定义键盘事件，根据按键改变蛇的方向。 4. 定义一个移动函数，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值