user36021
New Coder
<!DOCTYPE html>
<html lang="en">
<head>
<--error-->
<script src="index.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center:
}
canvas{
box-shadow: black 20px 10px 50px;
}
</style>
<title>Snake</title>
</head>
<body>
<canvas id="game" width="400" height="400"/>
</body>
</html>
Java
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
let speed = 7;
let tileCount = 20;
let tileSize = canvas.width / tileCount - 2;
let headX = 10;
let headY = 10;
let xVelocity=0;
let yVelocity=0;
//game loop
function drawGame(){
clearScreen();
changeSnakePosition();
drawSnake();
setTimeout(drawGame, 1000/ speed);
}
function clearScreen(){
ctx.fillStyle = 'black';
ctx.fillRect(0,0,canvas.width,canvas.height);
}
function drawSnake(){
ctx.fillStyle = 'orange';
ctx.fillRect(headX * tileCount, headY * tileCount, tileSize,tileSize);
}
function changeSnakePosition(){
headX = headX + xVelocity;
headY = headY + yVelocity;
}
document.body.addEventListener('keydown', keyDown);
//up
function keyDown(event){
if(event.keyCode == 38){
yVelocity = -1;
xVelocity = 0;
}
}
//down
function keyDown(event){
if(event.keyCode == 40){
yVelocity = 1;
xVelocity = 0;
}
}
//left
function keyDown(event){
if(event.keyCode == 37){
yVelocity = 0;
xVelocity = -1;
}
}
//right
function keyDown(event){
if(event.keyCode == 39){
yVelocity = 0;
xVelocity = 1;
}
}
drawGame();
<html lang="en">
<head>
<--error-->
<script src="index.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center:
}
canvas{
box-shadow: black 20px 10px 50px;
}
</style>
<title>Snake</title>
</head>
<body>
<canvas id="game" width="400" height="400"/>
</body>
</html>
Java
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
let speed = 7;
let tileCount = 20;
let tileSize = canvas.width / tileCount - 2;
let headX = 10;
let headY = 10;
let xVelocity=0;
let yVelocity=0;
//game loop
function drawGame(){
clearScreen();
changeSnakePosition();
drawSnake();
setTimeout(drawGame, 1000/ speed);
}
function clearScreen(){
ctx.fillStyle = 'black';
ctx.fillRect(0,0,canvas.width,canvas.height);
}
function drawSnake(){
ctx.fillStyle = 'orange';
ctx.fillRect(headX * tileCount, headY * tileCount, tileSize,tileSize);
}
function changeSnakePosition(){
headX = headX + xVelocity;
headY = headY + yVelocity;
}
document.body.addEventListener('keydown', keyDown);
//up
function keyDown(event){
if(event.keyCode == 38){
yVelocity = -1;
xVelocity = 0;
}
}
//down
function keyDown(event){
if(event.keyCode == 40){
yVelocity = 1;
xVelocity = 0;
}
}
//left
function keyDown(event){
if(event.keyCode == 37){
yVelocity = 0;
xVelocity = -1;
}
}
//right
function keyDown(event){
if(event.keyCode == 39){
yVelocity = 0;
xVelocity = 1;
}
}
drawGame();
