html5 canvas 实现贪吃蛇小游戏

猫课java 2021-11-14
282
<!doctype html><html><head><meta charset="utf-8"><title>html5实现贪吃蛇小游戏</title><style>#myCanvas {    box-shadow: 0 0 6px #000;}</style></head><body><br/><br/><br/><input type="button" value="开始游戏" onclick="beginGame();"><br/><br/><br/><canvas id="myCanvas" width="450" height="450"></canvas><script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var w = 15; //格子宽、高var snaLen = 6; //初始长度var snake = []; //身体长度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, 450, 450);    //画布局    //      for(var i = 0; i < 30; i++){    //          ctx.strokeStyle = "#ccc";//线条颜色    //          ctx.beginPath();    //          ctx.moveTo(0,i*w);    //          ctx.lineTo(450,i*w);    //          ctx.moveTo(i*w,0);    //          ctx.lineTo(i*w,450);    //          ctx.closePath();    //          ctx.stroke();    //      }    //画蛇身    for (var j = 0; j < snake.length; j++) {        ctx.fillStyle = "green";        if (j == snake.length - 1) {            ctx.fillStyle = "red";        }        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();        //增加蛇的长度  有些小瑕疵，蛇身增长时应该是身体增长，而不是在蛇头上增长        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;        //head =     }}//随机初始化食物function initFood() {    foodx = Math.ceil(Math.random() * 28 + 1);    foody = Math.ceil(Math.random() * 28 + 1);    for (var i = 0; i < snake.length; i++) {        if (snake[i].x == foodx && snake[i].y == foody) {            initFood();        }    }}//画食物function drawFood() {    //绘制食物    ctx.fillStyle = "orange";    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 >= 30 || head.y >= 30 || head.x < 0 || head.y < 0) {        alert("Game over!");        window.location.reload();    }    //咬到自己    for (var i = 0; i < snake.length - 1; i++) {        if (head.x == snake[i].x && head.y == snake[i].y) {            alert("Game over!");            window.location.reload();        }    }}//蛇自动走function moveClock() {    moveSnake(head.d);}var isMove = false;function beginGame() {    !isMove && setInterval(moveClock, 300);    isMove = true;}</script></body></html>
效果图：
html5canvas
前端
文章转载自猫课java，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。
html5 canvas 实现贪吃蛇小游戏

评论
