<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CreateJS 贪吃蛇游戏</title>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<style>
canvas {
border: 1px solid black;
background-color: #ddd;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas, stage, snake, food, score, direction, gameLoop;
function init() {
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
score = 0;
direction = "right";
snake = new createjs.Container();
stage.addChild(snake);
createSnake();
createFood();
gameLoop = setInterval(updateGame, 100); //移动速度0.1s一格
window.addEventListener("keydown", changeDirection);
//设置帧率
createjs.Ticker.setFPS(10);
createjs.Ticker.addEventListener("tick", stage);
}
// 添加蛇
function createSnake() {
var snakePart = new createjs.Shape();
snakePart.graphics.beginFill("#000").drawRect(0, 0, 20, 20);
snakePart.x = 0;
snake.addChild(snakePart);
}
// 添加食物
function createFood() {
food = new createjs.Shape();
food.graphics.beginFill("#f00").drawRect(0, 0, 20, 20);
food.x = Math.floor(Math.random() * 20) * 20;
food.y = Math.floor(Math.random() * 20) * 20;
stage.addChild(food);
}
// 添加蛇身
function addSnakePart() {
var newPart = new createjs.Shape();
newPart.graphics.beginFill("#000").drawRect(0, 0, 20, 20);
newPart.x = snake.getChildAt(0).x;
newPart.y = snake.getChildAt(0).y;
snake.addChildAt(newPart, 0);
}
// 移动
function updateGame() {
var head = snake.getChildAt(0); //蛇头
var newHead = head.clone(); //克隆蛇头 -- 如果未吃到食物则替换蛇头
switch (direction) {
case "right":
newHead.x += 20;
break;
case "left":
newHead.x -= 20;
break;
case "up":
newHead.y -= 20;
break;
case "down":
newHead.y += 20;
break;
}
snake.addChildAt(newHead, 0);
if (checkCollision()) {
resetGame();
return;
}
//判断是否吃到食物
if (head.x === food.x && head.y === food.y) {
score++;
stage.removeChild(food);
createFood();
addSnakePart();
} else {
//如果没有吃到食物，移除蛇尾
snake.removeChildAt(snake.getNumChildren() - 1);
}
stage.update();
}
//碰撞检测,蛇头碰到蛇身，或者蛇头碰到边界
function checkCollision() {
var head = snake.getChildAt(0);
if (head.x < 0 || head.x >= 400 || head.y < 0 || head.y >= 400) {
return true;
}
for (var i = 1; i < snake.getNumChildren(); i++) {
var part = snake.getChildAt(i);
if (head.x === part.x && head.y === part.y) {
return true;
}
}
return false;
}
// 游戏重置
function resetGame() {
clearInterval(gameLoop);
stage.removeAllChildren();
snake.removeAllChildren();
init();
}
//键盘控制 决定蛇头移动方向
function changeDirection(event) {
var newDirection = "";
switch (event.keyCode) {
case 37:
newDirection = "left";
break;
case 38:
newDirection = "up";
break;
case 39:
newDirection = "right";
break;
case 40:
newDirection = "down";
break;
}
if (newDirection !== "" && (newDirection === "left" && direction !== "right" || newDirection === "right" && direction !== "left" || newDirection === "up" && direction !== "down" || newDirection === "down" && direction !== "up")) {
direction = newDirection;
}
}
init();
</script>
</body>
</html>
python实现贪吃蛇游戏
2024-03-23 08:30:04 46 阅读
