Snowman Game

by SonicBear35

117 lines1.8 KB

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snowman Game</title>
<style>
body{margin:0;overflow:hidden;background:skyblue;}
canvas{display:block;}
</style>
</head>
<body>

<canvas id="game"></canvas>

<script>
const c=document.getElementById("game");
const ctx=c.getContext("2d");

function resize(){
c.width=innerWidth;
c.height=innerHeight;
}
resize();
onresize=resize;

let snowman={x:150,y:0,r:30};
let snow=[];
let score=0;

function spawn(){
snow.push({
x:Math.random()*c.width,
y:-20,
r:8,
speed:2+Math.random()*3
});
}
setInterval(spawn,600);

document.addEventListener("mousemove",e=>{
snowman.x=e.clientX;
});

document.addEventListener("touchmove",e=>{
snowman.x=e.touches[0].clientX;
});

function update(){
snowman.y=c.height-70;

for(let i=snow.length-1;i>=0;i--){
let s=snow[i];
s.y+=s.speed;

let dx=s.x-snowman.x;
let dy=s.y-(snowman.y-20);

if(Math.sqrt(dx*dx+dy*dy)<35){
score++;
snow.splice(i,1);
continue;
}

if(s.y>c.height){
snow.splice(i,1);
}
}
}

function drawSnowman(){
ctx.fillStyle="white";
ctx.beginPath();
ctx.arc(snowman.x,snowman.y,25,0,Math.PI*2);
ctx.fill();

ctx.beginPath();
ctx.arc(snowman.x,snowman.y-35,18,0,Math.PI*2);
ctx.fill();

ctx.fillStyle="black";
ctx.beginPath();
ctx.arc(snowman.x-6,snowman.y-38,2,0,Math.PI*2);
ctx.arc(snowman.x+6,snowman.y-38,2,0,Math.PI*2);
ctx.fill();

ctx.fillStyle="orange";
ctx.fillRect(snowman.x,snowman.y-35,10,3);
}

function draw(){
ctx.clearRect(0,0,c.width,c.height);

drawSnowman();

ctx.fillStyle="white";
snow.forEach(s=>{
ctx.beginPath();
ctx.arc(s.x,s.y,s.r,0,Math.PI*2);
ctx.fill();
});

ctx.fillStyle="black";
ctx.font="24px Arial";
ctx.fillText("Score: "+score,20,30);
}

function loop(){
update();
draw();
requestAnimationFrame(loop);
}
loop();
</script>

</body>
</html>

Game Source: Snowman Game

Creator: SonicBear35

Libraries: none

Complexity: moderate (117 lines, 1.8 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: snowman-game-sonicbear35" to link back to the original. Then publish at arcadelab.ai/publish.