HTML之贪吃蛇！！！

最新推荐文章于 2022-03-28 11:19:23 发布

某不知名魔法少年

最新推荐文章于 2022-03-28 11:19:23 发布

阅读量115

点赞数

文章标签： html5 javascript html

本文链接：https://blog.csdn.net/Z723731337/article/details/120791991

版权

闲了做的，没有暂停功能，后续可以加

<!doctype html>

<head>
<meta charset="utf-8">
<title>Test1</title>

<style>
#myCanvas {
    box-shadow: 0 0 6px #000;
}
#myCanvas{
    border: 2px;
}
</style>
</head>
<body>
<br/><br/><br/>
<input type="button" value="开始游戏" onclick="beginGame();"><br/><br/><br/>
<div>得分：<span id="score">0</span></div><br/>

<canvas id="myCanvas" width="600" height="600"></canvas>

<script>    
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var w = 15; //格子宽、高
var snaLen = 6; //初始长度
var snake = []; //身体长度
var scoreCount=0;
var score = document.getElementById('score');


for (var i = 0; i < snaLen; i++) {
    snake[i] = new cell(i, 0, 39);
}
var head = snake[snaLen - 1]; //头部
//初始食物
var foodx = Math.ceil(Math.random() * 28 + 1);
var foody = Math.ceil(Math.random() * 28 + 1);
var food = new Food(foodx, foody);
//食物
function Food(x, y) {
    this.x = x;
    this.y = y;
    
    return this;
}

//身体
function cell(x, y, d) {
    this.x = x;
    this.y = y;
    this.d = d;
    return this;
}



//动作
function draw() {
    ctx.clearRect(0, 0, 600, 600);
    //画布局
          for(var i = 0; i < 40; i++){
              ctx.strokeStyle = "#ccc";//线条颜色
              ctx.beginPath();
              ctx.moveTo(0,i*w);
              ctx.lineTo(600,i*w);

              ctx.moveTo(i*w,0);
              ctx.lineTo(i*w,600);
              ctx.closePath();
              ctx.stroke();
          }
    //画蛇身
    for (var j = 0; j < snake.length; j++) {
        ctx.fillStyle = "yellow";
        if (j == snake.length - 1) {
            ctx.fillStyle = "blue";
        }
        ctx.beginPath();
        ctx.rect(snake[j].x * w, snake[j].y * w, w, w);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
    }
    //出现食物
    drawFood();
    //吃到食物
    if (head.x == food.x && head.y == food.y) {
        initFood();
        food = new Food(foodx, foody);
        //重新出现食物
        drawFood();
        scoreCount=scoreCount+5;
        score.innerHTML=scoreCount;

        //增加蛇的长度 
        var newCell = new cell(head.x, head.y, head.d);
        switch (head.d) {
            case 40:
                newCell.y++;
                break; //下
            case 39:
                newCell.x++;
                break; //右
            case 38:
                newCell.y--;
                break; //上
            case 37:
                newCell.x--;
                break; //左
        }
        snake[snake.length] = newCell;
        head = newCell;
        
    }
}
//随机初始化食物
function initFood() {
    foodx = Math.ceil(Math.random() * 38 + 1);
    foody = Math.ceil(Math.random() * 38 + 1);
    for (var i = 0; i < snake.length; i++) {
        if (snake[i].x == foodx && snake[i].y == foody) {
            initFood();
        }
    }
}
//画食物
function drawFood() {
    //绘制食物
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.rect(food.x * w, food.y * w, w, w);
    ctx.closePath();
    ctx.fill();
}
draw();
//监听键盘事件
document.onkeydown = function(e) {
    //下40 ， 右边39，左边37，上38  键盘事件
    var keyCode = e.keyCode;
    if (head.d - keyCode != 2 && head.d - keyCode != -2 && keyCode >= 37 && keyCode <= 40) {
        moveSnake(keyCode);
    }
}
//控制蛇移动方向
function moveSnake(keyCode) {
    var newSnake = [];
    var newCell = new cell(head.x, head.y, head.d); //头
    //身体
    for (var i = 1; i < snake.length; i++) {
        newSnake[i - 1] = snake[i];
    }
    newSnake[snake.length - 1] = newCell;
    newCell.d = keyCode;
    switch (keyCode) {
        case 40:
            newCell.y++;
            break; //下
        case 39:
            newCell.x++;
            break; //右
        case 38:
            newCell.y--;
            break; //上
        case 37:
            newCell.x--;
            break; //左
        
    }
    snake = newSnake;
    head = snake[snake.length - 1];
   
    checkDeath();
    draw();
}
//游戏规则
function checkDeath() {
    //超出边框
    if (head.x >= 40 || head.y >= 40 || head.x < 0 || head.y < 0) {
        alert('游戏结束！继续加油吧！');
        window.location.reload();
    }
    //咬到自己
    for (var i = 0; i < snake.length - 1; i++) {
        if (head.x == snake[i].x && head.y == snake[i].y) {
            alert('您吃了您自己！游戏结束！下次请注意哦！继续加油吧！');
            window.location.reload();
        }
    }
}
//蛇自动走
function moveClock() {
    moveSnake(head.d);
}
var isMove = false;
function beginGame() {
    !isMove && setInterval(moveClock, 300);
    isMove = true;
}



</script>

</body>
</html>

某不知名魔法少年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML之贪吃蛇！！！

闲了做的，没有暂停功能，后续可以加<!doctype html><head><meta charset="utf-8"><title>Test1</title><style>#myCanvas { box-shadow: 0 0 6px #000;}#myCanvas{ border: 2px;}</style></head><body><br/
复制链接

扫一扫