Canvas小游戏 - 简化版的贪吃蛇

IK Snake Game，游戏规则如下： 1. 用鼠标点击指引贪吃蛇的行走方向 2.吃豆后贪吃蛇的身体会变长 3. 触碰边界和触碰自己的身体都会失败。

游戏

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3292
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var cnv = document.getElementById('gameCanvas'),
    ctx = cnv.getContext('2d'),

segmentLength = 10,
    startingSegments = 20,
    spawn = {
        x: 0,
        y: cnv.height / 2
    },
    snakeSpeed = 5,
    maxApples = 5,
    appleLife = 500,
    segmentsPerApple = 3,

snakeWidth = 5,
    appleWidth = 5,
    cursorSize = 10,

snakeColor = [100, 255, 100, 1],
    appleColor = [0, 255, 0, 1],
    cursorColor = [255, 255, 255, 1],
    cursorColorMod = [0, -255, -255, 0],
    targetColor = [0, 0, 255, 1],
    targetColorMod = [255, 0, -255, 0],
    scoreColor = [255, 255, 255, 1],

cursorSpin = 0.075,

snake,
    cursor,
    target,
    apples,
    score,
    gameState,
    deathMeans;

function distance(p1, p2) {
    var dx = p2.x - p1.x;
    var dy = p2.y - p1.y;

return Math.sqrt(dx * dx + dy * dy);
}

function lineIntersect(p0_x, p0_y, p1_x, p1_y, p2_x, p2_y, p3_x, p3_y) {
    var s1_x = p1_x - p0_x,
        s1_y = p1_y - p0_y,
        s2_x = p3_x - p2_x,
        s2_y = p3_y - p2_y,
        s = (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y)) / (-s2_x * s1_y + s1_x * s2_y),
        t = (s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x)) / (-s2_x * s1_y + s1_x * s2_y);

if (s >= 0 && s <= 1 && t >= 0 && t <= 1) {
        return true;
    }

return false;
}

function SGM(angle, x, y) {
    this.x = x || 0;
    this.y = y || 0;
    this.angle = angle || 0;
    this.parent = null;
};

SGM.prototype.endX = function() {
    return this.x + Math.cos(this.angle) * segmentLength;
};

SGM.prototype.endY = function() {
    return this.y + Math.sin(this.angle) * segmentLength;
};

SGM.prototype.pointAt = function(x, y) {
    var dx = x - this.x,
        dy = y - this.y;

this.angle = Math.atan2(dy, dx);
};

SGM.prototype.target = function(x, y) {
    this.targetX = x;
    this.targetY = y;
    this.arrived = false;
    this.totalDist = distance({
        x: this.endX(),
        y: this.endY()
    }, {
        x: this.targetX,
        y: this.targetY
    });
    this.currentDist = parseInt(this.totalDist);
};

SGM.prototype.gotoTarget = function() {
    if (!this.arrived) {
        if (this.targetX > this.x + segmentLength || this.targetX < this.x - segmentLength || this.targetY > this.y + segmentLength || this.targetY < this.y - segmentLength) {
            this.pointAt(this.targetX, this.targetY);
        } else {
            this.arrived = true;
        }

this.currentDist = distance({
            x: this.endX(),
            y: this.endY()
        }, {
            x: this.targetX,
            y: this.targetY
        });
    }

this.x += (this.endX() - this.x) / snakeSpeed;
    this.y += (this.endY() - this.y) / snakeSpeed;

this.parent.drag(this.x, this.y);
};

SGM.prototype.drag = function(x, y) {
    this.pointAt(x, y);

this.x = x - Math.cos(this.angle) * segmentLength;
    this.y = y - Math.sin(this.angle) * segmentLength;

if (this.parent) {
        this.parent.drag(this.x, this.y);
    }
};

SGM.prototype.render = function(context) {
    context.lineTo(this.endX(), this.endY());
};

function IKR(x, y) {
    this.ix = x || 0;
    this.iy = y || 0;
    this.sgms = [];
    this.lastArm = null;
};

IKR.prototype.addSeg = function(angle) {
    var arm = new SGM(angle);

if (this.lastArm !== null) {
        arm.x = this.lastArm.endX();
        arm.y = this.lastArm.endY();

arm.parent = this.lastArm;
    } else {
        arm.x = this.ix;
        arm.y = this.iy;
    }

this.sgms.push(arm);
    this.lastArm = arm;
};

IKR.prototype.grow = function() {
    var tail = this.sgms[0],
        arm = new SGM(tail.angle);

arm.x = tail.x - Math.cos(tail.angle) * segmentLength;
    arm.y = tail.y - Math.sin(tail.angle) * segmentLength;

tail.parent = arm;
    this.sgms.unshift(arm);
}

IKR.prototype.drag = function(x, y) {
    this.lastArm.drag(x, y);
};

function CUR(x, y) {
    this.x = x;
    this.y = y;
    this.rotation = 0;
};

CUR.prototype.render = function(context) {
    context.save();

context.translate(this.x, this.y);
    context.rotate(this.rotation);

context.beginPath();

context.moveTo(0, -cursorSize);
    context.lineTo(0, -cursorSize / 2);
    context.moveTo(0, cursorSize / 2);
    context.lineTo(0, cursorSize);

context.moveTo(-cursorSize, 0);
    context.lineTo(-cursorSize / 2, 0);
    context.moveTo(cursorSize / 2, 0);
    context.lineTo(cursorSize, 0);

context.stroke();
    context.restore();

this.rotation = (this.rotation + cursorSpin) % 360;
};

function Apple(x, y) {
    this.x = x;
    this.y = y;
    this.life = appleLife;
    this.rotation = 0;
}

Apple.prototype.update = function() {
    this.life--;
};

Apple.prototype.render = function(context) {
    context.beginPath();
    context.arc(this.x, this.y, appleWidth, 0, Math.PI * 2);
    context.fill();

if (gameState !== 'dead') {
        context.save();

context.fillStyle = 'white';
        context.font = '8px sans-serif';
        context.fillText(this.life, this.x + 10, this.y + 10);

context.restore();

CUR.prototype.render.call(this, context);
    }
};

function init() {
    snake = new IKR(spawn.x, spawn.y);
    cursor = new CUR(-20, -20);
    target = new CUR(spawn.x + segmentLength * (startingSegments + 5), spawn.y);
    apples = [];
    score = 0;

for (var i = 0; i < startingSegments; i++) {
        snake.addSeg();
    }

snake.lastArm.target(target.x, target.y);

gameState = 'play';
}

init();

cnv.addEventListener('mousemove', function(e) {
    switch (gameState) {
        case 'play':
            cursor.x = e.offsetX;
            cursor.y = e.offsetY;
            break;
    }
});

cnv.addEventListener('mousedown', function(e) {
    switch (gameState) {
        case 'play':
            target.x = e.offsetX;
            target.y = e.offsetY;
            snake.lastArm.target(target.x, target.y);
            break;
        case 'dead':
            init();
            break;
    }
});

function badPlacement(apple) {
    for (var s = 0; s < snake.sgms.length; s++) {
        var seg = snake.sgms[s];

if (Math.min(distance(apple, {
                x: seg.endX(),
                y: seg.endY()
            }), distance(apple, {
                x: seg.x,
                y: seg.y
            })) < appleWidth * 2) {
            return true;
        }
    }
    return false;
}

function addScoreSegments() {
    for (var i = 0; i < segmentsPerApple; i++) {
        snake.grow();
    }
}

function update() {
    if (gameState !== 'dead') {
        snake.lastArm.gotoTarget();

if (snake.lastArm.endX() > cnv.width - 2 || snake.lastArm.endX() < 2 || snake.lastArm.endY() > cnv.height - 2 || snake.lastArm.endY() < 2) {
            gameState = 'dead';
            deathMeans = 'You hit the wall...';
            return;
        }

for (var s = 0; s < snake.sgms.length - 2; s++) {
            var seg = snake.sgms[s];

if (lineIntersect(snake.lastArm.x, snake.lastArm.y, snake.lastArm.endX(), snake.lastArm.endY(), seg.x, seg.y, seg.endX(), seg.endY())) {
                gameState = 'dead';
                deathMeans = 'You bit yourself!';
                return;
            }

for (var a in apples) {
                var apple = apples[a];

if (Math.min(distance(apple, {
                        x: seg.endX(),
                        y: seg.endY()
                    }), distance(apple, {
                        x: seg.x,
                        y: seg.y
                    })) < appleWidth * 2) {
                    score += Math.round(apple.life / 2); // half  score if absorbed by the tail
                    apples.splice(a, 1);
                    addScoreSegments();
                }
            }
        }

for (var a in apples) {
            var apple = apples[a];

apple.update();

if (apple.life <= 0) {
                apples.splice(a, 1);
                continue;
            }

if (distance(apple, {
                    x: snake.lastArm.endX(),
                    y: snake.lastArm.endY()
                }) < appleWidth * 2) {
                score += apple.life;
                apples.splice(a, 1);

addScoreSegments();
            }
        }

if (apples.length < maxApples && Math.random() < .1) {
            var offset = appleWidth * 10,
                apple = new Apple(
                    offset / 2 + Math.floor(Math.random() * (cnv.width - offset)),
                    offset / 2 + Math.floor(Math.random() * (cnv.height - offset))
                );

while (badPlacement(apple)) {
                apple.x = offset / 2 + Math.floor(Math.random() * (cnv.width - offset));
                apple.y = offset / 2 + Math.floor(Math.random() * (cnv.height - offset));
            }

apples.push(apple);
        }
    }
}

function drawTarget(targetModFactor) {
    if (!snake.lastArm.arrived) {
        ctx.strokeStyle = 'rgba(' +
            (targetColor[0] + targetColorMod[0] * targetModFactor).toFixed(0) + ',' +
            (targetColor[1] + targetColorMod[1] * targetModFactor).toFixed(0) + ',' +
            (targetColor[2] + targetColorMod[2] * targetModFactor).toFixed(0) + ',' +
            (targetColor[3] + targetColorMod[3] * targetModFactor).toFixed(0) + ')';
        ctx.lineWidth = 1;
        target.render(ctx);
    }
}

function drawSnake() {
    ctx.beginPath();
    ctx.strokeStyle = ctx.fillStyle = 'rgba(' + snakeColor[0] + ',' + snakeColor[1] + ',' + snakeColor[2] + ',' + snakeColor[3] + ')';
    ctx.lineWidth = snakeWidth;

ctx.moveTo(snake.sgms[0].x, snake.sgms[0].y);

for (var s in snake.sgms) {
        snake.sgms[s].render(ctx);
    }

ctx.stroke();

ctx.beginPath();
    ctx.arc(snake.lastArm.endX(), snake.lastArm.endY(), appleWidth * .75, 0, Math.PI * 2);
    ctx.fill();
}

function drawCursor(targetModFactor) {
    ctx.strokeStyle = 'rgba(' +
        (cursorColor[0] + cursorColorMod[0] * targetModFactor).toFixed(0) + ',' +
        (cursorColor[1] + cursorColorMod[1] * targetModFactor).toFixed(0) + ',' +
        (cursorColor[2] + cursorColorMod[2] * targetModFactor).toFixed(0) + ',' +
        (cursorColor[3] + cursorColorMod[3] * targetModFactor).toFixed(0) + ')';
    ctx.lineWidth = 1;
    cursor.render(ctx);
}

function drawApples() {
    ctx.fillStyle = 'rgba(' +
        appleColor[0] + ',' +
        appleColor[1] + ',' +
        appleColor[2] + ',' +
        appleColor[3] + ')';

for (var a in apples) {
        var apple = apples[a],
            appleTargetMod = 1 - apple.life / appleLife;
        ctx.strokeStyle = 'rgba(' +
            (cursorColor[0] + cursorColorMod[0] * appleTargetMod).toFixed(0) + ',' +
            (cursorColor[1] + cursorColorMod[1] * appleTargetMod).toFixed(0) + ',' +
            (cursorColor[2] + cursorColorMod[2] * appleTargetMod).toFixed(0) + ',' +
            (cursorColor[3] + cursorColorMod[3] * appleTargetMod).toFixed(0) + ')';
        ctx.lineWidth = 1;
        apple.render(ctx);
    }
}

function render() {
    var targetModFactor = 1 - snake.lastArm.currentDist / snake.lastArm.totalDist;

switch (gameState) {
        case 'play':
            ctx.clearRect(0, 0, cnv.width, cnv.height);

drawTarget(targetModFactor);

drawSnake();

drawApples();

drawCursor(targetModFactor);

ctx.fillStyle = 'rgba(' +
                scoreColor[0] + ',' +
                scoreColor[1] + ',' +
                scoreColor[2] + ',' +
                scoreColor[3] + ')';
            ctx.textAlign = 'left';
            ctx.textBaseline = 'top';
            ctx.fillText('Score: ' + score, 10, 10);
            break;

case 'dead':
            ctx.clearRect(0, 0, cnv.width, cnv.height);

drawSnake();

drawApples();
            ctx.fillStyle = 'rgba(255,0,0,0.5)';
            ctx.fillRect(100, 100, cnv.width - 200, cnv.height - 200);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = ctx.strokeStyle = 'white';
            ctx.font = 'bold 30px sans-serif'
            ctx.fillText('DEAD', cnv.width / 2, cnv.height / 2 - 70);

ctx.font = 'bold 25px sans-serif'
            ctx.fillText(deathMeans, cnv.width / 2, cnv.height / 2 - 30);

ctx.font = '20px sans-serif';
            ctx.fillText('Score:', cnv.width / 2, cnv.height / 2 + 15);
            ctx.font = 'bold 60px sans-serif';
            ctx.fillText(score, cnv.width / 2, cnv.height / 2 + 60);
            ctx.font = 'lighter 10px sans-serif';
            ctx.lineWidth = 1;
            ctx.strokeRect(103, 103, cnv.width - 206, cnv.height - 206);
            break;
    }
}

function animate() {
    update();
    render();
    requestAnimationFrame(animate);
}

snake.lastArm.target(target.x, target.y);
animate();

编译

CSS

HTML

IK Snake Game，游戏规则如下： 1. 用鼠标点击指引贪吃蛇的行走方向 2.吃豆后贪吃蛇的身体会变长 3. 触碰边界和触碰自己的身体都会失败。

游戏

编辑器支持Emmet

快捷键

IK Snake Game，游戏规则如下： 1. 用鼠标点击指引贪吃蛇的行走方向 2.吃豆后贪吃蛇的身体会变长 3. 触碰边界和触碰自己的身体都会失败。

游戏

HTML5 Canvas很有趣的拷贝猫小游戏

Canvas 顶皮球平衡小游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：