User prompt
make the background of used assets transparent
User prompt
move the score text a little more to the left and down and make it black
User prompt
when the snake eats food, play the sound
User prompt
frames are thicker
User prompt
make foods are bigger
User prompt
make the snake and the foods are bigger
User prompt
please make background white
User prompt
In the Snake game, I want to customize the snake's head by adding a specific image or asset. This asset should only appear on the head of the snake, and it should be clearly visible during normal movement. Additionally, I want a special visual or animation to occur when the snake eats a food item: At the moment the snake collides with the food, the asset on the snake's head should briefly change appearance (for example, glow, pulse, or flash) to indicate a successful bite. This effect should last about 0.5 seconds, then revert back to the normal head image. Details: The asset should replace or overlay the default snake head graphic. It must rotate or reorient correctly according to the snake's direction (up, down, left, right). The rest of the snake's body should remain unaffected. The image file for the head will be provided (or use a placeholder if needed). Optional: If possible, allow for easy swapping of this head image with other custom photos or icons in the future.
User prompt
I want to a head on this snake.
User prompt
yes create a frame
User prompt
Migrate to the latest version of LK
Remix started
Copy Snake game
/****
* Classes
****/
// Replace 'custom_head_bite_image_id' with your actual image id for the bite effect
// Food Class
var Food = Container.expand(function () {
var self = Container.call(this);
var foodGraphics = self.attachAsset('food', {
anchorX: 0.5,
anchorY: 0.5
});
});
// Assets are automatically created based on usage in the code.
// Snake Head Class
var SnakeHead = Container.expand(function () {
var self = Container.call(this);
// Use the custom head image
var headGraphics = self.attachAsset('snakeHeadNormal', {
anchorX: 0.5,
anchorY: 0.5
});
// Store reference for easy swapping
self.headGraphics = headGraphics;
self.currentAssetId = 'snakeHeadNormal';
// Track direction for rotation
self.direction = {
x: 0,
y: -1
};
// Method to update head orientation
self.setDirection = function (dir) {
self.direction = {
x: dir.x,
y: dir.y
};
// Set rotation based on direction
if (dir.x === 0 && dir.y === -1) {
// Up
self.headGraphics.rotation = 0;
} else if (dir.x === 1 && dir.y === 0) {
// Right
self.headGraphics.rotation = Math.PI / 2;
} else if (dir.x === 0 && dir.y === 1) {
// Down
self.headGraphics.rotation = Math.PI;
} else if (dir.x === -1 && dir.y === 0) {
// Left
self.headGraphics.rotation = -Math.PI / 2;
}
};
// Method to trigger bite effect
self.biteEffect = function () {
// Swap to bite asset
if (self.currentAssetId !== 'snakeHeadBite') {
self.removeChild(self.headGraphics);
self.headGraphics = self.attachAsset('snakeHeadBite', {
anchorX: 0.5,
anchorY: 0.5
});
self.setDirection(self.direction);
self.currentAssetId = 'snakeHeadBite';
}
// After 0.5s, revert to normal
LK.setTimeout(function () {
if (self.currentAssetId !== 'snakeHeadNormal') {
self.removeChild(self.headGraphics);
self.headGraphics = self.attachAsset('snakeHeadNormal', {
anchorX: 0.5,
anchorY: 0.5
});
self.setDirection(self.direction);
self.currentAssetId = 'snakeHeadNormal';
}
}, 500);
};
self.isValidMove = function (nextX, nextY) {
for (var i = 0; i < snake.length; i++) {
if (snake[i].x === nextX && snake[i].y === nextY) {
return false;
}
}
return true;
};
return self;
});
// Snake Segment Class
var SnakeSegment = Container.expand(function () {
var self = Container.call(this);
var segmentGraphics = self.attachAsset('snakeSegment', {
anchorX: 0.5,
anchorY: 0.5
});
// Method to check if the next move is valid
self.isValidMove = function (nextX, nextY) {
// Check if the next move would result in the snake's head moving onto one of its body segments
for (var i = 0; i < snake.length; i++) {
if (snake[i].x === nextX && snake[i].y === nextY) {
return false;
}
}
return true;
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xFFFFFF // Init game with white background
});
/****
* Game Code
****/
// Replace 'custom_head_image_id' with your actual image id
// Global variables
var snake = [];
var food;
var direction = {
x: 0,
y: -1
}; // Initial direction: up
var nextDirection = {
x: 0,
y: -1
};
var snakeSpeed = 5; // How many frames before the snake moves one block
var frameCounter = 0;
var gridSize = 180;
var score = 0;
// Initialize snake
function initSnake() {
var initialLength = 5;
for (var i = 0; i < initialLength; i++) {
var segment;
if (i === 0) {
segment = game.addChild(new SnakeHead());
} else {
segment = game.addChild(new SnakeSegment());
}
segment.x = 1024; // Center of the screen width
segment.y = 1366 + i * gridSize; // Center of the screen height, plus offset for initial length
snake.push(segment);
}
}
// Initialize food
function placeFood() {
if (food) {
food.destroy();
} // Remove old food if it exists
food = game.addChild(new Food());
// Random position for food
do {
food.x = Math.floor(Math.random() * (2048 / gridSize)) * gridSize + gridSize / 2;
food.y = Math.floor(Math.random() * (2732 / gridSize)) * gridSize + gridSize / 2;
} while (food.x > 2048 - 3 * gridSize && food.y < 3 * gridSize); // Prevent food from overlapping with the scoreboard
}
// Check collision with food
function checkFoodCollision() {
if (snake[0].intersects(food)) {
score += 10; // Increase score
scoreText.setText('Score: ' + score); // Update score text
growSnake(); // Grow snake
placeFood(); // Place new food
}
}
// Grow snake by adding a segment at the end
function growSnake() {
var lastSegment = snake[snake.length - 1];
var newSegment = game.addChild(new SnakeSegment());
newSegment.x = lastSegment.x - direction.x * gridSize;
newSegment.y = lastSegment.y - direction.y * gridSize;
snake.push(newSegment);
}
// Check collision with walls or self
function checkCollision() {
var head = snake[0];
// Wall collision
if (head.x < 0 || head.x > 2048 || head.y < 0 || head.y > 2732) {
LK.showGameOver();
}
// Self collision
for (var i = 4; i < snake.length; i++) {
if (head.intersects(snake[i]) && i != snake.length - 1) {
LK.showGameOver();
}
}
}
// Move snake
function moveSnake() {
// Move each segment to the position of the previous segment
for (var i = snake.length - 1; i > 0; i--) {
snake[i].x = snake[i - 1].x;
snake[i].y = snake[i - 1].y;
}
// Move head in the current direction
snake[0].x += direction.x * gridSize;
snake[0].y += direction.y * gridSize;
}
// Game tick
LK.on('tick', function () {
frameCounter++;
if (frameCounter >= snakeSpeed) {
frameCounter = 0;
direction = nextDirection; // Update direction
// Update head orientation before moving
if (snake.length > 0 && snake[0].setDirection) {
snake[0].setDirection(direction);
}
moveSnake();
// Check food collision and trigger bite effect if needed
var ateFood = false;
if (snake[0].intersects && food && snake[0].intersects(food)) {
ateFood = true;
}
checkFoodCollision();
if (ateFood && snake[0].biteEffect) {
snake[0].biteEffect();
}
checkCollision();
}
});
// Touch controls
game.on('down', function (x, y, obj) {
var touchPos = game.toLocal(obj.global);
// Calculate touch direction relative to snake head
var diffX = touchPos.x - snake[0].x;
var diffY = touchPos.y - snake[0].y;
// If snake is moving horizontally, prioritize vertical movements
if (direction.x !== 0) {
if (diffY < 0 && direction.y !== 1) {
nextDirection = {
x: 0,
y: -1
}; // Move up if not moving down
} else if (diffY > 0 && direction.y !== -1) {
nextDirection = {
x: 0,
y: 1
}; // Move down if not moving up
}
}
// If snake is moving vertically, prioritize horizontal movements
if (direction.y !== 0) {
if (diffX > 0 && direction.x !== -1) {
nextDirection = {
x: 1,
y: 0
}; // Move right if not moving left
} else if (diffX < 0 && direction.x !== 1) {
nextDirection = {
x: -1,
y: 0
}; // Move left if not moving right
}
}
// If the snake is not already moving in the determined direction
var nextX = snake[0].x + nextDirection.x * gridSize;
var nextY = snake[0].y + nextDirection.y * gridSize;
if (!snake[0].isValidMove(nextX, nextY)) {
// If the next move is not valid, keep the current direction
nextDirection = {
x: direction.x,
y: direction.y
};
}
});
// Initialize game elements
initSnake();
placeFood();
// Create a new Text2 object to display the score
var scoreText = new Text2('Score: 0', {
size: 50,
fill: 0xFFFFFF
});
scoreText.anchor.set(1, 0);
LK.gui.topRight.addChild(scoreText);
// --- Create a frame (visual border) around the play area using shape assets ---
var frameThickness = 20;
// Top border
var topBorder = LK.getAsset('frameBorderTop', {
width: 2048,
height: frameThickness,
color: 0xFFFFFF,
shape: 'box',
x: 1024,
y: frameThickness / 2,
anchorX: 0.5,
anchorY: 0.5
});
game.addChild(topBorder);
// Bottom border
var bottomBorder = LK.getAsset('frameBorderBottom', {
width: 2048,
height: frameThickness,
color: 0xFFFFFF,
shape: 'box',
x: 1024,
y: 2732 - frameThickness / 2,
anchorX: 0.5,
anchorY: 0.5
});
game.addChild(bottomBorder);
// Left border
var leftBorder = LK.getAsset('frameBorderLeft', {
width: frameThickness,
height: 2732,
color: 0xFFFFFF,
shape: 'box',
x: frameThickness / 2,
y: 1366,
anchorX: 0.5,
anchorY: 0.5
});
game.addChild(leftBorder);
// Right border
var rightBorder = LK.getAsset('frameBorderRight', {
width: frameThickness,
height: 2732,
color: 0xFFFFFF,
shape: 'box',
x: 2048 - frameThickness / 2,
y: 1366,
anchorX: 0.5,
anchorY: 0.5
});
game.addChild(rightBorder); ===================================================================
--- original.js
+++ change.js